/* Shared internal-page hero system. The homepage hero remains intentionally unique. */
:root {
    --zomblers-internal-hero-height: 620px;
}

/* Remove the decorative pink progress dash at the bottom of the Schedule hero
   while retaining the subtle neutral divider supplied by the hero border. */
#zomblers-schedule .zs-hero::before {
    content: none !important;
    display: none !important;
}

body:not(.home) :where(
    .zch-teams-hero,
    .zch-about-hero,
    .zch-news-hero,
    .zp-hero,
    .zcp-hero,
    .ztr-hero,
    #zomblers-schedule .zs-hero,
    .zch-match-center-hero,
    .zh-hero,
    .zw-hero,
    .zch-videos-hero,
    .zch-partners-hero
) {
    box-sizing: border-box !important;
    height: var(--zomblers-internal-hero-height) !important;
    min-height: var(--zomblers-internal-hero-height) !important;
    max-height: var(--zomblers-internal-hero-height) !important;
    overflow: hidden !important;
}

body:not(.home) :where(
    .zch-teams-hero__inner,
    .zch-about-hero__content,
    .zch-news-hero__inner,
    .zcp-hero__grid,
    .ztr-hero-inner,
    #zomblers-schedule .zs-hero__inner,
    .zch-match-center-hero__inner,
    .zw-hero-grid,
    .zch-videos-hero__inner,
    .zch-partners-hero__inner
) {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}

body:not(.home) :where(.zch-about-hero__copy, .zch-videos-hero__copy) {
    box-sizing: border-box !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}

/* Press reserves a fixed lower rail while keeping its headline grid within the shared canvas. */
body.zp-press-page .zp-hero {
    position: relative !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.zp-press-page .zp-hero-grid {
    box-sizing: border-box !important;
    height: calc(100% - 68px) !important;
    min-height: calc(100% - 68px) !important;
    max-height: calc(100% - 68px) !important;
    align-items: center !important;
}

body.zp-press-page .zp-hero-rail {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 68px !important;
    min-height: 68px !important;
}

/* FACEIT includes a 42px live ticker inside the hero boundary. */
body .zh-hero {
    position: relative !important;
}

body .zh-hero__inner {
    box-sizing: border-box !important;
    height: calc(100% - 42px) !important;
    min-height: calc(100% - 42px) !important;
    max-height: calc(100% - 42px) !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}

body .zh-hero .zh-ticker {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
}

@media (min-width: 761px) {
    /* The editorial and roster heroes contain much less content than Schedule.
       Keep the same title offset, but do not make visitors scroll through an
       unnecessarily tall empty canvas before reaching the page content. */
    body:not(.home) .zch-teams-hero {
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
    }

    body:not(.home) .zch-news-hero {
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
    }

    body.zomblers-roadmap-page .zr-native-hero-host,
    body.zomblers-roadmap-page .zch-teams-hero.zr-live-teams-hero-clone {
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
    }

    body:not(.home) .zch-partners-hero {
        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
    }

    #zomblers-schedule .zs-hero {
        height: 520px !important;
        min-height: 520px !important;
        max-height: 520px !important;
    }

    /* Compact the remaining feature heroes to their measured content rather
       than carrying the full calendar canvas onto every page. */
    body.zp-press-page .zp-hero {
        height: 620px !important;
        min-height: 620px !important;
        max-height: 620px !important;
    }

    body:not(.home) .zch-match-center-hero {
        height: 480px !important;
        min-height: 480px !important;
        max-height: 480px !important;
    }

    body:not(.home) .zw-hero {
        height: 540px !important;
        min-height: 540px !important;
        max-height: 540px !important;
    }

    body:not(.home) .zch-videos-hero {
        height: 540px !important;
        min-height: 540px !important;
        max-height: 540px !important;
    }

    body:not(.home) :where(
        .zch-teams-hero__inner,
        .zch-about-hero__content,
        .zch-news-hero__inner,
        .zcp-hero__grid,
        .ztr-hero-inner,
        .zch-match-center-hero__inner,
        .zh-hero__inner,
        .zw-hero-grid,
        .zch-videos-hero__inner,
        .zch-partners-hero__inner
    ) {
        align-items: start !important;
    }

    body:not(.home) .zw-hero {
        align-items: stretch !important;
    }

    body:not(.home) .zw-hero-grid {
        transform: none !important;
    }

    /* Keep the title rhythm close to the navigation while using the lower half
       of the shared canvas for supporting stats, artwork, and actions. */
    body:not(.home) .zch-teams-stats,
    body:not(.home) .zch-news-hero__stats {
        align-self: end !important;
    }

    body:not(.home) .zw-copy {
        transform: translateY(-58px) !important;
    }

    body:not(.home) .zw-broadcast-art {
        transform: none !important;
    }

    body:not(.home) .zch-videos-actions {
        transform: none !important;
    }

    body:not(.home) .zch-videos-hero__art {
        height: calc(100% - 112px) !important;
        min-height: 0 !important;
        max-height: calc(100% - 112px) !important;
    }

    body:not(.home) .zch-about-hero__content {
        align-content: start !important;
    }

    body:not(.home) .zch-about-hero__copy {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
        transform: translateY(-30px) !important;
    }

    body:not(.home) .zch-videos-hero__copy {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body:not(.home) .zch-match-center-hero__inner {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* Press has a three-line title plus a fixed lower rail. Compact its vertical
       rhythm so its eyebrow begins on the same line as the Schedule hero. */
    body.zp-press-page .zp-hero-grid {
        padding-top: 56px !important;
        padding-bottom: 18px !important;
        align-items: start !important;
    }

    /* Keep the press rail in its own layout row. This removes the absolute
       overlay that could collide with the copy at narrower desktop widths. */
    body.zp-press-page .zp-hero {
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) 68px !important;
    }

    body.zp-press-page .zp-hero-grid {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body.zp-press-page .zp-hero-rail {
        position: relative !important;
        inset: auto !important;
        grid-row: 2 !important;
    }

    body.zp-press-page .zp-hero-copy h1 {
        margin-top: 12px !important;
        margin-bottom: 16px !important;
        font-size: clamp(5.5rem, 7.2vw, 7rem) !important;
    }

    body.zp-press-page .zp-subtitle {
        font-size: clamp(1.25rem, 1.65vw, 1.4rem) !important;
    }

    body.zp-press-page .zp-hero-actions {
        margin-top: 24px !important;
    }

    /* Preserve the compact Roadmap title placement approved before the shared
       height system; only the artwork canvas grows below the copy. */
    body.zomblers-roadmap-page .zch-teams-hero__inner {
        height: 439px !important;
        min-height: 439px !important;
        max-height: 439px !important;
        padding-top: 48px !important;
        align-items: end !important;
    }

    body.zomblers-roadmap-page .zch-teams-hero__copy {
        align-self: start !important;
        transform: none !important;
    }
}

@media (max-width: 760px) {
    /* Schedule has a compact text-and-stats composition on phones. Its former
       620px canvas created a large empty band before the calendar. */
    #zomblers-schedule .zs-hero {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
    }

    #zomblers-schedule .zs-hero__inner {
        height: 399px !important;
        min-height: 399px !important;
        max-height: 399px !important;
    }

    /* Roadmap was already approved as a compact mobile composition before the
       site-wide hero pass. Its copy and three stats fit cleanly in 390px. */
    body.zomblers-roadmap-page .zr-native-hero-host,
    body.zomblers-roadmap-page .zch-teams-hero.zr-live-teams-hero-clone {
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
    }

    body.zomblers-roadmap-page .zch-teams-hero__inner {
        height: 389px !important;
        min-height: 389px !important;
        max-height: 389px !important;
    }

    body:not(.home) :where(
        .zch-teams-hero__inner,
        .zch-about-hero__content,
        .zch-news-hero__inner,
        .zcp-hero__grid,
        .ztr-hero-inner,
        #zomblers-schedule .zs-hero__inner,
        .zch-match-center-hero__inner,
        .zw-hero-grid,
        .zch-videos-hero__inner,
        .zch-partners-hero__inner
    ) {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    body:not(.home) :where(.zch-about-hero__copy, .zch-videos-hero__copy) {
        padding-top: 48px !important;
        padding-bottom: 40px !important;
    }

    /* These are supporting art panels, not primary content. Keeping them out of the
       mobile flow prevents them from making otherwise identical heroes twice as tall. */
    body:not(.home) :where(.zch-about-hero__media, .zch-videos-hero__art) {
        display: none !important;
    }

    body.zomblers-roadmap-page .zch-teams-hero__inner {
        align-content: start !important;
    }

    #zomblers-schedule .zs-hero__stats {
        margin-top: auto !important;
    }

    body .zh-hero__inner {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        row-gap: 16px !important;
    }
}

/* Shared internal-hero typography. Page artwork and layout remain unique, but
   every hero now uses the same display face, weight, slant, line-height, and
   responsive type scale. */
body:not(.home) [class*="-hero"] h1,
#zomblers-schedule .zs-hero h1 {
    font-family: Bahnschrift, "Arial Narrow", "Roboto Condensed", Impact, sans-serif !important;
    font-size: clamp(4.75rem, 7.5vw, 6.5rem) !important;
    font-style: italic !important;
    font-weight: 900 !important;
    line-height: .82 !important;
    letter-spacing: -.055em !important;
    text-transform: uppercase !important;
}

body:not(.home) [class*="-hero"] :where(
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="overline"]
),
#zomblers-schedule .zs-eyebrow {
    font-family: "IBM Plex Mono", SFMono-Regular, Consolas, monospace !important;
    font-size: .72rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

body:not(.home) [class*="-hero"] h1 ~ :where(p, h2),
#zomblers-schedule .zs-hero h1 ~ :where(p, h2) {
    font-family: Bahnschrift, Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(1rem, 1.35vw, 1.125rem) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

@media (max-width: 760px) {
    body:not(.home) [class*="-hero"] h1,
    #zomblers-schedule .zs-hero h1 {
        font-size: clamp(3rem, 12.5vw, 3.5rem) !important;
        line-height: .86 !important;
        letter-spacing: -.05em !important;
    }

    body:not(.home) [class*="-hero"] :where(
        [class*="eyebrow"],
        [class*="kicker"],
        [class*="overline"]
    ),
    #zomblers-schedule .zs-eyebrow {
        font-size: .65rem !important;
    }

    body:not(.home) [class*="-hero"] h1 ~ :where(p, h2),
    #zomblers-schedule .zs-hero h1 ~ :where(p, h2) {
        font-size: .95rem !important;
        line-height: 1.55 !important;
    }
}