/**
 * Cinematic Ivory — Responsive Viewport Overrides
 * 
 * Purpose: Collapses multi-column desktop grids into mobile vertical layouts,
 * refines typography thresholds, and updates layout paddings from 1920px down to 320px.
 */

/* ==================================================
   1. MASSIVE DESKTOP ADJUSTMENTS (1600px+)
   Purpose: Expands container gutters for high-res monitors.
   ================================================== */
@media (min-width: 1600px) {
    :root {
        --container-padding: 7rem;
    }
}


/* ==================================================
   2. LAPTOPS & SMALL DESKTOPS (Under 1366px)
   Purpose: Reduces paddings to fit medium frames.
   ================================================== */
@media (max-width: 1366px) {
    :root {
        --container-padding: 4rem;
        --section-gap: 7rem;
    }
}


/* ==================================================
   3. TABLET BREAKPOINT (Under 1024px)
   Purpose:
   - Switches header nav links to burger navigation drawer overlay.
   - Collapses Hero, Featured, Directors, Recognition, and Journal grids.
   - Converts Selected Works into stacked editorial panels.
   ================================================== */
@media (max-width: 1024px) {
    :root {
        --container-padding: 3rem;
        --section-gap: 6rem;
    }
    
    /* Show menu burger, hide regular desktop header navigation */
    .nav-links {
        display: none;
    }
    
    .menu-toggle {
        display: block;
    }

    /* 
      SECTION 1: HERO VIEWPORT COLLAPSE
      Purpose: Stack grid elements vertically.
    */
    .hero {
        height: auto;
        min-height: auto;
        padding-top: 75px; /* Navbar safety padding */
        padding-bottom: 2.5rem;
    }

    .hero-slides-container {
        position: relative;
        height: auto;
        overflow: visible;
    }

    .hero-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        padding: 0;
        z-index: 1;
    }

    .hero-slide.active {
        position: relative;
        opacity: 1;
        pointer-events: auto;
        z-index: 2;
        height: auto;
    }

    .hero-bg-wrapper {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9; /* Lock layout to native 16:9 banner aspect ratio (no crop!) */
        z-index: 1;
    }

    .hero-bg-wrapper::after {
        background: linear-gradient(to top, var(--ivory) 10%, rgba(15, 21, 35, 0.45) 50%, transparent 100%);
    }

    .hero-content {
        padding: 2.2rem 1rem 0 1rem;
        position: relative;
        z-index: 3;
        display: flex;
        flex-direction: column-reverse; /* Put vertical poster card on top of text on mobile! */
        gap: 2.5rem;
    }

    .hero-right-poster {
        justify-content: center;
        margin-top: 1rem;
    }

    .hero-poster-card-wrapper {
        max-width: 280px; /* Make it slightly smaller on mobile to fit nicely */
    }

    .hero-left-stack {
        max-width: 100%;
    }

    .hero-headline {
        font-size: clamp(2rem, 6vw, 3.2rem) !important;
        margin-bottom: 1.2rem;
    }

    .hero-supporting {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .hero-categories {
        margin-bottom: 1.8rem;
    }

    .hero-controls-wrapper {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 2rem;
        justify-content: center;
        width: 100%;
        z-index: 10;
    }

    /* 
      SECTION 2: FEATURED MOVIE COLLAPSE
      Purpose: Stack photo above details.
    */
    .featured-grid {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }

    .featured-content {
        order: 2; /* Text underneath image */
    }

    .featured-image-wrapper {
        order: 1; /* Image first */
    }

    /* 
      SECTION 3: SELECTED WORKS MOBILE COLLAPSE
      Purpose: Horizontal layout converts into stacked editorial project panels.
    */
    .works-section {
        height: auto !important;
        overflow: visible !important;
    }

    .works-pin-container {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .project-slide {
        width: 100% !important;
        height: auto !important;
        padding: 4rem var(--container-padding) !important;
        display: block !important;
    }
    
    .project-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Alternating rhythmic offsets for mobile panels */
    .project-slide:nth-child(even) .project-grid {
        padding-left: 0;
    }

    /* 
      SECTION 7: DIRECTORS GRID COLLAPSE
      Purpose: Stack profiles vertically and remove asymmetric offsets.
    */
    .directors-grid {
        grid-template-columns: 1fr !important;
        gap: 4rem !important;
    }

    .director-card:nth-child(2),
    .director-card:nth-child(3) {
        margin-top: 0 !important;
    }

    /* 
      SECTION 8: RECOGNITION COLLAPSE
      Purpose: Stack table details vertically.
    */
    .recognition-row {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        padding: 1.5rem 0 !important;
    }

    .award-year {
        text-align: left !important;
        font-size: 0.9rem;
    }

    /* 
      SECTION 9: JOURNAL GRID COLLAPSE
      Purpose: Stack articles panels.
    */
    .journal-grid {
        grid-template-columns: 1fr !important;
        gap: 3.5rem !important;
    }
    
    /* Footer layout grid wrapping */
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    
    .footer-manifesto {
        grid-column: span 2;
        max-width: 100%;
    }
}


/* ==================================================
   4. MOBILE BREAKPOINT (Under 768px)
   Purpose: Stacks forms and details, updates spacings.
   ================================================== */
@media (max-width: 768px) {
    :root {
        --container-padding: 2rem;
        --section-gap: 5rem;
    }

    /* Manifesto section typography adjustments */
    .manifesto-text {
        font-size: clamp(1.8rem, 4.5vw, 2.8rem) !important;
        line-height: 1.25 !important;
    }

    /* Capabilities list padding */
    .capability-left {
        gap: 1.5rem !important;
    }

    .capability-title {
        font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
    }
    
    /* Enquiry form fields collapse */
    .enquiry-form {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .form-group-full, .form-submit-row {
        grid-column: span 1;
    }
    
    .form-submit-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    /* Mobile nav contact info columns collapse */
    .mobile-nav .mobile-meta {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-top: 2rem;
        margin-top: 3rem;
    }
}


/* ==================================================
   5. COMPACT MOBILE VIEWPORTS (Under 430px)
   Purpose: Refines margins and logo dimensions.
   ================================================== */
@media (max-width: 430px) {
    :root {
        --container-padding: 1.5rem;
        --section-gap: 4.5rem;
    }
    
    .navbar {
        padding: 1.5rem var(--container-padding);
    }

    .nav-logo {
        font-size: 1.8rem;
    }

    .hero-headline {
        font-size: 2.8rem !important;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .footer-manifesto {
        grid-column: span 1;
    }
    
    .footer-legal {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    .footer-legal a {
        margin-left: 0;
    }
    
    /* Video modal margins reset */
    .modal {
        padding: 1rem;
    }
    
    .modal-close {
        top: 1.5rem;
        right: 1.5rem;
    }
}


/* ==================================================
   6. SMALL MOBILE GATEWAYS (320px Viewports)
   Purpose: Softens fluid headers to prevent text leakage.
   ================================================== */
@media (max-width: 320px) {
    :root {
        --container-padding: 1rem;
        --section-gap: 3.5rem;
    }
    
    .nav-logo {
        font-size: 1.6rem;
    }
    
    .hero-headline {
        font-size: 2.2rem !important;
    }
    
    .btn-editorial {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
    }
    
    .modal-container-form {
        padding: 1.5rem 1rem;
    }
}