/* ===================================================================
   2025 IMPACT REPORT — /2025/
   Page-specific layout only. Buttons, section grounds and the closing
   CTA band are shared components from style.css.

   The mock this follows (Celebration Church) is built on a multi-colour
   palette — periwinkle, olive, pink, orange. This page borrows its
   STRUCTURE (a bento grid of big numbers, lowercase section markers,
   the "big win" stat) and none of its colour. Everything below is the
   site's own navy / red / cream.
   =================================================================== */

/* --- hero ----------------------------------------------------------- */
.impact-eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--royal);
}
/* The year set oversized and pale behind the headline, as the report's
   cover does. Decorative — aria-hidden in the markup, because "2025" is
   already in the page title and the h1's context. */
.impact-year {
  margin: clamp(0.5rem, 2vw, 1rem) 0 0;
  font-size: clamp(5rem, 20vw, 13rem); font-weight: 800; line-height: 0.85;
  letter-spacing: -0.03em; color: var(--beige-ink);
  user-select: none;
}
.impact-values {
  margin: clamp(1rem, 3vw, 1.75rem) 0 0;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--slate);
}

/* --- shared type ---------------------------------------------------- */
.impact-intro,
.impact-lead,
.impact-body {
  max-width: 46rem; margin-inline: auto;
  font-size: 1.05rem; line-height: 1.8;
}
.impact-intro { margin-block: 0 clamp(2rem, 5vw, 3rem); text-align: center; }
.impact-lead {
  margin-block: 0 clamp(2rem, 4vw, 2.5rem);
  text-align: center; font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: 600; color: var(--royal);
}
.impact-body { margin-block: clamp(2rem, 4vw, 2.5rem); color: var(--slate); }

.impact-subhead {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--royal);
  font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy);
}
.impact-note {
  max-width: 52rem; margin: 1rem auto 0;
  font-size: 0.85rem; line-height: 1.65; font-style: italic;
  color: var(--slate); text-align: center;
}

/* --- section markers ------------------------------------------------ */
/* The report's four dark section dividers. A band of its own rather than
   a heading inside a section, because it is the report's structure. */
.impact-band {
  background: var(--navy);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.impact-marker { max-width: 52rem; }
.impact-marker-label {
  margin: 0 0 0.5rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--royal);
}
.impact-marker-sub {
  margin: 0.9rem 0 0;
  font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6; color: var(--cream);
}

/* --- stat grids ----------------------------------------------------- */
/* One stat treatment, used by every block on the page: the glance row,
   campus growth, Kid Point, Students, the give-backs and the Dream
   Center. A second treatment is how a report page starts to look like
   several pages stapled together. */
.impact-stat {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; color: var(--royal);
}
.impact-stat-label {
  margin: 0.5rem 0 0;
  font-size: 0.88rem; line-height: 1.5; color: var(--slate);
}

.impact-glance {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.impact-glance-item {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: var(--card-pad);
}

.impact-growth {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.impact-growth-item {
  border-top: 2px solid var(--line);
  padding-top: clamp(1rem, 2vw, 1.25rem);
}
.impact-growth-pct {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: var(--royal);
}
.impact-arrow { font-size: 0.7em; }

.impact-pair {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.impact-pair li {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: var(--card-pad);
}

/* --- the two headline figures --------------------------------------- */
/* $6,402,251 and $483,904 — the report gives each its own full-width
   slab, and they carry the page. */
.impact-hero-stat {
  background: var(--royal); color: var(--cream);
  border-radius: 10px; padding: var(--panel-pad);
  margin-block: 0 clamp(2.5rem, 5vw, 3.5rem);
}
.impact-hero-stat--win { margin-block: 0 clamp(1.5rem, 3vw, 2rem); }
.impact-hero-stat-label {
  margin: 0 0 0.6rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.85;
}
.impact-hero-stat-value {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.03em;
}
.impact-hero-stat-note {
  margin: 0.9rem 0 0; font-size: 1rem; line-height: 1.6; opacity: 0.92;
}

/* --- timeline ------------------------------------------------------- */
/* The report draws this as a horizontal axis with labels above and below.
   On a phone that is unreadable, so it is a vertical rail here and stays
   one at every width — a timeline that reads top to bottom is not a
   compromise, it is just the other correct way to draw one. */
.impact-timeline {
  list-style: none; margin: 0; padding: 0;
  max-width: 44rem; margin-inline: auto;
  display: grid; gap: 0;
}
.impact-milestone {
  display: grid; grid-template-columns: 5.5rem 1fr;
  gap: clamp(1rem, 3vw, 1.75rem);
  padding: clamp(1rem, 2.5vw, 1.4rem) 0;
  border-top: 1px solid var(--line);
}
.impact-milestone:last-child { border-bottom: 1px solid var(--line); }
.impact-milestone-year {
  margin: 0;
  font-size: 1.1rem; font-weight: 800; color: var(--royal);
}
.impact-milestone-event {
  margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink);
}

/* --- charts --------------------------------------------------------- */
.impact-figure { margin: 0; }
.impact-chart { display: block; width: 100%; height: auto; }
.impact-figure figcaption {
  margin-top: 0.9rem;
  font-size: 0.85rem; font-style: italic; color: var(--slate);
  text-align: center;
}

.impact-grid { stroke: var(--line); stroke-width: 1; }
.impact-axis { font-size: 15px; fill: var(--slate); }

.impact-area { fill: var(--royal); opacity: 0.09; }
.impact-line { fill: none; stroke: var(--royal); stroke-width: 3; }
.impact-dot { fill: #fff; stroke: var(--royal); stroke-width: 3; }
.impact-dot--last { fill: var(--royal); }
.impact-point-label { font-size: 16px; font-weight: 700; fill: var(--slate); }
.impact-point-label--last { fill: var(--royal); font-size: 18px; }

.impact-bar--npc { fill: var(--royal); }
.impact-bar--dc { fill: #d99b9d; }
.impact-bar-total { font-size: 16px; font-weight: 700; fill: var(--navy); }
.impact-bar-inner { font-size: 14px; font-weight: 700; fill: #fff; }

.impact-legend {
  margin: 0 0 0.75rem; text-align: center;
  font-size: 0.85rem; color: var(--slate);
}
.impact-key {
  display: inline-block; width: 0.85rem; height: 0.85rem;
  border-radius: 3px; vertical-align: -0.1em;
  margin: 0 0.35rem 0 1rem;
}
.impact-legend .impact-key:first-child { margin-left: 0; }
/* These MUST track the fills below them — the bar legend labels
   .impact-bar--npc / --dc, the pie legend labels .impact-slice--1/2/3.
   They did not at first, and the giving legend showed two reds for a
   chart drawn in red and pink. */
.impact-key--npc { background: var(--royal); }       /* .impact-bar--npc */
.impact-key--dc  { background: #d99b9d; }            /* .impact-bar--dc  */
.impact-key--1 { background: var(--royal-ink); }     /* .impact-slice--1 */
.impact-key--2 { background: var(--royal); }         /* .impact-slice--2 */
.impact-key--3 { background: #d99b9d; }              /* .impact-slice--3 */

/* Three slices, darkest to lightest, so the order reads as a ranking
   rather than as three unrelated colours. */
.impact-slice--1 { fill: var(--royal-ink); }
.impact-slice--2 { fill: var(--royal); }
.impact-slice--3 { fill: #d99b9d; }
.impact-slice { stroke: var(--cream); stroke-width: 4; }
.impact-slice-label { font-size: 22px; font-weight: 800; fill: #fff; }

.impact-allocation {
  display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  max-width: 52rem; margin-inline: auto;
}
.impact-pie { display: block; width: 100%; height: auto; }
.impact-alloc-key {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.85rem;
  font-size: 1rem; color: var(--ink);
}

/* The figures behind a chart, for anyone the chart does not serve. */
.impact-data {
  max-width: 44rem; margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  font-size: 0.9rem;
}
.impact-data summary {
  cursor: pointer; color: var(--royal); font-weight: 700;
}
.impact-data table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.impact-data th,
.impact-data td {
  text-align: left; padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
}
.impact-data td { text-align: right; font-variant-numeric: tabular-nums; }

/* --- grouped stat blocks -------------------------------------------- */
.impact-group {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: var(--panel-pad);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.impact-group-name {
  margin: 0 0 1.25rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy);
}
.impact-group-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}
.impact-group-stats--four { grid-template-columns: repeat(4, 1fr); }

/* --- thank you ------------------------------------------------------ */
/* NEEDS PHOTO: the report sets Drew and Kristen's picture beside this.
   Until one arrives it is a single centred column rather than an empty
   half. Adding the photo means a two-column grid here, nothing more. */
.impact-thanks { max-width: 44rem; margin-inline: auto; text-align: center; }
.impact-thanks-body {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  font-size: 1.05rem; line-height: 1.8; color: var(--cream);
}
.impact-thanks-signoff {
  margin: 1.25rem 0 0;
  font-size: 1.1rem; font-style: italic; color: var(--cream);
}
.impact-thanks-from {
  margin: 1.25rem 0 0;
  font-size: 1rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--royal);
}

/* --- board ---------------------------------------------------------- */
.impact-board {
  list-style: none; margin: 0; padding: 0;
  max-width: 52rem; margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3rem);
}
.impact-board li {
  padding: clamp(0.9rem, 2vw, 1.1rem) 0;
  border-bottom: 1px solid var(--line);
}
.impact-board-name { margin: 0; font-size: 1rem; font-weight: 800; color: var(--navy); }
.impact-board-role { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--slate); }

/* --- responsive ------------------------------------------------------ */
@media (max-width: 62rem) {
  .impact-glance { grid-template-columns: repeat(3, 1fr); }
  .impact-growth { grid-template-columns: repeat(2, 1fr); }
  .impact-group-stats,
  .impact-group-stats--four { grid-template-columns: repeat(2, 1fr); }
  .impact-allocation { grid-template-columns: 1fr; justify-items: center; }
  .impact-pie { max-width: 20rem; }
}
@media (max-width: 34rem) {
  .impact-glance,
  .impact-growth,
  .impact-pair,
  .impact-group-stats,
  .impact-group-stats--four,
  .impact-board { grid-template-columns: 1fr; }
  .impact-milestone { grid-template-columns: 4rem 1fr; }
  /* The charts keep their aspect ratio and would set 15px type at about
     6px on a phone. Let them scroll instead of shrinking past legible. */
  .impact-figure { overflow-x: auto; }
  .impact-chart { min-width: 34rem; }
}

/* --- media slots ----------------------------------------------------
   PLACEHOLDERS, not decoration. Each one names the photograph that
   belongs in it and the shape it should be cropped to, so the slot is
   a brief rather than a grey box. They are deliberately loud: this
   page should not be able to ship with one still on it.

   Replacing a slot is a markup swap, nothing more — the wrapper keeps
   the ratio, so dropping in an <img> or a background photo needs no
   layout change:

     <figure class="impact-media impact-media--wide">
       <img src="/assets/img/photos/x.jpg" alt="…">
     </figure>
   -------------------------------------------------------------------- */
.impact-media {
  margin: 0;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--beige);
  border: 2px dashed var(--muted);
  display: grid; place-items: center;
  text-align: center;
  padding: clamp(1rem, 3vw, 1.75rem);
}
.impact-media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* The shapes the report and the mock actually use. */
.impact-media--wide      { aspect-ratio: 16 / 9; }
.impact-media--landscape { aspect-ratio: 4 / 3; }
.impact-media--square    { aspect-ratio: 1 / 1; }
.impact-media--portrait  { aspect-ratio: 4 / 5; }

.impact-media-tag {
  margin: 0 0 0.5rem;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--royal);
}
.impact-media-subject {
  margin: 0; max-width: 24rem;
  font-size: 0.95rem; font-weight: 700; line-height: 1.5; color: var(--navy);
}
.impact-media-note {
  margin: 0.5rem 0 0; max-width: 24rem;
  font-size: 0.82rem; line-height: 1.5; color: var(--slate);
}
.impact-media-ratio {
  margin: 0.75rem 0 0;
  font-size: 0.7rem; letter-spacing: 0.08em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* A photo beside a block of text — the mock's commonest arrangement. */
.impact-split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem); align-items: center;
  margin-block: clamp(2rem, 4vw, 3rem);
}
.impact-split--media-right > .impact-media { order: 2; }

/* A row of photos sitting in the bento grid with the stat cards. */
.impact-media-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.impact-media-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Video slot: the site's own .video-embed shell in its waiting state. */
.impact-video-pending {
  border: 2px dashed var(--muted);
  background: var(--beige);
  display: grid; place-items: center; text-align: center;
  padding: clamp(1rem, 3vw, 1.75rem);
}
.impact-video-pending .impact-media-subject { color: var(--navy); }

@media (max-width: 48rem) {
  .impact-split,
  .impact-media-row,
  .impact-media-row--three { grid-template-columns: 1fr; }
  /* Stacked, the photo should lead regardless of which side it was on. */
  .impact-split--media-right > .impact-media { order: 0; }
}

/* The thank-you letter with the portrait beside it, as the report sets it.
   Falls to one column on a phone with the portrait first. */
.impact-thanks--split {
  max-width: 54rem;
  display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; text-align: left;
}
.impact-thanks--split .impact-thanks-body { margin-top: 1.25rem; }
/* A lone figure that would be too tall run full width. */
.impact-figure-single { max-width: 56rem; margin-inline: auto; }

@media (max-width: 48rem) {
  /* Photo after the words, same as the letter above: stacked, a picture
     that leads pushes the heading off the top of the block and the
     section opens on a face with no idea what it belongs to. The grid
     already sets align-items:center, so the 4:3 ratio survives here
     without the align-self guard the letter needs. */
  .impact-thanks--split { grid-template-columns: 1fr; text-align: center; }
  .impact-thanks--split > .impact-media {
    order: 1;
    margin-top: clamp(1.5rem, 5vw, 2rem);
  }
}

/* A film in the media row: the shared .video-embed shell with a caption
   under it, so the two camp recaps sit on the same grid as the photo
   slots they replaced. */
.impact-film { margin: 0; }
.impact-film figcaption {
  margin-top: 0.7rem;
  font-size: 0.88rem; font-weight: 700; color: var(--navy);
  text-align: center;
}

/* A slot with its photograph in it. The dashed placeholder chrome comes
   off; the ratio and radius stay, so a filled slot and an empty one line
   up on the same row. */
.impact-media--filled {
  border: 0;
  background: var(--navy);
  padding: 0;
}

/* --- the opening letter --------------------------------------------- */
/* Two equal text columns with the portrait at the foot of the left one.
   Set as a single measure this letter ran about 900px tall and pushed
   every number below the fold. */
.impact-letter {
  max-width: 64rem; margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
/* The portrait closes the left column. It is CAPPED rather than filling
   the column: at full width a 4:5 portrait is ~600px tall, which made the
   left column 1,099px against the right's 695 and undid the point of
   splitting the letter at all. At 15rem the two columns finish within
   about 100px of each other. */
.impact-letter-col > .impact-media {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  /* 20rem at 4:3 is ~240px tall, which lands the left column within about
     20px of the right. The cap matters: uncapped, the photo made this
     column 400px taller than its neighbour and undid the split. */
  max-width: 20rem;
}
/* Spans both columns, so the two start level. Set at heading scale —
   it reads as the letter's header rather than as its first line. */
.impact-letter-greeting {
  grid-column: 1 / -1;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; line-height: 1.2;
  color: var(--navy);
}
.impact-letter-para {
  margin: 0 0 1.1rem;
  font-size: 1.02rem; line-height: 1.85; color: var(--ink);
}
.impact-letter-signoff {
  margin: 1.5rem 0 0;
  font-size: 1.1rem; font-style: italic; color: var(--navy);
}
.impact-letter-from {
  margin: 0.6rem 0 0;
  font-size: 0.95rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--royal);
}

@media (max-width: 48rem) {
  /* One column on a phone, and THE PORTRAIT MOVES TO THE END.
     Its desktop position — the foot of the left column — exists only to
     balance two columns against each other. Stacked, that same position
     drops it into the middle of the letter, between paragraph two and
     paragraph three, interrupting a sentence for no reason.

     display:contents dissolves the two column wrappers so every
     paragraph becomes a direct grid item in source order; the photo then
     takes order:1 and lands after the signature, where it reads as the
     picture on a signed letter. The wrappers are plain divs carrying no
     semantics, so nothing is lost by collapsing them. */
  .impact-letter { grid-template-columns: 1fr; gap: 0; }
  .impact-letter-col { display: contents; }
  .impact-letter-col > .impact-media {
    order: 1;
    /* align-self MATTERS HERE. As a grid item the figure defaults to
       align-self:stretch, which wins over aspect-ratio; its only child is
       absolutely positioned, so the row had no content height and the
       photo collapsed to nothing. Starting it lets the 4:3 ratio set the
       height again. */
    align-self: start;
    justify-self: center;
    width: 100%;
    /* Explicitly UNCAPPED. The 20rem cap in the desktop rule above is what
       balances the two text columns; below the breakpoint there are no
       columns to balance, and leaving it on made this photograph 320px
       wide while the identical one in the closing Thank You ran at the
       full 350. Same picture, same page, two sizes. */
    max-width: none;
    margin: clamp(1.5rem, 5vw, 2rem) auto 0;
  }
}

/* --- next generation: phone ordering --------------------------------
   Desktop is unchanged — the two stat panels, then the two films in a
   row, as the report has it. On a phone that row stacks underneath
   both panels, so Kid Point's numbers ended up two full scrolls from
   Kid Point's film and neither block explained the other.

   Below the breakpoint the film row dissolves (display:contents) and
   all four blocks become siblings of one grid, interleaved by order:
   numbers, their film, numbers, their film.
   -------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .impact-nextgen {
    display: grid;
    gap: clamp(1.25rem, 3vw, 1.75rem);
  }
  .impact-nextgen > .impact-media-row { display: contents; }
  /* The grid supplies the spacing now; these margins would double it. */
  .impact-nextgen > .impact-group,
  .impact-nextgen .impact-film { margin-top: 0; }

  .impact-group--1 { order: 1; }
  .impact-film--1  { order: 2; }
  .impact-group--2 { order: 3; }
  .impact-film--2  { order: 4; }
}