/* =====================================================================
   VF · P3 Article Cards · css/p3-cards.css
   ---------------------------------------------------------------------
   R-article-card (.vf-ac) — the article-surface card primitive (P3-B).
   Token-only, mode-aware (--vf-text / --vf-surface / --vf-heading /
   --vf-text-muted / --vf-border). Void-first; no pinned tokens.

   VF READING identity (Plus Jakarta Sans), deliberately NOT the
   /projects card's JetBrains-Mono "dossier" look. One partial; the two
   variants are pure CSS, scoped by archive family:
     .vf--wisdom-archive .vf-ac   portrait, contemplative
     .vf--studio-archive .vf-ac   landscape, artefact

   Seed state: a single card (data-count="1") renders as a wide, featured
   horizontal card so N=1 reads as intentional, never lonely.
   ===================================================================== */

.vf-ac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2.75rem 2rem;
    max-width: 1080px;
}

.vf-ac {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    min-width: 0;
}

.vf-ac__thumb-wrap {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 16 / 10;
    /* Light-mode fix (CP-3): a hairline keeps light artefact thumbs from
       dissolving into the Parchment surface; harmless on Void. */
    background: color-mix(in srgb, var(--vf-text) 6%, var(--vf-surface));
    border: 1px solid var(--vf-border);
}

.vf-ac__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vf-ac:hover .vf-ac__thumb,
.vf-ac:focus-within .vf-ac__thumb { transform: scale(1.035); }
.vf-ac__thumb--empty { background: transparent; }

.vf-ac__body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }

.vf-ac__eyebrow {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vf-text-muted);
    margin: 0;
}

.vf-ac__title {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.01em;
    margin: 0;
}
.vf-ac__title a {
    color: var(--vf-heading);
    text-decoration: none;
    background-image: linear-gradient(var(--vf-heading), var(--vf-heading));
    background-size: 0% 1px;
    background-position: 0 1.12em;
    background-repeat: no-repeat;
    transition: background-size 0.32s ease;
}
.vf-ac__title a:hover,
.vf-ac__title a:focus-visible { background-size: 100% 1px; }

.vf-ac__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--vf-text-subtle);
    margin: 0.1rem 0 0;
}
.vf-ac__dot { opacity: 0.5; }

/* ── Variants ─────────────────────────────────────────────────────── */
.vf--wisdom-archive .vf-ac__thumb-wrap { aspect-ratio: 4 / 5; }
.vf--studio-archive .vf-ac__thumb-wrap { aspect-ratio: 16 / 10; }

/* ── Seed state: single featured card ─────────────────────────────── */
.vf-ac-grid[data-count="1"] {
    grid-template-columns: 1fr;
    max-width: 940px;
}
.vf-ac-grid[data-count="1"] .vf-ac {
    flex-direction: row;
    align-items: center;
    gap: 2.75rem;
}
.vf-ac-grid[data-count="1"] .vf-ac__thumb-wrap {
    flex: 0 0 56%;
    aspect-ratio: 16 / 10;
}
.vf--wisdom-archive .vf-ac-grid[data-count="1"] .vf-ac__thumb-wrap { aspect-ratio: 4 / 3; }
.vf-ac-grid[data-count="1"] .vf-ac__title { font-size: 2rem; line-height: 1.18; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .vf-ac-grid,
    .vf-ac-grid[data-count="1"] { grid-template-columns: 1fr; gap: 2.25rem; }
    .vf-ac-grid[data-count="1"] .vf-ac { flex-direction: column; align-items: stretch; gap: 1.05rem; }
    .vf-ac-grid[data-count="1"] .vf-ac__thumb-wrap { flex: none; aspect-ratio: 16 / 10; }
    .vf-ac-grid[data-count="1"] .vf-ac__title { font-size: 1.6rem; }
}


/* =====================================================================
   P3-E · /articles featured gateways (.vf-gateway)
   Two pillar panels on the /articles index — a labelled heading plus the
   shared R-article-card grid, scoped to the pillar's archive variant
   (.vf--studio-archive landscape / .vf--wisdom-archive portrait) so cards
   read as one family with /studio and /wisdom. Token-only, mode-aware. The
   enclosing .vf-surf__body already supplies the 1280px measure + gutters.
   ===================================================================== */
.vf--articles__gateways {
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 7vw, 6rem);
}
.vf-gateway__head {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--vf-border);
}
.vf-gateway__eyebrow {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vf-text-muted);
    margin: 0 0 0.5rem;
}
.vf-gateway__title {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--vf-heading);
    margin: 0;
}
.vf-gateway__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 0.25s ease;
}
.vf-gateway__title a:hover,
.vf-gateway__title a:focus-visible { background-size: 100% 1px; }