/* ==========================================================================
   BLOCK: SPONSORS BAND - the Annual Sponsors strip under the homepage
   hero. Full-colour artwork at confident sizes; the artwork carries its
   own white ground, so the strip sits on white and the logos dissolve
   into it - no plates, no borders. Tier hierarchy is size + order.
   Excluded from the surface-band count (chrome, like awards-band).
   ========================================================================== */

@scope (.block-sponsors-band) {
    :scope {
        padding-block: clamp(40px, 5cqw, 72px);
        background: #fff; /* the artwork's ground, both themes */
        container-type: inline-size;
        container-name: sponsors;
    }

    .sp-heading {
        font-size: 0.8rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.24em;
        color: #444;
        text-align: center;
        margin-block-end: clamp(28px, 3.4cqw, 44px);
    }
 
    .sp-tier {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: clamp(20px, 3cqw, 44px);
        row-gap: clamp(16px, 2cqw, 24px);
    }
    .sp-tier + .sp-tier { margin-block-start: clamp(26px, 3cqw, 40px); }

    .sp-label {
        flex-basis: 100%;
        text-align: center;
        font-size: 0.66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        color: #767676; /* 4.5:1 on white */
    }

    .sp-tier a {
        display: block;
        transition: opacity 0.25s, translate 0.25s var(--ease-lux, ease);
    }
    .sp-tier a:hover { translate: 0 -3px; }
    .sp-tier a:focus-visible {
        outline: 2px solid var(--accent-lime);
        outline-offset: 4px;
    }
    .sp-tier img {
        display: block;
        inline-size: auto;
        max-inline-size: min(440px, 84cqw);
        object-fit: contain;
    }

    /* tier = logo scale: platinum leads, silver recedes. The artwork
       carries baked-in white margins, so these run deliberately large.
       FLOOR: the smallest tier never drops below 120px. */
    .sp-tier.is-platinum img { block-size: clamp(148px, 15cqw, 184px); }
    .sp-tier.is-gold     img { block-size: clamp(132px, 13.5cqw, 160px); }
    .sp-tier.is-silver   img { block-size: clamp(120px, 12cqw, 140px); }

    @media (prefers-reduced-motion: reduce) {
        .sp-tier a { transition: none; }
        .sp-tier a:hover { translate: none; }
    }
}