/* ── Breakpoints ─────────────────────────────────────────────────────────────── */
/* Mobile-first: base styles apply to all screens, enhanced for larger ones.    */

/* ── Tablet — 768px and up ───────────────────────────────────────────────────── */
@media ( min-width: 768px ) {
    :root {
        --container-pad: 48px;
    }
}


/* ── Tablet only — 768px → 1023px (projects grid: 2 columns) ─────────────────── */
@media ( min-width: 768px ) and ( max-width: 1023px ) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ── Desktop — 1024px and up ─────────────────────────────────────────────────── */
@media ( min-width: 1024px ) {
    :root {
        --container-pad: 60px;
    }
}


/* ── Large — 1440px and up ───────────────────────────────────────────────────── */
@media ( min-width: 1440px ) {
    :root {
        --container-pad: 80px;
    }
}


/* ── Mobile — max 767px ──────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
    :root {
        --fs-h1:          44px;
        --fs-h2:          32px;
        --fs-body:        16px;
        --spacing-xl:     64px;
        --spacing-lg:     40px;
        --header-height:  72px;
        --header-pad-top: 20px;
    }

    .grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Header: hide desktop nav and lang switcher, show hamburger */
    .site-header__nav,
    .site-header__lang-switcher {
        display: none;
    }

    .site-header__hamburger {
        display: flex;
    }

    /* Footer: stack the three zones vertically */
    .site-footer__inner {
        grid-template-columns: 1fr;
        justify-items:         center;
        text-align:            center;
        gap:                   var(--spacing-sm);
    }

    .site-footer__left,
    .site-footer__right {
        justify-self:    center;
        flex-wrap:       wrap;
        justify-content: center;
    }

    /* ── Entry page — mobile ───────────────────────────────────────────────── */

    /* Give the nav more horizontal room so "Post-production" stays on one line. */
    .entry-nav > .container {
        padding-left:  24px;
        padding-right: 24px;
    }

    /* Pure vw scaling — no minimum floor — so the longest title always fits. */
    .entry-nav__item {
        font-size:   9.5vw;
        white-space: nowrap;
    }

    .entry-about__inner {
        padding-top:    var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .entry-about__body {
        font-size: 18px;
    }

    /* ── Projects page — mobile ───────────────────────────────────────────── */

    /* Revert to single padding on mobile — 2× would leave too little room */
    .container--content {
        padding-left:  var(--container-pad);
        padding-right: var(--container-pad);
    }

    .projects-hero {
        /* Keep full-bleed — offset by single container-pad (mobile uses 1× not 2×) */
        width:        100vw;
        margin-left:  calc(var(--container-pad) * -1);
        aspect-ratio: 16 / 9;
        max-height:   260px;
    }

    .projects-header {
        flex-direction: column;
        align-items:    flex-start;
        gap:            var(--spacing-sm);
        margin-bottom:  var(--spacing-md);
    }

    .projects-controls {
        gap: var(--spacing-sm);
    }

    /* 2-column grid on mobile */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   var(--spacing-sm);
    }

    /* 1 column on very small screens */
    @media ( max-width: 460px ) {
        .projects-grid {
            grid-template-columns: 1fr;
        }
    }

    /* List: hide header pill, stack non-essential columns */
    .project-list__header {
        display: none;
    }

    .project-list-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows:    auto auto;
        row-gap:               4px;
        padding:               14px 0;
    }

    .project-list-row__col--project {
        grid-column: 1 / 2;
        grid-row:    1;
    }

    .project-list-row__col--type {
        grid-column: 2 / 3;
        grid-row:    1;
        text-align:  right;
    }

    .project-list-row__col--director {
        grid-column: 1 / 2;
        grid-row:    2;
    }

    .project-list-row__col--time {
        display: none;
    }

    /* ── Single project page — mobile ─────────────────────────────────────── */

    /* Description reverts to full width — 50% would be too narrow on mobile */
    .single-project__description {
        max-width: 100%;
    }

    /* ── Custom video player — mobile ─────────────────────────────────────── */

    /* Video container: break out of the content column, go full-width.
       overflow: visible lets the controls panel extend below the 16:9 frame. */
    .single-project__video {
        width:        calc(100% + var(--container-pad) * 2);
        margin-left:  calc(var(--container-pad) * -1);
        aspect-ratio: unset;
        height:       auto;
        overflow:     visible;
        background:   transparent;
    }

    /* Player: leave absolute flow, become a normal block */
    .single-project__video .video-player {
        position: relative;
        top:      auto;
        right:    auto;
        bottom:   auto;
        left:     auto;
        width:    100%;
        height:   auto;
    }

    /* Frame: maintain 16:9 for the video area */
    .video-player__frame {
        position:     relative;
        top:          auto;
        right:        auto;
        bottom:       auto;
        left:         auto;
        width:        100%;
        aspect-ratio: 16 / 9;
        overflow:     hidden;
    }

    /* Controls panel: flows below the frame, no background (blends with page) */
    .video-player__controls-wrapper {
        position:       relative;
        top:            auto;
        right:          auto;
        bottom:         auto;
        left:           auto;
        background:     transparent;
        padding:        14px var(--container-pad) 16px;
        pointer-events: auto;
        z-index:        1;
    }

    /* Two-column layout: playback on the left, secondary actions on the right */
    .video-player__controls {
        grid-template-columns: 1fr auto;
        align-items:           start;
        row-gap:               12px;
        column-gap:            var(--spacing-sm);
        margin-bottom:         12px;
    }

    /* MUTE / UNMUTE — left column, row 1 */
    .video-player__col--left {
        grid-column: 1;
        grid-row:    1;
    }

    /* PLAY / PAUSE — left column, row 2 */
    .video-player__col--center {
        grid-column:     1;
        grid-row:        2;
        justify-content: flex-start;
    }

    /* CREDITS / FULLSCREEN — right column, spans both rows, pinned to top */
    .video-player__col--right {
        grid-column:     2;
        grid-row:        1 / 3;
        justify-content: flex-end;
        align-self:      start;
    }

    /* Slightly larger touch targets */
    .video-player__btn {
        font-size: 12px;
        padding:   6px 0;
    }

    .video-player__sep {
        font-size: 12px;
    }

    /* Timer track height */
    .video-player__progress {
        height: 24px;
    }

    /* Credits overlay covers the video frame (not the controls panel) */
    .video-player__credits-overlay {
        border-radius: 0;
    }

    /* Readable credits on small screens */
    .video-player__credits-table {
        gap:     10px;
        padding: 0 16px;
    }

    .video-player__credit-row {
        gap: 16px;
    }

    .video-player__credit-label {
        min-width: 80px;
        font-size: 10px;
    }

    .video-player__credit-value {
        min-width: 100px;
        font-size: 10px;
    }

    /* Larger tap target for close button */
    .video-player__credits-close {
        top:    12px;
        right:  12px;
        width:  36px;
        height: 36px;
        font-size: 16px;
    }

    /* ── About page — mobile ────────────────────────────────────────────── */

    .about-intro {
        padding-top:    var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .about-intro__title {
        margin-bottom: var(--spacing-md);
    }

    .about-intro__body {
        max-width: 100%;
    }

    /* Services: single column, no image panel */
    .about-services {
        padding-top:    var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .about-services__layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .about-services__images {
        display: none;
    }


    /* ── About page: Spaces & Team — mobile ─────────────────────────────── */

    .about-team {
        padding-top:    var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    /* Revert to normal flow: intro text sits below the pill */
    .about-team__header {
        flex-direction: column;
        align-items:    flex-start;
        gap:            var(--spacing-sm);
        min-height:     auto;
    }

    .about-team__intro {
        position:   static;
        transform:  none;
        white-space: normal;
        text-align: left;
    }

    .about-team__title {
        text-align: left;
    }

    .about-team__frame {
        max-width:     100%;
        border-radius: 8px;
        /* height + overflow are JS-controlled on mobile — no static override */
    }

    .about-team__track {
        gap: 8px;
    }

    .about-team__image {
        border-radius: 6px;
    }


    /* ── About page: References — mobile ───────────────────────────────────── */

    /* Stack to single column: logo area on top, list below */
    .about-refs__content {
        grid-template-columns: 1fr;
        gap:                   var(--spacing-md);
        min-height:            auto;
    }

    .about-refs__logo-area {
        order:      -1;
        min-height: 120px;
    }

    .about-refs__logo {
        max-height: 100px;
    }

    .about-refs__item {
        font-size: clamp(18px, 6vw, 30px);
        padding:   10px 0;
    }

    /* Smaller shift on mobile — scroll-driven activation, no hover */
    .about-refs__list.has-hover .about-refs__item.is-active {
        transform: translateX(10px);
    }


    /* ── Contact page — mobile ───────────────────────────────────────────── */

    .contact-section {
        gap: var(--spacing-md);
    }

    /* Stack: "Say" on line 1, animated word on line 2, both centered.
       width:100% on the title lets children use width:100% to force line breaks. */
    .contact-title {
        width:           100%;
        white-space:     normal;
        flex-wrap:       wrap;
        justify-content: center;
        gap:             4px 0;
    }

    /* "Say" takes the full row so the roller drops to its own line. */
    .contact-title__say {
        width:      100%;
        text-align: center;
        font-size:  clamp(32px, 9vw, 48px);
    }

    /* Roller auto-sizes to the current word; !important overrides any GSAP
       inline width that was set when isMobile returned a false negative. */
    .contact-title__roller {
        width:     auto !important;
        max-width: 100%;
    }

    .contact-title__word {
        font-size:  clamp(32px, 9vw, 48px);
        text-align: center;
    }

    .contact-email {
        font-size: clamp(14px, 4.5vw, 20px);
        word-break: break-all;
    }

    .contact-location {
        font-size: 12px;
    }

    /* ── Single Development Project — mobile ─────────────────────────────── */

    /* Stack columns vertically: image → title → meta → content */
    .single-dev__content {
        grid-template-columns: 1fr;
        gap:                   var(--spacing-md);
    }

    /* Disable sticky: left column flows normally in single-column layout */
    .single-dev__left {
        position: static;
    }
}