/* ════════════════════════════════════════════════════════════════════════════
   ContentV1 — "DONE RIGHT. DONE ONCE." orange value-props panel
   Orange (alternate-dark) section: ghost display backdrop + green-backed photo
   card + cream inner card (2x2 check-bullet value props) + rotated sticker.
   Framework-first: utilities/tokens carry layout/type/color; this file only adds
   the bits the framework can't express (ghost backdrop, photo aspect, sticker
   rotation). Semantic tokens only; px -> rem = / 18.
   ════════════════════════════════════════════════════════════════════════════ */

/* Ghost marquee loop. MUST live at the stylesheet top level — @keyframes nested
   inside a style rule is invalid and the animation name never resolves. The two
   identical word-groups mean a -50% slide lands group 2 exactly where group 1
   started, so the loop is seamless. */
@keyframes cnt-v1-ghost-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.cnt.v1 {
    --cnt-v1-photo-ar: 0.82;            /* photo card aspect (portrait-ish) */
    --cnt-v1-ghost-s: 13.333rem;        /* 240px / 18 — backdrop display size */
    --cnt-v1-ghost-lh: 12rem;           /* 216px line advance (240px * 0.9 leading) */
    --cnt-v1-ghost-top: -1.778rem;      /* artifact: top -32px bleed-up */
    --cnt-v1-ghost-o: 0.16;             /* ghost text wash over orange */
    --cnt-v1-sticker-rot: 4deg;         /* artifact: rotate(4deg) */
    --cnt-v1-sticker-num: 3.556rem;     /* 64px / 18 */
    --cnt-v1-gap: 2.222rem;             /* 40px / 18 between media + card */
    --cnt-v1-overlap: 3.556rem;         /* 64px / 18 — card overlaps the photo horizontally */
    --cnt-v1-overlap-v: 4rem;           /* 72px / 18 — card lifts up over the photo vertically */

    position: relative;
    overflow: clip;
    &[data-colors="primary-light"]{
        [data-colors="primary-light"]{
            .vp-icn, .vp-icn path{
                fill: white;
            }
        }
    }
    /* -- Oversized ghost wordmark behind the content ------------------------ */
    /* Faint same-tone wash; the two marquee rows scroll forever behind the row. */
    .cnt-v1-ghost {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: clip;
        opacity: var(--cnt-v1-ghost-o);
    }

    /* Two stacked lines, top-left, bleeding up + off the left edge (artifact:
       "DONE RIGHT." directly over "DONE ONCE."). Each row clips its own track;
       the track holds two identical word-groups and slides by exactly one group
       width (-50%) for a seamless infinite loop. */
    .cnt-v1-ghost-line {
        position: absolute;
        left: 0;
        right: 0;
        top: var(--cnt-v1-ghost-top);
        height: var(--cnt-v1-ghost-lh);
        display: flex;
        align-items: center;
        overflow: clip;
    }

    /* second line sits one line-advance below the first (adjacent, not split) */
    .cnt-v1-ghost-line-2 {
        top: calc(var(--cnt-v1-ghost-top) + var(--cnt-v1-ghost-lh));
    }

    .cnt-v1-ghost-track {
        display: flex;
        flex: none;
        width: max-content;
        will-change: transform;
        animation: cnt-v1-ghost-scroll 48s linear infinite;
    }

    .cnt-v1-ghost-grp {
        display: flex;
        flex: none;
    }

    /* Second row drifts the opposite way at a different pace so the two lines
       never lock in sync. */
    .cnt-v1-ghost-line-2 .cnt-v1-ghost-track {
        animation-duration: 62s;
        animation-direction: reverse;
    }

    .cnt-v1-ghost-word {
        font-size: var(--cnt-v1-ghost-s);
        line-height: 1; /* was 0.9 — policy: never < 1 */
        white-space: nowrap;
        color: var(--text-color);
        padding-right: 0.25em;   /* gap baked into the word so the loop stays exact */
    }

    /* Respect reduced-motion: hold the tagline still. */
    @media (prefers-reduced-motion: reduce) {
        .cnt-v1-ghost-track {
            animation: none;
        }
    }

    /* -- Foreground row sits above the ghost -------------------------------- */
    .mn_wd {
        position: relative;
        z-index: 1;
    }

    /* Overlap: the cream card column slides 64px over the photo's right edge
       (artifact LeftContent mr-[-64px]) and lifts up by --cnt-v1-overlap-v so it
       overlaps the photo vertically too. Columns grow to fill, so the negative
       right margin is absorbed into width. */
    @media (min-width: 1280px) {
        .cnt-v1-row {
            gap: 0;
        }

        .cnt-v1-media {
            flex: 1 1 0;
            margin-right: calc(-1 * var(--cnt-v1-overlap));
            z-index: 1;             /* photo sits under the card where they meet */
        }

        .cnt-v1-card-col {
            flex: 1 1 0;
            position: relative;
            z-index: 2;             /* cream card paints over the photo */
        }
    }

    /* -- Green-backed photo card -------------------------------------------- */
    .cnt-v1-media {
        display: flex;
        position: relative;   /* the 7,000 sticker anchors to the photo's bottom-left */
    }

    /* Flair size + margin now come from the BugOut theme via <FlairHeader>/.flr_hd
       (theme-flair.css) — no per-panel flair rule here. */

    /* Full-bleed photo card: no green frame — the image fills the rounded card
       edge-to-edge, keeping only the card border + hard offset shadow. */
    .cnt-v1-photo {
        margin: 0;
        overflow: clip;
        border: var(--crd-bdr-w) solid var(--bdr-clr);
        border-radius: var(--bdr-rds);   /* 16px — artifact rounded photo corners */
        aspect-ratio: var(--cnt-v1-photo-ar);

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }

    /* -- Cream inner card --------------------------------------------------- */
    .cnt-v1-card {
        display: flex;
        flex-direction: column;
        gap: var(--cnt-v1-gap);
    }

    /* -- 2x2 check-bullet value props (the content-accessory slot) ---------- */
    /* The container-query .grd/mx-2 never reaches 2-up inside the narrow card,
       so force an explicit two-column grid here (keep the gp_sp-sml gap). */
    .cnt-v1-vp {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cnt-v1-vp-item {
        align-items: center;
    }

    /* Check-circle wrapper: inline span had no box, so the icon collapsed.
       Give it the icon's box and keep it from shrinking. */
    .cnt-v1-vp-check {
        display: inline-flex;
        flex: 0 0 auto;
        width: 1.778rem;        /* 32px / 18 */
        height: 1.778rem;
    }

    .cnt-v1-vp-icn {
        width: 1.778rem;        /* 32px / 18 */
        height: 1.778rem;
        flex: 0 0 auto;
    }

    .cnt-v1-vp-text {
        display: flex;
        flex-direction: column;
    }

    .cnt-v1-vp-note {
        opacity: 0.7;
    }

    /* -- Rotated "7,000 homes protected" sticker callout -------------------- */
    /* Anchored to the photo (.cnt-v1-media is relative): overlaps the photo's
       bottom-left corner and extends left past the photo edge (artifact). */
    .cnt-v1-sticker-wrap {
        position: absolute;
        left: -1.25rem;
        bottom: 1.5rem;
        z-index: 2;
        pointer-events: none;
    }

    .cnt-v1-sticker {
        /* lime promo sticker = the brand's primary button surface (accent lime)
           with its paired dark ink — framework pairing, no raw values, no nested
           data-colors. */
        background: var(--btn-pry);
        color: var(--btn-pry-txt);
        border: var(--crd-bdr-w) solid var(--btn-pry-txt);
        transform: rotate(var(--cnt-v1-sticker-rot));
        padding: 1.333rem;                /* 24px / 18 */
    }

    /* "7,000" — artifact: Archivo black 64px, near-black ink on the lime sticker */
    .cnt-v1-sticker-num {
        font-family: var(--fnt-t-big-ff);
        font-weight: var(--fnt-t-big-w);
        font-size: var(--cnt-v1-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, near-black */
    .cnt-v1-sticker-label {
        font-family: var(--fnt-m);
        text-transform: uppercase;
        color: var(--btn-pry-txt);
    }

    /* -- Hide the accessory column wrapper if the slot is empty ------------- */
    .cnt-v1-card:not(:has([data-usc] *, [data-usc])) {
        gap: 0;
    }

    /* -- Responsive: below 1280 -------------------------------------------- */
    /* The sticker stays absolute (overlapping the full-width photo's bottom-left,
       as on desktop); the cream card is spaced down from the media via `mrg_tp`
       on .cnt-v1-card-col in the template. */
    @media (max-width: 1279px) {
        --cnt-v1-ghost-s: 6.667rem;       /* halve the backdrop on small screens */

        .cnt-v1-sticker {
            transform: none;
        }
    }
}