/* ════════════════════════════════════════════════════════════════════════
   stack.css — L3 brush for the zStack hub (zBrush: [page, stack]).
   Canonical page.css does the hero / sections / card grid; this file owns ONLY
   the "anatomy of a .zolo project" image bands below the three layer cards.

   Each band = one zVaFile type (zSpark / zUI / zEnv / zServer / zRaven), with
   its role-colored file icon and a small radial spotlight behind it (the hero's
   purple glow feel, shrunk + tinted per file role). Bands alternate sides.
   ════════════════════════════════════════════════════════════════════════ */

/* ── %leafNav rail on a hub — leaf pages inherit their reading column's width;
   this page has no column, so the rail gets the container geometry here. ──── */
.zc-leaf-nav {
    max-width:     var(--zc-container);
    margin-left:   auto;
    margin-right:  auto;
    margin-bottom: 5rem;
    padding-left:  var(--zc-section-x);
    padding-right: var(--zc-section-x);
}

.stack-band { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }

.stack-band-inner {
    display:     flex;
    align-items: center;
    gap:         clamp(2rem, 5vw, 5rem);
}
.stack-band-alt .stack-band-inner { flex-direction: row-reverse; }

/* ── visual — file icon with a tinted spotlight glow ─────────────────────────
   NOTE: a single-child Visual wrapper collapses onto the <img>, and <img> can't
   render ::before — so the icon is sized directly and the spotlight is a
   layered, alpha-aware drop-shadow (hugs the file-icon silhouette).            */
.stack-visual,
.stack-icon {
    flex:   0 0 auto;
    width:  clamp(140px, 22vw, 224px);
    height: auto;
}
.stack-visual { display: flex; justify-content: center; }
.stack-icon {
    display: block;
    filter:
        drop-shadow(0 0 30px var(--band-glow, rgba(124, 58, 237, 0.5)))
        drop-shadow(0 0 14px var(--band-glow, rgba(124, 58, 237, 0.5)))
        drop-shadow(0 14px 30px rgba(0, 0, 0, 0.45));
}

/* ── body — filetype pill + title + plain-English blurb ──────────────────── */
.stack-band-body { flex: 1 1 auto; min-width: 0; }
.stack-filetype {
    display:        inline-block;
    margin:         0 0 0.85rem;
    padding:        0.28rem 0.8rem;
    border:         1px solid var(--band-ink, #a5b4fc);
    border-radius:  999px;
    color:          var(--band-ink, #a5b4fc);
    background:     var(--band-tint, rgba(124, 58, 237, 0.10));
    font-family:    'SF Mono', 'Monaco', 'Courier New', monospace;
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.02em;
}
.stack-band-title {
    font-size:      clamp(1.5rem, 3vw, 2.1rem);
    font-weight:    800;
    letter-spacing: -0.02em;
    line-height:    1.15;
    color:          var(--text-light);
    margin:         0 0 0.85rem;
}
.stack-band-title h1, .stack-band-title h2, .stack-band-title h3 {
    font: inherit; letter-spacing: inherit; color: inherit; margin: 0;
}
.stack-band-desc {
    color:       var(--text-gray);
    font-size:   1.06rem;
    line-height: 1.75;
    max-width:   52ch;
    margin:      0;
}
.stack-band-desc p { margin: 0; }
.stack-band-desc strong { color: var(--text-light); }
.stack-band-desc code {
    font-family:   'SF Mono', 'Monaco', 'Courier New', monospace;
    font-size:     0.9em;
    color:         #c7d2fe;
    background:    rgba(124, 58, 237, 0.14);
    border:        1px solid rgba(124, 58, 237, 0.24);
    border-radius: 6px;
    padding:       0.08em 0.42em;
}

/* ── per-role color (SSOT: zLSP generate_icon_tints + bifrost palette) ────── */
.stack-spark  { --band-glow: rgba(120, 200, 110, 0.45); --band-ink: #8fe093; --band-tint: rgba(120, 200, 110, 0.10); }
.stack-ui     { --band-glow: rgba(147, 112, 219, 0.50); --band-ink: #b794f6; --band-tint: rgba(147, 112, 219, 0.12); }
.stack-env    { --band-glow: rgba(92, 169, 255, 0.50);  --band-ink: #7cc0ff; --band-tint: rgba(92, 169, 255, 0.12); }
.stack-server { --band-glow: rgba(230, 57, 70, 0.42);   --band-ink: #ff6b78; --band-tint: rgba(230, 57, 70, 0.12); }
.stack-raven  { --band-glow: rgba(255, 179, 71, 0.48);  --band-ink: #ffc673; --band-tint: rgba(255, 179, 71, 0.12); }

/* ── responsive — stack the band, center everything ──────────────────────── */
@media (max-width: 768px) {
    .stack-band-inner,
    .stack-band-alt .stack-band-inner {
        flex-direction: column;
        text-align:     center;
        gap:            1.5rem;
    }
    .stack-visual    { width: clamp(120px, 40vw, 170px); }
    .stack-band-desc { margin-inline: auto; }
}