{{-- Shared split-hero layout (Highlights / Staff / Players) --}}
<style>
    .highlight-hero-split {
        background: #fff;
    }
    .highlight-hero-split-row {
        min-height: 0;
    }
    .highlight-hero-aside {
        background: linear-gradient(165deg, #f8fcff 0%, #e8f6ff 38%, #f1f5f9 100%);
        border-color: rgba(2, 132, 199, 0.08) !important;
    }
    @media (min-width: 992px) {
        .highlight-hero-aside {
            border-right: 1px solid rgba(2, 132, 199, 0.12) !important;
        }
    }
    .highlight-hero-aside-inner {
        max-width: 32rem;
    }
    @media (min-width: 992px) {
        .highlight-hero-aside-inner {
            margin-left: auto;
            padding-right: 0.5rem !important;
        }
    }
    .highlight-hero-badge {
        width: fit-content;
        background: rgba(255, 255, 255, 0.92);
        color: #0284c7;
        border: 1px solid rgba(2, 132, 199, 0.2);
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    }
    .highlight-hero-heading {
        font-size: clamp(1.5rem, 3.2vw, 2.15rem);
        line-height: 1.22;
        letter-spacing: -0.025em;
    }
    .highlight-hero-date-icon {
        color: #0284c7;
    }
    .highlight-hero-deck {
        font-size: clamp(0.95rem, 1.6vw, 1.05rem);
        line-height: 1.55;
    }
    .highlight-hero-scroll {
        color: #0369a1;
    }
    .highlight-hero-scroll:hover {
        color: #0284c7;
    }
    .highlight-hero-scroll:focus-visible {
        outline: 2px solid rgba(2, 132, 199, 0.45);
        outline-offset: 3px;
        border-radius: 6px;
    }
    .highlight-hero-scroll--btn {
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        text-align: left;
    }
    .highlight-hero-visual {
        align-items: center;
        justify-content: center;
        min-height: 200px;
        background: linear-gradient(165deg, #f8fcff 0%, #e8f6ff 38%, #f1f5f9 100%);
        padding: clamp(0.65rem, 2vw, 1.25rem);
    }
    @media (min-width: 992px) {
        .highlight-hero-visual {
            min-height: 0;
        }
    }
    .highlight-hero-figure--cinema {
        width: min(100%, calc((16 / 9) * min(42vh, 340px)));
        max-width: 100%;
        aspect-ratio: 16 / 9;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 0.35rem;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    }
    @media (min-width: 992px) {
        .highlight-hero-figure--cinema {
            width: min(100%, calc((16 / 9) * min(38vh, 320px)));
        }
    }
    .highlight-hero-figure--fill {
        min-height: 220px;
        flex: 1 1 auto;
        align-self: stretch;
    }
    @media (min-width: 992px) {
        .highlight-hero-figure--fill {
            min-height: min(52vh, 420px);
        }
    }
    .highlight-hero-photo {
        object-position: center 35%;
    }
    .highlight-hero-play {
        position: absolute;
        inset: 0;
        z-index: 2;
        cursor: pointer;
        border: none;
        appearance: none;
        padding: 0;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.25) 100%);
        pointer-events: auto;
    }
    .highlight-hero-play:hover .highlight-hero-play-btn,
    .highlight-hero-play:focus-visible .highlight-hero-play-btn {
        transform: scale(1.06);
        background: #0369a1;
        color: #fff;
    }
    .highlight-hero-play:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -4px;
    }
    .highlight-hero-play-btn {
        width: clamp(3.25rem, 10vw, 4.25rem);
        height: clamp(3.25rem, 10vw, 4.25rem);
        background: #0284c7;
        color: #fff;
        font-size: clamp(1.5rem, 5vw, 2rem);
        padding-left: 0.15em;
        box-shadow: 0 8px 24px rgba(2, 132, 199, 0.45);
        transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    }
</style>