/* ===================================================================
   NORTH POINT ADVANCE FUND — /advance/
   Loaded after impact.css, whose components this page reuses (hero,
   story cards, headline-figure slab, navy band). Only what the report
   never needed lives here. Colours, radii and type are the site's own.
   =================================================================== */

/* The church's tagline under the h1, and again above the closing button.
   Set like the report's lead line: royal, semibold, a step up from body. */
.advance-tagline {
  margin: 1rem 0 0;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem); font-weight: 600;
  color: var(--royal);
}
.giving-cta .advance-tagline { margin: 1.5rem 0 2.25rem; }

/* --- the vision ----------------------------------------------------- */
.advance-vision { margin: 0; text-align: center; }
.advance-cta { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* --- why now -------------------------------------------------------- */
/* .impact-story-heading is navy, which disappears on the red card. */
.advance-heading--light { color: var(--cream); }
/* The question the section turns on. Larger than the body around it. */
.advance-question {
  margin: 1.5rem 0 0;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 800; line-height: 1.35;
}

/* --- the work ahead ------------------------------------------------- */
/* Three areas side by side. Same white card as the report's glance stats
   and story cards, so the page has one card, not two. */
.advance-areas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.advance-area {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: var(--card-pad);
}
.advance-area .impact-story-label { color: var(--royal); opacity: 1; }
.advance-area-body {
  margin: 1rem 0 0;
  font-size: 0.95rem; line-height: 1.7; color: var(--slate);
}
.advance-items {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  border-top: 2px solid var(--line);
}
.advance-items > li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem; line-height: 1.5; color: var(--ink);
}
.advance-item-amount { font-weight: 700; color: var(--navy); white-space: nowrap; }

@media (max-width: 56rem) {
  .advance-areas { grid-template-columns: 1fr; }
}

/* --- safe places grow sent people ----------------------------------- */
.advance-sent { max-width: 46rem; margin-inline: auto; text-align: center; }
.advance-values {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  font-size: clamp(0.85rem, 1.6vw, 1rem); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--royal);
}

/* --- lead the way --------------------------------------------------- */
/* .giving-cta-copy spaces itself for one paragraph then a button. Two
   paragraphs sit closer together, and the tagline carries the gap. */
.advance-lead-copy { margin-bottom: 0; }
.advance-lead-copy + .advance-lead-copy { margin-top: 1rem; }

/* .impact-story carries a top margin for following other content; as the
   first thing in its section it would double the section's own padding. */
.container > .impact-story:first-child { margin-top: 0; }
.advance-sent .head { text-wrap: balance; }
/* The fund's button label is long enough to wrap on a phone; keep both
   lines centred in the button rather than ragged-left. */
.btn[data-track^="advance-give"] { text-align: center; }