/* =========================================================================
   GET INVOLVED PAGE
   ========================================================================= */

/* ---- INTRO ------------------------------------------------------------ */
.involved-intro {
  padding-block: var(--space-xl) var(--space-lg);
}

.involved-intro__heading {
  font-size: var(--text-xl);
  max-width: 20ch;
}

.involved-intro__copy {
  color: var(--colour-ink-soft);
  max-width: 60ch;
}

/* ---- FOSTER / VOLUNTEER (shared pattern) -------------------------------- */
.involved-section {
  padding-block: var(--space-xl);
}

.involved-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  grid-template-areas:
    "foster-image"
    "foster-eyebrow"
    "foster-heading"
    "foster-copy"
    "foster-points"
    "foster-cta";
}

.involved-section__grid .btn {
  justify-self: center;
}

.involved-section--reverse .involved-section__grid {
  grid-template-areas:
    "volunteer-image"
    "volunteer-eyebrow"
    "volunteer-heading"
    "volunteer-copy"
    "volunteer-points"
    "volunteer-cta";
}

.involved-section__heading {
  font-size: var(--text-xl);
}

.involved-section__copy {
  color: var(--colour-ink-soft);
  max-width: 55ch;
}

.involved-section__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-weight: 700;
}

.involved-section__points i {
  color: var(--colour-field);
  width: 1.4em;
}

.involved-section__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media (min-width: 64rem) {
  .involved-section__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "foster-eyebrow foster-eyebrow foster-eyebrow foster-eyebrow foster-eyebrow foster-eyebrow . foster-image foster-image foster-image foster-image foster-image"
      "foster-heading foster-heading foster-heading foster-heading foster-heading foster-heading . foster-image foster-image foster-image foster-image foster-image"
      "foster-copy foster-copy foster-copy foster-copy foster-copy foster-copy . foster-image foster-image foster-image foster-image foster-image"
      "foster-points foster-points foster-points foster-points foster-points . . foster-image foster-image foster-image foster-image foster-image"
      "foster-cta foster-cta foster-cta foster-cta . . . foster-image foster-image foster-image foster-image foster-image";
    column-gap: var(--space-lg);
  }

  .involved-section--reverse .involved-section__grid {
    grid-template-areas:
      "volunteer-image volunteer-image volunteer-image volunteer-image volunteer-image . volunteer-eyebrow volunteer-eyebrow volunteer-eyebrow volunteer-eyebrow volunteer-eyebrow volunteer-eyebrow"
      "volunteer-image volunteer-image volunteer-image volunteer-image volunteer-image . volunteer-heading volunteer-heading volunteer-heading volunteer-heading volunteer-heading volunteer-heading"
      "volunteer-image volunteer-image volunteer-image volunteer-image volunteer-image . volunteer-copy volunteer-copy volunteer-copy volunteer-copy volunteer-copy volunteer-copy"
      "volunteer-image volunteer-image volunteer-image volunteer-image volunteer-image . volunteer-points volunteer-points volunteer-points volunteer-points volunteer-points ."
      "volunteer-image volunteer-image volunteer-image volunteer-image volunteer-image . volunteer-cta volunteer-cta volunteer-cta volunteer-cta . .";
  }

  .involved-section__image img {
    aspect-ratio: 4 / 5;
    height: auto;
    max-height: 26rem;
    object-fit: cover;
  }
}

/* ---- DONATE (visible placeholder only) ----------------------------------- */
.involved-donate {
  padding-block: var(--space-xl);
  background: var(--colour-field-deep);
  color: var(--colour-field-pale);
  scroll-margin-top: 5rem;
}

.involved-donate__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  grid-template-areas:
    "donate-eyebrow"
    "donate-heading"
    "donate-copy"
    "donate-tiers"
    "donate-note";
}

.involved-donate__heading {
  color: var(--colour-paper-raised);
  font-size: var(--text-xl);
}

.involved-donate__copy {
  max-width: 60ch;
  opacity: 0.9;
}

.involved-donate__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-sm);
}

.donate-tier {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.donate-tier__amount {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--colour-paper-raised);
}

.donate-tier__desc {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  opacity: 0.85;
  min-height: 2.6em;
}

.donate-tier__btn {
  margin-top: var(--space-sm);
  width: 100%;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--colour-paper-raised);
}

.donate-tier__btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.involved-donate__note {
  margin-top: var(--space-sm);
}

@media (min-width: 64rem) {
  .involved-donate__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "donate-eyebrow donate-eyebrow donate-eyebrow donate-eyebrow donate-eyebrow donate-eyebrow donate-eyebrow donate-eyebrow donate-eyebrow donate-eyebrow donate-eyebrow donate-eyebrow"
      "donate-heading donate-heading donate-heading donate-heading donate-heading donate-heading donate-heading donate-heading . . . ."
      "donate-copy donate-copy donate-copy donate-copy donate-copy donate-copy . . . . . ."
      "donate-tiers donate-tiers donate-tiers donate-tiers donate-tiers donate-tiers donate-tiers donate-tiers donate-tiers donate-tiers donate-tiers donate-tiers"
      "donate-note donate-note donate-note donate-note donate-note donate-note donate-note donate-note donate-note donate-note donate-note donate-note";
    column-gap: var(--space-lg);
  }
}