/* ==========================================================================
   BLOCK: AWARDS SUB-PAGES (public)
   Three scopes sharing this module:
   - entry-guide : the "write a winning entry" editorial - basics cards +
                   the seven judging criteria, each with its lime
                   "The judge asks" pull-quote. Criteria cards subgrid
                   onto shared rows.
   - judge-roster: chair feature + the full judging committee with
                   photography and biographies.
   - honour-roll : a category's past winners as a year timeline, current
                   winner featured. Rows subgrid for alignment.
   Page heroes come from block-page-head (shared).
   ========================================================================== */

/* ------------------------------------------------------ ENTRY GUIDE ----- */
@scope (.block-entry-guide) {
    :scope {
        padding-block: var(--space-lg);
        container-type: inline-size;
        container-name: guide;
    }

    .guide-lede {
        max-width: 76ch;
        font-weight: 300;
        font-size: clamp(1.05rem, 1.3cqw, 1.25rem);
        line-height: 1.8;
        color: var(--text-secondary);
    }
    .guide-lede strong { color: var(--text-primary); font-weight: 700; }

    /* the three practical basics - lime-edged cards */
    .guide-basics {
        display: grid;
        gap: clamp(16px, 2cqw, 26px);
        margin-block: clamp(28px, 4cqw, 56px);
    }
    @container guide (width >= 820px) {
        .guide-basics { grid-template-columns: repeat(3, 1fr); }
    }
:scope.is-alt .guide-basics article { background: #fff; }
    @supports (color: light-dark(#000, #fff)) {
        :scope.is-alt .guide-basics article { background: light-dark(#fff, #161616); }
    }
    .guide-basics 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;
    }
    .guide-basics h3 {
        color: var(--text-primary);
        font-size: clamp(0.98rem, 1.1cqw, 1.1rem);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .guide-basics p, .guide-basics li {
        font-weight: 400;
        font-size: clamp(0.98rem, 1.05cqw, 1.05rem);
        color: var(--text-secondary);
        line-height: 1.7;
    }
    .guide-basics ul { display: grid; gap: 8px; }
    .guide-basics li { padding-inline-start: 18px; position: relative; }
    .guide-basics li::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0.62em;
        inline-size: 7px;
        block-size: 7px;
        background: var(--accent-lime);
    }
    .guide-basics strong { color: var(--text-primary); }
    .guide-basics a { color: var(--accent-ink); font-weight: 700; }

    /* ------------------------------- the seven judging criteria ------- */
    .criteria-head { max-width: 70ch; margin-block: var(--space-md) var(--space-sm); }
    .criteria-head h2 {
        font-weight: 100;
        font-size: var(--fs-h2);
        letter-spacing: -0.03em;
        margin-block-start: 12px;
    }
    .criteria-head h2 strong { font-weight: 900; }

    .criteria-grid {
        display: grid;
        gap: clamp(20px, 2.4cqw, 36px);
        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    }
    .criterion {
        border-block-start: 2px solid var(--text-primary);
        padding-block-start: clamp(20px, 2cqw, 30px);
        display: grid;
        gap: 12px;
        align-content: start;
    }
    .criterion .c-num {
        font-weight: 900;
        font-size: clamp(2.4rem, 3cqw, 3.6rem);
        line-height: 1;
        color: #f0f0f0;
        color: light-dark(#f0f0f0, var(--accent-lime));
        transition: color 0.3s;
    }
    .criterion:hover .c-num { color: var(--accent-lime); }
    .criterion h3 {
        font-weight: 800;
        font-size: clamp(1.1rem, 1.4cqw, 1.35rem);
    }
    .criterion p {
        font-weight: 300;
        font-size: 0.98rem;
        line-height: 1.75;
        color: var(--text-secondary);
    }
    /* the judge's question - the page's signature device */
    .criterion .judge-q {
        border-inline-start: 3px solid var(--accent-lime);
        padding: 10px 0 10px 16px;
        font-weight: 600;
        font-style: italic;
        font-size: 0.98rem;
        color: var(--text-primary);
    }
    .criterion .judge-q b {
        display: block;
        font-style: normal;
        font-weight: 900;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--accent-ink);
        margin-block-end: 4px;
    }

    /* shared rows: numeral / title / body / question align across cards */
    @supports (grid-template-rows: subgrid) {
        .criterion {
            grid-row: span 4;
            grid-template-rows: subgrid;
            row-gap: 12px;
        }
        .criterion .judge-q { align-self: end; }
    }

    .guide-close {
        margin-block-start: var(--space-md);
        display: grid;
        gap: 20px;
        justify-items: start;
    }
    .guide-close p {
        font-weight: 100;
        font-size: clamp(1.6rem, 3cqw, 2.4rem);
        letter-spacing: -0.02em;
    }
    .guide-close p strong { font-weight: 900; }
    .guide-actions { display: flex; gap: 14px; flex-wrap: wrap; }
}

/* ------------------------------------------------------ JUDGE ROSTER ---- */
@scope (.block-judge-roster) {
    :scope {
        padding-block: var(--space-lg);
        container-type: inline-size;
        container-name: roster;
    }

    .roster-lede {
        max-width: 76ch;
        font-weight: 300;
        font-size: clamp(1.05rem, 1.3cqw, 1.25rem);
        line-height: 1.8;
        color: var(--text-secondary);
        margin-block-end: var(--space-md);
    }
    .roster-lede + .roster-lede { margin-block-start: calc(var(--space-md) * -0.5); }
    .roster-lede strong { color: var(--text-primary); font-weight: 700; }

    .roster-kicker { margin-block-end: var(--space-sm); }

    /* chair + judges share the row anatomy; the chair's is simply first
       and flagged for emphasis */
    .judge {
        display: grid;
        gap: clamp(18px, 2.4cqw, 40px);
        padding-block: clamp(28px, 3.4cqw, 52px);
        border-block-start: 1px solid var(--border-light);
    }
    @container roster (width >= 720px) {
        .judge { grid-template-columns: clamp(160px, 18cqw, 240px) 1fr; }
    }
    .judge.is-chair { border-block-start: 2px solid var(--text-primary); }
    /* rows without photography span the full width */
    .judge:not(:has(img)) { grid-template-columns: 1fr; }
    :scope.is-alt .judge {
        background: #fff;
        padding: clamp(20px, 2.4cqw, 36px);
    }
    @supports (color: light-dark(#000, #fff)) {
        :scope.is-alt .judge { background: light-dark(#fff, #161616); }
    }

    .judge img {
        inline-size: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        display: block;
        filter: grayscale(20%);
        transition: filter 0.4s;
    }
    .judge:hover img { filter: grayscale(0%); }

    .judge h3 {
        font-weight: 800;
        font-size: clamp(1.3rem, 1.8cqw, 1.7rem);
        letter-spacing: -0.01em;
    }
    .judge .j-role {
        margin-block-start: 4px;
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--accent-ink);
    }
    .judge .j-bio {
        margin-block-start: 14px;
        display: grid;
        gap: 12px;
        max-width: 76ch;
    }
    .judge .j-bio p {
        font-weight: 300;
        font-size: 0.98rem;
        line-height: 1.75;
        color: var(--text-secondary);
    }
    .judge .j-bio a { color: var(--accent-ink); font-weight: 700; }
}

/* ------------------------------------------------------- HONOUR ROLL ---- */
@scope (.block-honour-roll) {
    :scope {
        padding-block: var(--space-lg);
        container-type: inline-size;
        container-name: roll;
    }

    /* current winner spotlight */
    .roll-current {
        background: var(--surface-band, #f1f1ee);
        padding: clamp(24px, 3.4cqw, 52px);
        margin-block-end: var(--space-md);

        display: grid;
        gap: clamp(20px, 3cqw, 48px);
        background: light-dark(#f7f7f7, #101010);
        border-inline-start: 3px solid var(--accent-lime);
        padding: clamp(24px, 3.4cqw, 56px);
        margin-block-end: var(--space-md);
    }
    @container roll (width >= 720px) {
        .roll-current { grid-template-columns: clamp(200px, 24cqw, 320px) 1fr; align-items: center; }
    }
    .roll-current img {
        inline-size: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        display: block;
    }
    .roll-current h2 {
        font-weight: 100;
        font-size: clamp(2.2rem, 4.6cqw, 4rem);
        letter-spacing: -0.03em;
        line-height: 1;
        margin-block: 12px 6px;
    }
    .roll-current h2 strong { font-weight: 900; display: block; }
    .roll-current .r-org {
        font-size: 0.85rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--accent-ink);
    }
    .roll-current .btn { margin-block-start: 22px; justify-self: start; }

    /* the timeline of past recipients - subgrid keeps years, photos,
       names and links on shared columns AND rows */
    .roll-list { display: grid; }
    .roll-item {
        display: grid;
        gap: clamp(16px, 2.4cqw, 40px);
        align-items: center;
        padding-block: clamp(20px, 2.6cqw, 36px);
        border-block-start: 1px solid var(--border-light);
        grid-template-columns: 1fr;
    }
    @container roll (width >= 680px) {
        .roll-list {
            grid-template-columns: minmax(90px, auto) clamp(88px, 9cqw, 120px) 1fr auto;
        }
        .roll-item { grid-column: 1 / -1; }
        @supports (grid-template-columns: subgrid) {
            .roll-item { grid-template-columns: subgrid; }
        }
    }

    .roll-item .r-year {
        font-weight: 100;
        font-size: clamp(1.8rem, 3cqw, 2.8rem);
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .roll-item img {
        inline-size: clamp(88px, 9cqw, 120px);
        aspect-ratio: 1;
        object-fit: cover;
        display: block;
        filter: grayscale(30%);
        transition: filter 0.4s;
    }
    .roll-item:hover img { filter: grayscale(0%); }
    .roll-item h3 {
        font-weight: 800;
        font-size: clamp(1.15rem, 1.6cqw, 1.5rem);
    }
    .roll-item .r-org {
        margin-block-start: 4px;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--text-secondary);
    }
    .roll-item .r-link {
        font-size: 0.75rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--accent-ink);
        white-space: nowrap;
    }
    .roll-item .r-link::after { content: " \2192"; transition: margin-inline-start 0.3s; }
    .roll-item:hover .r-link::after { margin-inline-start: 6px; }

    .roll-cta {
        margin-block-start: var(--space-md);
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }
}