/* ════════════════════════════════════════════════════════════════════════
   founder.css — L3 page identity for zAbout/zFounder (zBrush: [page, founder]).
   The ONE page with a real photo, so it earns a one-of-a-kind treatment: a
   split portrait|bio hero with a warm→cool gradient frame + glow, and the CV
   told as a 2×2 chapter grid on the canonical .zc-card surface.

   NOTE on headings: zH1–zH4 drop `_zClass` (only `color:` maps to a class), so
   every heading here is styled by ELEMENT selector scoped under a wrapper class
   (.founder-bio h1, .founder-head h2). zText/zMD/containers keep `_zClass`.
   ════════════════════════════════════════════════════════════════════════ */

/* ── hero — split portrait | bio ──────────────────────────────────────────── */
.founder-hero {
    display:               grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap:                   clamp(2rem, 5vw, 4.5rem);
    align-items:           center;
    max-width:             var(--zc-container-narrow);
    margin:                0 auto;
    padding:               clamp(3.5rem, 8vw, 7rem) var(--zc-section-x) clamp(2.5rem, 5vw, 4rem);
}

/* portrait — gradient frame + soft glow behind (the signature element) */
.founder-photo {
    position:      relative;
    padding:       4px;
    border-radius: 30px;
    background:    linear-gradient(150deg, var(--color-secondary, #9370DB), var(--color-primary, #A2D46E));
    isolation:     isolate;
}
.founder-photo::before {
    content:    '';
    position:   absolute;
    inset:      -16%;
    z-index:    -1;
    background: radial-gradient(closest-side, rgba(124, 58, 237, 0.40), rgba(147, 112, 219, 0.10) 58%, transparent 76%);
}
.founder-photo img {
    display:       block;
    width:         100%;
    aspect-ratio:  1 / 1;
    object-fit:    cover;
    border-radius: 26px;
}

/* bio column — left-aligned (overrides the centered zc-eyebrow) */
.founder-bio { text-align: left; }
.founder-bio .zc-eyebrow { text-align: left; color: #c4b5fd; }
.founder-bio h1 {
    font-size:               clamp(2.4rem, 5vw, 3.8rem);
    font-weight:             800;
    letter-spacing:          -0.03em;
    line-height:             1.04;
    margin:                  0.4rem 0 0.5rem;
    background:              linear-gradient(135deg, #ffffff 0%, #c7b8ff 55%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}
.founder-bio h2 {
    font-size:      clamp(1.1rem, 2vw, 1.5rem);
    font-weight:    400;
    color:          #b6b6c2;
    margin:         0 0 1.4rem;
    letter-spacing: -0.01em;
}
.founder-lead {
    color:       var(--text-gray);
    font-size:   1.06rem;
    line-height: 1.8;
    max-width:   56ch;
    margin:      0;
}

/* ── section heads — gradient title (heading styled by element, not _zClass) ── */
.founder-head h2 {
    font-size:               clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight:             800;
    letter-spacing:          -0.025em;
    text-align:              center;
    margin:                  0 0 0.8rem;
    background:              linear-gradient(135deg, #ffffff 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}

/* ── chapters — CV as a 2×2 card grid (on the canonical .zc-card surface) ──── */
.founder-chapters .zc-card-icon { font-size: 2rem; margin: 0 0 1.1rem; line-height: 1; }
.founder-chapters .zc-card h3 {
    font-size:      1.35rem;
    font-weight:    700;
    letter-spacing: -0.02em;
    margin:         0 0 0.7rem;
}
.founder-chapters .zc-card p {
    color:       var(--text-gray);
    font-size:   1rem;
    line-height: 1.75;
    margin:      0;
}
.founder-chapters .zc-card a {
    color:                 #a5b4fc;
    text-decoration:       underline;
    text-underline-offset: 2px;
}
.founder-chapters .zc-card a:hover { color: #c7d2fe; }

/* ── responsive — stack the hero, single-column chapters ──────────────────── */
@media (max-width: 720px) {
    .founder-hero {
        grid-template-columns: 1fr;
        justify-items:         center;
        text-align:            center;
        gap:                   2rem;
    }
    .founder-photo { max-width: 280px; }
    .founder-bio, .founder-bio .zc-eyebrow { text-align: center; }
    .founder-lead { margin: 0 auto; }
}