/* ===================================================================
   KID POINT — /kids/
   Page-specific components only. Everything structural (.section,
   .head, .btn, .giving-cta) comes from style.css so this page reads
   as the same site.
   Containers 10px, buttons inherit the 6px --radius.

   The church's copy for this page is a stack of short lines, so most
   of what follows is about giving those lines a narrow measure and
   enough air to read as deliberate rather than clipped.
   =================================================================== */

/* --- placeholder marker ------------------------------------------
   Every [NEEDS: ...] on the page wears this so the gaps are obvious
   in review. Delete the class with the placeholder. ---------------- */
.kids-needs {
  color: var(--red);
  font-style: italic;
  font-weight: 600;
}

/* --- safety (on the navy band) ------------------------------------ */
.kids-safety {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* Their safety heading is two full sentences, so it runs at a smaller
   size than a default .head to keep it from swamping the column. */
.kids-safety .head { font-size: clamp(1.55rem, 3vw, 2.3rem); }

.kids-safety-list { list-style: none; margin: 0; padding: 0; }
.kids-safety-list > li {
  padding-block: clamp(0.9rem, 1.8vw, 1.35rem);
  border-top: 1px solid var(--line-light);
}
.kids-safety-list > li:first-child { border-top: 0; padding-top: 0; }
.kids-safety-title {
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cream);
  line-height: 1.35;
}

@media (max-width: 62rem) { .kids-safety { grid-template-columns: 1fr; } }

/* --- first visit steps -------------------------------------------- */
.kids-steps {
  list-style: none; counter-reset: kidstep; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.kids-steps > li { counter-increment: kidstep; position: relative; padding-top: 3.25rem; }
.kids-steps > li::before {
  content: counter(kidstep);
  position: absolute; top: 0; left: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--red); color: #fff;
  display: grid; place-items: center;
  font-size: 0.95rem; font-weight: 800;
}
.kids-step-title {
  margin: 0; font-size: 1.02rem; font-weight: 700;
  line-height: 1.45; color: var(--navy);
}
.kids-closer {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--red);
}

/* One panel, five steps, divided — instead of five sparse cards. The steps
   are a single sequence, so containing them in one surface says "this is a
   process" better than five separate boxes with a line of text each.
   The number badge sits in normal flow (position: static) rather than being
   absolutely placed, so it can never overlap the text regardless of how many
   lines a step wraps to. */
.kids-steps--flow {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  gap: 0;
  box-shadow: 0 18px 40px -32px rgba(18, 19, 19, 0.5);
}
.kids-steps--flow > li {
  padding: 0 clamp(1.1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--line);
}
.kids-steps--flow > li:first-child { border-left: 0; }
.kids-steps--flow > li::before {
  position: static;
  margin-bottom: 0.9rem;
}

@media (max-width: 62rem) {
  .kids-steps { grid-template-columns: repeat(2, 1fr); }
  /* Dividers have to follow the grid: vertical rules between columns stop
     making sense once the steps wrap onto multiple rows. */
  .kids-steps--flow { row-gap: clamp(1.5rem, 3vw, 2rem); }
  .kids-steps--flow > li:nth-child(odd) { border-left: 0; }
}
@media (max-width: 34rem) {
  .kids-steps { grid-template-columns: 1fr; }
  .kids-steps--flow > li { border-left: 0; }
}

/* Closing beat sits under the panel, centred with the section heading rather
   than stranded against the left gutter. */
.kids-closer { text-align: center; }

/* --- fragment stack ("They'll get to be a kid") --------------------
   Narrow measure so one-sentence lines look intentional. ----------- */
.kids-stack {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}
.kids-stack-line {
  margin: 0 0 0.55rem;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.65;
  color: var(--slate);
}
.kids-stack-line:last-child { margin-bottom: 0; }

/* --- age groups / environments ------------------------------------ */
.kids-ages {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.kids-age {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.kids-age-band {
  display: inline-block; align-self: flex-start;
  background: var(--red); color: #fff;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.4rem 0.75rem; border-radius: var(--radius);
}
.kids-age-name {
  margin: 1.1rem 0 0;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy); line-height: 1.15;
}
.kids-age-facts {
  list-style: none; margin: 1.35rem 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.kids-age-facts li { font-size: 0.9rem; line-height: 1.55; color: var(--slate); }
.kids-age-facts strong {
  display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 0.15rem;
}

@media (max-width: 62rem) { .kids-ages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .kids-ages { grid-template-columns: 1fr; } }

/* --- parent questions --------------------------------------------- */
.kids-faq {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none; margin: 0; padding: 0;
}
.kids-faq > li {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
}
.kids-q {
  margin: 0; font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 800;
  line-height: 1.25; color: var(--navy);
}
.kids-a { margin: 0.85rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--slate); }
.kids-a + .kids-a { margin-top: 0.7rem; }
.kids-a a { color: var(--red); }

@media (max-width: 48rem) { .kids-faq { grid-template-columns: 1fr; } }

/* --- pre-registration banner -------------------------------------- */
.kids-preregister { margin-top: clamp(2rem, 4vw, 3rem); }

/* --- kid point by campus ------------------------------------------
   Real data (times + director) from src/_data/campuses.js. Mirrors the
   .kids-age card so the two sections read as one family. ------------ */
.kids-campuses {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.kids-campus {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.kids-campus-name {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy);
}
.kids-campus-times {
  list-style: none; margin: 0.85rem 0 0; padding: 0;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--red);
}
.kids-campus-times > li + li { margin-top: 0.25rem; }
.kids-campus-lead {
  margin: 1.1rem 0 0;
  font-size: 0.95rem; line-height: 1.5; color: var(--navy); font-weight: 700;
}
.kids-campus-lead span {
  display: block;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.3rem;
}
.kids-campus-link {
  margin-top: auto; padding-top: 1.25rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; color: var(--red);
}
.kids-campus-link:hover { text-decoration: underline; }

@media (max-width: 62rem) { .kids-campuses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .kids-campuses { grid-template-columns: 1fr; } }

/* --- photo bands ---------------------------------------------------
   Wide real-photography breaks between the copy sections. Same shape as
   .about-band on /about/ so the two pages crop photos alike. --------- */
.kids-band {
  aspect-ratio: 16 / 6;
  border-radius: 10px;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 48rem) { .kids-band { aspect-ratio: 4 / 3; } }

/* Photo band welded to the steps panel directly beneath it: the two become
   one shape, rounded at the very top and the very bottom only. The band gives
   up its bottom corners, the panel gives up its top corners and its top
   border, so no seam shows where they meet. */
.kids-band--joined {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.kids-band--joined + .kids-steps--flow {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Third piece of the same stack: photo -> steps -> payoff line. The panel
   gives up its bottom corners so the closer can carry them, and the closer
   picks up the panel's surface and border to continue it rather than sit
   under it. Only the outermost corners of the whole stack stay rounded. */
.kids-steps--open-bottom {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.kids-closer--joined {
  margin-top: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 18px 40px -32px rgba(18, 19, 19, 0.5);
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.1rem, 2vw, 1.75rem);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
}

/* --- what Kid Point is (replaced the placeholder rooms cards) ------ */
.kids-explainer { max-width: 46rem; margin-inline: auto; text-align: center; }
.kids-explainer-copy {
  margin: 1.35rem 0 0;
  font-size: 1.05rem; line-height: 1.8; color: var(--slate);
}