/* Styles for get-involved.html.
   Layout modeled on allthesame.org/volunteer/'s structure (full-bleed photo
   hero with two-tone heading + pill CTAs, a photo-card grid, numbered-circle
   steps, solid-color closing band) — rebuilt with STEM Meets All's own
   colors, type, photos and copy. Buttons/links reuse the real site's own
   .hero-btn / .program-cta / .cta-band components for brand consistency. */

[data-page="get-involved"] {
  --gt-deep: #2f747b;
  --gt-line: rgba(30, 69, 71, 0.14);
}

.gt-inner { max-width: 1160px; margin: 0 auto; }

.gt-fine { font-size: 13.5px; line-height: 1.5; color: var(--pencil); text-align: center; }

/* ---------- Two-tone headings (Quicksand, bold, centered rhythm) ---------- */
.gt-center-head { text-align: center; max-width: 700px; margin: 0 auto 52px; }
.gt-eyebrow-center { justify-content: center; }
.gt-eyebrow-center::after { content: ""; width: 32px; height: 1.5px; background: var(--sea); }
.gt-eyebrow-light { color: rgba(250, 246, 236, 0.85); }
.gt-eyebrow-light::before { background: rgba(250, 246, 236, 0.7); }

.gt-center-head h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15;
  letter-spacing: -0.01em; color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.gt-accent-dark { color: var(--gt-deep); }
.gt-accent-light { color: #2e7580; }

/* =========================================================
   1. HERO — full-bleed photo + dark scrim + two-tone heading.
   ========================================================= */
/* Same height as the Impact page's hero (.imp-hero): min-height 340px,
   96px 0 64px padding, bumped to 460px min-height at >=768px. */
.gt-hero {
  position: relative; overflow: hidden;
  min-height: 340px;
  display: flex; align-items: center;
  padding: 96px 0 64px;
}
@media (min-width: 768px) {
  .gt-hero { min-height: 460px; }
}
/* Same inset column as the Impact page's hero (.imp-wrap), so hero text
   sits at the same horizontal position as that page's heading instead of
   flush against the viewport edge. */
.gt-hero-wrap { max-width: 1080px; margin: 0 auto; padding: 0 48px; width: 100%; }
.gt-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.gt-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(47, 116, 123, 0.5);
}
.gt-hero-inner { position: relative; z-index: 2; max-width: 620px; }
.gt-hero-inner .eyebrow { margin-bottom: 16px; }
.gt-hero-h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.15;
  letter-spacing: -0.01em; color: #ffffff;
  margin-bottom: 16px;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.gt-hero-lede {
  font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.9);
  max-width: 560px; margin-bottom: 18px;
}
.gt-hero .hero-btn { padding: 12px 26px; font-size: 14px; }
.gt-hero .hero-btn.solid { padding-left: 20px; padding-right: 20px; }

/* =========================================================
   2. WHY JOIN — centered head, three plain columns (no cards).
   ========================================================= */
.gt-why { padding: 100px 48px 96px; background: rgb(194, 228, 225); }
.gt-reasons {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  text-align: center; max-width: 980px; margin: 0 auto;
}
.gt-reason-n {
  display: block; font-family: "Quicksand", sans-serif; font-weight: 700;
  font-size: 14px; color: var(--sea); letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.gt-reason h3 {
  font-family: "Quicksand", sans-serif; font-weight: 700;
  font-size: 21px; line-height: 1.25; color: var(--ink); margin-bottom: 10px;
}
.gt-reason p { font-size: 15.5px; line-height: 1.6; color: rgba(30, 69, 71, 0.82); }

/* =========================================================
   3. CHOOSE YOUR PATH — photo-card grid, modeled on ATS's
      "Our Departments" cards: photo, bold title, blurb, plain arrow-link.
   ========================================================= */
.gt-paths { background: #a3c6c3; padding: 60px 48px 64px; }
.gt-path-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.gt-path-card {
  background: var(--paper); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30, 69, 71, 0.08), 0 20px 40px -22px rgba(30, 69, 71, 0.35);
  display: flex; flex-direction: column;
}
.gt-path-card-img { aspect-ratio: 2.15 / 1; overflow: hidden; background: var(--mist); }
.gt-path-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-path-card-body {
  padding: 12px 18px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; flex: 1;
  background: #e1f1f2;
}
.gt-path-card-body h3 {
  font-family: "Quicksand", sans-serif; font-weight: 700;
  font-size: 17px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 4px;
}
.gt-path-card-body p { font-size: 15px; line-height: 1.55; color: rgba(30, 69, 71, 0.82); margin-bottom: 20px; }
.gt-path-card-body .program-cta {
  margin-top: auto; font-size: 15px;
  align-self: center; border-bottom: none; padding-bottom: 0;
}

/* =========================================================
   4. HOW IT WORKS + FINAL CTA — numbered circles, then the
      site's real .cta-band component for the closing band.
   ========================================================= */
.gt-work-sec { padding-top: 104px; }
.gt-steps-row {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 140px)); gap: 48px;
  justify-content: center;
  text-align: center; margin-bottom: 64px;
}
.gt-step-circle {
  display: grid; place-items: center; margin: 0 auto 18px;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--gt-deep); color: #ffffff;
  font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 22px;
}
.gt-step h3 {
  font-family: "Quicksand", sans-serif; font-weight: 700;
  font-size: 17px; letter-spacing: 0.01em; color: var(--ink);
}
.gt-work-sec .cta-band { margin: 0 -48px; }

/* =========================================================
   Motion — one entrance per section, nothing per-card.
   ========================================================= */
html.motion [data-page="get-involved"] .gt-eyebrow-light,
html.motion [data-page="get-involved"] .gt-hero-word,
html.motion [data-page="get-involved"] .gt-hero-lede,
html.motion [data-page="get-involved"] .gt-hero .hero-cta,
html.motion [data-page="get-involved"] .gt-why .gt-center-head .eyebrow,
html.motion [data-page="get-involved"] .gt-why .gt-center-head h2,
html.motion [data-page="get-involved"] .gt-reason,
html.motion [data-page="get-involved"] .gt-paths .gt-center-head .eyebrow,
html.motion [data-page="get-involved"] .gt-path-card,
html.motion [data-page="get-involved"] .gt-work-sec .gt-center-head .eyebrow,
html.motion [data-page="get-involved"] .gt-step,
html.motion [data-page="get-involved"] .cta-band h2,
html.motion [data-page="get-involved"] .cta-band .band-inner p,
html.motion [data-page="get-involved"] .cta-band .cta-row-rect {
  opacity: 0;
}
html.motion [data-page="get-involved"] .gt-hero-h1 { opacity: 1; }
html.motion [data-page="get-involved"] .gt-hero-word { display: inline-block; will-change: transform, opacity; }
html.motion [data-page="get-involved"] .gt-hero-bg { will-change: transform; }
html.motion [data-page="get-involved"] .cta-band .band-orbit ellipse { will-change: transform; }
html.motion [data-page="get-involved"] .motion-done { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html.motion [data-page="get-involved"] :is(
    .gt-eyebrow-light, .gt-hero-word, .gt-hero-lede, .gt-hero .hero-cta,
    .gt-why .gt-center-head .eyebrow, .gt-why .gt-center-head h2, .gt-reason,
    .gt-paths .gt-center-head .eyebrow, .gt-path-card,
    .gt-work-sec .gt-center-head .eyebrow, .gt-step,
    .cta-band h2, .cta-band .band-inner p, .cta-band .cta-row-rect
  ) {
    opacity: 1 !important;
  }
}

/* =========================================================
   Tablet
   ========================================================= */
@media (max-width: 1080px) {
  .gt-reasons { grid-template-columns: 1fr; max-width: 480px; gap: 40px; }
  .gt-path-grid { grid-template-columns: repeat(2, 1fr); }
  .gt-path-grid .gt-path-card:last-child { grid-column: 1 / -1; max-width: 380px; margin: 0 auto; }
  .gt-steps-row { grid-template-columns: repeat(2, minmax(0, 160px)); gap: 48px 64px; }
}

@media (max-width: 900px) {
  .gt-hero { padding: 88px 0 48px; }
  .gt-hero-wrap { padding: 0 24px; }
  .gt-hero-scrim {
    background: rgba(47, 116, 123, 0.5);
  }
  .gt-why { padding: 76px 24px 72px; }
  .gt-paths { padding: 56px 24px 48px; }
  .gt-work-sec { padding-top: 80px; }
  .gt-work-sec .cta-band { margin: 0 -24px; }
  .gt-center-head { margin-bottom: 26px; }
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 640px) {
  .gt-hero-h1 { font-size: clamp(24px, 7vw, 32px); }
  .gt-hero-lede { font-size: 14px; max-width: none; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .gt-hero .hero-btn { padding: 10px 22px; }

  .gt-path-grid { grid-template-columns: 1fr; }
  .gt-path-grid .gt-path-card:last-child { grid-column: auto; max-width: none; }

  .gt-steps-row { grid-template-columns: 1fr; gap: 32px; }
}