/* ════════════════════════════════════════════════════════════════════════════
   ContentV3 — "R Content + Review - Light"
   Light (primary-light) section: a dark forest review card on the LEFT
   (content-accessory slot) and a copy block on the RIGHT (Archivo-black
   headline, rust flair, expandable description with a "See More" reveal).
   Framework-first: utilities + semantic tokens carry palette/type where they
   can; this file adds the bits the framework can't express (asymmetric column
   widths, the dark card chrome, the expandable-zone fade). px -> rem = / 18.
   Artifact: RContentReviewLight() h-798px, px-144 pt-80 pb-40, justify-between.
   ════════════════════════════════════════════════════════════════════════════ */

.cnt.v3 {
    /* column widths as % of the 1672px content frame (artifact w-523 / w-939) */
    --cnt-v3-review-w: 31.28%;   /* 523 / 1672 */
    --cnt-v3-copy-w: 56.16%;     /* 939 / 1672 */

    overflow: clip;

    @media (min-width: 1280px) {
        .cnt-v3-row {
            justify-content: space-between;
            gap: 0;
        }

        .cnt-v3-review-col {
            flex: 0 0 var(--cnt-v3-review-w);
            width: var(--cnt-v3-review-w);
        }

        .cnt-v3-copy-col {
            flex: 0 0 var(--cnt-v3-copy-w);
            width: var(--cnt-v3-copy-w);
        }

        /* Deliberate display-size rating numeral + fine-print count that fall
           outside the mobile ramp; base classes (fnt_t-big / fnt_nv-sec) carry
           the mobile sizing. */
        .cnt-v3-rating-num {
            font-size: 4.889rem;      /* 88px */
        }

        .cnt-v3-rating-count {
            font-size: 0.722rem;      /* 13px */
        }
    }

    /* ─────────────────────────────────────────────────────────────────────────
       RIGHT — copy block (artifact RightContentBox, gap-24)
       ───────────────────────────────────────────────────────────────────────── */
    .cnt-v3-copy-col {
        display: flex;
        flex-direction: column;
        gap: 1.333rem;            /* 24px */
        align-items: flex-start;
    }

    /* Headline styling comes from the global .cnt-stl auto-typography cascade
       (1st heading -> Title-1). The .cnt is pure semantic <h2>; the previous
       bespoke 64px Archivo-black sizing + per-line rust span were removed. */

    /* Flair (rust bug + tally) — artifact w-64 */
    .cnt-v3-flair {
        display: block;
        color: var(--link-color);
    }
    /* flair svg sized centrally by .flr-lft in theme.css */

    /* -- Body copy ------------------------------------------------------------- */
    /* When the placement passes expandable={true}, this container is marked
       `.auto-expand` (see ContentV3.html) and /scripts/auto-expand-content.js
       hides the tail behind a Read More toggle (styled in expandable-content.css). */
    .cnt-v3-textbox {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .cnt-v3-para {
        font-family: var(--fnt-m);    /* SUSE */
        line-height: 1.6;
        color: var(--text-color);
        margin: 0 0 0.889rem;         /* mb-16 */
    }

    .cnt-v3-para:last-child {
        margin-bottom: 0;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       LEFT — dark review card (the content-accessory slot)
       Card carries data-colors="primary-dark" so type is white + accents lime;
       this file paints the dark surface, lime offset shadow, and inner rules.
       Artifact TestimonialCardLarge: p-40 gap-24, rounded-16, lime drop-shadow.
       ───────────────────────────────────────────────────────────────────────── */
    .cnt-v3-card {
        display: flex;
        flex-direction: column;
        gap: 1.333rem;                /* 24px */
        width: 100%;
        background: var(--background);            /* dark palette bg */
        color: var(--text-color);                 /* white */
        border: var(--bdr-w) var(--bdr-stl) var(--black);
        border-radius: var(--bdr-rds);          /* 16px */
        padding: 2.222rem;                        /* 40px */
        box-shadow: var(--bx-sdw-x) var(--bx-sdw-y) var(--bx-sdw-blr) 0 var(--lt-accent);   /* 4px 6px 0 lime offset */
    }

    /* Top block: stars + numeric rating, divider rule under it */
    .cnt-v3-card-top {
        display: flex;
        flex-direction: column;
        gap: 0.556rem;                /* 10px */
        padding-bottom: 1.778rem;     /* 32px */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .cnt-v3-stars {
        display: inline-flex;
        line-height: 1; /* was 0 — policy: never < 1 */
    }

    .cnt-v3-stars svg {
        display: block;
        width: 8.889rem;              /* 160px */
        height: 1.5rem;               /* 27px */
    }

    .cnt-v3-rating {
        display: flex;
        align-items: flex-start;
        gap: 0.556rem;                /* 10px */
    }

    .cnt-v3-rating-num {
        font-family: var(--fnt-t-big-ff);
        font-weight: var(--fnt-t-big-w);
        line-height: 1; /* was 0.9 — policy: never < 1 */
        color: var(--text-color);
    }

    .cnt-v3-rating-meta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.556rem;                /* 10px */
    }

    .cnt-v3-rating-label {
        font-family: var(--fnt-m);
        text-transform: uppercase;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.5);
    }

    .cnt-v3-rating-count {
        font-family: var(--fnt-m);
        line-height: 1.4;
        color: var(--text-color);
    }

    /* Middle block: lime-ruled pull-quote + attribution, divider under it */
    .cnt-v3-card-mid {
        display: flex;
        flex-direction: column;
        gap: 1.333rem;                /* 24px */
        padding-bottom: 0.889rem;     /* 16px */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .cnt-v3-quote {
        margin: 0;
        padding-left: 0.889rem;       /* 16px */
        border-left: 1px solid var(--accent);
        font-family: var(--fnt-t);    /* Archivo */
        font-style: italic;
        line-height: 1.5;
        color: var(--text-color);
    }

    .cnt-v3-attr {
        display: flex;
        flex-direction: column;
        gap: 0.444rem;                /* 8px */
    }

    .cnt-v3-attr-name {
        font-family: var(--fnt-t);
        line-height: 1.4;
        color: var(--text-color);
    }

    .cnt-v3-attr-loc {
        font-family: var(--fnt-m);
        text-transform: uppercase;
        line-height: 1.4;
    }

    /* Bottom block: "as seen on" pills + see-all link */
    .cnt-v3-card-btm {
        display: flex;
        flex-direction: column;
        gap: 0.889rem;                /* 16px */
    }

    .cnt-v3-seen {
        display: flex;
        align-items: center;
        gap: 0.889rem;                /* 16px */
        flex-wrap: wrap;
    }

    .cnt-v3-seen-label {
        font-family: var(--fnt-m);
        text-transform: uppercase;
        line-height: 1.4;
        white-space: nowrap;
    }

    .cnt-v3-seen-pills {
        display: flex;
        align-items: center;
        gap: 0.444rem;                /* 8px */
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .cnt-v3-seen-pill {
        padding: 0.444rem 0.889rem;   /* py-8 px-16 */
        border: 1px solid var(--text-color);  /* white outline */
        border-radius: 1.611rem;      /* 29px */
        font-family: var(--fnt-m);
        line-height: 1.4;
        color: var(--text-color);
        white-space: nowrap;
    }

    .cnt-v3-seeall {
        display: inline-flex;
        align-items: center;
        gap: 0.556rem;                /* 10px */
        align-self: flex-start;
        text-decoration: none;
        color: var(--link-color);     /* lime on the dark palette */
        border-bottom: 1px solid var(--link-color);
    }

    .cnt-v3-seeall-label {
        font-family: var(--fnt-t);
        line-height: 1.2;
        color: var(--link-color);
    }

    .cnt-v3-seeall-arw {
        display: block;
        width: 1.111rem;              /* 20px */
        height: 1.111rem;
        color: var(--link-color);
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Responsive: stack the review card above the copy below 1280
       ───────────────────────────────────────────────────────────────────────── */
    @media (max-width: 1279px) {
        .cnt-v3-review-col,
        .cnt-v3-copy-col {
            width: 100%;
        }
    }
}