/* ==========================================================================
   BLOCK: AWARDS (public awards.html)
   Four scopes:
   - awards-hero    : full-viewport ceremony film + title + CTAs
   - awards-winners : ROLL OF HONOUR - a 9-slide CSS-only carousel of the
                      2025 winners. Same clock mechanics as the homepage
                      hero (staggered keyframe delays, hover/focus pause,
                      dots on the same timeline) but a 36s cycle: 9 x 4s.
   - awards-cats    : the 10 category grid, ghost numerals per the
                      design-system numeral treatment
   - awards-facts   : eligibility cards + committee + entry CTAs
   No JavaScript anywhere. All type container-driven.
   ========================================================================== */

/* ------------------------------------------------------------- HERO ----- */
@scope (.block-awards-hero) {
    :scope {
        display: grid;
        grid-template: 1fr / 1fr;
        background: var(--bg-contrast);
        color: var(--text-inverse);
        min-height: calc(100vh - var(--header-h));
        min-height: calc(100dvh - var(--header-h));
        overflow: clip;
        container-type: inline-size;
        container-name: awardshero;
    }
    :scope > * { grid-area: 1 / 1; }

    .hero-media {
        inline-size: 100%;
        block-size: 0;
        min-block-size: 100%;
        object-fit: cover;
        display: block;
        opacity: 0.7;
    }
    .hero-scrim {
        background: linear-gradient(to top, rgba(8,8,8,0.95) 10%, rgba(8,8,8,0.3) 65%);
        z-index: 1;
    }

    .hero-tag {
        z-index: 2;
        justify-self: end;
        align-self: start;
        font-weight: 100;
        font-size: clamp(1.05rem, 1.8cqw, 1.6rem);
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.85);
        margin-block-start: clamp(24px, 3.5cqw, 48px);
        margin-inline-end: max(var(--space-xs), calc((100cqw - var(--content-width)) / 2 + var(--space-xs)));
    }

    .hero-content {
        z-index: 2;
        align-self: end;
        max-width: var(--content-width);
        margin-inline: auto;
        inline-size: 100%;
        padding: var(--space-sm) var(--space-xs);
    }

    h1 {
        font-weight: 100;
        font-size: clamp(3.5rem, 11cqw, 10rem);
        line-height: 0.88;
        letter-spacing: -0.05em;
        overflow-wrap: break-word;
    }
    h1 strong { font-weight: 900; display: block; }

    .hero-desc {
        margin-block-start: 20px;
        max-inline-size: 62ch;
        font-weight: 300;
        font-size: clamp(1rem, 1.2cqw, 1.2rem);
        line-height: 1.7;
        opacity: 0.85;
    }

    .hero-meta {
        margin-block-start: var(--space-sm);
        border-block-start: 1px solid rgba(255,255,255,0.3);
        padding-block-start: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: clamp(24px, 4vw, 60px);
    }
    .hero-meta .kicker { opacity: 0.6; margin-block-end: 6px; }
    .hero-meta sup { font-size: 0.6em; font-weight: 700; }
    .hero-actions {
        margin-inline-start: auto;
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }
    .hero-actions .btn { white-space: nowrap; }
    .btn-outline { color: #fff; }

    @media (prefers-reduced-motion: reduce) {
        video.hero-media { display: none; }
    }
}

/* ---------------------------------------------------- ROLL OF HONOUR ---- */
@scope (.block-awards-winners) {
    :scope {
        display: grid;
        grid-template: auto 1fr / 1fr;
        background: var(--bg-contrast);
        color: var(--text-inverse);
        overflow: clip;
        container-type: inline-size;
        container-name: honour;
        min-block-size: clamp(480px, 60cqw, 720px);
    }

    /* montage behind everything, pulled far back */
    .honour-bg {
        grid-area: 1 / 1 / -1 / -1;
        inline-size: 100%;
        block-size: 0;
        min-block-size: 100%;
        object-fit: cover;
        display: block;
        opacity: 0.22;
        filter: grayscale(60%);
    }
    .honour-scrim {
        grid-area: 1 / 1 / -1 / -1;
        background: linear-gradient(to top, rgba(8,8,8,0.9), rgba(8,8,8,0.2));
    }

    .honour-head {
        grid-area: 1 / 1;
        z-index: 1;
        max-width: var(--content-width);
        margin-inline: auto;
        inline-size: 100%;
        padding: var(--space-md) var(--space-xs) 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
    }
    .honour-head h2 {
        font-weight: 100;
        font-size: clamp(2rem, 4.5cqw, 3.6rem);
        letter-spacing: -0.03em;
    }
    .honour-head h2 strong { font-weight: 900; }
    .honour-head .kicker { color: var(--accent-lime); }

    /* ------------------------------------------------ the 9 slides ----- */
    .honour-slides {
        grid-area: 2 / 1;
        z-index: 1;
        display: grid;
        grid-template: 1fr / 1fr;
    }
    .honour-slide {
        grid-area: 1 / 1;
        display: grid;
        align-content: center;
        max-width: var(--content-width);
        margin-inline: auto;
        inline-size: 100%;
        padding: var(--space-sm) var(--space-xs) calc(var(--space-sm) + 40px);
        opacity: 0;
        animation: awards-cycle 36s infinite;
    }
    .honour-slide:nth-child(1) { animation-delay: 0s; }
    .honour-slide:nth-child(2) { animation-delay: 4s; }
    .honour-slide:nth-child(3) { animation-delay: 8s; }
    .honour-slide:nth-child(4) { animation-delay: 12s; }
    .honour-slide:nth-child(5) { animation-delay: 16s; }
    .honour-slide:nth-child(6) { animation-delay: 20s; }
    .honour-slide:nth-child(7) { animation-delay: 24s; }
    .honour-slide:nth-child(8) { animation-delay: 28s; }
    .honour-slide:nth-child(9) { animation-delay: 32s; }

    /* 4s window of a 36s cycle (11.1%), 0.55s fades */
    @keyframes awards-cycle {
        0%    { opacity: 0; z-index: 1; }
        1.5%  { opacity: 1; z-index: 2; }
        11.1% { opacity: 1; z-index: 2; }
        13%   { opacity: 0; z-index: 1; }
        100%  { opacity: 0; z-index: 1; }
    }

    .win-cat {
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.22em;
        color: var(--accent-lime);
        margin-block-end: 18px;
    }
    .win-title {
        font-weight: 900;
        font-size: clamp(2.4rem, 7cqw, 6rem);
        line-height: 0.95;
        letter-spacing: -0.03em;
        overflow-wrap: break-word;
    }
    .win-team {
        margin-block-start: 16px;
        font-weight: 100;
        font-size: clamp(1.1rem, 2.2cqw, 1.8rem);
        letter-spacing: 0.02em;
        color: rgba(255, 255, 255, 0.85);
    }

    /* dots on the same 36s clock */
    .honour-dots {
        grid-area: 2 / 1;
        z-index: 2;
        align-self: end;
        justify-self: start;
        display: flex;
        gap: 10px;
        pointer-events: none;
        margin-inline-start: max(var(--space-xs), calc((100cqw - var(--content-width)) / 2 + var(--space-xs)));
        margin-block-end: clamp(20px, 3cqw, 34px);
    }
    .honour-dots span {
        inline-size: 10px;
        block-size: 10px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.45);
        animation: awards-dot 36s infinite;
    }
    .honour-dots span:nth-child(1) { animation-delay: 0s; }
    .honour-dots span:nth-child(2) { animation-delay: 4s; }
    .honour-dots span:nth-child(3) { animation-delay: 8s; }
    .honour-dots span:nth-child(4) { animation-delay: 12s; }
    .honour-dots span:nth-child(5) { animation-delay: 16s; }
    .honour-dots span:nth-child(6) { animation-delay: 20s; }
    .honour-dots span:nth-child(7) { animation-delay: 24s; }
    .honour-dots span:nth-child(8) { animation-delay: 28s; }
    .honour-dots span:nth-child(9) { animation-delay: 32s; }
    @keyframes awards-dot {
        0%    { background: transparent; border-color: rgba(255,255,255,0.45); }
        1.5%  { background: var(--accent-lime); border-color: var(--accent-lime); }
        11.1% { background: var(--accent-lime); border-color: var(--accent-lime); }
        13%   { background: transparent; border-color: rgba(255,255,255,0.45); }
        100%  { background: transparent; border-color: rgba(255,255,255,0.45); }
    }

    /* stop on hover / keyboard focus */
    :scope:hover .honour-slide,
    :scope:focus-within .honour-slide,
    :scope:hover .honour-dots span,
    :scope:focus-within .honour-dots span {
        animation-play-state: paused;
    }

    @media (prefers-reduced-motion: reduce) {
        .honour-slide, .honour-dots span { animation: none; }
        .honour-slide:first-child { opacity: 1; z-index: 2; }
        .honour-dots span:first-child {
            background: var(--accent-lime);
            border-color: var(--accent-lime);
        }
    }
}

/* ------------------------------------------------------- CATEGORIES ----- */
@scope (.block-awards-cats) {
    :scope {
        padding-block: var(--space-lg);
        container-type: inline-size;
        container-name: awardcats;
    }

    .cats-head { max-width: 70ch; margin-block-end: var(--space-md); }
    .cats-head h2 {
        font-weight: 100;
        font-size: var(--fs-h2);
        letter-spacing: -0.03em;
        margin-block-start: 12px;
    }
    .cats-head h2 strong { font-weight: 900; }
    .cats-head p {
        margin-block-start: 16px;
        font-weight: 300;
        font-size: clamp(1rem, 1.15cqw, 1.15rem);
        line-height: 1.75;
        color: var(--text-secondary);
    }

    .cats-grid {
        display: grid;
        gap: clamp(20px, 2.4cqw, 36px);
        grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    }

    .cat-card {
        border-block-start: 2px solid var(--text-primary);
        padding-block: clamp(20px, 2cqw, 30px) 10px;
        display: grid;
        align-content: start;
        gap: 12px;
        transition: translate 0.4s var(--ease-lux);
    }
    .cat-card:hover { translate: 0 -8px; }

    /* ------------------------------------------- SUBGRID ALIGNMENT --
       Each card spans four parent rows (numeral / title / description /
       link) and subgrids onto them, so every row of cards shares
       baselines - a two-line title or description pushes the whole row,
       not just its own card, and the PAST WINNERS links line up. */
    @supports (grid-template-rows: subgrid) {
        .cats-grid { grid-auto-rows: auto; }
        .cat-card {
            grid-row: span 4;
            grid-template-rows: subgrid;
            row-gap: 12px;               /* card-internal rhythm, not the
                                            parent's inter-card gap */
        }
        .cat-card .cat-link { align-self: end; }
    }

    .cat-num {
        font-weight: 900;
        font-size: clamp(2.6rem, 3.4cqw, 4rem);
        line-height: 1;
        color: #f0f0f0;
        color: light-dark(#f0f0f0, var(--accent-lime));
        transition: color 0.3s;
    }
    .cat-card:hover .cat-num { color: var(--accent-lime); }

    .cat-card h3 {
        font-weight: 800;
        font-size: clamp(1.15rem, 1.5cqw, 1.4rem);
        letter-spacing: -0.01em;
    }
    .cat-card p {
        font-weight: 300;
        font-size: 0.95rem;
        line-height: 1.7;
        color: var(--text-secondary);
    }
    .cat-card .cat-link {
        margin-block-start: 6px;
        font-size: 0.75rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--accent-ink);
    }
    .cat-card .cat-link::after {
        content: " \2192";
        transition: margin-inline-start 0.3s;
    }
    .cat-card:hover .cat-link::after { margin-inline-start: 6px; }
}

/* ------------------------------------------------------ ENTRY FACTS ----- */
@scope (.block-awards-facts) {
    :scope {
        padding-block: var(--space-lg);
        container-type: inline-size;
        container-name: awardfacts;
    }

    .facts-head { max-width: 70ch; margin-block-end: var(--space-sm); }
    .facts-head h2 {
        font-weight: 100;
        font-size: var(--fs-h2);
        letter-spacing: -0.03em;
        margin-block-start: 12px;
    }
    .facts-head h2 strong { font-weight: 900; }

    .facts-row {
        display: grid;
        gap: clamp(16px, 2cqw, 26px);
        margin-block: clamp(28px, 4cqw, 56px);
    }
    @container awardfacts (width >= 820px) {
        .facts-row { grid-template-columns: repeat(3, 1fr); }
    }
    .facts-row article {
        background: light-dark(#f7f7f7, #101010);
        border-inline-start: 3px solid var(--accent-lime);
        padding: clamp(22px, 3cqw, 40px);
        display: grid;
        gap: 12px;
        align-content: start;
    }
    .facts-row h3 {
        color: var(--text-primary);
        font-size: clamp(0.98rem, 1.1cqw, 1.1rem);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .facts-row p {
        font-weight: 400;
        font-size: clamp(1rem, 1.1cqw, 1.08rem);
        color: var(--text-secondary);
        line-height: 1.75;
    }
    .facts-row a { color: var(--accent-ink); font-weight: 700; }

    .facts-committee {
        max-width: 76ch;
        font-weight: 300;
        font-size: clamp(1rem, 1.15cqw, 1.15rem);
        line-height: 1.8;
        color: var(--text-secondary);
    }

    .facts-actions {
        margin-block-start: clamp(24px, 3cqw, 44px);
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }
}