@import url("/zz/fonts.css");
/*
 * The donate page (components/site/DonateView.tsx): the blue banner with the animated illustration (public/zz/banner.css)
 * and the page's title, then the gift card (public/zz/gift.css) on a faint brand wash.
 */
.zzd-hero {
  position: relative; display: flex; align-items: center; justify-content: center; height: 300px; padding: 0 10px; overflow: hidden;
  background: #006db8;
}
.zzd-hero__art { top: 0; right: 0; height: 100%; }
.zzd-hero .zzd-title {
  position: relative; z-index: 1; margin: 0; font: 600 40px/1 "Work Sans", "Poppins", sans-serif; color: #fff;
  text-align: center; text-wrap: balance;
}
.zzd-give { padding: 60px 0; background: radial-gradient(1000px 420px at 50% 40%, #eef5fc 0%, rgb(238 245 252 / 0) 70%), #fff; }
.zzd__wrap { max-width: 1200px; margin: 0 auto; scroll-margin-top: 110px; }
/* the donate page's card has a little white between the form and the picture (as it always had) */
.zzd__wrap > .zzg { column-gap: 20px; }

/* /checkout/: the form alone in one wide card, edge to edge below the card's width (as that page always was) */
.zzd-checkout > .zzg { grid-template-columns: minmax(0, 1fr); border-radius: 40px; }
.zzd-checkout .zzg__side { display: none; }
.zzd-checkout .zzg__main { padding: 40px; }
@media (max-width: 1240px) { .zzd__wrap.zzd-checkout { margin: 0; } }

/* /checkout/: the card's place while the browser picks the form the link asks for */
.zzd-wait { min-height: 760px; border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px rgb(0 85 146 / 0.06), 0 24px 48px -12px rgb(0 85 146 / 0.18); }
@media (max-width: 900px) { .zzd-wait { min-height: 820px; border-radius: 24px; } }

/* no published donation form: a short note instead of the card */
.zzd-off { padding: 48px 32px; border-radius: 28px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 24px 48px -12px rgb(0 85 146 / 0.18); }
.zzd-off p { margin: 0; font: 400 17px/1.6 "Roboto", sans-serif; color: #475467; }
.zzd-off .zzd-off__title { margin: 0 0 8px; font: 700 30px/1.15 "Source Serif 4", Georgia, serif; color: #0b1b36; }

@media (max-width: 1240px) {
  .zzd__wrap { margin: 0 20px; }
}
@media (max-width: 1099px) {
  .zzd-hero__art { opacity: 0.2; }
}
@media (max-width: 767px) {
  .zzd-hero__art { opacity: 0.1; }
  .zzd-hero .zzd-title { font-size: 30px; }
}
@media (max-width: 600px) {
  .zzd__wrap { margin: 0 12px; }
}