/* ==========================================================================
   Responsive layer — base styles are mobile-first (375px+).
   Breakpoints: 600 (large phone / small tablet), 900 (tablet), 1280 (desktop nav), 1600 (wide)
   ========================================================================== */

/* Very small phones */
@media (max-width: 340px) {
    .brand__text {
        display: none;
    }
}

/* Narrow phones: header has brand + TR/EN + menu; the menu label stays for screen readers only */
@media (max-width: 420px) {
    .menu-toggle__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .menu-toggle {
        min-width: 48px;
        justify-content: center;
        padding: 0;
    }

    .site-header__bar {
        gap: var(--space-3);
    }
}

@media (max-width: 380px) {
    .hero__actions .btn,
    .join__actions .btn {
        width: 100%;
    }
}

/* Short phones (e.g. 375×667): no room for a separate video zone above the text,
   so the loop becomes a dimmed backdrop behind it. */
@media (max-width: 899px) and (max-height: 760px) {
    .hero__media {
        inset: var(--header-h) 0 0;
        height: auto;
        -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, #000 30%, transparent 80%);
        mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, #000 30%, transparent 80%);
    }

    .hero__video {
        opacity: 0.32;
    }
}

/* ≥ 600px */
@media (min-width: 600px) {
    .form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field--full {
        grid-column: 1 / -1;
    }

    .sponsor-wall {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fixture {
        grid-template-columns: auto 1fr;
    }

    .result {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .result__info {
        grid-column: 1 / -1;
    }

    .result__outcome {
        align-self: end;
        text-align: right;
    }

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

    .squad {
        min-height: clamp(420px, 60vw, 640px);
    }

    .staff__grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    }

    .lightbox__btn--prev,
    .lightbox__btn--next {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .lightbox__stage {
        padding-inline: calc(52px + var(--space-6));
    }

    .site-footer__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ≥ 900px */
@media (min-width: 900px) {
    :root {
        --header-h: 80px;
    }

    /*
     * Two-column hero driven by one width W (the content width):
     *   left  ~54% of W: THUNDERS at 0.135 W (the word is ~3.7x its font size wide, so ~0.5 W)
     *   right  42% of W: the crest from the video, right-aligned with the content edge
     * Crest geometry in the clip: 50% of its width, 65% of its height, centred at x 54.6% / y 53%.
     * So text and crest grow together and never overlap.
     */
    .hero {
        --hero-w: min(100vw - 2 * var(--gutter), var(--container));
    }

    .hero__title {
        font-size: calc(var(--hero-w) * 0.135);
    }

    .hero__copy {
        max-width: calc(var(--hero-w) * 0.54);
        /* The title switches to --hero-w here, so the shared indent follows it. */
        --copy-indent: calc(var(--hero-w) * 0.00942);
    }

    .hero__media {
        inset: 0;
        height: auto;
        container-type: size;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Video width 0.84 W → mark 0.42 W. The mark sits dead centre of the frame, so its
       centre lands at 0.79 W across and at 52.4% of the hero height — the same line as
       the headline on the left. The elliptical mask fades the clip's own glow before the
       frame edge, so no rectangle shows. */
    .hero__video {
        --w: min(100cqw - 2 * var(--gutter), var(--container));
        position: absolute;
        width: calc(var(--w) * 0.84);
        height: auto;
        aspect-ratio: 16 / 9;
        left: calc((100cqw - var(--w)) / 2 + var(--w) * 0.79 - var(--w) * 0.84 * 0.5);
        top: calc(52.4cqh - var(--w) * 0.84 * 0.5625 * 0.5);
        object-fit: cover;
        -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
        mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
    }

    .hero__slash {
        top: 74%;
    }

    .hero__video-toggle {
        top: auto;
        bottom: calc(var(--space-9) + var(--space-2));
    }

    .matchup {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--space-6);
    }

    .matchup__center {
        grid-column: 2;
        grid-row: 1;
    }

    .matchup__team .team-mark {
        width: 160px;
        height: 160px;
    }

    .matchup__team .team-mark--tba {
        width: 124px;
        height: 124px;
        margin-block: 18px calc(var(--space-2) + 18px);
        font-size: 4rem;
    }

    .about-teaser__grid {
        grid-template-columns: 5fr 7fr;
        gap: clamp(3rem, 2rem + 4vw, 7rem);
    }

    .join__inner {
        grid-template-columns: 7fr 5fr;
        align-items: end;
        gap: clamp(3rem, 2rem + 4vw, 6rem);
    }

    .social-band__inner {
        grid-template-columns: 4fr 8fr;
        gap: var(--space-8);
    }

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

    .mosaic__item:nth-child(4),
    .mosaic__item:nth-child(5) {
        grid-column: span 2;
    }

    .mosaic__item:nth-child(6) {
        grid-column: 3 / span 2;
        grid-row: 3 / span 2;
    }

    .mosaic__item:nth-child(5) {
        grid-row: span 2;
    }

    .masonry {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fixture {
        grid-template-columns: auto minmax(0, 1fr) minmax(220px, 34%);
        padding: var(--space-5) var(--space-6);
    }

    .fixture__meta {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding-top: 0;
        padding-left: var(--space-5);
        border-top: 0;
        border-left: 1px solid var(--line);
    }

    .result {
        grid-template-columns: 200px 1fr 140px;
        padding: var(--space-5) var(--space-6);
    }

    .result__info {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
    }

    .result__board {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    .result__team:last-child {
        grid-template-columns: auto 1fr 40px;
    }

    .result__team:last-child > picture {
        order: 3;
    }

    .result__team:last-child .result__name {
        order: 2;
        text-align: right;
    }

    .result__team:last-child .result__score {
        order: 1;
    }

    .result__outcome {
        align-self: center;
    }

    .story__grid {
        grid-template-columns: auto 1fr;
        gap: clamp(3rem, 2rem + 4vw, 7rem);
        align-items: start;
    }

    .mission__grid {
        grid-template-columns: 6fr 5fr;
        gap: clamp(3rem, 2rem + 4vw, 7rem);
    }

    .values {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6) var(--space-5);
    }

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

    .ff101__block--wide {
        grid-column: 1 / -1;
    }

    .apply__grid {
        grid-template-columns: minmax(260px, 4fr) 8fr;
        gap: clamp(3rem, 2rem + 4vw, 6rem);
        align-items: start;
    }

    .apply__grid--single {
        grid-template-columns: 1fr;
    }

    .apply__aside {
        position: sticky;
        top: calc(var(--header-h) + var(--space-5));
    }

    .pitch__grid {
        grid-template-columns: 5fr 7fr;
        align-items: start;
    }

    .inquiry__grid,
    .contact__grid {
        grid-template-columns: 5fr 7fr;
        gap: clamp(3rem, 2rem + 4vw, 6rem);
    }

    .sponsor-wall {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .site-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    }

    .site-footer__brand {
        grid-column: auto;
    }
}

/* Timeline switches to a date column + rail at tablet landscape */
@media (min-width: 900px) {
    .timeline::before {
        left: calc(180px + var(--space-6) + 7px);
    }

    .timeline__item {
        grid-template-columns: 180px 1fr;
        column-gap: calc(var(--space-6) * 2 + 16px);
        padding-left: 0;
    }

    .timeline__item::before {
        left: calc(180px + var(--space-6));
    }

    .timeline__date {
        grid-row: 1 / span 2;
        text-align: right;
        padding-top: 0.2rem;
    }
}

/* ≥ 1280px — desktop navigation */
@media (min-width: 1280px) {
    .menu-toggle {
        display: none;
    }

    .site-nav {
        position: static;
        margin-left: auto;
        flex-direction: row;
        align-items: center;
        gap: var(--space-5);
        padding: 0;
        overflow: visible;
        background: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .site-nav__list {
        flex-direction: row;
        gap: clamp(0.7rem, 0.1rem + 0.75vw, 1.35rem);
    }

    .lang-switch {
        margin-left: var(--space-2);
        padding-left: var(--space-3);
        border-left: 1px solid var(--line-strong);
    }

    .site-nav__link {
        position: relative;
        min-height: 44px;
        border-bottom: 0;
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: 0.06em;
    }

    .site-nav__link:hover {
        color: var(--gold-light);
    }

    .site-nav__link[aria-current="page"] {
        color: var(--text);
    }

    .site-nav__link[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 6px;
        height: 3px;
        background: var(--gold);
        clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
    }

    .site-nav__cta {
        align-self: auto;
        min-height: 44px;
        font-size: 1rem;
        padding-inline: 1.25rem;
    }

    .site-nav__meta {
        display: none;
    }
}

/* ≥ 1600px */
@media (min-width: 1600px) {
    :root {
        --container: 1440px;
    }

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

/* Touch devices: no hover-dependent reveal */
@media (hover: none) {
    .masonry__caption {
        opacity: 1;
    }
}