/* ==========================================================================
   afterschool.css — /afterschool/index.html (info page) page-specific styles.
   Reuses base.css tokens + layout.css rhythm (.section/.container) +
   components.css primitives (.btn/.card/.grid) + textures.css utilities
   (tx-grain/tx-waveform, already reduced-motion-guarded). No form styles
   here -- the register page owns public-form.css separately.

   Alignment note (fixed): every prose block previously carried BOTH
   `.container` and `.afterschool__prose`, and the two rules fought over
   max-width -- the page-load order made prose's 720px win in some sections
   but not others, so headings and cards never shared one left edge as you
   scrolled. Fix: `.container` alone now owns section width everywhere
   (matches impact.html's own convention -- see `.impact__lede`), and
   `.afterschool__prose` only caps individual <p> elements to a comfortable
   reading measure, left-flush, never centered.
   ========================================================================== */

/* Page-local ink. The nearest brand tokens (--color-primary-dark 4.18:1,
   --color-secondary-dark 2.84:1 on this page's backgrounds) both miss WCAG
   AA 4.5:1 for the small label text below; this measures 5.8:1. */
.afterschool {
  --afterschool-ink: #1F5FA6;
}

/* ── Section head: eyebrow above the gradient title ──
   Names the narrative beat each section carries. Lives OUTSIDE
   `.afterschool__prose` so the prose measure rule never applies to it. */
.afterschool__eyebrow {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--afterschool-ink);
}

/* ── Hero ── */
.afterschool__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: var(--spacing-md);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 15% 20%, var(--color-overlay-white-mild) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(0, 0, 0, 0.08) 0%, transparent 50%),
    var(--gradient-primary);
  padding-block: var(--spacing-3xl);
  box-shadow: var(--shadow-lg);
}

.afterschool__hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: center;
}

.afterschool__hero-logo {
  margin-bottom: var(--spacing-sm);
}

.afterschool__hero-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-inverse);
  max-width: 20ch;
}

.afterschool__hero-tagline {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-inverse);
  max-width: 32ch;
}

.afterschool__hero-date {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  background: var(--color-overlay-white-mild);
  border-radius: var(--radius-pill);
  padding: var(--spacing-xs) var(--spacing-lg);
  margin-top: var(--spacing-xs);
}

.afterschool__hero-cta {
  margin-top: var(--spacing-md);
  box-shadow: var(--shadow-md);
}

/* ── Prose ── */
/* Scoping hook only -- see the alignment note above. No width/centering of
   its own, so it never fights `.container` for the section's edge. */
.afterschool__prose p,
p.afterschool__prose {
  max-width: var(--width-content);
  margin-bottom: var(--spacing-md);
}

.afterschool__prose p:last-child,
p.afterschool__prose:last-child {
  margin-bottom: 0;
}

/* ── Welcome ──
   Was a 720px column pinned left of a 1280px container, so half the section
   was dead gutter. The page's key reassurance now occupies that space as a
   real object instead of one more bold line in the same text block. */
.afterschool__intro {
  padding-top: var(--spacing-3xl);
}

.afterschool__intro-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: start;
  margin-top: var(--spacing-sm);
}

@media (min-width: 900px) {
  .afterschool__intro-layout {
    grid-template-columns: 3fr 2fr;
  }
}

.afterschool__lede {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

/* ── Program at a Glance ── */
.afterschool__glance-grid {
  margin-top: var(--spacing-lg);
}

.afterschool__glance-note {
  margin-top: var(--spacing-lg);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  max-width: var(--width-content);
}

/* ── Shared circular icon badge (glance cards, note cards, schedule facts) ──
   Decorative only (`aria-hidden`), so icon colour carries no text-contrast
   requirement. */
.afterschool__card-icon,
.afterschool__note-icon,
.afterschool__fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-bottom: var(--spacing-sm);
  border-radius: 50%;
  background: var(--color-primary-alpha-12);
  color: var(--color-primary-dark);
}

.afterschool__card-icon svg,
.afterschool__note-icon svg,
.afterschool__fact-icon svg {
  width: 22px;
  height: 22px;
}

.afterschool__card-icon--secondary,
.afterschool__note-icon--secondary,
.afterschool__fact-icon--secondary {
  background: var(--color-secondary-alpha-12);
  color: var(--color-secondary-dark);
}

/* ── What Will Students Experience? -- text + real program photo ──
   Real photo (not a stock/decorative image): the "After-School STEM
   Enrichment" promo poster already published on gallery.html, so its
   provenance is already vetted -- never invent a new image reference here. */
.afterschool__experience-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .afterschool__experience-layout {
    grid-template-columns: 3fr 2fr;
  }
}

.afterschool__experience-photo {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.afterschool__experience-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.afterschool__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
  margin-block: var(--spacing-lg);
}

.afterschool__topic {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-pill);
  background: var(--color-primary-alpha-12);
  color: var(--afterschool-ink);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.afterschool__topic:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ── Textured sections ──
   `.section-tx` is absolutely positioned, so its host needs a stacking
   context and the content wrapper needs to sit above it. */
.afterschool__apply,
.afterschool__schedule {
  position: relative;
  isolation: isolate;
}

.afterschool__layer {
  position: relative;
  z-index: 1;
}

/* ── Note card (welcome reassurance + attendance commitment) ── */
.afterschool__note {
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}


.afterschool__note-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--afterschool-ink);
  margin-bottom: var(--spacing-sm);
}

.afterschool__note-body {
  max-width: var(--width-content);
}

.afterschool__note-body + .afterschool__note-body {
  margin-top: var(--spacing-md);
}

/* ── Who Should Apply: statement line + trait checklist ──
   The closing paragraph used to run seven qualities together in one
   sentence; split out, each is scannable and the section uses the full
   container width. `auto-fit` handles every breakpoint (4 + 3 at desktop,
   1 column at 390px) with no bespoke media queries. */
.afterschool__statement {
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* Solid ink, not `section-title--gradient`: --gradient-brand's cyan end
   measures 1.66:1 against this page's background, so gradient body text
   would have shipped a new WCAG AA failure. */
.afterschool__statement-key {
  color: var(--afterschool-ink);
}

.afterschool__traits-lead {
  margin-top: var(--spacing-lg);
  max-width: var(--width-content);
}

.afterschool__traits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-md);
  list-style: none;
  margin-top: var(--spacing-lg);
}

.afterschool__trait {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-weight: var(--font-weight-medium);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.afterschool__trait:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.afterschool__trait-icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--afterschool-ink);
}

.afterschool__trait-icon svg {
  width: 20px;
  height: 20px;
}

/* Seven traits; the shared `.stagger` nth-child cascade in base.css stops
   at six, so the seventh would otherwise fire alongside the first. */
.afterschool__traits > .reveal:nth-child(7) {
  transition-delay: calc(6 * var(--transition-stagger));
}

/* ── A Full-Year STEM Experience: milestone rail beside the commitment ──
   Turns "runs September through April" from a claim into the shape of the
   year, and two side-by-side objects use the full container width. The rail
   is one continuous left border (padding, not gap, keeps it unbroken). */
.afterschool__year-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: start;
  margin-top: var(--spacing-xl);
}

@media (min-width: 900px) {
  .afterschool__year-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
  }
}

.afterschool__timeline {
  list-style: none;
}

.afterschool__milestone {
  position: relative;
  padding: 0 0 var(--spacing-lg) var(--spacing-lg);
  border-left: 2px solid var(--color-primary-alpha-20);
}

.afterschool__milestone:last-child {
  padding-bottom: 0;
}

.afterschool__milestone::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gradient-primary);
}

.afterschool__milestone-date {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--afterschool-ink);
}

.afterschool__milestone-label {
  color: var(--color-text);
}

/* ── Program Schedule: two icon-led facts ── */
.afterschool__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
  .afterschool__facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

.afterschool__fact {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.afterschool__fact-icon {
  margin-bottom: 0;
}

.afterschool__fact-title {
  font-weight: var(--font-weight-semibold);
  color: var(--afterschool-ink);
  margin-bottom: var(--spacing-xs);
}

/* ── Space Is Limited: pre-CTA panel ──
   Amber-tinted so the last beat before the CTA reads as its own moment, not
   a sixth blue text block, and does not compete with the gradient CTA band
   below. The accent tints only surface/rail/icon; text stays --color-text. */
.afterschool__alert {
  max-width: var(--width-wide);
  margin-inline: auto;
  padding: var(--spacing-2xl) var(--spacing-xl);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-xl);
  background: var(--color-accent-alpha-12);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.afterschool__alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--spacing-md);
  border-radius: 50%;
  background: var(--color-overlay-white-strong);
  color: var(--color-accent-dark);
}

.afterschool__alert-icon svg {
  width: 26px;
  height: 26px;
}

.afterschool__alert-title {
  margin-bottom: var(--spacing-sm);
}

.afterschool__alert-lead {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.afterschool__alert-body {
  max-width: 62ch;
  margin: var(--spacing-md) auto 0;
  color: var(--color-text);
}

/* ── Closing CTA band ── */
.afterschool__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 var(--spacing-md) var(--spacing-md);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 85% 15%, var(--color-overlay-white-mild) 0%, transparent 45%),
    var(--gradient-primary);
  padding-block: var(--spacing-3xl);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.afterschool__cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  max-width: var(--width-content);
}

.afterschool__cta-date {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
}

.afterschool__cta-date--sub {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  opacity: 0.9;
}

.afterschool__cta-msg {
  color: var(--color-text-inverse);
  margin-top: var(--spacing-xs);
}

/* Spacing above the row now comes from the wrapping .hero__actions
   (shared component, also used in the page's own hero) -- only the
   shadow is page-specific. */
.afterschool__cta-btn {
  box-shadow: var(--shadow-md);
}

.afterschool__cta-tag {
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-text-inverse);
  opacity: 0.9;
}

/* ── Stay Updated (general-purpose "keep me updated" signup) ── */
.afterschool__signup {
  /* In-page jumps (hero + nav CTAs) clear the sticky site-header. */
  scroll-margin-top: calc(var(--height-header) + var(--spacing-md));
}

.afterschool__signup-inner {
  max-width: var(--width-content);
}

.afterschool__signup-form {
  margin-top: var(--spacing-lg);
  max-width: 32rem;
}

.afterschool__signup-row {
  display: grid;
  gap: var(--spacing-md);
}

.afterschool__signup-btn {
  margin-top: var(--spacing-sm);
}

/* #signup-status now uses the shared .form-status component
   (public-form.css) instead of a page-local class -- same visual system
   as every other public form, per GCO-380 design feedback. */

@media (min-width: 560px) {
  .afterschool__signup-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Confirmed state -- replaces the form once the emailed link is clicked
   (GCO-380). Built on the SAME `.result-view` component the real
   registration form's own success view already uses (public-form.css,
   mascot + icon together, same order) -- one visual language across every
   public form on the site, not a bespoke one just for this page. That
   shared rule carries no chrome of its own (the registration page gets its
   card look from an ancestor `.public-form__card` this page doesn't have),
   so the card background/shadow/centering below is scoped to just this
   section. */
.afterschool__signup-inner .result-view {
  margin: var(--spacing-lg) auto 0;
  max-width: 32rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card-brand);
}

/* Confirmed only: a fade + rise on arrival from the email link, the one
   moment on this page worth a little ceremony. Pending (shown immediately
   after the visitor's own submit click, already mid-page) does not need
   it -- it is already in view the instant it appears. Starts flat/visible
   and is toggled on by JS adding `.is-visible` once the section is in
   place, using a forced synchronous reflow rather than
   requestAnimationFrame (which Chrome fully suspends for a backgrounded
   tab -- would strand the card invisible if the confirmation link were
   opened in one). */
.afterschool__signup-success {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.afterschool__signup-success.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.afterschool__signup-inner .result-view__title:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* ── Reduced motion ──
   House convention: declare the transition unconditionally above, no-op it
   here. Covers the trait tiles added this phase AND the topic chips, which
   shipped last phase without a guard. */
@media (prefers-reduced-motion: reduce) {
  .afterschool__topic,
  .afterschool__trait {
    transition: none;
  }

  .afterschool__signup-success {
    transition: none;
  }
}

@media (min-width: 768px) {
  .afterschool__hero-title {
    font-size: var(--font-size-4xl);
  }
}