/* ========================================
   DESKTOP: Hide Mobile Elements
   ======================================== */

@media (min-width: 769px) {
    .mobile-menu-toggle,
    .mobile-menu-overlay,
    .mobile-splash-tagline,
    .mobile-splash-arrow {
        display: none;
    }

    /* Desktop: Hide work-with-us-1 (headline-only section is mobile-only) */
    #work-with-us-1 {
        display: none !important;
        /* Force completely out of stacking context to prevent transition interference */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -1 !important; /* Below all visible sections (splash is z-index: 10) */
        top: 100% !important; /* Off-screen below viewport */
    }
}

/* ========================================
   DESKTOP GRID DEBUG OVERLAY
   6 cells × 7 rows with gutters
   Horizontal: G, C, G, C, G+G, C, G, C, G+G, C, G, C, G, [nav]
   (double gutter at band boundaries: bands are 32.7% | 32.7% | 31.4% | 3.2% nav)
   Vertical: 8 gutters, 7 cells (same as mobile but using 100vh / no-gap rows)
   Using --gutter (1.45vw) and --cell-width (14.18vw) from variables.css
   ======================================== */

@media (min-width: 769px) {
    body::before {
        display: none; /* Debug grid — remove this line to show */
        content: "";
        position: fixed;
        inset: 0;
        z-index: 9999;
        pointer-events: none;
        background:
            /* COLUMNS: G C G C G+G C G C G+G C G C G nav */
            linear-gradient(
                to right,
                /* G1 */ rgba(255, 0, 0, 0.15) 0,
                rgba(255, 0, 0, 0.15) var(--gutter),
                /* C1 */ rgba(255, 192, 203, 0.12) var(--gutter),
                rgba(255, 192, 203, 0.12) calc(var(--gutter) + var(--cell-width)),
                /* G2 */ rgba(255, 0, 0, 0.15) calc(var(--gutter) + var(--cell-width)),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 2 + var(--cell-width)),
                /* C2 */ rgba(255, 192, 203, 0.06) calc(var(--gutter) * 2 + var(--cell-width)),
                rgba(255, 192, 203, 0.06) calc(var(--gutter) * 2 + var(--cell-width) * 2),
                /* G3+G4 (double) */ rgba(255, 0, 0, 0.15) calc(var(--gutter) * 2 + var(--cell-width) * 2),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 4 + var(--cell-width) * 2),
                /* C3 */ rgba(255, 192, 203, 0.12) calc(var(--gutter) * 4 + var(--cell-width) * 2),
                rgba(255, 192, 203, 0.12) calc(var(--gutter) * 4 + var(--cell-width) * 3),
                /* G5 */ rgba(255, 0, 0, 0.15) calc(var(--gutter) * 4 + var(--cell-width) * 3),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 5 + var(--cell-width) * 3),
                /* C4 */ rgba(255, 192, 203, 0.06) calc(var(--gutter) * 5 + var(--cell-width) * 3),
                rgba(255, 192, 203, 0.06) calc(var(--gutter) * 5 + var(--cell-width) * 4),
                /* G6+G7 (double) */ rgba(255, 0, 0, 0.15) calc(var(--gutter) * 5 + var(--cell-width) * 4),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 7 + var(--cell-width) * 4),
                /* C5 */ rgba(255, 192, 203, 0.12) calc(var(--gutter) * 7 + var(--cell-width) * 4),
                rgba(255, 192, 203, 0.12) calc(var(--gutter) * 7 + var(--cell-width) * 5),
                /* G8 */ rgba(255, 0, 0, 0.15) calc(var(--gutter) * 7 + var(--cell-width) * 5),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 8 + var(--cell-width) * 5),
                /* C6 */ rgba(255, 192, 203, 0.06) calc(var(--gutter) * 8 + var(--cell-width) * 5),
                rgba(255, 192, 203, 0.06) calc(var(--gutter) * 8 + var(--cell-width) * 6),
                /* Nav strip (no trailing gutter in band 3) */
                rgba(100, 100, 255, 0.15) calc(var(--gutter) * 8 + var(--cell-width) * 6),
                rgba(100, 100, 255, 0.15) 100%
            ),
            /* ROWS: G, C, G, C, G... (8 gutters, 7 cells) using --gutter and --cell-height */
            linear-gradient(
                to bottom,
                /* G1 */ rgba(255, 0, 0, 0.15) 0,
                rgba(255, 0, 0, 0.15) var(--gutter),
                /* C1 */ rgba(255, 192, 203, 0.08) var(--gutter),
                rgba(255, 192, 203, 0.08) calc(var(--gutter) + var(--desktop-cell-height)),
                /* G2 */ rgba(255, 0, 0, 0.15) calc(var(--gutter) + var(--desktop-cell-height)),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 2 + var(--desktop-cell-height)),
                /* C2 */ transparent calc(var(--gutter) * 2 + var(--desktop-cell-height)),
                transparent calc(var(--gutter) * 2 + var(--desktop-cell-height) * 2),
                /* G3 */ rgba(255, 0, 0, 0.15) calc(var(--gutter) * 2 + var(--desktop-cell-height) * 2),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 3 + var(--desktop-cell-height) * 2),
                /* C3 */ rgba(255, 192, 203, 0.08) calc(var(--gutter) * 3 + var(--desktop-cell-height) * 2),
                rgba(255, 192, 203, 0.08) calc(var(--gutter) * 3 + var(--desktop-cell-height) * 3),
                /* G4 */ rgba(255, 0, 0, 0.15) calc(var(--gutter) * 3 + var(--desktop-cell-height) * 3),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 4 + var(--desktop-cell-height) * 3),
                /* C4 */ transparent calc(var(--gutter) * 4 + var(--desktop-cell-height) * 3),
                transparent calc(var(--gutter) * 4 + var(--desktop-cell-height) * 4),
                /* G5 */ rgba(255, 0, 0, 0.15) calc(var(--gutter) * 4 + var(--desktop-cell-height) * 4),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 5 + var(--desktop-cell-height) * 4),
                /* C5 */ rgba(255, 192, 203, 0.08) calc(var(--gutter) * 5 + var(--desktop-cell-height) * 4),
                rgba(255, 192, 203, 0.08) calc(var(--gutter) * 5 + var(--desktop-cell-height) * 5),
                /* G6 */ rgba(255, 0, 0, 0.15) calc(var(--gutter) * 5 + var(--desktop-cell-height) * 5),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 6 + var(--desktop-cell-height) * 5),
                /* C6 */ transparent calc(var(--gutter) * 6 + var(--desktop-cell-height) * 5),
                transparent calc(var(--gutter) * 6 + var(--desktop-cell-height) * 6),
                /* G7 */ rgba(255, 0, 0, 0.15) calc(var(--gutter) * 6 + var(--desktop-cell-height) * 6),
                rgba(255, 0, 0, 0.15) calc(var(--gutter) * 7 + var(--desktop-cell-height) * 6),
                /* C7 */ rgba(255, 192, 203, 0.08) calc(var(--gutter) * 7 + var(--desktop-cell-height) * 6),
                rgba(255, 192, 203, 0.08) calc(var(--gutter) * 7 + var(--desktop-cell-height) * 7),
                /* G8 */ rgba(255, 0, 0, 0.15) calc(var(--gutter) * 7 + var(--desktop-cell-height) * 7),
                rgba(255, 0, 0, 0.15) 100%
            );
    }
}

/* ========================================
   MOBILE RESPONSIVE DESIGN
   Breakpoint: max-width 768px
   ======================================== */

/* ========================================
   MOBILE GRID DEBUG OVERLAY
   ======================================== */

@media (max-width: 768px) {
    body::after {
        display: none; /* Debug grid — remove this line to show */
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--precision-h);
        z-index: 9999;
        pointer-events: none;
        background:
            /* COLUMNS: left gutter | content | center gutter | content | right gutter */
            linear-gradient(
                to right,
                rgba(255, 0, 0, 0.15) 0%,
                rgba(255, 0, 0, 0.15) 2.238%,
                transparent 2.238%,
                transparent calc(50% - 1.119%),
                rgba(255, 0, 0, 0.15) calc(50% - 1.119%),
                rgba(255, 0, 0, 0.15) calc(50% + 1.119%),
                transparent calc(50% + 1.119%),
                transparent calc(100% - 2.238%),
                rgba(255, 0, 0, 0.15) calc(100% - 2.238%),
                rgba(255, 0, 0, 0.15) 100%
            ),
            /* ROWS: G=2.238%, C=11.728% — 8×2.238 + 7×11.728 = 17.904 + 82.096 = 100% */
            linear-gradient(
            to bottom,
            /* gutter 1 */  rgba(255, 0, 0, 0.15) 0%,
            rgba(255, 0, 0, 0.15) 2.238%,
            /* cell 1 */    rgba(255, 192, 203, 0.1) 2.238%,
            rgba(255, 192, 203, 0.1) 13.966%,
            /* gutter 2 */  rgba(255, 0, 0, 0.15) 13.966%,
            rgba(255, 0, 0, 0.15) 16.204%,
            /* cell 2 */    rgba(255, 192, 203, 0.1) 16.204%,
            rgba(255, 192, 203, 0.1) 27.932%,
            /* gutter 3 */  rgba(255, 0, 0, 0.15) 27.932%,
            rgba(255, 0, 0, 0.15) 30.17%,
            /* cell 3 */    rgba(255, 192, 203, 0.1) 30.17%,
            rgba(255, 192, 203, 0.1) 41.898%,
            /* gutter 4 */  rgba(255, 0, 0, 0.15) 41.898%,
            rgba(255, 0, 0, 0.15) 44.136%,
            /* cell 4 */    rgba(255, 192, 203, 0.1) 44.136%,
            rgba(255, 192, 203, 0.1) 55.864%,
            /* gutter 5 */  rgba(255, 0, 0, 0.15) 55.864%,
            rgba(255, 0, 0, 0.15) 58.102%,
            /* cell 5 */    rgba(255, 192, 203, 0.1) 58.102%,
            rgba(255, 192, 203, 0.1) 69.83%,
            /* gutter 6 */  rgba(255, 0, 0, 0.15) 69.83%,
            rgba(255, 0, 0, 0.15) 72.068%,
            /* cell 6 */    rgba(255, 192, 203, 0.1) 72.068%,
            rgba(255, 192, 203, 0.1) 83.796%,
            /* gutter 7 */  rgba(255, 0, 0, 0.15) 83.796%,
            rgba(255, 0, 0, 0.15) 86.034%,
            /* cell 7 */    rgba(255, 192, 203, 0.1) 86.034%,
            rgba(255, 192, 203, 0.1) 97.762%,
            /* gutter 8 */  rgba(255, 0, 0, 0.15) 97.762%,
            rgba(255, 0, 0, 0.15) 100%
        );
    }
}

@media (max-width: 768px) {
    /* ========================================
       GLOBAL LAYOUT OVERRIDES
       ======================================== */

    /* Hide desktop menu, show mobile menu */
    .main-menu {
        display: none;
    }

    /* Hide desktop scroll indicator on mobile */
    .scroll-indicator {
        display: none;
    }

    /* Adjust logo for mobile - top align with Cell 1 */
    .site-logo {
        top: calc(var(--safe-top) + var(--gutter)); /* Start of Cell 1 (after top gutter) */
        left: var(--gutter);
        width: auto;
        max-width: 60%;
        padding: 0;
        align-items: flex-start; /* Top align */
        z-index: 1001; /* Above mobile menu overlay */
    }

    /* ========================================
       MOBILE MENU TOGGLE
       ======================================== */

    .mobile-menu-toggle {
        position: fixed;
        top: calc(var(--safe-top) + var(--precision-gutter)); /* Align with start of Cell 1, same as logo */
        right: var(--gutter);
        z-index: 1001;
        background: transparent;
        border: none;
        color: #fff; /* White with blend mode for visibility */
        font-size: var(
            --font-splash-tagline
        ); /* Same height as PLEASURE STATES logo */
        font-weight: 400; /* Not bold */
        letter-spacing: 0.02em;
        cursor: pointer;
        padding: 0;
        display: block;
        opacity: 0; /* Hidden by default */
        pointer-events: none;
        transition: opacity 0.6s ease;
        line-height: 1; /* Remove extra line height spacing */
        mix-blend-mode: difference; /* Blend like the logo */
    }

    /* Show on what-we-believe and after */
    .mobile-menu-toggle.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* ========================================
       MOBILE MENU OVERLAY
       ======================================== */

    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        height: var(--precision-h);
        background-color: #fff; /* White background, not black */
        z-index: 1000;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    }

    .mobile-menu-overlay.active {
        transform: translateX(0);
    }

    .mobile-menu-close {
        position: absolute;
        top: calc(var(--safe-top) + var(--precision-gutter)); /* Align with start of Cell 1, same as MENU */
        right: var(--gutter);
        background: transparent;
        border: none;
        color: #000; /* Black text on white background */
        font-size: var(--font-splash-tagline); /* Same as MENU */
        font-weight: 400; /* Not bold */
        letter-spacing: 0.02em;
        cursor: pointer;
        padding: 0;
        line-height: 1; /* Remove extra line height spacing, same as MENU */
    }

    .mobile-menu-social {
        position: absolute;
        bottom: calc(var(--safe-bottom) + var(--precision-gutter) + var(--precision-cell-height) / 2);
        transform: translateY(50%);
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-splash-tagline);
        font-weight: 400;
        letter-spacing: 0.02em;
        color: #000;
    }

    .mobile-menu-social-link {
        flex: 1;
        color: #000;
        text-decoration: none;
        font-size: 17px;
        font-weight: 700;
        line-height: 0.87;
    }

    .mobile-menu-social-link:first-child {
        text-align: right;
        padding-right: 0.4em;
    }

    .mobile-menu-social-link:last-child {
        text-align: left;
        padding-left: 0.4em;
    }

    .mobile-menu-social-divider {
        color: #000;
        font-size: 17px;
        font-weight: 700;
        line-height: 0.87;
        flex-shrink: 0;
    }

    .mobile-menu-nav {
        position: absolute;
        /* Visual bottom of "What we believe" aligns with bottom of cell 2.
           Line box top = cell2-bottom - line-height + (line-height - font-size)/2 */
        top: calc(
            2 * (var(--precision-gutter) + var(--precision-cell-height)) -
                var(--font-mobile-menu-line-height) +
                (var(--font-mobile-menu-line-height) - var(--font-mobile-menu)) / 2
        );
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0; /* spacing handled by line-height */
    }

    .mobile-menu-item {
        background: transparent;
        border: none;
        color: #000; /* Black text on white background */
        font-size: var(--font-mobile-menu);
        font-weight: 700;
        line-height: var(--font-mobile-menu-line-height);
        letter-spacing: var(--font-mobile-menu-letter-spacing);
        cursor: pointer;
        padding: 0;
        text-align: center;
    }

    /* ========================================
       SECTION: SPLASH
       ======================================== */

    #splash {
        background-color: #000; /* Ensure background while video loads */
    }

    /* Container for absolute positioning - grid is conceptual only */
    .splash-grid {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: block; /* Override grid display */
    }

    /* Hide ALL desktop splash elements */
    .splash-white-column,
    .splash-column,
    .splash-text-column {
        display: none !important;
    }

    /* Video spans full section */
    .splash-video-wrapper {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    /* Mobile logo - using ::before pseudo-element */
    /* Centered in cell 1 - center line should go through vertical middle of logo */
    #splash::before {
        content: "";
        position: fixed; /* Use fixed to match tagline positioning */
        top: calc(
            var(--safe-top) + var(--precision-gutter) + var(--precision-cell-height) / 2
        ); /* EXACT center of cell 1 */
        left: calc(var(--safe-left) + var(--precision-gutter));
        right: calc(var(--safe-right) + var(--precision-gutter));
        transform: translateY(-50%); /* Only vertical centering */
        width: auto; /* Let left/right constrain it */
        height: auto;
        aspect-ratio: 4 / 1;
        background-image: url("../resources/PS_logotype-01.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 10;
        mix-blend-mode: difference;
        filter: invert(1); /* Invert black logo to white */
        opacity: 0;
        transition: opacity 0.6s ease; /* Fade in over 0.6s */
    }

    #splash.logo-visible::before {
        opacity: 1;
    }

    /* Mobile tagline */
    /* Centered in Cell 7 - center line should go through vertical middle of text */
    .mobile-splash-tagline {
        display: block;
        position: fixed; /* Use fixed so it's always relative to viewport */
        bottom: calc(
            var(--safe-bottom) + var(--precision-gutter) + var(--precision-cell-height) / 2
        ); /* EXACT center of cell 7 */
        left: calc(var(--safe-left) + var(--precision-gutter));
        right: calc(var(--safe-right) + var(--precision-gutter));
        transform: translateY(50%); /* Vertical centering on the line */
        text-align: center;
        font-size: clamp(
            18px,
            5vw,
            28px
        ); /* Responsive: scales with viewport width */
        font-weight: 700;
        line-height: 1.1;
        color: #fff;
        z-index: 10;
        opacity: 0; /* GSAP will animate this */
        letter-spacing: 0;
        mix-blend-mode: difference;
    }

    /* Down arrow - centered horizontally, centered in bottom gutter vertically */
    .mobile-splash-arrow {
        display: block;
        position: fixed;
        bottom: var(--precision-gutter); /* Bottom of arrow = bottom of last cell */
        left: 50%;
        transform: translateX(-50%);
        width: var(--arrow-size-mobile); /* 15px */
        height: calc(var(--arrow-size-mobile) * 0.866); /* equilateral triangle height = side * √3/2 */
        background-color: #fff;
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        background-image: none;
        mix-blend-mode: difference;
        opacity: 0;
        /* No transition - GSAP handles animation */
        z-index: 10;
        mix-blend-mode: difference;
    }

    /* ========================================
       SECTION: WHAT WE BELIEVE
       ======================================== */

    .philosophy-grid {
        grid-template-columns: 1fr; /* Single column */
    }

    /* Hide video containers on mobile */
    .philosophy-video-container {
        display: none;
    }

    /* Text container - full width */
    .philosophy-text-container {
        grid-column: 1;
        padding-top: calc(var(--gutter) + var(--mobile-cell-height) + var(--gutter));
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    /* Increase paragraph font size on mobile */
    .philosophy-text-container p {
        font-size: clamp(20px, 5.5vw, 26px);
        line-height: 1.35;
    }

    /* Mobile scroll indicator for this section */
    #what-we-believe .scroll-indicator-mobile {
        display: block;
        position: fixed;
        right: calc(var(--gutter) / 2);
        top: 50%;
        transform: translateY(-50%);
        width: var(--scroll-indicator-mobile-width);
        height: var(--scroll-indicator-mobile-height);
        background-color: #000;
        border-radius: 2px;
        z-index: var(--z-menu);
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    #what-we-believe .scroll-indicator-mobile.visible {
        opacity: 1;
    }

    /* ========================================
       SECTION: WHAT WE DO
       ======================================== */

    .what-we-do-grid {
        grid-template-columns: 1fr; /* Single column */
    }

    /* Video background - show on mobile */
    .what-we-do-video-container {
        display: block; /* Show video on mobile */
        grid-column: 1;
        grid-row: 1 / -1;
        z-index: 1;
    }

    /* Text wrapper - overlays video */
    .what-we-do-text-wrapper {
        grid-column: 1;
        grid-row: 1 / -1;
        background-color: transparent; /* Transparent to show video */
        z-index: 2;
        position: relative;
    }

    .what-we-do-text-box {
        padding-right: var(--gutter);
        padding-top: calc(var(--gutter) + var(--mobile-cell-height) + var(--gutter)); /* Start at cell 2 */
        height: var(--app-h);
    }

    .typing-content {
        font-size: var(--font-mobile-typing);
        line-height: var(--font-mobile-typing-line-height);
        letter-spacing: var(--font-mobile-typing-letter-spacing);
        color: #000; /* Ensure text is black on white background */
    }

    /* ========================================
       SECTION: WORK WITH US - PART 1
       ======================================== */

    #work-with-us-1 .work-with-us-grid {
        grid-template-columns: 1fr; /* Single column */
    }

    #work-with-us-1 .work-with-us-image-container {
        grid-column: 1;
        grid-row: 1 / -1;
    }

    #work-with-us-1 .work-with-us-headline {
        font-size: var(--font-mobile-headline);
        line-height: var(--font-mobile-headline-line-height);
        letter-spacing: var(--font-mobile-headline-letter-spacing);
        mix-blend-mode: difference;
        color: #fff;
        white-space: normal; /* Allow wrapping for animation */
        word-wrap: break-word;
        /* Bottom of last line aligns with bottom of second-to-last cell.
           Second-to-last cell bottom = 100vh - 2*gutter - cell.
           Block height = 5 lines * (font-size * line-height) */
        position: absolute;
        top: calc(
            var(--app-h) - 2 * var(--gutter) - var(--mobile-cell-height) -
                5 * var(--font-mobile-headline) * var(--font-mobile-headline-line-height)
        );
        bottom: auto; /* Override desktop bottom positioning */
        left: var(--gutter);
        right: var(--gutter);
    }

    /* ========================================
       SECTION: WORK WITH US - PART 2
       ======================================== */

    #work-with-us-2 {
        background-color: #fff;
    }

    #work-with-us-2 .work-with-us-grid {
        grid-template-columns: 1fr; /* Single column */
    }

    #work-with-us-2 .work-with-us-text-container {
        grid-column: 1;
        grid-row: 1 / -1;
        padding-top: calc(var(--gutter) + var(--mobile-cell-height) + var(--gutter));
    }

    /* Increase paragraph font size on mobile */
    #work-with-us-2 .work-with-us-text-container p {
        font-size: clamp(20px, 5.5vw, 26px);
        line-height: 1.35;
    }

    /* Hide work-with-us-2 image container on mobile (only show in work-with-us-1) */
    #work-with-us-2 .work-with-us-image-container {
        display: none !important;
    }

    /* ========================================
       CTA BUTTON
       ======================================== */

    .contact-cta {
        /* Adjust button positioning for mobile - full width minus gutters */
        left: var(--gutter);
        right: var(--gutter);
        bottom: calc(var(--gutter) + var(--mobile-cell-height) - var(--button-height)); /* top of button = top of last cell */
        width: auto; /* Let left/right define the width */
        max-width: none; /* Remove max-width restriction */
        transform: none; /* No transform needed */
    }

    .contact-cta:hover {
        transform: translateY(-2px);
    }
}