/* ════════════════════════════════════════════════════════════════════════════
   ContentV7 — "L Content + IMG - Light"
   Light cream section: copy column on the LEFT (rust flair + two-line headline
   with a rust second line + two paragraphs + primary/secondary buttons), and a
   green-backed photo card on the RIGHT. A rotated lime "7,000 / HOMES PROTECTED"
   sticker floats centered near the top of the section.
   Framework-first: utilities/tokens carry layout/type/color; this file only adds
   what the framework can't express (exact headline size, photo height, green
   backing, sticker geometry). Semantic tokens only; px -> rem = / 18.
   ════════════════════════════════════════════════════════════════════════════ */

.cnt.v7 {
    --cnt-v7-img-h: 44.444rem;          /* 800px / 18 — photo card height */
    --cnt-v7-sticker-rot: -4deg;        /* artifact: -rotate-4 */
    --cnt-v7-sticker-num: 3.556rem;     /* 64px / 18 */
    --cnt-v7-sticker-top: 3.438rem;     /* 61.88px / 18 — float from section top */

    z-index: 1;

    /* -- Two-column split: framework .half columns (50/50, f_gp gap) -------- */

    /* -- Left copy column --------------------------------------------------- */
    .cnt-v7-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;        /* artifact items-start */
    }

    /* The editable Block Content (headline + body) now lives inside the global
       .cnt-stl wrapper and styles itself via the auto-typography cascade
       (1st heading -> Title-1, paragraphs, links). Per-block sizing/accents have
       been removed; bespoke 88px headline reverts to the standard Title ramp. */

    /* -- Right green-backed photo card -------------------------------------- */
    /* The media column is the positioning anchor for the floating sticker. */
    .cnt-v7-media {
        position: relative;
    }

    /* Full-bleed: image fills the rounded card edge-to-edge; green backing only
       shows through transparency. Border + hard offset shadow from .bx-sdw. */
    .cnt-v7-img {
        position: relative;     /* anchor the absolutely-filled photo */
        background-color: var(--callout);   /* forest green var(--lt-callout) */
        /* artifact Img1: solid `border-black` outline — not the faint 10% --bdr-clr tint */
        border: var(--crd-bdr-w) solid var(--text-color);
        overflow: clip;
        height: var(--cnt-v7-img-h);
    }

    /* Photo fills the card edge-to-edge (artifact Img1: img `absolute inset-0`).
       Absolute-fill avoids the <picture> wrapper collapsing its height. */
    .cnt-v7-photo {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    /* PNG must COVER, not letterbox. global.css scopes the contain rule under
       `picture:not([data-usc5]) img[src*=".png"]:not(.static-map)` = (0,3,2);
       the extra `.cnt-v7-media` class here makes this (0,4,1) so cover wins. */
    .cnt-v7-media .cnt-v7-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* -- Rotated lime stat sticker, floating over the top of the photo ------
       Artifact places it at the section's left-1/2 / top-61.88 — which lands
       ~21.5% in from the photo's left edge and ~11% down (its centre). Anchored
       to .cnt-v7-media (the photo column) and centred on that point. */
    .cnt-v7-sticker {
        position: absolute;
        left: 21.5%;
        top: 11%;
        transform: translate(-50%, -50%) rotate(var(--cnt-v7-sticker-rot));
        z-index: 3;
        pointer-events: none;
        white-space: nowrap;
    }

    /* lime promo sticker = the brand's primary button surface (accent lime)
       with its paired dark ink — framework pairing, no raw values. */
    .cnt-v7-sticker-card {
        background: var(--btn-pry);
        color: var(--btn-pry-txt);
        border: var(--crd-bdr-w) solid var(--btn-pry-txt);
        padding: 1.333rem;              /* 24px / 18 */
        /* artifact Sticker Callout: drop-shadow 6px 6px 0 (the callout offset),
           not bx-sdw's 4px/6px. Use the --bx-sdw-co-* offsets. */
        box-shadow: var(--bx-sdw-co-x) var(--bx-sdw-co-y) var(--bx-sdw-co-blr) hsl(from var(--black) h s l / var(--bx-sdw-co-o));
    }

    /* "7,000" — artifact: Archivo black 64px, near-black ink on the lime */
    .cnt-v7-sticker-num {
        font-family: var(--fnt-t-big-ff);
        font-weight: var(--fnt-t-big-w);
        font-size: var(--cnt-v7-sticker-num);   /* 64px */
        line-height: 1; /* was 0.9 — policy: never < 1 */
        color: var(--btn-pry-txt);
    }

    /* "HOMES / PROTECTED" — artifact: SUSE 16px, 4px tracking, uppercase, 2 lines */
    .cnt-v7-sticker-label {
        font-family: var(--fnt-m);
        text-transform: uppercase;
        line-height: 1.4;
        color: var(--btn-pry-txt);
    }

    /* -- Responsive: stack copy above photo below 1280 --------------------- */
    @media (max-width: 1279px) {
        .cnt-v7-img {
            height: auto;
            aspect-ratio: 4 / 5;
        }

        /* Sticker: match ContentV1's mobile treatment. The desktop placement
           centers the counter on a point ~21.5% in (translate -50%) and rotates
           it, which pushes the wide nowrap counter off the left edge on narrow
           screens and clips it. Drop the rotation + centering and anchor it to the
           photo's bottom-left corner instead, so it stays fully on-screen. */
        .cnt-v7-sticker {
            left: -1.25rem;
            top: auto;
            bottom: 1.5rem;
            transform: none;
        }
    }

    @media screen and (max-width: 699px) {
        & {
            [class*="flx"][class*="-at-700"] {
                &[class*="gp_sp"] > * + * {
                    margin-top: calc(var(--grd-sp-dyn) * .5);
                }
            }
        }
}
}