/* ════════════════════════════════════════════════════════════════════════
   zPhilosophy.css — L3 page identity (zBrush: [page, zPhilosophy]).
   Builds ON the canonical leaf column (.zc-leaf) with cinematic flourishes:
   a glowing masthead, accented section titles, flow chains, pull-quotes, and
   the imperative(red) vs declarative(blue) contrast. Anything that proves
   reusable gets promoted into page.css later (per the L3 → L2 lift plan).
   The page root carries `zc-leaf phil`; this brush hooks the `.phil` scope.
   ════════════════════════════════════════════════════════════════════════ */

/* ── masthead — PROMOTED to canonical leaf.css (.zc-leaf-hero / %leafHero).
   This page was the donor; it now invokes the pattern like every other leaf. ── */
/* ── section titles — a short gradient accent bar above each (keeps its color) ── */
.phil h2 {
    position:    relative;
    padding-top: 1.5rem;
    margin-top:  1rem;
}
.phil h2::before {
    content:       '';
    position:      absolute;
    top:           0;
    left:          0;
    width:         3rem;
    height:        3px;
    border-radius: 3px;
    /* Tight fade: solid head, then a same-hue dissolve to alpha 0. Two reasons
       the old edge looked dirty — (1) fading to the `transparent` keyword passes
       through transparent-BLACK, (2) box-shadow glows around the WHOLE rect incl.
       the invisible right end (a detached blob). Fix: relative-color alpha-0 stop
       + drop-shadow, which respects the gradient's alpha so the glow dies with it. */
    background:    linear-gradient(90deg, currentColor, transparent);
    background:    linear-gradient(90deg, currentColor 0%, currentColor 28%, rgb(from currentColor r g b / 0) 100%);
    filter:        drop-shadow(0 0 4px currentColor);
}
/* masthead sub-headline — keep the hero h2 clear of the .phil section accent.
   Needed HERE (not just the canvas) because this brush loads AFTER it, so
   the .phil h2 rule above would otherwise win on equal specificity. */
.phil .zc-masthead h2 {
    position:    static;
    padding-top: 0;
    margin-top:  0;
}
.phil .zc-masthead h2::before { content: none; }

/* ── flow rails — the pipelines as REAL diagrams, not bold text with arrows ──
   One rail grammar, two voices: Plato's chain is dim stone (the old world),
   Zolo's chain glows violet (the living one) — the upgrade reads visually
   before a single word is read. Nodes are pills; arrows sit between them. */
.phil-rail-wrap {
    margin:        2.2rem 0;
    padding:       1.6rem 1.7rem;
    border-radius: 16px;
}
.phil-rail {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             0.6rem 0.75rem;
}
/* rail items render as <p> — the leaf prose margin (.zc-leaf p, zeroed on
   :last-child) would sink ONLY the last pill under flex centering, so every
   node/arrow is flattened to margin 0. Double-class selectors out-specify it. */
.phil-rail .phil-node {
    margin:         0;
    max-width:      none;
    padding:        0.5rem 1.15rem;
    border-radius:  999px;
    font-weight:    600;
    font-size:      0.98rem;
    letter-spacing: -0.01em;
    white-space:    nowrap;
}
.phil-rail .phil-arrow {
    margin:    0;
    font-size: 1.05rem;
}
/* dim rail — the classical pipeline (stone) */
.phil-rail-dim {
    background: rgba(255, 255, 255, 0.02);
    border:     1px solid rgba(255, 255, 255, 0.08);
}
.phil-rail-dim .phil-node {
    background: rgba(255, 255, 255, 0.05);
    border:     1px solid rgba(255, 255, 255, 0.13);
    color:      var(--text-gray, #B4BBC8);
}
.phil-rail-dim .phil-arrow { color: rgba(255, 255, 255, 0.28); }
/* live rail — the Zolo pipeline (violet, glowing) */
.phil-rail-live {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(79, 70, 229, 0.05));
    border:     1px solid rgba(167, 139, 250, 0.28);
}
.phil-rail-live .phil-node {
    background: rgba(124, 58, 237, 0.20);
    border:     1px solid rgba(167, 139, 250, 0.45);
    color:      #ece8fb;
    box-shadow: 0 0 18px rgba(124, 58, 237, 0.28);
}
.phil-rail-live .phil-arrow { color: #a78bfa; }
/* caption under the rail — quieter, centered */
.phil-rail-caption { margin-top: 1.1rem; text-align: center; }
.phil-rail-caption p {
    color:       var(--text-gray);
    font-size:   0.98rem;
    line-height: 1.6;
    margin:      0 0 0.35rem;
    max-width:   none;
}
.phil-rail-caption p:last-child { margin-bottom: 0; }
.phil-rail-caption strong { color: var(--text-light); }

/* ── chair trio — three declarations over one structure, SHOWN as cards ─────
   Blue-tinted (they're the declarative side's proof): the spoken intention,
   a quiet "becomes", the manifested Form. */
.phil-trio {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.1rem;
    margin:                2rem 0 1.2rem;
}
.phil-decl {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.55rem;
    padding:        1.6rem 1.3rem;
    border-radius:  16px;
    text-align:     center;
    background:     rgba(92, 169, 255, 0.05);
    border:         1px solid rgba(143, 195, 255, 0.24);
}
/* double-class selectors on purpose — the leaf prose rule (.zc-leaf p) would
   out-specify a lone class and gray out the card text */
.phil-decl .phil-decl-say {
    font-style:  italic;
    font-size:   1.05rem;
    line-height: 1.45;
    color:       #e6e3f5;
    margin:      0;
    max-width:   none;
}
.phil-decl .phil-decl-becomes {
    font-size:      0.72rem;
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--text-gray, #B4BBC8);
    margin:         0;
}
.phil-decl .phil-decl-form {
    font-weight: 700;
    font-size:   1.12rem;
    color:       #8fc3ff;
    margin:      0;
}
.phil-trio-caption { text-align: center; margin-bottom: 2rem; }
.phil-trio-caption p { max-width: none; color: var(--text-gray); }
.phil-trio-caption p:first-child { color: var(--text-light); }

/* ── versus grid — paradox (red) faces liberation (blue), mirrored copy visible ── */
.phil-vs {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.1rem;
    align-items:           stretch;
    margin:                1.8rem 0;
}
.phil-vs .phil-contrast { margin: 0; }

/* ── pull-quote — the lines that should land like a verdict ────────────────── */
.phil-quote {
    position:    relative;
    margin:      3rem 0;
    padding:     0.4rem 0 0.4rem 2rem;
    border-left: 3px solid #a78bfa;
}
.phil-quote::before {
    content:        '\201C';
    position:       absolute;
    left:           0.7rem;
    top:            -1.4rem;
    font-family:    Georgia, 'Times New Roman', serif;
    font-size:      4.5rem;
    line-height:    1;
    color:          rgba(167, 139, 250, 0.30);
    pointer-events: none;
}
.phil-quote p {
    font-size:   clamp(1.2rem, 2.4vw, 1.6rem);
    line-height: 1.5;
    color:       #e6e3f5;
    font-weight: 400;
    font-style:  italic;
    max-width:   none;
    margin:      0 0 0.6rem;
}
.phil-quote p:last-child { margin-bottom: 0; }

/* ── contrast — imperative (red) vs declarative (blue) ────────────────────── */
.phil-contrast {
    margin:        1.8rem 0;
    padding:       1.7rem 1.9rem;
    border-radius: 16px;
    border:        1px solid;
}
.phil-contrast p:last-child { margin-bottom: 0; }
.phil-bad  { background: rgba(230, 57, 70, 0.06);  border-color: rgba(255, 138, 147, 0.32); }
.phil-good { background: rgba(92, 169, 255, 0.06); border-color: rgba(143, 195, 255, 0.34); }
.phil-bad  h3, .phil-bad  h4 { color: #ff8a93; }
.phil-good h3, .phil-good h4 { color: #8fc3ff; }
/* the accent bar uses currentColor — drop it inside contrast cards (h3/h4 there) */
.phil-contrast h3::before, .phil-contrast h4::before { content: none; }

/* ── list bullets — violet markers instead of stock browser dots ───────────── */
.phil li::marker { color: #a78bfa; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .phil-vs   { grid-template-columns: 1fr; }
    .phil-trio { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .phil-contrast  { padding: 1.4rem 1.3rem; }
    .phil-rail-wrap { padding: 1.2rem 1.1rem; }
    .phil-rail      { flex-direction: column; gap: 0.45rem; }
    .phil-arrow     { transform: rotate(90deg); }
}