/* ============================================================
   HARISHYA - RESPONSIVE DESIGN & MEDIA QUERIES
   File: css/responsive.css
   ============================================================ */

/* Mobile / Tablet (<960px) */
@media (max-width: 960px) {
    :root {
        --header-height: 74px;
    }

    .container { width: min(100% - 30px, 760px); }
    .nav { min-height: var(--header-height); gap: 12px; }
    .logo { height: 43px; }

    /* Hide desktop nav links, Show mobile toggles */
    .nav-links { display: none !important; }
    .mobile-only, .nav-toggle, #menuToggle { display: inline-flex !important; }
    .mobile-menu { display: block !important; }

    .nav-toggle, #menuToggle {
        width: 46px; height: 46px; align-items: center; justify-content: center;
        color: var(--text); background: linear-gradient(145deg, var(--surface2), var(--surface));
        border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: .25s ease;
    }

    .nav-toggle:hover, #menuToggle:hover {
        color: var(--primary-2); border-color: rgba(41,182,246,.45);
    }

    .nav-actions { margin-left: auto; }
    
    .hero { min-height: auto; padding: 58px 0 72px; }
    .hero-grid { grid-template-columns: 1fr; gap: 42px; }
    .hero h1 { max-width: 800px; }
    .hero-media { min-height: 430px; transform: none; }
    .hero-media:hover { transform: translateY(-3px); }
    .hero-media img { min-height: 430px; }
    
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile Phones (<640px) */
@media (max-width: 640px) {
    :root { --header-height: 68px; }
    .container { width: min(100% - 24px, 560px); }
    .section { padding: 68px 0; }

    .header { background: rgba(7,16,29,.91); }
    [data-theme="light"] .header { background: rgba(255,255,255,.94); }

    .nav { min-height: var(--header-height); gap: 7px; }
    .logo { height: 38px; max-width: min(150px, 42vw); }
    .nav-actions { gap: 6px; }

    .language-btn, #langToggle {
        min-width: 40px; width: auto; height: 42px; padding: 0 12px !important; border-radius: 14px;
    }
    .icon-btn, .nav-toggle, #menuToggle { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }

    /* Drawer Adjustments */
    .mobile-menu { padding: 10px 10px; }
    .mobile-menu .container { min-height: calc(100dvh - 20px); border-radius: 22px; padding: 16px !important; }

    .hero { padding: 48px 0 62px; }
    .hero-content { width: 100%; }
    .hero h1 { margin-top: 10px; font-size: clamp(2.35rem, 12vw, 3.35rem); letter-spacing: -.055em; }
    .hero p { font-size: .98rem; line-height: 1.7; }
    
    .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 25px; }
    .hero-actions .btn { width: 100%; }
    .hero-media, .hero-media img { min-height: 330px; border-radius: 23px; }

    .cards, .project-grid, .stats, .process { grid-template-columns: 1fr; }
    .card, .stat, .process-card, .contact-card { padding: 26px 22px; }
    .project-card img { height: 210px; }
    
    .cta { padding: 34px 20px; border-radius: 23px; }
    
    .banner-item { flex: 0 0 min(86vw, 380px); }
    .corporate-video-wrap { padding: 22px 16px; border-radius: 18px; }
    .video-play-center-btn { width: 62px; height: 62px; }
    .video-play-center-btn svg { width: 24px; height: 24px; }
    .video-play-title { font-size: 1.05rem; }

    .footer { padding-top: 58px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 38px; }

    .whatsapp-float { width: 50px !important; height: 50px !important; }
    #backToTop { right: 20px !important; bottom: 140px !important; width: 40px !important; height: 40px !important; }
}

/* Small Phones (<380px) */
@media (max-width: 380px) {
    .container { width: calc(100% - 20px); }
    .logo { max-width: 125px; }
    .nav-actions { gap: 4px; }
    .language-btn, #langToggle { min-width: 38px; width: auto; height: 39px; padding: 0 9px !important; border-radius: 10px; font-size: 0.85rem; }
    .icon-btn, .nav-toggle, #menuToggle { width: 39px; height: 39px; flex-basis: 39px; }
    .hero h1 { font-size: 2.15rem; }
    #backToTop { right: 16px !important; bottom: 136px !important; width: 38px !important; height: 38px !important; }
}

/* Accessibility / Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}