/**
 * Championship Landing Page Section Styles
 *
 * CSS for championship event landing pages.
 * Loaded conditionally when core/group blocks are present.
 *
 * Sections: hero, jump-links, schedule, tickets, travel,
 * watch, merchandise, news, media-info, past-winners, sponsors.
 *
 * Design: USAU design language — weight contrast, surgical color,
 * opacity hierarchy, compact spacing, sharp geometry.
 *
 * @package Condor
 */

/* ==========================================================================
   Legacy Host Theme Reset
   Overrides legacy style.css body font shorthand (futura-pt / line-height 1)
   so champ sections inherit the theme.json body preset and comfortable leading.
   ========================================================================== */

/* Disable sticky global nav on championship template — conflicts with champ-jump-links */
body.page-template-page-championship-php .site-header {
    position: static;
}

.championship-content {
    font-family: var(--wp--preset--font-family--body);
    line-height: 1.5;
    --champ-header-height: 0px; /* header is now static, not counted in hero calc */
    --champ-jumpnav-height: 44px;
}

.championship-content p {
    line-height: 1.5;
}

/* Legacy style.css has `.wp-block-group h4` at (0,1,1) forcing proxima-nova,
   uppercase red — beats bare `.usau-results__round-name` at (0,1,0). Bump
   specificity with 3-class prefix so the bracket round headers render as
   italic slate medium (matching Condor). */
.championship-content .champ-schedule .usau-results__round-name {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    font-style: italic;
    color: var(--wp--preset--color--slate);
    text-transform: none;
    letter-spacing: 0.005em;
}

/* ==========================================================================
   Specificity Scope
   All champ-* rules below are nested under .championship-content so their
   specificity beats legacy style.css `.site-content p, .site-content li`
   (0,1,1). Native CSS nesting adds (0,1,0) to every nested selector.
   ========================================================================== */

.championship-content {
    /* ==========================================================================
   Shared Section Defaults
   ========================================================================== */

    [class*="champ-"] {
        scroll-margin-top: 60px;
    }

    section[class*="champ-"] {
        padding-inline: var(--wp--preset--spacing--60);

        @media (min-width: 768px) {
            padding-inline: var(--wp--preset--spacing--70);
        }
    }

    /* Reset WordPress flow-layout margins inside championship sections.
   Uses [class*="champ-"] so it works in both the page template
   (where .championship-content wraps everything) and the block editor
   (where the template wrapper doesn't exist). */
    [class*="champ-"] :where(.is-layout-flow) > * {
        margin-block-start: 0;
        margin-block-end: 0;
    }

    /* ==========================================================================
   Section Header Pattern (.champ-section-header)
   Eyebrow + Editorial Heading + Accent Bar
   ========================================================================== */

    .champ-section-header {
        margin-bottom: var(--wp--preset--spacing--50);

        /* Eyebrow — functional label */
        .champ-eyebrow {
            font-size: var(--wp--preset--font-size--small);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            opacity: 0.6;
            margin: 0;
            color: var(--wp--preset--color--blue);
        }

        /* Heading — editorial copy, UPPERCASE cinematic scale */
        .wp-block-heading:where(h2) {
            font-family: var(--wp--preset--font-family--heading-condensed);
            font-style: italic;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: -0.02em;
            line-height: 1.05;
            color: var(--wp--preset--color--blue);
            font-size: clamp(2.5rem, 3vw + 1rem, 3.5rem);
            margin: 0;
        }

        /* Accent bar via ::after */
        .wp-block-heading:where(h2)::after {
            content: "";
            display: block;
            width: 40px;
            height: 3px;
            background: var(--wp--preset--color--red);
            margin-top: var(--wp--preset--spacing--30);
        }
    }

    /* Dark variant — for navy bg sections (watch) */
    .champ-section-header--dark {
        .champ-eyebrow {
            color: var(--wp--preset--color--white);
            opacity: 0.5;
        }

        .wp-block-heading:where(h2) {
            color: var(--wp--preset--color--white);
        }

        .wp-block-heading:where(h2)::after {
            background: rgba(255, 255, 255, 0.3);
        }
    }

    /* Centered variant — for sponsors */
    .champ-section-header--centered {
        text-align: center;

        .wp-block-heading:where(h2)::after {
            margin-inline: auto;
        }
    }

    /* --- Section Header: Editorial Mode --- */

    .champ-section-header--editorial {
        .wp-block-heading:where(h2) {
            font-family: var(--wp--preset--font-family--heading);
            font-style: normal;
            font-weight: 700;
            text-transform: none;
            letter-spacing: -0.01em;
            font-size: clamp(1.75rem, 2vw + 0.5rem, 2.25rem);
        }

        .wp-block-heading:where(h2)::after {
            background: var(--wp--preset--color--light-gray);
            height: 1px;
            width: 48px;
        }
    }

    /* ==========================================================================
   Outline Button Pattern (replaces solid-red buttons)
   ========================================================================== */

    /* Outline-blue button — sharp corners, compact padding */
    [class*="champ-"] .wp-block-button.is-style-outline-blue .wp-block-button__link {
        border: 1.5px solid var(--wp--preset--color--blue);
        border-radius: 0;
        background: transparent;
        color: var(--wp--preset--color--blue);
        padding: 0.5rem 1.25rem;
        font-weight: 600;
        font-size: var(--wp--preset--font-size--xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-decoration: none;
        transition:
            background 0.2s ease,
            color 0.2s ease;

        &:hover {
            background: var(--wp--preset--color--blue);
            color: var(--wp--preset--color--white);
        }
    }

    /* Outline-white glass button — for dark backgrounds */
    [class*="champ-"] .wp-block-button.is-style-outline-white .wp-block-button__link {
        border: 1.5px solid rgba(255, 255, 255, 0.6);
        border-radius: 0;
        background: rgba(0, 43, 92, 0.2);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        color: var(--wp--preset--color--white);
        padding: 0.5rem 1.25rem;
        font-weight: 600;
        font-size: var(--wp--preset--font-size--xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-decoration: none;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
        transition:
            background 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease;

        &:hover {
            background: var(--wp--preset--color--white);
            color: var(--wp--preset--color--blue);
            border-color: var(--wp--preset--color--white);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            text-shadow: none;
        }
    }

    /* Underline link — replaces secondary red buttons */
    [class*="champ-"] .champ-underline-link {
        color: var(--wp--preset--color--blue);
        font-weight: 600;
        font-size: var(--wp--preset--font-size--small);
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: color 0.2s ease;

        &:hover {
            color: var(--wp--preset--color--red);
        }
    }

    /* Solid-red CTA */
    [class*="champ-"] .wp-block-button.is-style-solid-red .wp-block-button__link {
        background: var(--wp--preset--color--red);
        color: var(--wp--preset--color--white);
        border: 1.5px solid var(--wp--preset--color--red);
        border-radius: 0;
        padding: 0.5rem 1.25rem;
        font-weight: 600;
        font-size: var(--wp--preset--font-size--xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-decoration: none;
        transition:
            background 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;

        &:hover {
            background: var(--wp--preset--color--bright-red);
            border-color: var(--wp--preset--color--bright-red);
            box-shadow: 0 4px 12px rgba(157, 21, 53, 0.3);
        }
    }

    /* Ghost button — transparent with red underline text */
    [class*="champ-"] .wp-block-button.is-style-ghost .wp-block-button__link {
        background: transparent;
        color: var(--wp--preset--color--red);
        border: 1.5px solid transparent;
        border-radius: 0;
        padding: 0.5rem 1.25rem;
        font-weight: 600;
        font-size: var(--wp--preset--font-size--xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: color 0.2s ease;

        &:hover {
            color: var(--wp--preset--color--bright-red);
        }
    }

    /* ==========================================================================
   Hero Section (.champ-hero)
   ========================================================================== */

    /* Height offset custom properties */
    .championship-content {
        --champ-header-height: 102px; /* utility bar ~42px + main nav 60px */
        --champ-jumpnav-height: 44px;
    }

    body.admin-bar :where(.championship-content) {
        --champ-admin-bar: 32px;
    }

    @media screen and (max-width: 782px) {
        body.admin-bar :where(.championship-content) {
            --champ-admin-bar: 46px;
        }
    }

    /* Full-bleed hero — constrained to viewport minus header + jump links */
    .champ-hero {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        overflow: hidden;
        min-height: calc(
            100dvh - var(--champ-header-height, 0px) - var(--champ-jumpnav-height, 0px) - var(--champ-admin-bar, 0px)
        ) !important;

        /* Gradient overlay — heavier than before for text legibility */
        .wp-block-cover__background {
            background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.45) 0%,
                rgba(0, 0, 0, 0.15) 35%,
                rgba(0, 0, 0, 0.6) 100%
            ) !important;
            opacity: 1 !important;
        }

        /* Championship badge logo — centered above the headline.
       PNG with transparent background, square aspect (~1:1).
       Sizing capped at ~140px so the headline still leads the hierarchy.
       Drop-shadow keeps it legible on busy hero photography. */
        .champ-hero__logo {
            margin: 0 auto var(--wp--preset--spacing--40);
            max-width: 200px;

            @media (min-width: 768px) {
                max-width: 300px;
                margin-bottom: var(--wp--preset--spacing--50);
            }

            img {
                display: block;
                width: 100% !important;
                height: auto;
                filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
            }
        }

        /* Hero title — heavy weight, strong shadow for legibility.
       Sizes scaled down a notch from the no-logo version so the badge
       and headline read as a paired lockup, not two competing elements. */
        .wp-block-heading:where(h1) {
            font-style: italic;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: -0.025em;
            line-height: 1;
            text-shadow:
                0 2px 20px rgba(0, 0, 0, 0.5),
                0 1px 4px rgba(0, 0, 0, 0.3);
            font-size: 2.25em !important;

            @media (min-width: 768px) {
                font-size: 4em !important;
            }

            @media (min-width: 1280px) {
                font-size: 5.5rem !important;
            }
        }

        /* Meta line — tight pill with frosted backdrop */
        .champ-hero__meta {
            width: fit-content;
            margin-inline: auto;
            margin-top: var(--wp--preset--spacing--30);
            background: rgba(0, 0, 0, 0.5);
            padding: 0.375em 1em;
            border-radius: 100px;
            text-transform: none !important;
            font-weight: 600 !important;
            letter-spacing: 0.05em !important;
            font-size: var(--wp--preset--font-size--large) !important;
            text-shadow:
                0 1px 12px rgba(0, 0, 0, 0.5),
                0 1px 3px rgba(0, 0, 0, 0.3);
        }

        /* Hero buttons — gap between CTA pair */
        .wp-block-buttons {
            gap: var(--wp--preset--spacing--30);
        }

        /* Hero buttons — frosted glass, sharp corners */
        .wp-block-button__link {
            border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
            border-radius: 0 !important;
            background: rgba(0, 43, 92, 0.2) !important;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            color: var(--wp--preset--color--white) !important;
            padding: 0.625rem 1.5rem !important;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: var(--wp--preset--font-size--xs);
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
            transition:
                background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease;

            &:hover {
                background: var(--wp--preset--color--white) !important;
                color: var(--wp--preset--color--blue) !important;
                border-color: var(--wp--preset--color--white) !important;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                text-shadow: none;
            }
        }
    }

    @supports not (backdrop-filter: blur(8px)) {
        .champ-hero .wp-block-button__link {
            background: rgba(0, 43, 92, 0.45) !important;
        }
    }

    /* ==========================================================================
   Jump Links Navigation (.champ-jump-links) — Two-State Sticky Nav
   ========================================================================== */

    /* Transparent state (default — overlaps hero bottom) */
    .champ-jump-links {
        position: sticky;
        top: 0;
        z-index: 100;
        margin-top: -65px;
        padding: 0 var(--wp--preset--spacing--40);
        background: rgba(0, 43, 92, 0.4);
        border-top: 0.25px solid rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        transition:
            background 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;

        &::-webkit-scrollbar {
            display: none;
        }

        /* Solid state — white background when scrolled past hero */
        &.is-scrolled {
            background: var(--wp--preset--color--white);
            border-bottom-color: transparent;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

            a {
                color: rgba(0, 43, 92, 0.8);

                &:hover {
                    color: var(--wp--preset--color--blue);
                    border-bottom-color: var(--wp--preset--color--red);
                }

                &.is-active {
                    color: var(--wp--preset--color--blue);
                    border-bottom-color: var(--wp--preset--color--red);
                }
            }
        }

        .champ-jump-links__list {
            display: flex;
            align-items: stretch;
            justify-content: center;
            gap: var(--wp--preset--spacing--10);
            max-width: 1204px;
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }

        /* li is display:list-item by default — override so it behaves as a
       flex item that stretches to full nav height, then centers the <a>
       vertically inside it. Without this, the inline-block <a> sits at
       the top of the list-item anonymous block, leaving visible space
       below the active border-bottom indicator.

       Legacy style.css inflates `.wp-block-group ul li` to font-size 1.125rem
       and unsets line-height — that enlarges the li and throws off the nav
       height. Force font-size/line-height back to match the anchor so the
       li's intrinsic height matches Condor. */
        li {
            display: flex;
            align-items: center;
            font-size: var(--wp--preset--font-size--medium);
            line-height: 1.6;
        }

        /* Legacy style.css: `.site-content li + li { padding-top: .5rem }`
       adds 8px top padding to every sibling li, breaking horizontal nav. */
        li + li {
            padding-top: 0;
        }

        /* Link styles — transparent state (white text)
       Uses .champ-jump-links (not :where()) so specificity beats
       theme.json-generated global link colors. */
        a {
            display: inline-block;
            padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
            color: rgba(255, 255, 255, 0.85);
            font-size: var(--wp--preset--font-size--medium);
            font-weight: 600;
            text-transform: none;
            text-decoration: none;
            letter-spacing: 0.02em;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            transition:
                color 0.2s ease,
                border-color 0.2s ease;

            &:hover {
                color: var(--wp--preset--color--white);
                border-bottom-color: var(--wp--preset--color--red);
            }

            &.is-active {
                color: var(--wp--preset--color--white);
                border-bottom-color: var(--wp--preset--color--red);
            }
        }
    }

    /* Backdrop-filter fallback */
    @supports not (backdrop-filter: blur(8px)) {
        .champ-jump-links {
            background: rgba(0, 43, 92, 0.92);
        }
    }

    /* ==========================================================================
   Schedule Section (.champ-schedule)
   ========================================================================== */

    .champ-schedule {
        background: var(--wp--preset--color--off-white);
        padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);

        .champ-schedule__inner {
            max-width: 1204px;
            margin: 0 auto;
        }

        .champ-schedule__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--wp--preset--spacing--50);

            @media (min-width: 768px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .champ-schedule__card {
            background: var(--wp--preset--color--white);
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: box-shadow 0.2s ease;

            &:hover {
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
            }
        }

        .champ-schedule__card-image {
            aspect-ratio: 16 / 9;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .champ-schedule__card-body {
            padding: var(--wp--preset--spacing--50);
        }

        .champ-schedule__card-title {
            font-family: var(--wp--preset--font-family--heading);
            font-size: var(--wp--preset--font-size--x-large);
            font-weight: 700;
            color: var(--wp--preset--color--blue);
            margin: 0 0 var(--wp--preset--spacing--20) 0;
        }

        .champ-schedule__card-meta {
            font-size: var(--wp--preset--font-size--small);
            color: var(--wp--preset--color--charcoal);
        }

        /* Schedule buttons — outline-blue */
        .wp-block-button__link {
            border: 1.5px solid var(--wp--preset--color--blue) !important;
            border-radius: 0 !important;
            background: transparent !important;
            color: var(--wp--preset--color--blue) !important;
            padding: 0.5rem 1.25rem !important;
            font-weight: 600;
            font-size: var(--wp--preset--font-size--xs);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            transition:
                background 0.2s ease,
                color 0.2s ease;

            &:hover {
                background: var(--wp--preset--color--blue) !important;
                color: var(--wp--preset--color--white) !important;
            }
        }
    }

    /* ==========================================================================
   Tickets Section (.champ-tickets) — Elevation on Atmosphere
   ========================================================================== */

    .champ-tickets {
        position: relative;
        background-image:
            linear-gradient(rgba(0, 43, 92, 0.55), rgba(0, 43, 92, 0.55)),
            linear-gradient(180deg, rgba(0, 15, 40, 0.15) 0%, rgba(0, 15, 40, 0.3) 100%),
            url("https://images.unsplash.com/photo-1459865264687-595d652de67e?w=1400&h=500&fit=crop&crop=center");
        background-size: cover, cover, cover;
        background-position:
            center,
            center,
            center top;
        background-repeat: no-repeat;
        background-blend-mode: color, multiply, normal;
        padding-block: var(--wp--preset--spacing--80);

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at center 40%, transparent 30%, rgba(0, 8, 24, 0.25) 100%);
            z-index: 0;
            pointer-events: none;
        }

        > * {
            position: relative;
            z-index: 1;
        }

        @media (max-width: 767px) {
            &::before {
                background: radial-gradient(ellipse at center 30%, rgba(0, 12, 30, 0.1) 0%, rgba(0, 12, 30, 0.35) 100%);
            }
        }
    }

    /* Tickets Inner + Grid */
    .champ-tickets__inner {
        max-width: 1204px;
        margin: 0 auto;
    }

    .champ-tickets__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--50);

        @media (min-width: 768px) {
            grid-template-columns: repeat(3, 1fr);
            align-items: center;
        }
    }

    /* Pricing Cards */
    .champ-tickets .champ-tickets__card {
        background: var(--wp--preset--color--white);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.15),
            0 12px 32px rgba(0, 0, 0, 0.1);
        text-align: left;
        transition:
            box-shadow 0.25s ease,
            transform 0.25s ease;

        &:hover {
            box-shadow:
                0 6px 16px rgba(0, 0, 0, 0.2),
                0 16px 40px rgba(0, 0, 0, 0.15);
        }
    }

    .champ-tickets__card-body {
        padding: var(--wp--preset--spacing--50);
        text-align: center;

        .wp-block-buttons {
            justify-content: center;
        }
    }

    .champ-tickets__card-title {
        font-family: var(--wp--preset--font-family--heading);
        font-size: var(--wp--preset--font-size--x-large);
        font-weight: 700;
        color: var(--wp--preset--color--blue);
        margin: 0 0 var(--wp--preset--spacing--10) 0;
    }

    .champ-tickets__card-price {
        font-family: var(--wp--preset--font-family--heading-condensed);
        font-style: italic;
        font-size: var(--wp--preset--font-size--4-x-large);
        font-weight: 800;
        color: var(--wp--preset--color--blue);
        line-height: 1;
        margin: 0 0 var(--wp--preset--spacing--20) 0;
    }

    /* Featured Card */
    .champ-tickets .champ-tickets__card--featured {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.2),
            0 24px 56px rgba(0, 0, 0, 0.18);
        z-index: 1;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(
                ellipse at 95% 95%,
                rgba(157, 21, 53, 0.12) 0%,
                rgba(177, 158, 124, 0.1) 30%,
                transparent 65%
            );
            pointer-events: none;
            z-index: 0;
        }

        > * {
            position: relative;
            z-index: 1;
        }

        &:hover {
            box-shadow:
                0 8px 20px rgba(0, 0, 0, 0.25),
                0 28px 64px rgba(0, 0, 0, 0.22);
            transform: translateY(-2px);
        }

        @media (min-width: 1024px) {
            transform: scale(1.04);

            &:hover {
                transform: scale(1.04) translateY(-2px);
            }
        }
    }

    .champ-tickets .champ-tickets__badge {
        display: inline-block;
        background: rgba(157, 21, 53, 0.1);
        color: var(--wp--preset--color--red);
        font-family: var(--wp--preset--font-family--heading);
        font-size: var(--wp--preset--font-size--xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.2em 0.65em;
        border-radius: 100px;
        margin-bottom: var(--wp--preset--spacing--20);
    }

    .champ-tickets .champ-tickets__hook {
        font-family: var(--wp--preset--font-family--body);
        font-style: italic;
        font-size: var(--wp--preset--font-size--small);
        opacity: 0.7;
        color: var(--wp--preset--color--charcoal);
        margin: 0 0 var(--wp--preset--spacing--30) 0;
    }

    .champ-tickets .champ-tickets__savings {
        font-size: var(--wp--preset--font-size--xs);
        color: var(--wp--preset--color--charcoal);
        opacity: 0.6;
        margin: calc(-1 * var(--wp--preset--spacing--20)) 0 var(--wp--preset--spacing--30) 0;
    }

    /* ==========================================================================
   Travel Section (.champ-travel) — Section Intro + Photo/Structured Content
   ========================================================================== */

    .champ-travel {
        --champ-neutral-200: #e8e4df;
        --champ-neutral-500: #8c8279;
        --champ-neutral-600: #6b6058;
        --champ-neutral-800: #342e28;

        background: var(--wp--preset--color--warm-white);
        padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);

        .champ-travel__inner {
            max-width: 1204px;
            margin: 0 auto;
        }

        /* --- Section Intro ---------------------------------------------------- */

        .champ-travel__intro {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: var(--wp--preset--spacing--60);
            align-items: end;
            padding-bottom: var(--wp--preset--spacing--50);
            border-bottom: 1px solid var(--champ-neutral-200);
            margin-bottom: var(--wp--preset--spacing--60);

            /* Event heading (eyebrow + condensed h2 via .champ-section-header)
           — lets the shared .champ-section-header treatment take over */
            .champ-section-header {
                margin-bottom: 0;

                /* Smaller fluid size because travel intro column is narrow
               (~469px), so the default clamp(2.5rem→3.5rem) wraps awkwardly */
                .wp-block-heading:where(h2) {
                    font-size: clamp(1.75rem, 2vw + 0.5rem, 2.5rem);
                    line-height: 1.05;
                }
            }

            /* Intro copy — exclude the eyebrow so .champ-section-header owns it */
            p:not(.champ-eyebrow) {
                font-family: var(--wp--preset--font-family--body);
                font-size: var(--wp--preset--font-size--medium);
                color: var(--champ-neutral-600);
                line-height: 1.6;
                margin: 0;
            }
        }

        /* --- Photo + Structured Content --------------------------------------- */

        .champ-travel__structured {
            display: grid;
            grid-template-columns: 2fr 3fr;
            gap: var(--wp--preset--spacing--60);
            align-items: start;
        }

        .champ-travel__photo {
            border-radius: 8px;
            overflow: hidden;

            img {
                width: 100%;
                height: auto;
                aspect-ratio: 3 / 2;
                object-fit: cover;
                display: block;
            }
        }

        .champ-travel__data {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
            margin: 0;
        }

        .champ-travel__data-label {
            font-family: var(--wp--preset--font-family--heading);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--wp--preset--color--blue);
            opacity: 0.6;
            margin: 0 0 0.375rem 0;
        }

        .champ-travel__data-value {
            font-family: var(--wp--preset--font-family--body);
            font-size: 0.9375rem;
            color: var(--champ-neutral-800);
            line-height: 1.55;
            margin: 0;

            a {
                color: var(--wp--preset--color--blue);
                text-decoration: underline;
                text-underline-offset: 2px;
                transition: color 0.15s ease;

                &:hover {
                    color: #001a3a;
                }
            }
        }

        .champ-travel__data-item--wide {
            grid-column: 1 / -1;
        }

        .champ-travel__hotel-note {
            font-size: var(--wp--preset--font-size--xs);
            font-style: italic;
            color: var(--champ-neutral-500);
            margin-top: 0.25rem;
        }

        /* --- Responsive ------------------------------------------------------- */

        @media (max-width: 767px) {
            .champ-travel__intro {
                grid-template-columns: 1fr;
                gap: var(--wp--preset--spacing--30);
            }

            .champ-travel__structured {
                grid-template-columns: 1fr;
            }

            .champ-travel__photo img {
                aspect-ratio: 16 / 9;
            }

            .champ-travel__data {
                grid-template-columns: 1fr;
            }
        }
    }

    /* ==========================================================================
   Watch Section (.champ-watch) — 3-Col White Cards on Photo BG
   ========================================================================== */

    .champ-watch {
        position: relative;
        background-image:
            linear-gradient(rgba(0, 43, 92, 0.55), rgba(0, 43, 92, 0.55)),
            url("https://images.unsplash.com/photo-1516118461620-03680a03bd27?w=1600&h=600&fit=crop&crop=bottom");
        background-size: cover, cover;
        background-position:
            center,
            center bottom;
        background-repeat: no-repeat;
        color: var(--wp--preset--color--white);
        padding-block: var(--wp--preset--spacing--80);

        .champ-watch__inner {
            max-width: 1204px;
            margin: 0 auto;
        }

        .champ-watch__card:hover {
            transform: translateY(-2px);
            box-shadow:
                0 6px 16px rgba(0, 0, 0, 0.2),
                0 16px 40px rgba(0, 0, 0, 0.15);
        }
    }

    /* 3-Col Channel Grid */
    .champ-watch__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--50);

        @media (min-width: 768px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .champ-watch__grid2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--50);

        @media (min-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* White Channel Cards */
    .champ-watch__card {
        background: var(--wp--preset--color--white);
        border-radius: 8px;
        padding: var(--wp--preset--spacing--60);
        text-align: center;
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.15),
            0 12px 32px rgba(0, 0, 0, 0.1);
        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;

        .wp-block-buttons {
            justify-content: center;
        }

        .wp-block-button__link {
            padding: 0.375rem 1rem;
            font-size: 0.6875rem;
        }
    }

    .wp-block-image.champ-watch__card-logo {
        margin: 0 auto var(--wp--preset--spacing--40) auto;

        img {
            height: 3.5em;
            max-width: 160px;
            margin: 0 auto;
            display: block;
            object-fit: contain;
        }
    }

    .champ-watch__card-desc {
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--small);
        color: var(--wp--preset--color--charcoal);
        line-height: 1.6;
        margin: 0 0 var(--wp--preset--spacing--40);
    }

    /* ==========================================================================
   Merchandise Section (.champ-merchandise) — Static Ad
   ========================================================================== */

    .champ-merchandise {
        background: var(--wp--preset--color--white);
        padding-block: var(--wp--preset--spacing--70);
    }

    .champ-merchandise__inner {
        max-width: 1204px;
        margin: 0 auto;

        .wp-block-image {
            margin: 0;

            img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 8px;
            }
        }
    }

    /* News cards — moved to news-cards.css */

    /* ==========================================================================
   Media Info Section (.champ-media-info) — Statement Split with Photo
   ========================================================================== */

    .champ-media-info {
        background: var(--wp--preset--color--off-white);
        padding-block: var(--wp--preset--spacing--80);

        .champ-media-info__inner {
            max-width: 1204px;
            margin: 0 auto;
        }
    }

    .champ-media-info__layout {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: var(--wp--preset--spacing--70);
        align-items: start;

        @media (max-width: 767px) {
            grid-template-columns: 1fr;
        }
    }

    .champ-media-info__photo {
        border-radius: 8px;
        overflow: hidden;

        img {
            width: 100%;
            display: block;
            aspect-ratio: 3 / 2;
            object-fit: cover;

            @media (max-width: 767px) {
                aspect-ratio: 16 / 9;
            }
        }
    }

    .champ-media-info__content p {
        font-size: var(--wp--preset--font-size--medium);
        color: var(--wp--preset--color--charcoal);
        line-height: 1.7;
        margin: 0 0 var(--wp--preset--spacing--50) 0;
    }

    .champ-media-info__contact {
        border-top: 1px solid var(--wp--preset--color--warm-gray);
        padding-top: var(--wp--preset--spacing--50);

        /* Scoped under parent to beat .champ-media-info__content p (0,1,1) */
        .champ-media-info__contact-name {
            font-family: var(--wp--preset--font-family--heading);
            font-weight: 700;
            font-size: var(--wp--preset--font-size--large);
            color: var(--wp--preset--color--blue);
            display: block;
            margin: 0 0 var(--wp--preset--spacing--10) 0;
        }

        .champ-media-info__contact-title {
            font-size: var(--wp--preset--font-size--small);
            opacity: 0.6;
            display: block;
            margin: 0 0 var(--wp--preset--spacing--30) 0;
        }

        .champ-media-info__contact-email {
            color: var(--wp--preset--color--red);
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 3px;
            display: block;
            margin: 0 0 var(--wp--preset--spacing--40) 0;
        }
    }

    .champ-media-info__contact-email:hover {
        color: var(--wp--preset--color--bright-red);
    }

    /* ==========================================================================
   Past Winners Section (.champ-past-winners) — Photo-banner overlap
   ========================================================================== */

    .champ-past-winners {
        background: var(--bg-gradient-reverse);
        padding-block: var(--wp--preset--spacing--80);

        .champ-past-winners__inner {
            max-width: 1204px;
            margin: 0 auto;
        }

        /* Photo banner — cinematic wide shot */
        .champ-past-winners__photo-banner {
            width: 100%;
            aspect-ratio: 4 / 1;
            overflow: hidden;
            border-radius: 8px 8px 0 0;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center 30%;
            }
        }

        /* Table card — overlaps photo upward */
        .champ-past-winners__table-wrap {
            position: relative;
            margin-top: -3rem;
            margin-inline: var(--wp--preset--spacing--50);
            border-radius: 8px;
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.1),
                0 1px 4px rgba(0, 0, 0, 0.06);
            background: var(--wp--preset--color--white);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* CTA below table */
        .champ-past-winners__cta {
            text-align: center;
            margin-top: var(--wp--preset--spacing--50);
        }
    }

    /* Table selectors use full specificity to beat WP core .wp-block-table defaults */
    .champ-past-winners .champ-past-winners__table,
    .champ-past-winners .wp-block-table table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--wp--preset--font-size--small);
    }

    .champ-past-winners .champ-past-winners__table thead,
    .champ-past-winners .wp-block-table thead {
        background: transparent;
    }

    .champ-past-winners .champ-past-winners__table th,
    .champ-past-winners .wp-block-table th {
        padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
        text-align: left;
        font-family: var(--wp--preset--font-family--heading);
        font-weight: 700;
        font-size: var(--wp--preset--font-size--small);
        letter-spacing: 0.02em;
        color: var(--wp--preset--color--blue);
        border: none;
        border-bottom: 1.5px solid var(--wp--preset--color--blue);
    }

    .champ-past-winners .champ-past-winners__table td,
    .champ-past-winners .wp-block-table td {
        padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
        border: none;
        border-bottom: 1px solid var(--wp--preset--color--light-gray);
        color: var(--wp--preset--color--charcoal);
        font-size: var(--wp--preset--font-size--xs);
    }

    .champ-past-winners .wp-block-table tbody tr:nth-child(even),
    .champ-past-winners .champ-past-winners__table tbody tr:nth-child(even) {
        background: var(--wp--preset--color--off-white);
    }

    .champ-past-winners .wp-block-table tbody tr:hover,
    .champ-past-winners .champ-past-winners__table tbody tr:hover {
        background: var(--wp--preset--color--light-gray);
    }

    /* Divider between past-winners and sponsors */
    .champ-section-divider {
        max-width: 1204px;
        margin: 0 auto;
        border: none;
        border-top: 1px solid var(--wp--preset--color--light-gray);
    }

    /* ==========================================================================
   Sponsors Section (.champ-sponsors) — Tiered Flex Layout
   ========================================================================== */

    .champ-sponsors {
        background: var(--wp--preset--color--warm-white);
        padding-block: var(--wp--preset--spacing--70);
        position: relative;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0.035;
            pointer-events: none;
            background-image:
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 11px,
                    rgba(0, 0, 0, 0.15) 11px,
                    rgba(0, 0, 0, 0.15) 12px
                ),
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 11px,
                    rgba(0, 0, 0, 0.15) 11px,
                    rgba(0, 0, 0, 0.15) 12px
                );
        }

        > * {
            position: relative;
            z-index: 1;
        }

        .champ-sponsors__inner {
            max-width: 1204px;
            margin: 0 auto;
        }
    }

    .champ-sponsors__tier {
        margin-bottom: var(--wp--preset--spacing--60);

        &:last-of-type {
            margin-bottom: var(--wp--preset--spacing--50);
        }
    }

    .champ-sponsors__tier-label {
        font-family: var(--wp--preset--font-family--heading);
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--wp--preset--color--blue);
        opacity: 0.5;
        text-align: center;
        margin: 0 0 var(--wp--preset--spacing--40);
    }

    .champ-sponsors__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--wp--preset--spacing--70);
        align-items: center;

        .wp-block-image {
            margin: 0;

            img {
                max-width: 100%;
                max-height: 48px;
                width: auto;
                height: auto;
                object-fit: contain;
                filter: grayscale(100%);
                opacity: 0.5;
                transition:
                    filter 0.3s ease,
                    opacity 0.3s ease;
            }

            a:hover img {
                filter: grayscale(0%);
                opacity: 1;
            }
        }
    }

    .champ-sponsors__cta {
        text-align: center;
    }

    /* ==========================================================================
   Highlights Section (.champ-highlights) — Vertical Shorts Grid
   ========================================================================== */

    .champ-highlights {
        position: relative;
        background-image:
            linear-gradient(rgba(0, 43, 92, 0.55), rgba(0, 43, 92, 0.55)),
            url("https://usaultimate.org/wp-content/uploads/2020/05/TCTDisc_Hero.jpg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat;
        color: var(--wp--preset--color--white);
        padding-block: var(--wp--preset--spacing--70);

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at center 40%, transparent 30%, rgba(0, 8, 24, 0.25) 100%);
            z-index: 0;
            pointer-events: none;
        }

        > * {
            position: relative;
            z-index: 1;
        }

        .champ-highlights__inner {
            max-width: 1204px;
            margin: 0 auto;
        }

        /* Play button (40px — smaller for narrow vertical cards) */
        .champ-highlights__play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 2;

            &::before {
                content: "";
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.85);
                transition: transform 0.2s ease;
            }

            &::after {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 7px 0 7px 12px;
                border-color: transparent transparent transparent var(--wp--preset--color--blue);
                margin-left: 2px;
            }
        }

        .champ-highlights__card:hover .champ-highlights__play::before {
            transform: scale(1.1);
        }
    }

    /* Rail wrapper — positions prev/next nav buttons over the scrolling grid.
   `.champ-highlights__grid` remains the scroll container; this wrapper just
   provides a positioning context for the overlay arrows. */
    .champ-highlights__rail {
        position: relative;
    }

    /* Prev/Next nav — subtle semi-transparent circular buttons overlaid on the
   rail, vertically centered on the card thumbnails. Hidden on mobile where
   native touch-swipe is the natural interaction. The `.is-disabled` class
   is toggled by JS at the scroll boundaries. */
    .champ-highlights__nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;

        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.35);
        color: var(--wp--preset--color--white);
        cursor: pointer;
        transition:
            background 0.2s ease,
            opacity 0.2s ease,
            transform 0.2s ease;

        svg {
            width: 22px;
            height: 22px;
            display: block;
        }

        &:hover,
        &:focus-visible {
            background: rgba(0, 0, 0, 0.6);
            outline: none;
        }

        &:focus-visible {
            box-shadow: 0 0 0 2px var(--wp--preset--color--white);
        }

        &.is-disabled {
            opacity: 0;
            pointer-events: none;
        }
    }

    .champ-highlights__nav--prev {
        left: calc(var(--wp--preset--spacing--40) * -1);
    }

    .champ-highlights__nav--next {
        right: calc(var(--wp--preset--spacing--40) * -1);
    }

    /* On mobile the .champ-highlights__grid bleeds past the section gutter
   (margin-inline: -spacing--60), so negative-offset arrows would fall off
   the viewport. Tuck them just inside the rail wrapper instead, overlaying
   the card edges — a familiar mobile-carousel pattern. */
    @media (max-width: 767px) {
        .champ-highlights__nav--prev {
            left: var(--wp--preset--spacing--20);
        }

        .champ-highlights__nav--next {
            right: var(--wp--preset--spacing--20);
        }

        /* The rail is ~150vw tall on mobile (9/16 aspect, 85vw wide cards), so
       the default `top: 50%` places the nav ~75vw below the rail's top —
       well below the fold when the section first enters the viewport.
       Anchor the button center at 28vh instead so the arrows sit visually
       over the first card thumbnail as soon as the rail scrolls into view.
       `translateY(-50%)` from the base rule still applies. Tradeoff: once
       the user scrolls past the first card the arrows scroll out with the
       rail (they're still absolute, not sticky) — acceptable vs. the
       "arrows invisible on first view" failure we're fixing. */
        .champ-highlights__nav {
            top: 28vh;
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.5);

            svg {
                width: 20px;
                height: 20px;
            }
        }
    }

    /* Horizontal scroll rail (8–12 cards, snap-paginated)
   Replaces the 4-up grid. Cards are fixed-width flex children so
   `overflow-x: auto` produces a real scrollable rail. Card width is
   tuned so ~4 cards fit on desktop with a peek of the next, giving a
   visible scroll affordance without a scrollbar. Mobile uses ~85vw so
   one full card + sliver of the next is visible. */
    .champ-highlights__grid {
        /* Local tokens — change in one place if visual rhythm needs tuning */
        --rail-gap: var(--wp--preset--spacing--50);
        --rail-card-width: calc((100% - (var(--rail-gap) * 3.5)) / 4.25);

        display: flex;
        flex-wrap: nowrap;
        gap: var(--rail-gap);

        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        /* Hide scrollbar while keeping scroll functional */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/old Edge */

        &::-webkit-scrollbar {
            display: none; /* Chrome/Safari */
            width: 0;
            height: 0;
        }

        @media (max-width: 1023px) {
            --rail-gap: var(--wp--preset--spacing--40);
            /* Show ~3 cards + sliver on tablet */
            --rail-card-width: calc((100% - (var(--rail-gap) * 2.5)) / 3.25);
        }

        @media (max-width: 767px) {
            --rail-gap: var(--wp--preset--spacing--30);
            /* One full card + sliver on mobile (~85vw) */
            --rail-card-width: 85vw;

            /* Break out of the .champ-highlights section's horizontal padding
           (set globally on `section[class*="champ-"]`) so the rail bleeds
           to the viewport edges. Then use scroll-padding-left so the
           first card aligns with the section gutter when snapped, and
           padding-right so the last card can scroll to the edge. */
            margin-inline: calc(var(--wp--preset--spacing--60) * -1);
            padding-inline: var(--wp--preset--spacing--60);
            scroll-padding-inline: var(--wp--preset--spacing--60);
        }
    }

    /* Vertical video card — fixed-width flex item with snap alignment */
    .champ-highlights__card {
        position: relative;
        display: block;
        text-decoration: none;
        color: inherit;
        border-radius: 8px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.3);

        /* Rail sizing: don't grow, don't shrink, basis from container token */
        flex: 0 0 var(--rail-card-width, 280px);
        min-width: 0;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .champ-highlights__thumb {
        position: relative;
        aspect-ratio: 9 / 16;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.85);
            transition:
                filter 0.3s ease,
                transform 0.3s ease;
        }
    }

    .champ-highlights__card:hover .champ-highlights__thumb img {
        filter: brightness(1.05);
        transform: scale(1.03);
    }

    /* Gradient info overlay at bottom */
    .champ-highlights__card-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
        z-index: 2;
    }

    .champ-highlights__card-title {
        font-family: var(--wp--preset--font-family--heading);
        font-weight: 700;
        font-size: 0.8125rem;
        line-height: 1.3;
        color: var(--wp--preset--color--white);
        margin: 0;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }

    .champ-highlights__card-duration {
        font-size: var(--wp--preset--font-size--xs);
        color: rgba(255, 255, 255, 0.6);
        margin: var(--wp--preset--spacing--10) 0 0 0;
    }

    /* View All CTA */
    .champ-highlights__cta {
        text-align: center;
        margin-top: var(--wp--preset--spacing--60);
    }

    /* ==========================================================================
   Native Block Companion Selectors
   wp:image figure wrappers, stretched-link, list resets
   ========================================================================== */

    /* Jump links — reset wp:list defaults.
   WP core injects `margin-block` on the list and `margin-top` on `li + li`
   via `:root :where(.wp-block-list li + li)` at (0,0,0) specificity.
   Both must be zeroed so the flex layout controls vertical rhythm instead. */
    .champ-jump-links .wp-block-list {
        list-style: none;
        padding: 0;
        margin-block: 0;
    }

    .champ-jump-links .wp-block-list li + li {
        margin-top: 0;
    }

    /* Past winners — reset wp:image and wp:table figure margins */
    .champ-past-winners__photo-banner.wp-block-image {
        margin: 0;
    }

    .champ-past-winners__table-wrap .wp-block-table {
        margin: 0;
    }

    /* Media info — photo figure wrapper margin reset */
    .champ-media-info__photo.wp-block-image {
        margin: 0;
    }

    /* Media info — contact email link inherits from paragraph wrapper */
    .champ-media-info__contact-email a {
        color: inherit;
        text-decoration: inherit;
    }

    /* Highlights — image figure wrapper inside thumb */
    .champ-highlights__thumb .wp-block-image {
        margin: 0;
        height: 100%;

        img {
            height: 100%;
        }
    }

    /* Highlights — stretched link for clickable cards */
    .champ-highlights__card-title a {
        color: inherit;
        text-decoration: none;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 10;
        }
    }

    /* ==========================================================================
   Schedule — Monospaced Data Polish
   ========================================================================== */

    /* ==========================================================================
   Block Editor Overrides
   Styles that adjust for the editor context where the page template
   wrapper (.championship-content) and site header don't exist.
   ========================================================================== */

    /* Hero — use a sensible editor height instead of viewport calc */
    .editor-styles-wrapper :where(.champ-hero) {
        min-height: 60vh !important;
        width: auto;
        margin-left: 0;
    }

    /* Jump links — no sticky or negative overlap in editor */
    .editor-styles-wrapper :where(.champ-jump-links) {
        position: relative;
        margin-top: -48px;
        top: auto;
    }

    /* Jump links — prevent editor default link colors from overriding white */
    .editor-styles-wrapper :where(.champ-jump-links) a {
        color: rgba(255, 255, 255, 0.85) !important;

        &:hover,
        &:focus {
            color: var(--wp--preset--color--white) !important;
        }
    }

    /* --- Highlights: Editor card layout ---
   The editor wraps each child block in its own element, which breaks
   the absolute positioning used for the card-info overlay and play button.
   Fix: use CSS grid overlap so card-info layers over the thumbnail. */

    /* Card — grid overlap strategy instead of relying on absolute positioning */
    .editor-styles-wrapper .champ-highlights__card {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;

        > * {
            grid-column: 1;
        }
    }

    /* Thumb fills the entire card area */
    .editor-styles-wrapper .champ-highlights__thumb {
        grid-row: 1 / -1;
    }

    /* Card info overlaps the bottom of the card via grid overlap */
    .editor-styles-wrapper .champ-highlights__card-info {
        grid-row: 2;
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        z-index: 2;
    }

    /* Play button — hide in editor. The CSS pseudo-element circle + triangle
   can't render correctly because the editor's block wrappers break the
   40px fixed sizing and border-radius. It's decorative, not editable. */
    .editor-styles-wrapper .champ-highlights__play {
        display: none !important;
    }

    /* --- Highlights: Editor rail layout ---
   The frontend rail uses flex + horizontal scroll + scroll-snap. In the
   editor, each block is wrapped, scroll-snap doesn't compose with the
   editor's selection UI, and editors need to see all cards at once to
   reorder them. Drop back to a wrap-friendly flex grid with no scroll. */
    .editor-styles-wrapper .champ-highlights__grid {
        overflow: visible !important;
        flex-wrap: wrap !important;
        scroll-snap-type: none !important;
    }

    .editor-styles-wrapper .champ-highlights__card {
        /* Match the legacy 4-up editor experience */
        flex: 0 1 calc((100% - var(--wp--preset--spacing--50) * 3) / 4) !important;
        scroll-snap-align: none !important;
    }
} /* end .championship-content specificity wrapper */