/**
 * DonateCTA — ported 1:1 from components/sections/DonateCTA.module.css.
 * Module root .cta → .s-donate-cta; other module classes scoped under
 * .s-donate-cta. Home renders BACKGROUND MODE (.bgMode): the still fills the
 * band full-bleed with a green scrim, copy + white donate pill over it.
 */

/* "How You Help" — green conversion band: copy + donate on the left, the
   documentary film in a rounded panel on the right. */
.s-donate-cta {
  position: relative;
  overflow: hidden;
  background: var(--c-green);
  color: var(--c-text-on-dark);
  padding-block: clamp(4rem, 9vw, 7rem);
}

.s-donate-cta .grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .s-donate-cta .grid {
    grid-template-columns: 1.05fr 1fr;
  }
}

/* ── Background mode: the still fills the whole band ─────────────────────
   Used when no film is supplied. The photo sits full-bleed with a green
   scrim so the left-hand copy stays legible; the family/sunset reads through
   on the right. */
.s-donate-cta.bgMode {
  padding-block: clamp(5rem, 11vw, 9rem);
}
.s-donate-cta.bgMode .grid {
  /* Single column — copy sits over the photo, no side panel. */
  grid-template-columns: 1fr;
}
.s-donate-cta.bgMode .content {
  max-width: 34rem;
}
.s-donate-cta .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.s-donate-cta .bgImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias toward the right so the family stays in frame behind the copy gap. */
  object-position: 72% center;
}
.s-donate-cta .scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(11, 110, 79, 0.97) 0%,
    rgba(11, 110, 79, 0.9) 28%,
    rgba(11, 110, 79, 0.62) 55%,
    rgba(11, 110, 79, 0.32) 100%
  );
}
/* Narrow screens: the copy stacks over the busiest part of the photo, so
   darken the whole frame instead of relying on the left-to-right fade. */
@media (max-width: 700px) {
  .s-donate-cta .scrim {
    background: linear-gradient(
      180deg,
      rgba(11, 110, 79, 0.9) 0%,
      rgba(11, 110, 79, 0.82) 55%,
      rgba(11, 110, 79, 0.86) 100%
    );
  }
}

.s-donate-cta .eyebrow {
  margin: 0 0 var(--s-4);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.85);
}
.s-donate-cta .title {
  margin: 0;
  max-width: 16ch;
  color: #fff;
}
.s-donate-cta .body {
  margin: var(--s-6) 0 0;
  max-width: 52ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
}

/* White donate pill (clay stays for processor-side); Lucide Heart inherits green. */
.s-donate-cta .donate {
  margin-top: var(--s-8);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-8);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-green);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  text-decoration: none;
  transition: transform var(--d-fast) var(--e-standard),
    background-color var(--d-fast) var(--e-standard);
}
.s-donate-cta .donate:hover {
  background: var(--c-paper);
  transform: translateY(-2px);
}

/* Film panel — rounded + contained; HeroVideo fills it absolutely.
   (Video mode only — unused in the home background render.) */
.s-donate-cta .media {
  width: 100%;
}
.s-donate-cta .videoFrame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}