/* ============================================================
   Steel City Codes - Inner pages
   Shared layouts for about, programs, get-involved, regions,
   team, contact and 404.
   ============================================================ */

/* ---------- page hero (light) ---------- */
/* Warm cream band behind the hero, echoing the old site's warm hero without
   the dark bar. Adds warmth to the top of every inner page. */
.page-hero{padding-top:var(--hero-pt);padding-bottom:clamp(2.5rem,2rem + 3vw,5rem);
  background:var(--bg-2);border-bottom:1px solid var(--line)}
.page-hero h1{max-width:22ch;margin-bottom:var(--s5)}
.page-hero .lead{max-width:52ch}
.page-hero.split .hero-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap-split);align-items:center}
.page-hero.split .photo{aspect-ratio:5/4;border-radius:var(--r-lg)}
.page-hero+.section{padding-top:var(--sec-sm)}

/* ---------- text + photo feature ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-split);align-items:center}
.feature.flip .feature-media{order:2}
.feature .photo{aspect-ratio:4/3}
.feature h2{margin-bottom:var(--s4)}
.feature .facts{margin-top:var(--s6)}
.feature .row{margin-top:var(--s6)}

/* wide photo with copy beneath */
.wide-photo{aspect-ratio:21/9;border-radius:var(--r-lg);margin-bottom:var(--gap-block)}

/* ---------- program blocks (/programs) ---------- */
/* Blocks are separated by a rule and their own padding; the section supplies the space
   above the first block and below the last. */
.program{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gap-split);align-items:center;padding-block:var(--gap-block)}
.program:first-child{padding-top:0}
.program:last-child{padding-bottom:0}
.program+.program{border-top:1px solid var(--line)}
.program.flip .program-media{order:2}
.program .photo{aspect-ratio:4/3}
.program h2{margin-bottom:var(--s4)}
.program .lead{margin-bottom:var(--s5)}
.program .facts{margin:var(--s5) 0 var(--s6);gap:0 var(--s6)}
.program .facts>div{padding:var(--row) 0}

/* ---------- two pillars (what we do / our method) ---------- */
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7)}
.pillar p{color:var(--ink-2)}

/* ---------- numbered steps (real sequences only) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);counter-reset:step}
.step{position:relative}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);color:var(--gold-text);line-height:1;display:block;margin-bottom:var(--s4)}
.step h3{margin-bottom:var(--s3)}

/* ---------- topic columns (curriculum, camps, start a chapter) ---------- */
.tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7)}
.track h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-title-lg);margin-bottom:var(--s4)}
.track .level{padding:var(--row) 0;border-top:1px solid var(--line)}
.track .level:last-child{border-bottom:1px solid var(--line)}
.track .level h4{margin-bottom:var(--s2)}
.track .level p{color:var(--ink-2);font-size:var(--fs-sm)}
.track .level .recommendation{margin-top:var(--s3)}
.electives{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s7)}
.elective h3{margin-bottom:var(--s2);font-size:var(--fs-body)}

/* ---------- hackathon archive ---------- */
.archive{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.archive .pool{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.4rem,1.2rem + 1vw,2rem);color:var(--gold-text);line-height:1}
.archive h3{margin:var(--s3) 0 var(--s2)}

/* ---------- region tiles: the /regions directory and "Areas" on region pages ---------- */
/* Every tile is one link: a 3:2 city photo, the name with an arrow, and an optional short line. */
.region-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s5)}
.region-tile a{display:block;color:var(--ink);border-radius:var(--r)}
.region-tile .photo{aspect-ratio:3/2;margin-bottom:var(--s4)}
.region-tile-name{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);margin:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-title);line-height:1.15;letter-spacing:0}
.region-tile-name .t{min-width:0;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.18em;transition:text-decoration-color var(--d1) var(--ease)}
.region-tile a:is(:hover,:focus-visible) .region-tile-name .t{text-decoration-color:var(--gold)}
/* The arrow sits on the first line when a long name wraps. */
.region-tile-name .ic{margin-top:calc((1lh - 20px) / 2);color:var(--ink-3);transition:transform var(--d1) var(--ease),color var(--d1) var(--ease)}
.region-tile a:hover .region-tile-name .ic{transform:translateX(4px);color:var(--ink)}
.region-tile-meta{margin-top:var(--s2);color:var(--ink-3);font-size:var(--fs-sm)}
.region-tile.is-hidden{display:none}
/* Smaller tiles inside a region page's main column. */
.region-tiles.is-compact{gap:var(--s6) var(--s4)}
.region-tiles.is-compact .region-tile .photo{margin-bottom:var(--s3)}
.region-tiles.is-compact .region-tile-name{font-family:var(--font-sans);font-size:var(--fs-body);font-weight:600;line-height:1.4}
.region-tiles.is-compact .region-tile-meta{margin-top:var(--s1);font-size:var(--fs-xs)}
.dir-empty{padding:var(--s7) 0;color:var(--ink-2)}
.dir-empty[hidden]{display:none}
.dir-empty strong{color:var(--ink)}
/* Credits for the city photos: one quiet line that opens into the list. */
.photo-credits{margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-3)}
.photo-credits summary{width:max-content;max-width:100%;cursor:pointer;font-weight:600}
.photo-credits ul{margin-top:var(--s3);display:grid;gap:var(--s1)}
:is(.photo-credits,.photo-credit) a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.18em}
:is(.photo-credits,.photo-credit) a:hover{color:var(--ink);text-decoration-color:var(--ink-3)}

/* ---------- region page ---------- */
.region-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--gap-split);align-items:start}
/* Sections are separated by space only: lists and facts already end in a rule. */
.region-main>section+section{margin-top:var(--gap-block)}
.region-main h2{font-size:var(--fs-h2-sm);margin-bottom:var(--s5)}
.region-aside{position:sticky;top:calc(var(--header-h) + var(--s5))}
.contact-card{display:grid;gap:var(--s5)}
.contact-card h2{font-size:1.35rem;margin:0}
.contact-card .btn{width:100%;height:auto;min-height:48px;padding-block:var(--s3);white-space:normal;text-align:center;line-height:1.25}
.contact-card dl{display:grid;gap:var(--s4)}
.contact-card dt{margin-bottom:2px}
.contact-card dd{font-size:var(--fs-sm);color:var(--ink-2)}
.contact-card dd a{word-break:break-word}
.contact-card .note{font-size:var(--fs-xs);color:var(--ink-3)}
.contact-card dd .note{margin-top:var(--s2)}
.contact-card dd .btn{margin-top:var(--s1)}
.contact-card dd .link-arrow,.contact-card dd .btn{text-decoration:none}
.contact-card dd .link-arrow{margin-top:var(--s2)}
/* No main column (a region with only a contact card): keep the card at a readable width. */
.region-grid.is-solo{grid-template-columns:minmax(0,440px)}
.region-grid.is-solo .region-aside{position:static}
/* Long region names ("Message the San Francisco Bay Area team") wrap instead of overflowing. */
.region-hero .actions .btn{height:auto;min-height:56px;padding-block:14px;white-space:normal;text-align:center;line-height:1.25}
/* Quiet "Message <region>" link beside the hero buttons. */
.page-hero .actions .hero-message{align-self:center;margin-left:var(--s2)}
/* City photo beside the heading, with its credit underneath. */
.region-photo{margin:0}
.page-hero.split.region-hero .photo{aspect-ratio:3/2}
.photo-credit{margin-top:var(--s2);font-size:var(--fs-xs);color:var(--ink-3);text-align:right}
.region-parent{margin-top:calc(var(--s2) * -1);color:var(--ink-2)}
.region-main .facts{margin-top:var(--s6)}
/* An odd last fact spans the row, so no half-width rule is left dangling. */
.region-main .facts>div:last-child:nth-child(odd){grid-column:1/-1}
.region-main .section-actions{margin-top:var(--s5);column-gap:var(--s6)}
/* Programs: one block each, separated by a rule. */
.region-program+.region-program{margin-top:var(--s7);padding-top:var(--s7);border-top:1px solid var(--line)}
.region-program h3{margin-bottom:var(--s3)}
.region-program .eyebrow{margin-bottom:var(--s2)}
.region-program-summary{color:var(--ink-2)}
.region-program.has-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,12rem);gap:var(--s6);align-items:start}
.region-program-photo{aspect-ratio:4/3}
/* Optional sections: notices, stats, photos, links. */
.region-notices{display:grid;gap:var(--s3)}
.region-notices .notice{max-width:none;padding:var(--s4) var(--s5);border-left:3px solid var(--gold);border-radius:var(--r-ctl);background:var(--gold-tint);color:var(--ink);font-size:var(--fs-sm)}
.region-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.region-gallery .photo{aspect-ratio:4/3}
.region-links{display:grid;gap:var(--s3)}
/* Event rows: title and details, with their buttons beside them. */
.chapter-options{margin-top:var(--s5);border-top:1px solid var(--line)}
.chapter-options li{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);padding-block:var(--row-roomy);border-bottom:1px solid var(--line)}
.chapter-options h3{font-family:var(--font-sans);font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:0}
.chapter-options .opt-info{display:grid;gap:3px}
.chapter-options .opt-meta{margin:0;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.45}
.chapter-options .opt-actions{display:flex;flex-wrap:wrap;gap:var(--s2);flex-shrink:0}

/* ---------- team ---------- */
/* advisory board: person cards, five to a row (smaller than the executive team's four) */
.people.board{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- sponsors ---------- */
.tiers{display:grid;gap:var(--s6)}
.tier{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.tier h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.25rem;color:var(--gold-text)}
.tier ul{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.tier li{font-weight:600;font-size:1.1rem}
.sponsor-wall img{width:100%;max-width:760px;margin-inline:auto}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap-split);align-items:start}

/* ---------- universities logo wall (volunteer) ---------- */
.uni-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6)}
.uni-head h2{font-size:var(--fs-h2-sm)}
.uni-head p{color:var(--ink-3);font-size:var(--fs-sm)}

/* ---------- 404 ---------- */
.error-page{min-height:60vh;display:grid;align-content:center}
.error-page .code{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(4rem,3rem + 6vw,9rem);line-height:1;color:var(--gold);margin-bottom:var(--s5)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .page-hero.split .hero-split,.feature,.program,.region-grid,.contact-grid{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .feature.flip .feature-media,.program.flip .program-media{order:0}
  /* stacked photos: shorter, so the text is not pushed a full screen down */
  .page-hero.split .photo,.program .photo{aspect-ratio:16/10}
  /* /programs: the Chapters photo comes right after the hero, so the stacked hero drops its own */
  .page-hero.programs-hero .photo{display:none}
  .region-aside{position:static}
  .region-aside .contact-card{max-width:28rem}
  .tracks{grid-template-columns:1fr}
  .region-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wide-photo{aspect-ratio:16/9}
  .people.board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Three-item rows keep three columns down to 721px, then stack (never 2 + 1). */
@media (max-width:720px){
  .steps,.archive,.electives,.pillars{grid-template-columns:1fr}
}
@media (max-width:640px){
  .region-gallery{grid-template-columns:1fr}
  .page-hero .actions .hero-message{margin-left:0}
  .tier{grid-template-columns:1fr;gap:var(--s3)}
  .region-program.has-photo{grid-template-columns:minmax(0,1fr)}
  .region-program-photo{order:-1;max-width:24rem}
}
@media (max-width:560px){
  .people.board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .region-tiles{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .region-tiles.is-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s3)}
  .photo-credit{text-align:left}
}
@media (max-width:520px){
  .chapter-options li{flex-direction:column;gap:var(--s3)}
}