/* ════════════════════════════════════════════════════════════════════════════
   ServicesPanelV4 — 6-card services grid driven by ContentData (.cnd)
   Clone of ServicesPanelV3, but the card feed is sourced from the module's
   `.cnd` Items[] (ContentData) instead of a SQL service-panels query — no
   database dependency.
   Cream (primary-light) section: Flair + kicker + display headline + intro +
   "See all services" lime button, then a card grid (image + title + blurb +
   "Learn More"). Framework-first: utilities + semantic tokens carry
   layout/type/color; this file only adds what the framework can't express (card
   image aspect, the rust "Learn More" link, responsive grid).
   Semantic tokens only — no raw hex. px -> rem = / 18.
   ════════════════════════════════════════════════════════════════════════════ */

.srv.v3 {
    --srv-v3-img-ar: 1.46;            /* card image aspect (~landscape top) */
    --srv-v3-crd-rds: var(--bdr-rds);  /* 16px (shared panel radius) — card corner */
    --srv-v3-gap-head: 2.222rem;      /* 40px / 18 — headline ↔ CTA gap */

    /* -- Header row: headline left, flair+tagline+description right. Standardized
       header-left/content-right layout — framework half/half row
       (flx-at-1280 f_gp f_b) supplies the 50/50 split, gap, and bottom align;
       only the top→feed margin stays bespoke. --- */
    .srv-v3-head {
        margin-bottom: var(--sp-vm-clc, 2.5rem);
    }

    .srv-v3-ttl {
        line-height: 1; /* was 0.9 — policy: never < 1 */
        margin-top: 0;
    }

    /* RIGHT — flair + bold tagline + description + button (content hugs the
       column's left edge; max-width keeps a readable measure). */
    .srv-v3-aside {
        max-width: 34rem;
    }

    /* Flair size + margin now come from the BugOut theme via <FlairHeader>/.flr_hd
       (theme-flair.css). Keep the rust stroke safety here (this section's
       link-color context). */
    .srv-v3-aside .flr_hd svg * {
        stroke: var(--link-color);
    }

    /* Tagline — artifact is SUSE bold 32px NEAR-BLACK mixed-case, NOT the
       uppercase forest-green kicker that fnt_t-k would inject. Now rides fnt_t-2
       (h2 ramp): mobile 1.37rem, and the ramp's own 1280px swap lands exactly on
       the artifact's 32px (--fnt-t-2-s-d: 1.778rem) — no custom size needed.
       Override color via --title-color (the global fnt_ rule paints through it)
       + reset case/tracking to the artifact. */
    .srv-v3-tag {
        display: block;
        margin-top: 0;                       /* flair's margin-bottom owns the gap */
        --title-color: var(--text-color);   /* near-black var(--lt-txt), not forest green */
        font-style: normal;
        text-transform: none;                /* artifact tagline is bold mixed-case */
        line-height: 1;
    }

    .srv-v3-lede {
        line-height: 1.6;
    }

    .srv-v3-cta {
        flex: 0 0 auto;
    }

    /* -- Lime highlight box on the target headline word ("CREEPY") --------- */
    .srv-v3-hl {
        /* artifact band = rgba(198,255,61,0.7) = brand lime @70%. Use --lime
           (always var(--lt-accent)) NOT --accent: --accent resolves to ORANGE on
           alternate-light / orange-card surfaces, which would flip this band. */
        background: color-mix(in srgb, var(--accent) 70%, transparent);
        color: var(--fnt-t-1);   /* near-black headline ink, readable on lime */
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        padding: 0 0.08em;
    }

    /* -- Card -------------------------------------------------------------- */
    /* Artifact: flat cream card, 16px radius, 1px SOLID near-black border
       (var(--lt-txt)), NO drop-shadow. (--bdr-clr is only a 10% hairline, so use the
       solid near-black --text-color; --crd-bdr-w is 2px so pin 1px literally.) */
    .srv-v3-crd {
        overflow: clip;
        border-radius: var(--srv-v3-crd-rds);
        border-color: var(--text-color);   /* .bdr_a supplies 2px solid */
        box-shadow: none;
    }

    .srv-v3-img {
        display: block;
        aspect-ratio: var(--srv-v3-img-ar);
        overflow: hidden;

        img {
            border-radius: 0rem 0rem var(--srv-v3-crd-rds) var(--srv-v3-crd-rds);
        }
    }

    /* Card title — artifact is SUSE bold 32px near-black, but fnt_t-itm injects
       Archivo (--fnt-t = display) 800 @ 24px. Rides fnt_t-2 (h2 ramp) instead:
       mobile 1.37rem, and the ramp's 1280px swap lands exactly on the artifact's
       32px (--fnt-t-2-s-d: 1.778rem) — no custom size needed. font-family is
       still reset to the artifact's body-font SUSE, not the Archivo display face. */
    .srv-v3-crd-ttl {
        font-family: var(--fnt-m);   /* SUSE, not the Archivo display face */
        line-height: 1;
    }

    .srv-v3-crd-blurb {
        line-height: 1.6;
        /* push the "Learn More" row to the card foot so cards align */
        margin-bottom: auto;
    }

    /* -- "Learn More" tertiary link: rust ink + underline + arrow ---------- */
    .srv-v3-more {
        color: var(--link-color);
        border-top-color: var(--bdr-clr);
        justify-content: flex-start;   /* artifact: bottom-LEFT, not centered */
        padding-top: 0.6rem;

        .icn path:last-child {
            fill: var(--link-color);
        }
    }

    .srv-v3-crd:hover .srv-v3-more {
        color: var(--link-hover);

        .icn path:last-child {
            fill: var(--link-hover);
        }
    }

    /* -- Responsive: 6-up grid collapses via .ato-fit + breakpoints -------- */
    @media (max-width: 1279px) {
        .srv-v3-head {
            --srv-v3-gap-head: 1.333rem;   /* 24px / 18 */
        }

        /* stacked: headline then aside, full width */
        .srv-v3-aside {
            max-width: none;
        }
    }

}