/* ============================================================
   Steel City Codes — Inner page styles
   Shared layouts for content pages (about, programs, get-involved, etc.)
   ============================================================ */

/* prose blocks */
.prose{max-width:68ch}
.prose p{margin-bottom:var(--sp-4);color:var(--ink-muted);font-size:17px}
.prose p strong{color:var(--ink)}

/* two-column feature (text + media), alternating */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center}
.feature.reverse .feature-media{order:2}
.feature-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);
  border:1px solid var(--border);box-shadow:var(--shadow-md)}
.feature h2{margin-bottom:var(--sp-3)}

/* problem/solution stat callouts */
.figure-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.figure{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-5)}
.figure .big{font-family:var(--font-slab);font-size:clamp(28px,3.4vw,38px);font-weight:600;color:var(--warning);line-height:1}
.figure .txt{font-size:14px;color:var(--ink-muted);margin-top:var(--sp-2)}

/* ---- non-card patterns (shared with home) ---- */
/* big-number stat strip */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--sp-6)}
.statstrip .item{padding:var(--sp-2) var(--sp-5);border-left:1px solid var(--border-strong)}
.statstrip .item:first-child{border-left:0;padding-left:0}
.statstrip.cols-3{grid-template-columns:repeat(3,1fr)}
.statstrip .big{font-family:var(--font-slab);font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-.01em;color:var(--warning);line-height:1}
.statstrip .txt{font-size:14px;color:var(--ink-muted);margin-top:var(--sp-3);max-width:26ch}

/* top-rule role/feature columns (no card fill) */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-7);margin-top:var(--sp-6)}
.roles.cols-2{grid-template-columns:repeat(2,1fr)}
.role{padding-top:var(--sp-4);border-top:3px solid var(--brand)}
.role .role-ico{color:var(--warning);margin-bottom:var(--sp-3)}
.role .role-ico svg{width:30px;height:30px}
.role .commit{display:block;font-family:var(--font-mono);font-size:12px;color:var(--warning);font-weight:600;margin-bottom:var(--sp-2)}
.role h3{margin-bottom:var(--sp-2)}
.role p{color:var(--ink-muted);font-size:15px;margin-bottom:var(--sp-3)}
.role a.rolelink{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--ink)}
.role a.rolelink svg{transition:transform var(--dur-fast) var(--ease-bounce)}
.role a.rolelink:hover svg{transform:translateX(4px)}

/* hairline list — rows divided by rules, no per-item box */
.hairline-list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-7);border-top:1px solid var(--border)}
.hairline-list.cols-1{grid-template-columns:1fr}
.hl-item{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4) 0;border-bottom:1px solid var(--border)}
.hl-item .ic{color:var(--warning);margin-top:3px;flex:0 0 20px}
.hl-item strong{display:block}
.hl-item span{color:var(--ink-muted);font-size:14px}

/* generic card grid */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}

/* numbered step list (real sequences only) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);counter-reset:step}
.step-item{position:relative;padding-top:var(--sp-6)}
.step-item::before{counter-increment:step;content:"0" counter(step);position:absolute;top:0;left:0;
  font-family:var(--font-mono);font-weight:600;color:var(--brand);font-size:15px;
  background:var(--brand-soft);color:var(--warning);padding:3px 10px;border-radius:6px}
.step-item h3{margin:0 0 var(--sp-2)}
.step-item p{color:var(--ink-muted);font-size:15px}

/* course / topic list */
.topic{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.topic .ic{color:var(--warning);margin-top:2px;flex:0 0 20px}
.topic strong{display:block;margin-bottom:2px}
.topic span{color:var(--ink-muted);font-size:14px}

/* people grid (team) */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.person{text-align:center}
.person .avatar{width:96px;height:96px;border-radius:var(--radius-pill);margin:0 auto var(--sp-3);
  background:var(--brand-soft);color:var(--warning);display:grid;place-items:center;
  font-family:var(--font-slab);font-size:30px;font-weight:600;border:1px solid var(--border)}
.person .name{font-weight:600}
.person .role{color:var(--ink-muted);font-size:14px}
.people-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-3)}
.people-list .person-row{display:flex;flex-direction:column;padding:var(--sp-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.people-list .name{font-weight:600}
.people-list .role{color:var(--ink-muted);font-size:13px}

/* sponsor tiers */
.tier{margin-top:var(--sp-6)}
.tier h3{font-size:16px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin-bottom:var(--sp-4)}
.logo-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.logo-chip{display:inline-flex;align-items:center;justify-content:center;min-width:150px;height:72px;padding:0 var(--sp-5);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  font-family:var(--font-slab);font-weight:600;font-size:17px;color:var(--ink)}

/* contact split */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start}
.contact-method{display:flex;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-5)}
.contact-method .ic{color:var(--warning);margin-top:2px;flex:0 0 22px;width:22px;height:22px}
.contact-method strong{display:block}
.contact-method a{color:var(--link,var(--warning));font-weight:600}

/* callout / CTA strip inside pages */
.callout{background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-6);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.callout h2,.callout h3{margin:0;font-size:clamp(19px,2.2vw,22px);font-weight:600;letter-spacing:-.01em}
/* per-chapter cards: each school its own block with head + sign-up link */
.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4);margin-top:var(--sp-6)}
.chapter{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.chapter h3{font-size:19px;margin:0}
.chapter .chapter-head{font-size:14px;color:var(--ink)}
.chapter .chapter-head b{font-weight:600}
.chapter .chapter-meta{font-size:14px;color:var(--ink-muted);line-height:1.5}
.chapter .chapter-links{margin-top:var(--sp-3);padding-top:var(--sp-2);display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.callout-email{align-self:center;font-family:var(--font-mono);font-size:14px;color:var(--ink-muted);
  text-decoration:none;border-bottom:1px solid transparent;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.callout-email:hover{color:var(--ink);border-bottom-color:var(--border-strong)}
.callout p{color:var(--ink-muted);margin-top:4px}

@media (max-width:820px){
  .roles{grid-template-columns:1fr;gap:var(--sp-6)}
  .statstrip{grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--sp-5)}
  .statstrip .item{border-left:0;padding-left:0}
  .hairline-list{grid-template-columns:1fr}
}
@media (max-width:560px){
  .statstrip,.statstrip.cols-3{grid-template-columns:1fr}
}
@media (max-width:900px){
  .feature{grid-template-columns:1fr;gap:var(--sp-6)}
  .feature.reverse .feature-media{order:0}
  .figure-row,.card-grid,.card-grid.cols-4,.steps,.people{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .figure-row,.card-grid,.card-grid.cols-2,.card-grid.cols-4,.steps,.people{grid-template-columns:1fr}
  .callout{flex-direction:column;align-items:flex-start}
}

/* ---------- people grid (directors / execs, with headshots) ---------- */
/* centered flex so any number of members (1 or 6) sits centered in the row */
.people-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-7) var(--sp-6)}
.person-card{text-align:center;width:170px}
.person-photo{width:116px;height:116px;margin:0 auto var(--sp-3);border-radius:var(--radius-pill);
  overflow:hidden;background:var(--brand-soft);display:grid;place-items:center;
  box-shadow:var(--shadow-sm);border:3px solid var(--surface)}
.person-photo img{width:100%;height:100%;object-fit:cover}
.person-photo .mono-av{font-family:var(--font-slab);font-weight:600;font-size:40px;color:var(--warning);line-height:1}
.person-card .name{font-weight:600;font-size:15px}
.person-card .role{font-size:12.5px;color:var(--ink-muted);margin-top:2px;line-height:1.35}
@media (max-width:820px){.people-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.people-grid{grid-template-columns:repeat(2,1fr)}}