/* ==========================================================================
   "6 Reasons Parents Trust Camp Jump!"

   A poster on the page, built to echo Jump!'s own graphic: an orange field
   framing a card, a lime header band with an angled lower edge, and six
   numbered yellow stars down a navy body.

   ON THE COLOURS. The graphic sets white on lime and white on mid-blue,
   which measure 1.77:1 and 2.57:1 against this site's palette - both well
   under the 4.5:1 AA bar for body text and under even the 3:1 large-text
   bar. Print can do that; a web page should not. So every shape and every
   brand colour here is the graphic's, and only the TEXT colours differ:

     #0D0D0D on --lime    5.08:1   header band
     --white  on --navy   7.35:1   titles and sub-lines
     --ink    on --yellow 6.78:1   the numerals

   #0D0D0D rather than a new token because that is what .section--lime
   already resolves headings to elsewhere on the site - this band matches the
   existing lime treatment instead of introducing a second convention.
   ========================================================================== */

/* ---- The band around it --------------------------------------------------

   Amy, September 28: "reduce the size on this, move it to the left, and give
   us a place to add a placeholder image -- also reduce the above/below
   padding."

   So the poster is no longer a centred 720px column with white either side of
   it. It is the left of two uneven columns, with a photograph in the right,
   and the section's own padding is cut to roughly a third of a standard
   section's - the poster is a dense object and does not need a normal
   section's air around it.

   Stays on a plain white section. The orange band below it on Camp Jump!
   draws a wave on its top edge filled white, and that wave only reads as a
   wave while the section above really is white. See PAGE_BANDS in page.mjs.
   ========================================================================== */
.section.section--reasons {
  padding-block: clamp(1.25rem, 3vw, 2.5rem);
}

.reasons__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}

/* Was max-width:720px and margin-inline:auto, which is what centred it. The
   grid column now sets the width - measured at 543px in a 1280px window, so
   the poster is smaller as well as further left. */
.reasons {
  min-width: 0;
  background: var(--orange);
  border-radius: 34px;
  padding: clamp(0.65rem, 1.8vw, 1.1rem);
}

.reasons__card {
  background: var(--navy);
  border-radius: 24px;
  overflow: hidden;
}

/* The photograph beside it.

   No src in the CMS means photo() renders the site's standard placeholder
   here, same as every other empty slot - so this shows "Photo to come" with
   its shot description until somebody pastes a URL in, and the build keeps
   printing it in the outstanding-shots list until they do. There is no
   separate switch to remember to turn off.

   Radius, not a keyline: this sits next to an object that is already a thick
   orange frame, and framing a frame reads as clutter. */
.reasons__aside {
  margin: 0;
  min-width: 0;
  border-radius: 28px;
  overflow: hidden;
}

.reasons__aside img,
.reasons__aside .ph {
  display: block;
  width: 100%;
  height: auto;
}

/* Above the stacking point the photograph matches the poster's height rather
   than keeping its own aspect ratio. Centred at its natural 4:5 it came out
   578px against the poster's 698 and left white above and below, which read
   as the column having failed to fill rather than as a deliberate crop.

   Absolute rather than height:100% on its own, because the placeholder
   carries an inline aspect-ratio and the two fight; taking it out of flow
   settles it. Below 900px the figure returns to normal flow and the aspect
   ratio governs again, which is what a stacked column wants. */
@media (min-width: 901px) {
  .reasons__layout { align-items: stretch; }
  .reasons__aside { position: relative; }
  .reasons__aside img,
  .reasons__aside .ph {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
  }
}

/* The header band. The angled lower edge is the graphic's; the extra bottom
   padding is what keeps the heading clear of the slope on a narrow screen,
   where the text wraps to three lines and the angle eats into the last one. */
.reasons__head {
  background: var(--lime);
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.75rem) clamp(1.9rem, 4vw, 2.4rem);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  flex-wrap: wrap;
}

.reasons__head h2 {
  margin: 0;
  color: #0D0D0D;
  text-align: center;
  max-width: 18ch;
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 1.95rem);
  line-height: 1.15;
}

.reasons__badge {
  flex: none;
  width: clamp(64px, 12vw, 96px);
  height: auto;
}

.reasons__list {
  list-style: none;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.6rem) clamp(1.5rem, 3vw, 2rem);
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.2rem);
}

.reason {
  display: flex;
  /* Centred on the star, not top-aligned (BugHerd #96, Randy 10/11/2026:
     "Can these descriptions line up with the stars?"). A one-line title
     top-aligned against a 56px star sat visibly high of it. */
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.05rem);
}

/* The star is drawn, not a character: a text star cannot hold a numeral in
   the middle of it, and the numeral is the whole point. */
.reason__num {
  position: relative;
  flex: none;
  width: clamp(44px, 9vw, 56px);
  height: clamp(44px, 9vw, 56px);
  display: grid;
  place-items: center;
}

.reason__num svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--yellow);
}

.reason__num b {
  position: relative;
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 1;
  /* UP, not down. The star's box centre and outline centre nearly agree, but
     everything below the middle is two thin legs with a notch between them
     and everything above is the solid pentagon body - which is what a numeral
     has to sit on. Centred by the grid alone it lands in the notch and reads
     as falling out of the star.

     "top" and not "transform": a percentage in a transform resolves against
     the element's OWN box, so translateY(-7%) was 7% of the numeral's 24px
     line box - 1.68px, near enough to no change at all. A percentage "top" on
     a relatively positioned element resolves against the CONTAINING BLOCK,
     which is the star, so this is 7% of the star and stays 7% of it at every
     clamp size. The star is smaller than it was, so the lift scales with it
     and the numeral sits exactly where it did before.

     Then the other way (Randy, BugHerd #170 and #171, 10/22/2026: "The
     numbers are not aligned with the stars"). At -7% the numeral's cap rode
     up into the top point. The star's visual middle - its centroid - sits
     about 54% of the way down its box, so the numeral is nudged DOWN onto
     it, and the text beside it follows by the same amount (.reason__body). */
  top: 5%;
}

.reason__body { min-width: 0; position: relative; top: 0.12em; }

.reason__body h3 {
  margin: 0 0 0.2rem;
  color: #fff;
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
  line-height: 1.25;
}

/* The sub-line wraps to two lines in the narrower column, which is fine, but
   the tracking that made it read as a caption at 720px is too loose to wrap
   tidily at 543. Eased from 0.045em, and the size holds. */
.reason__body p {
  margin: 0;
  color: #fff;
  font-size: clamp(0.76rem, 0.7rem + 0.25vw, 0.85rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
  /* Not pure white at this size and weight: the sub-line is the quieter half
     of the pair and should not compete with the title above it. 0.92 keeps it
     at 6.6:1 on navy, still comfortably over the 4.5:1 bar. */
  opacity: 0.92;
}

/* One column below the point where the poster stops being legible beside a
   photograph. The poster leads - it is the reason the section exists. */
@media (max-width: 900px) {
  .reasons__layout {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 5vw, 2rem);
  }
  /* width:100% is load-bearing, not belt-and-braces. An auto inline margin on
     a grid item overrides the default stretch and makes the box shrink to fit
     its contents - and the placeholder has no intrinsic width, so it collapsed
     to the width of the words "Photo to come", 127px in a 342px column.
     Measured, not guessed at. */
  .reasons { width: 100%; max-width: 620px; margin-inline: auto; }
  .reasons__aside { width: 100%; max-width: 620px; margin-inline: auto; }
  /* Photo first on a phone, then the numbered list; desktop is unchanged
     (Randy, BugHerd #142). */
  .reasons__aside { order: -1; }
}

@media (max-width: 420px) {
  .reasons { border-radius: 24px; }
  .reasons__card { border-radius: 18px; }
  .reasons__aside { border-radius: 18px; }
  .reason__body p { text-transform: none; letter-spacing: 0.01em; }
}

/* On a wave band the poster needs a full section's air, not the trimmed
   padding above: the waves eat into the top and bottom edges. */
.section.section--reasons.section--band {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
/* ...plus the height of each wave, so the poster sits in the middle of the
   VISIBLE band rather than under the top wave (Randy, BugHerd #134,
   10/16/2026: "Can we align this in the middle top to bottom. It is skewed
   toward the top."). The waves are out of flow, and the bottom one is taller
   than the top one, so each edge reserves its own wave. */
.section.section--reasons.section--band.section--waves,
.section.section--reasons.section--band.section--waves:has(> .divide:last-child) {
  padding-top: calc(clamp(3.5rem, 7vw, 5.5rem) + var(--wave-t));
  padding-bottom: calc(clamp(3.5rem, 7vw, 5.5rem) + var(--wave-b));
}

/* On the yellow party band the photograph shows whole, at its own shape,
   instead of being stretched to the poster's height and cropped (Randy,
   BugHerd #101, 10/14/2026: "Can you make sure the image fits in the
   section?"). The party-hat photo is 3:4, close enough to the poster that it
   sits beside it without a gap reading as a mistake. */
@media (min-width: 901px) {
  .section--band .reasons__layout { align-items: center; }
  .section--band .reasons__aside { align-self: center; }
  .section--band .reasons__aside img {
    position: static;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }
}
/* The closing line of the party page, moved into the band and centred under
   the poster (BugHerd #102). */
.reasons__after {
  grid-column: 1 / -1;
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  max-width: 40rem;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--ink);
}