/**
 * Engage — ported 1:1 from app/(site)/engage/Engage.module.css.
 * Module classes scoped under the page root .p-engage (auto-enqueued by the
 * page-*.css glob). Shared section styling lives in full-bleed-hero.css; the
 * Campaigns slider carries its own card styles in carousel.css (copied from this
 * same source module), so the .card rules here also govern the "Ways to engage"
 * grid cards — identical bodies, no conflict.
 */

.p-engage .intro {
  max-width: var(--max-w-prose);
}
.p-engage .intro p {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--c-text);
  text-wrap: pretty;
}
.p-engage .intro p + p {
  margin-top: var(--s-4);
}

.p-engage .section {
  margin-top: clamp(3rem, 7vw, 5rem);
}

.p-engage .eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-green);
  margin: 0 0 var(--s-6);
}

.p-engage .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 720px) {
  .p-engage .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-engage .card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--d-fast) var(--e-standard),
    box-shadow var(--d-fast) var(--e-standard),
    border-color var(--d-fast) var(--e-standard);
}
.p-engage .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: color-mix(in srgb, var(--c-green) 40%, var(--c-border));
}

/* The give ask leads the page — feature it with the heritage green. */
.p-engage .cardDonate {
  border-color: color-mix(in srgb, var(--c-green) 45%, var(--c-border));
  background: color-mix(in srgb, var(--c-green) 6%, var(--c-surface-raised));
}

.p-engage .iconTile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-green) 12%, var(--c-surface-raised));
  color: var(--c-green);
}
.p-engage .cardDonate .iconTile {
  background: var(--c-green);
  color: #fff;
}

.p-engage .cardTitle {
  margin: 0;
}

.p-engage .cardBody {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text);
  text-wrap: pretty;
}

/* Push the CTA to the bottom so cards in a row align. */
.p-engage .cardCta {
  margin-top: auto;
  padding-top: var(--s-2);
}

.p-engage .close {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--r-lg);
  background: var(--c-midnight);
  color: var(--c-text-on-dark);
  text-align: center;
}
.p-engage .closeTitle {
  margin: 0 auto;
  max-width: 22ch;
  color: #fff;
}
.p-engage .closeBody {
  margin: var(--s-4) auto 0;
  max-width: 52ch;
  color: var(--c-text-on-dark-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}
.p-engage .closeActions {
  margin-top: var(--s-8);
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  justify-content: center;
}