/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile / Tablet polish
   Targeted overrides ONLY for ≤1024px. Desktop (>1024px) unchanged.
   ═══════════════════════════════════════════════════════════════════ */

/* Global overflow guard */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ════════ ACCENT-SAFE TYPOGRAPHY ════════
   Allow accents (é à ç ñ Ê Î Ô) to render WITHOUT modifying layout.
   Only `overflow: visible` — no padding/line-height/margin changes
   so the original design stays intact. */
h1, h2, h3, h4, h5, h6,
.p8-pn__title, .p8-cr__title, .p8-services__title, .p8-bp__title,
.p8-card__title, .p8-rs__card-name, .p8-pn__cat-name,
.p8-cr__value-title, .p8-cr__lane-title, .p8-pn__matrix-title,
.cs-svc-title, .cs-svc-pillar__name, .cs-intro__label,
.cs-faq__heading, .cs-lineup__h, .gh-line,
.pl-hero__name, .pl-bio__heading,
.rn-modal__name, .p8-bp__panel-title, .p8-bp__opt-name,
.p8-pn__stage-title, .p8-pn__dossier-title, .tg-h2,
.rn-modal__name em, .p8-rs__card-name em, .p8-pn__title em,
.p8-cr__title em, .gh-line em {
    overflow: visible !important;
    overflow-clip-margin: 0.4em;
}

/* ════════ TABLET & MOBILE (≤1024px) ════════ */
@media (max-width: 1024px) {

    /* CTA strip — stacks vertically on tablet/mobile */
    .p8-pn__cta-strip,
    .p8-cr__cta-strip {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px !important;
        padding: 28px 24px !important;
        text-align: left !important;
    }
    .p8-pn__cta-text,
    .p8-cr__cta-text {
        max-width: 100% !important;
        width: 100% !important;
    }
    .p8-pn__cta-text strong,
    .p8-cr__cta-text strong {
        display: block;
        font-size: clamp(20px, 5vw, 28px) !important;
        line-height: 1.2 !important;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .p8-pn__cta-text em,
    .p8-cr__cta-text em {
        display: block;
        font-size: clamp(13px, 3.4vw, 16px) !important;
        line-height: 1.5 !important;
        max-width: 100%;
    }
    .p8-pn__cta-action,
    .p8-cr__cta-action {
        align-self: stretch !important;
        justify-content: center !important;
        font-size: clamp(11px, 2.6vw, 13px) !important;
        word-break: break-all;
        text-align: center;
        padding: 14px 18px !important;
        min-height: 48px;
    }

    /* Long email/text in buttons — wrap properly */
    .p8-pn__cta-action,
    .p8-cr__cta-action,
    .nav-cta-btn,
    .pl-cta__btn {
        white-space: normal !important;
        word-break: break-word;
    }
}

/* ════════ LANG SWITCHER — auto-hide on scroll-down ════════ */
.p8-lang {
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
body.is-scrolled-down .p8-lang {
    transform: translateY(-90px);
    opacity: 0;
    pointer-events: none;
}

/* ════════ MOBILE ONLY (≤640px) ════════ */
@media (max-width: 640px) {

    /* Loading screen + GDPR */
    #gdpr-box {
        max-width: calc(100vw - 24px) !important;
        margin: 0 12px;
    }

    /* Hero typography sizes */
    .p8-pn__title,
    .p8-cr__title,
    .p8-services__title,
    .p8-bp__title {
        font-size: clamp(32px, 11vw, 56px) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
    }
    .p8-pn__lede,
    .p8-cr__lede,
    .p8-services__lede,
    .p8-bp__lede {
        font-size: clamp(14px, 3.6vw, 17px) !important;
        line-height: 1.55 !important;
    }

    /* About hero "NOT AN AGENCY. A SYSTEM." */
    .gh-line {
        font-size: clamp(48px, 13vw, 84px) !important;
        line-height: .9 !important;
    }
    .gh-line--accent {
        font-size: clamp(42px, 11vw, 76px) !important;
    }
    .gh-player {
        height: 50vh !important;
        max-height: 480px;
    }
    .gh-text-front {
        /* Reduce mask sizes proportionally */
        -webkit-mask-size: 50% 22%, 50% 22%, 56% 24% !important;
        mask-size: 50% 22%, 50% 22%, 56% 24% !important;
    }

    /* Service cards — tighter padding */
    .p8-card {
        margin-bottom: 16px;
    }
    .p8-card__title {
        font-size: clamp(26px, 7vw, 36px) !important;
        line-height: 1.05;
    }
    .p8-card__desc {
        font-size: 14px !important;
        line-height: 1.55;
    }

    /* Roster cards */
    .p8-rs__card-name {
        font-size: clamp(22px, 6vw, 28px) !important;
    }
    .p8-rs__card-pos {
        font-size: 13px !important;
    }

    /* Modal — full-width on mobile */
    .rn-modal__panel {
        width: 96vw !important;
        max-width: none !important;
        max-height: 92vh !important;
        border-radius: 16px !important;
    }
    .rn-modal__inner {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    .rn-modal__hero {
        min-height: 280px !important;
        max-height: 320px;
        aspect-ratio: 16/11 !important;
        border-radius: 16px 16px 0 0 !important;
    }
    .rn-modal__name {
        font-size: clamp(28px, 7vw, 40px) !important;
    }
    .rn-modal__stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Nav side panel — tighter */
    nav ul li a h1.big {
        font-size: clamp(34px, 9vw, 56px) !important;
        line-height: 1 !important;
    }

    /* Lang switcher — compact + solid backdrop on mobile (no transparency overlap) */
    .p8-lang { right: 100px !important; top: 28px !important; }
    .p8-lang__toggle {
        padding: 7px 10px !important;
        height: 34px !important;
        font-size: 10px !important;
        gap: 6px !important;
        background: rgba(10,10,10,0.92) !important;
        border: 1.5px solid rgba(255,255,255,0.25) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    }
    .p8-lang__caret { display: none !important; }
    .p8-lang__menu {
        right: 0 !important;
        min-width: 180px !important;
    }

    /* Forms — full-width */
    .form-col input,
    .form-col textarea {
        font-size: 16px !important; /* prevents iOS zoom */
    }
    .form-btn {
        width: 100% !important;
        padding: 16px !important;
        font-size: 13px !important;
    }

    /* Footer / prefooter */
    .prefooter h2 {
        font-size: clamp(28px, 7vw, 42px) !important;
        line-height: 1.1 !important;
    }
    .footer-wrap {
        flex-direction: column !important;
        gap: 20px;
        align-items: flex-start !important;
    }
    .social-icons {
        align-self: flex-start;
    }

    /* Reel video stage */
    .p8-pn__stage {
        max-width: 320px !important;
        max-height: 569px !important; /* 16/9 ratio */
    }

    /* Partners dossier — tight padding */
    .p8-pn__dossier {
        padding: 24px !important;
    }
    .p8-pn__dossier-title {
        font-size: clamp(20px, 5.5vw, 28px) !important;
    }
    .p8-pn__brand {
        padding: 14px 16px !important;
        gap: 14px !important;
    }

    /* Categories grid stacks */
    .p8-pn__matrix-grid,
    .p8-cr__values-grid,
    .p8-cr__lanes-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Career & values cards */
    .p8-cr__value,
    .p8-cr__lane,
    .p8-pn__cat {
        padding: 22px !important;
    }
    .p8-cr__value-title,
    .p8-cr__lane-title,
    .p8-pn__cat-name {
        font-size: clamp(20px, 5vw, 26px) !important;
    }

    /* About — pillar 3-column → stack */
    .cs-svc-pillars {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .cs-svc-pillar {
        padding: 0 !important;
        border-bottom: 1px solid rgba(10,10,10,.08);
        padding-bottom: 28px !important;
    }
    .cs-svc-pillar:not(:last-child)::after { display: none; }
    .cs-svc-pillar__name {
        font-size: clamp(48px, 13vw, 72px) !important;
    }

    /* About — team flip cards stack */
    .cs-lineup__grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    /* About — FAQ */
    .cs-faq__inner {
        padding: 60px 20px !important;
    }
    .cs-faq__heading {
        font-size: clamp(56px, 18vw, 96px) !important;
        gap: 6px !important;
    }
    .cs-faq__item summary {
        padding: 18px 0 !important;
        gap: 12px;
    }
    .cs-faq__q {
        font-size: clamp(15px, 4.2vw, 18px) !important;
    }

    /* Player profile page hero */
    .pl-hero__name {
        font-size: clamp(44px, 12vw, 80px) !important;
    }
    .pl-stats {
        gap: 0;
    }
    .pl-stat {
        padding: 16px 18px 16px 0 !important;
        margin-right: 18px !important;
    }
    .pl-bio {
        grid-template-columns: 1fr !important;
    }
    .pl-bio__col {
        padding: 50px 24px !important;
    }
    .pl-bio__col:first-child {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    /* Touch targets — min 44px */
    button, .btn, a.btn, .p8-rs__card, .p8-pn__cta-strip,
    .p8-card__link, .nav-cta-btn, .nav-icon {
        min-height: 44px;
    }
}

/* ════════ SMALL MOBILE (≤380px) ════════ */
@media (max-width: 380px) {
    .gh-line { font-size: clamp(40px, 12vw, 64px) !important; }
    .p8-card__title,
    .p8-rs__card-name,
    .p8-pn__title,
    .p8-cr__title { font-size: clamp(28px, 9vw, 44px) !important; }

    .p8-lang { right: 90px !important; }
    .p8-lang__toggle { padding: 6px 8px !important; }
}

/* ════════ DISABLE HOVER on touch devices ════════ */
@media (hover: none) and (pointer: coarse) {
    .p8-card:hover,
    .p8-rs__card:hover,
    .p8-pn__cat:hover,
    .p8-cr__value:hover {
        transform: none !important;
    }
    /* On touch, show all that was hover-revealed */
    .p8-card__cta,
    .p8-rs__card-cta {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ════════ DESKTOP — Just safety overflow guard ════════ */
@media (min-width: 1025px) {
    /* Don't break desktop. Just ensure no global x-overflow */
    img, video { max-width: 100%; height: auto; }
}