/* ═══════════════════════════════════════════════════════════════════════════
   Donate (page--donate). A focused page: the title, the reason and the whole giving module come
   first, in one gold field; the one photograph stands beside them on wide screens and follows
   them on a phone. The giving bloom itself lives in parts.css (partial giving).
   ═══════════════════════════════════════════════════════════════════════════ */

/* The gold field is as tall as its content and no taller: the amounts and the button sit in the first screen,
   and the field closes soon after the panel (the seam of the next section still gets its room). */
.page--donate .donate-top {
  padding-block: clamp(2rem, 1.2rem + 2.8vw, 3.5rem) calc(clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem) + var(--seam-h));
}
.page--donate .donate-top__grid { display: grid; gap: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }
.page--donate .donate-top__text { display: grid; gap: 1.1rem; justify-items: start; }
.page--donate .donate-top__text > .lead { max-inline-size: 36em; }
.page--donate .donate-top__give { min-inline-size: 0; scroll-margin-block-start: .5rem;   /* html's scroll-padding already clears the header */ }

/* The photograph: square, in a leaf, so the three people at the camera all stay in it. On a phone it comes
   after the amounts, small, its caption beside it. */
.page--donate .donate-top__art { display: grid; gap: .75rem; justify-self: start; inline-size: 100%; max-inline-size: 30rem; }
.page--donate .donate-top__art > .figure { grid-template-columns: clamp(7.5rem, 34vw, 10.5rem) minmax(0, 1fr); align-items: center; gap: 1.1rem; }
.page--donate .donate-top__role { color: var(--fg-muted); font-size: var(--fs-small); max-inline-size: 30em; }

@media (min-width: 64rem) {
  .page--donate .donate-top__grid {
    grid-template-columns: minmax(0, 1fr) clamp(13rem, 18vw, 16.5rem);
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.75rem, 1rem + 2.4vw, 3.5rem);
  }
  .page--donate .donate-top__text { grid-column: 1; grid-row: 1; }
  .page--donate .donate-top__give { grid-column: 1; grid-row: 2; }
  /* Beside the panel the photograph keeps the reader company: it stays in view while the panel is read. */
  .page--donate .donate-top__art {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1.5rem);
    padding-block-start: .5rem;
  }
  .page--donate .donate-top__art > .figure { grid-template-columns: minmax(0, 1fr); align-items: start; gap: .9rem; }
}

/* 3 How giving works here: three real steps, one line through them. */
.page--donate .donate-how__steps .daysteps__body { max-inline-size: 22em; }

/* 4 and 5: where a gift goes, and who receives it. Two fields that lean together. */
.page--donate .donate-trust__pair { display: grid; gap: clamp(.9rem, .6rem + 1vw, 1.4rem); }
.page--donate .donate-where, .page--donate .donate-who { max-inline-size: none; scroll-margin-block-start: .5rem;   /* html's scroll-padding already clears the header */ }
.page--donate .donate-where__title, .page--donate .donate-who__title { font-size: calc(var(--fs-sub) * 1.25); font-weight: var(--fw-display); }
.page--donate .donate-where > .medallion + .donate-where__title { margin-block-start: 1.4rem; }
.page--donate .donate-who__disc { display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; background: var(--white); }
.page--donate .donate-who__mark { inline-size: 74%; block-size: auto; }
.page--donate .donate-who__disc + .donate-who__title { margin-block-start: 1.4rem; }
.page--donate .donate-who__line {
  max-inline-size: 22em;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: calc(var(--fs-sub) * 1.08);
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  text-wrap: balance;
}
.page--donate .donate-who__receipt { margin-block-start: 1.5rem; }
@media (min-width: 56rem) {
  .page--donate .donate-trust__pair { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
}

/* 6 Other ways to give */
.page--donate .donate-other__head { margin-block-end: 0; }
.page--donate .donate-ways { display: grid; gap: .75rem; }

/* 7 Questions */
.page--donate .donate-faq { padding-block-start: 0; }

/* 7: the page ends with a route onward, quietly: two outlined buttons under the questions. */
.page--donate .donate-faq__onward { margin-block-start: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }