/* ==========================================================================
   BLOCK: CTA BAND -- full-bleed closing call to action.
   The section itself runs edge to edge (100% width, like every
   cms-block); the media is GRID-STACKED under a dark scrim using the
   same technique as the page head (a real <img>, never a CSS
   background, never absolute positioning), and the content sits in the
   shared .cms-block-inner so it holds the main container width while
   the band bleeds full.
   ========================================================================== */

@scope (.block-cta-band) {
    :scope {
        display: grid;
        grid-template: 1fr / 1fr;
        overflow: clip;
        background: var(--bg-contrast);
        color: var(--text-inverse);
        container-type: inline-size;
        container-name: ctaband;
    }
    :scope > * { grid-area: 1 / 1; }

    /* Height stays CONTENT driven: block-size 0 + min-block-size 100%
       keeps the media out of row sizing, then stretches it to the row
       the content defined (avoids the intrinsic-height feedback loop --
       same doctrine as .head-media in block-page-head). */
    .band-media {
        inline-size: 100%;
        block-size: 0;
        min-block-size: 100%;
        object-fit: cover;
        display: block;
    }
    /* Tint pulls the image back into the black so the text pops */
    .band-scrim { background: rgba(37, 40, 43, 0.85); }

    .band-inner {
        z-index: 1;
        display: grid;
        gap: clamp(24px, 3cqw, 40px);
        justify-items: start;
        padding-block: clamp(56px, 8cqw, 120px);
    }

    .band-inner p {
        font-weight: 300;
        font-size: clamp(1.3rem, 2.4cqw, 2rem);
        line-height: 1.5;
        letter-spacing: -0.01em;
        max-inline-size: 34ch;
        color: rgba(255, 255, 255, 0.85);
        text-wrap: pretty;
    }
    .band-inner p strong {
        font-weight: 800;
        color: #ffffff;
        display: block;
    }

    .band-actions {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(14px, 2cqw, 24px);
    }
}