/* ════════════════════════════════════════════════════════════════════════
   hub.css — HUB build-on (Layer 2b, opt in with zBrush: [page, hub]).
   What makes a page a HUB: a card-grid navigation surface that links OUT to
   child pages, plus the "this is live" proof callout. Sits on top of page.css
   (the shared hero / section / heading vocabulary). Rules relocated verbatim
   from page.css — no value/selector changes, just file management.
   ════════════════════════════════════════════════════════════════════════ */

/* ── hub cards center their content — SSOT for the whole family (icon, title,
   desc, link). A hub card is a nav tile: a centered glyph over a centered label
   reads cleanly and matches the colored-title centering page.css already applies.
   This makes .zc-card-center the default on hubs, so per-card opt-in isn't needed. */
.zc-card { text-align: center; align-items: center; }

/* ── card content trio — pairs with the .zc-card surface (canvas, L1) ─────── */
.zc-card-icon   { margin: 0 0 1.5rem; font-size: 2.5rem; line-height: 1; filter: drop-shadow(0 4px 16px rgba(124, 58, 237, 0.3)); }
.zc-card-title  { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.85rem; color: var(--text-light); letter-spacing: -0.02em; }
.zc-card-desc   { color: var(--text-gray); line-height: 1.7; margin: 0 0 1.5rem; font-size: 1rem; }
.zc-card-center { text-align: center; align-items: center; }   /* legacy alias — now the .zc-card default */

/* ── proof — "this is live right now" callout (reusable: zAbout top, home) ───
   A brand-tinted glass band with a pulsing LIVE pill. The site's strongest
   claim ("you're reading the architecture") deserves a panel, not gray text. */
.zc-proof {
    max-width:     760px;
    margin:        0 auto;
    text-align:    center;
    padding:       2.25rem 2.5rem;
    border-radius: var(--zc-radius, 16px);
    background:
        linear-gradient(180deg, rgba(124, 58, 237, 0.13), rgba(79, 70, 229, 0.05)),
        var(--zc-surface, rgba(255, 255, 255, 0.03));
    border:        1px solid rgba(124, 58, 237, 0.30);
    box-shadow:    0 0 0 1px rgba(124, 58, 237, 0.05), 0 22px 60px rgba(79, 70, 229, 0.18);
    position:      relative;
    isolation:     isolate;
}
.zc-proof-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    margin:         0 0 1.1rem;
    padding:        0.32rem 0.9rem;
    border-radius:  999px;
    background:     rgba(34, 197, 94, 0.12);
    border:         1px solid rgba(34, 197, 94, 0.35);
    color:          #4ade80;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.zc-proof-badge p { margin: 0; }
.zc-proof-badge::before {
    content:       '';
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    #22c55e;
    box-shadow:    0 0 0 0 rgba(34, 197, 94, 0.6);
    animation:     zc-proof-pulse 2s infinite;
    flex-shrink:   0;
}
@keyframes zc-proof-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.zc-proof-text {
    font-size:      clamp(1.05rem, 2vw, 1.32rem);
    line-height:    1.6;
    color:          var(--text-light);
    margin:         0 auto;
    max-width:      58ch;
}
.zc-proof-text p { margin: 0; }
.zc-proof-text strong { color: #fff; font-weight: 700; }
.zc-proof-text code {
    font-family:   'SF Mono', 'Monaco', 'Courier New', monospace;
    font-size:     0.9em;
    color:         #c7d2fe;
    background:    rgba(124, 58, 237, 0.18);
    border:        1px solid rgba(124, 58, 237, 0.30);
    border-radius: 6px;
    padding:       0.08em 0.42em;
}

/* ── fine-print link — the quiet doorway under a hub grid ────────────────────
   Placement only — the quiet-link ink itself is page.css vocabulary now
   (leaf-nav uses it too). Self-centering (fit-content + auto margins):
   bifrost collapses a sole-child wrapper onto the zURL itself, so the link
   can't rely on a parent's text-align surviving to center it. */
.zc-link-quiet {
    display: flex;
    width:   fit-content;
    margin:  2.5rem auto 0;
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .zc-proof { padding: 1.75rem 1.4rem; }
}