/* ============================================================
   Steel City Codes - Home page
   ============================================================ */

/* ---------- hero: copy over a full-width background film ---------- */
/* .hero-media holds a still photo, always there, and the looping video that main.js starts over it,
   both under the flat --scrim wash that keeps the --on-dark copy readable on the brightest frame.
   Every text color in the hero inherits from .hero, so print can switch it back to ink. */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--hero-min);padding-block:var(--sec-sm);background:var(--ink-bar);color:var(--on-dark);--ring:var(--on-dark)}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-media :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:var(--scrim)}
/* the video fades in over the still once it has a frame to show */
.hero-media video{opacity:0;transition:opacity var(--d3) var(--ease)}
.hero-media.has-video video{opacity:1}
.hero h1{font-size:var(--fs-hero);max-width:19ch;margin-bottom:var(--s5)}
.hero .lead{max-width:46ch;margin-bottom:var(--s6);color:inherit}
.hero-actions{display:grid;gap:var(--s4)}
/* the finder is a light surface: its field and button keep the ink focus ring */
.hero .finder{--ring:var(--ink)}
.hero-alt{font-size:var(--fs-sm);margin-top:var(--s2);line-height:1.8}
/* underline: the shared text-link style in base.css, in the hero's own text color */
.hero .hero-alt a{font-weight:600;color:inherit}
.hero .hero-alt a:hover{text-decoration-color:currentColor}
/* Pause/Play for the film, added by main.js: bottom right, clear of the copy */
.hero-controls{position:absolute;inset:auto 0 var(--s3);display:flex;justify-content:flex-end;pointer-events:none}
.hero-toggle{pointer-events:auto;color:inherit}
.hero-toggle:hover{color:inherit;background:var(--fill-dark)}

html.js .hero-copy>*{opacity:0;transform:translateY(10px);animation:hero-in .7s var(--ease) forwards}
html.js .hero-copy>*:nth-child(2){animation-delay:.08s}
html.js .hero-copy>*:nth-child(3){animation-delay:.16s}
@keyframes hero-in{to{opacity:1;transform:none}}
html.js .hero h1 .hl{background-size:0 .2em;animation:hl-in .9s var(--ease) .55s forwards;transition:none}
@keyframes hl-in{to{background-size:100% .2em}}

/* ---------- peer mentorship: photo left, statement right ---------- */
.mentor-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-split);align-items:center}
.mentor-grid .photo{aspect-ratio:4/5}
.mentor-copy h2{margin-bottom:var(--s5)}
.mentor-copy .lead{margin-bottom:var(--s6)}

/* ---------- programs: three aligned blocks ---------- */
.programs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:var(--s4) var(--s5);row-gap:0}
.prog{display:grid;grid-row:span 2;grid-template-rows:subgrid;position:relative}
.prog .photo{align-self:end;margin-bottom:var(--s4)}
.prog .body{padding-bottom:0}
.prog h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-title-lg);line-height:1.1;display:flex;align-items:baseline;gap:var(--s2)}
.prog h3 .ic{width:20px;height:20px;transition:transform var(--d1) var(--ease);color:var(--ink-3);flex:0 0 auto;align-self:center}
.prog:hover h3 .ic{transform:translateX(5px);color:var(--ink)}
.prog p{color:var(--ink-2);margin-top:var(--s2);font-size:var(--fs-sm);max-width:44ch}
.prog .kicker{margin-top:var(--s2)}
.prog .photo{aspect-ratio:4/3}

/* ---------- regions ---------- */
.regions-head{max-width:60ch;margin-bottom:var(--gap-block)}
.regions-head h2{margin-bottom:var(--s4)}
.regions-head .link-arrow{margin-top:var(--s5)}

/* ---------- high schoolers: wide photo, then two columns ---------- */
.hs-photo{aspect-ratio:2.5/1;border-radius:var(--r-lg);margin-bottom:var(--gap-block)}
.hs-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-split);align-items:start}
.hs-grid h2{max-width:14ch}
.hs-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.hs-role{display:flex;flex-direction:column;padding-top:var(--s5);border-top:1px solid var(--line-2)}
/* the two links line up at the bottom even when one blurb runs a line longer */
.hs-role .link-arrow{margin-top:auto;align-self:flex-start}
.hs-role h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-title);margin-bottom:var(--s3)}
.hs-role .kicker{margin-bottom:var(--s3)}
.hs-role p{color:var(--ink-2);font-size:var(--fs-sm);margin-bottom:var(--s4)}

/* ---------- impact + sponsors ---------- */
.sponsor-strip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:center}
.sponsor-strip h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-title);margin-bottom:var(--s3)}
.sponsor-strip p{color:var(--ink-2);font-size:var(--fs-sm)}
/* the logo sheet is a white JPEG: multiply drops the white so the logos sit on the page colour */
.sponsor-strip img{width:100%;max-width:600px;height:auto;justify-self:end;filter:opacity(.85);mix-blend-mode:multiply}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mentor-grid,.hs-grid,.sponsor-strip{grid-template-columns:1fr;gap:var(--s7)}
  .sponsor-strip img{justify-self:center;max-width:440px}
  .mentor-grid .photo{aspect-ratio:3/2}
  .hs-photo{aspect-ratio:16/9;border-radius:var(--r)}
}
@media (max-width:720px){
  .programs-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--s7)}
  .prog{display:block;grid-row:auto}
}
@media (max-width:640px){
  .hs-roles{grid-template-columns:1fr}
}

/* ---------- print: the hero as plain ink text, no film ---------- */
@media print{
  .hero{min-height:0;background:none;color:var(--ink)}
  .hero-media,.hero-controls{display:none}
}