/* Presentation polish for the fundraising module demo.
   Loaded last so the main templates stay easy to maintain while visual QA continues. */

/* Content areas stay on the module grid. The foundation header deliberately does not:
   the primary site header spans the viewport and must remain visually continuous. */
.foundation-footer__inner,
.foundation-footer__bottom,
.section,
.home-hero,
.campaign-detail,
.messages {
  width: min(1180px, calc(100% - 64px));
}

.foundation-header__inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 92px;
  padding: 10px clamp(30px, 4vw, 76px) !important;
  display: flex;
  align-items: center;
}

/* The official PNG has transparent margins, so compensate visually without editing the asset. */
.foundation-brand {
  min-width: 210px;
  overflow: visible;
}

.foundation-brand__logo {
  width: 226px;
  max-width: none;
  margin-left: -22px;
}

.foundation-header__actions {
  display: flex;
  align-items: center;
  margin-left: auto !important;
  gap: 20px;
}

.foundation-header__utility {
  gap: 20px;
}

.home-hero {
  padding: 52px 0 30px;
  align-items: center;
}

.home-hero__copy h1 {
  max-width: 760px;
  margin: 8px 0 18px;
  font-size: clamp(52px, 6.3vw, 76px);
  line-height: .98;
}

.home-hero__copy > p:not(.eyebrow) {
  max-width: 700px;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.48;
}

.home-hero__aside {
  max-width: 360px;
  justify-self: end;
  padding: 28px;
  border-radius: 18px;
}

.home-hero__aside h2 {
  font-size: 27px;
}

.section {
  padding-block: 30px;
}

.section-heading {
  margin-bottom: 18px;
}

.section-heading h2 {
  font-size: clamp(32px, 3.6vw, 43px);
}

.page-heading {
  padding-top: 52px;
  padding-bottom: 20px;
}

.page-heading h1 {
  margin-bottom: 14px;
  font-size: clamp(52px, 6.2vw, 76px);
}

.page-heading > div > p:not(.eyebrow) {
  font-size: 18px;
}

.page-heading-split {
  align-items: center;
}

.card-grid {
  gap: 20px;
}

.fundraiser-card {
  border-radius: 14px;
}

.card-media {
  aspect-ratio: 16 / 9;
}

.fundraiser-card .card-body {
  padding: 20px;
}

.fundraiser-card h3 {
  font-size: 21px;
}

.fundraiser-card .card-description {
  min-height: 2.9em;
  margin-bottom: 14px;
}

.campaign-detail {
  padding-top: 52px;
}

.campaign-detail__header {
  margin-bottom: 26px;
}

.campaign-detail__header h1 {
  font-size: clamp(52px, 6.2vw, 74px);
}

.campaign-detail__grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .65fr);
  gap: 36px;
}

.campaign-cover,
.campaign-cover-fallback {
  border-radius: 16px;
}

.campaign-cover-fallback {
  min-height: 330px;
}

.campaign-cover-fallback span {
  font-size: clamp(32px, 4vw, 46px);
}

.campaign-story__content {
  font-size: 17px;
}

.campaign-story__content h2 {
  font-size: 32px;
}

.donation-panel {
  padding: 24px;
  border-radius: 14px;
}

.foundation-footer {
  margin-top: 62px;
}

.foundation-footer__inner {
  gap: 48px;
  padding: 44px 0 30px;
}

.foundation-brand__logo--footer {
  width: 226px;
  margin-left: -22px;
}

.foundation-footer__copyright {
  margin-top: 20px;
}

.foundation-footer__bottom {
  min-height: 44px;
  padding: 12px 0 16px;
}

@media (max-width: 980px) {
  .foundation-footer__inner,
  .foundation-footer__bottom,
  .section,
  .home-hero,
  .campaign-detail,
  .messages {
    width: min(100% - 40px, 1180px);
  }

  .foundation-header__inner {
    padding-inline: 28px !important;
  }

  .foundation-brand {
    min-width: 180px;
  }

  .foundation-brand__logo,
  .foundation-brand__logo--footer {
    width: 198px;
    margin-left: -18px;
  }
}

@media (max-width: 720px) {
  .foundation-footer__inner,
  .foundation-footer__bottom,
  .section,
  .home-hero,
  .campaign-detail,
  .messages {
    width: min(100% - 28px, 1180px);
  }

  .foundation-header__inner {
    min-height: 76px;
    padding: 8px 16px !important;
  }

  .foundation-brand {
    min-width: 150px;
  }

  .foundation-brand__logo,
  .foundation-brand__logo--footer {
    width: 168px;
    margin-left: -14px;
  }

  .home-hero {
    padding-top: 38px;
  }

  .home-hero__aside {
    max-width: none;
    justify-self: stretch;
  }

  .page-heading,
  .campaign-detail {
    padding-top: 38px;
  }
}