/* =====================================================================
   VF · P3 Surface Scaffold · css/p3-surfaces.css
   ---------------------------------------------------------------------
   P3-A: bare archive + /articles SHELL only — surface header, routing
   toggle stub, empty content region. NO cards (P3-B+).

   Family scopes:
     .vf--wisdom-archive   (/wisdom/  · taxonomy-pillar.php)
     .vf--studio-archive   (/studio/  · taxonomy-pillar.php)
     .vf--articles         (/articles · page-articles.php)
     .vf--surface-archive / .vf--surface-articles  shared surface chrome
     .vf-routing-toggle    inter-surface control (stub, finalised P3-E)

   Treatment: neutral Void/Parchment index, NO per-pillar chakra accent
   yet. Mode-aware via THEME tokens ONLY (--vf-text / --vf-surface /
   --vf-heading / --vf-text-muted) — never local --void/--parchment/--t*
   (the cb.projects.format_v2.light_mode_fix lesson). Void-first; the
   .vf--light flip is inherited from style.css token swaps, no pinned
   tokens here.

   Mirrors the content-pack/projects-archive hero rhythm (180/212px
   clearance, JetBrains-Mono eyebrow, ultralight clamp title) so the
   surfaces read as one family with /projects.
   ===================================================================== */


/* ─── §0 · BLOCKSY DEFAULT HERO SUPPRESSION ──────────────────────────
   These surfaces render their own header via the classic template, so
   suppress any Blocksy page/archive title hero that a hook path might
   still emit. Scoped to the P3 body hook so nothing else is affected.
   !important justified: Blocksy hero templates inject inline display. */

body.vf-p3-surface .ct-hero-section,
body.vf-p3-surface .page-title,
body.vf-p3-surface .entry-header {
    display: none !important;
}


/* ─── §A · SURFACE FOUNDATION ────────────────────────────────────────── */

.vf.vf--surface-archive,
.vf.vf--articles {
    color: var(--vf-text);
    background: var(--vf-surface);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vf--surface-archive *,
.vf--surface-archive *::before,
.vf--surface-archive *::after,
.vf--articles *,
.vf--articles *::before,
.vf--articles *::after {
    box-sizing: border-box;
}


/* ─── §B · SURFACE HERO ──────────────────────────────────────────────── */

.vf-surf__hero {
    padding: 180px 2rem 3.5rem;
    max-width: 1280px;
    margin: 0 auto;
}
.admin-bar .vf-surf__hero {
    padding-top: 212px;
}

.vf-surf__eyebrow {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--vf-text-muted);
    margin: 0 0 1.25rem;
    text-transform: uppercase;
}

.vf-surf__title {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 200;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--vf-heading);
    margin: 0 0 1.25rem;
}

.vf-surf__lede,
.vf-surf__intro {
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--vf-text-muted);
    max-width: 60ch;
    margin: 0;
}

.vf-surf__intro > * + * {
    margin-top: 1rem;
}

/* Match the archive .vf-surf__lede: the editable intro region wraps its copy
   in a paragraph block whose default block margins would otherwise add space
   above the toggle. Zero the leading and trailing margins so the hub gap equals
   the archive's (the shared 3.5rem hero padding); the 1rem inter-paragraph
   rhythm above is preserved for multi-paragraph intros. */
.vf-surf__intro > :first-child { margin-top: 0; }
.vf-surf__intro > :last-child { margin-bottom: 0; }


/* ─── §C · ROUTING TOGGLE (STUB · finalised P3-E) ────────────────────
   Segmented control. Token-only; the active item lifts on a translucent
   text-tinted fill that auto-rebalances between modes via color-mix on
   --vf-text / --vf-surface. The markup contract is stable so P3-E can
   reskin without structural change. */

.vf-routing-toggle {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.vf-routing-toggle__track {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.3125rem;
    border: 1px solid transparent;
    border-radius: 999px;
    /* Thin spectrum border — mode-invariant, reuses the canonical
       --vf-grad-spectrum so it stays in sync with the header spectrum bar.
       padding-box layer = mode-aware interior fill (flips via tokens);
       border-box layer = the 1px rainbow ring. Crisp at 999px via clip. */
    background:
        linear-gradient(
            color-mix(in srgb, var(--vf-text) 4%, var(--vf-surface)),
            color-mix(in srgb, var(--vf-text) 4%, var(--vf-surface))
        ) padding-box,
        var(--vf-grad-spectrum) border-box;
}

.vf-routing-toggle__item {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.125rem;
    border-radius: 999px;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--vf-text-muted);
    transition: color 0.2s ease, background 0.2s ease;
}

.vf-routing-toggle__item:hover,
.vf-routing-toggle__item:focus-visible {
    color: var(--vf-heading);
}

.vf-routing-toggle__item.is-active {
    color: var(--vf-heading);
    background: color-mix(in srgb, var(--vf-text) 10%, var(--vf-surface));
}


/* ─── §D · CONTENT REGION (empty in P3-A) ────────────────────────────── */

.vf-surf__body {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
    min-height: 30vh;
}

.vf-surf__empty {
    border-top: 1px solid var(--vf-border);
    padding-top: 2.5rem;
}

.vf-surf__empty-line {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--vf-text-muted);
    max-width: 48ch;
    margin: 0;
}


/* ─── §E · RESPONSIVE TIDIES ─────────────────────────────────────────── */

@media (max-width: 575px) {
    .vf-surf__hero,
    .vf-surf__body {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .vf-routing-toggle {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .vf-surf__hero {
        padding-bottom: 2.5rem;
    }
    .vf-surf__body {
        padding-top: 2rem;
    }
}


/* ─── §F · CLOSING INVITATION PANEL (P3-C) ───────────────────────────────
   The on-brand note that closes every pillar archive — a graceful
   "the library is still growing" line after the card grid. Token-only /
   mode-aware (never local --void/--parchment/--t*). Echoes the canonical
   --vf-grad-spectrum tick used by the header + routing toggle. */

.vf-surf__invite {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3.5rem 2rem 1rem;
    text-align: center;
}

.vf-surf__invite::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin: 0 auto 1.75rem;
    border-radius: 2px;
    background: var(--vf-grad-spectrum);
}

.vf-surf__invite-line {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: var(--vf-text-muted);
    max-width: 44ch;
    margin: 0 auto;
}

/* Zero-card state: the invite IS the empty state, so give it vertical room. */
.vf-surf__invite--empty {
    min-height: 24vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 1rem;
}

@media (max-width: 575px) {
    .vf-surf__invite {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}