/* ===================================================================
   STUDENTS & YOUNG ADULTS — /students/

   One page, two tracks. The whole file exists to make that split
   unmistakable:
     · Students (6th–12th)  -> LIGHT sections (cream + band)
     · Young Adults         -> DARK sections (navy), scoped by .st-dark

   Everything else (buttons, .head, .about-pastor,
   .giving-cta, .campus-*) comes from style.css untouched. Containers
   10px, buttons inherit 6px.
   =================================================================== */

/* --- track anchors ------------------------------------------------
   Header isn't sticky, but /students/#young-adults should never land
   flush against the viewport edge. */
.st-track { scroll-margin-top: 1.5rem; }

/* --- dark-track overrides -----------------------------------------
   Scoped to .st-dark so the shared components can be reused verbatim
   on navy without editing style.css. (.head, .head-sub and .eyebrow
   already handle .section--navy in style.css — don't duplicate them.) */
.st-dark .about-pastor-name { color: var(--cream); }

.st-dark .about-pastor-copy { color: rgba(255, 255, 255, 0.82); }

/* Age / grade / meeting-night lines under the section headings.
   These were eyebrows above the headings until 2026-09-10. They were the one
   set of eyebrows on this page carrying actual information — who a ministry
   is for and when it meets — so they moved below the heading as fact lines
   rather than being deleted with the decorative ones.
   (Historic note: this was briefly named .st-fact, which collided with a
   white card component that has since been deleted with the rest of the
   invented sections.) */
.st-range {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--red);
}

.section--navy .st-range { color: #e2848a; }

/* --- rebuilt page: per-campus times + leader lines ------------------ */
/* Centred by default, because the first .st-range sits under the centred
   hero headline. Inside an .about-pastor-body — the Students and Young
   Adults tracks — the whole column is left-aligned, so the line needs this
   to stop floating out of step with the heading above and the copy below. */
.st-range--left { text-align: left; }

.st-when-title {
  margin: clamp(2.5rem, 5vw, 4rem) 0 1.35rem;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy);
}
.st-campus-times {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.st-campus-times > li {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(1.25rem, 2vw, 1.6rem);
}
.st-campus-name {
  margin: 0 0 0.75rem;
  font-size: 1.05rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--navy);
}
.st-campus-list {
  list-style: none; margin: 0; padding: 0;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--red);
}
.st-campus-list > li + li { margin-top: 0.35rem; }
.st-campus-times .event-link { margin-top: auto; padding-top: 1.1rem; }

.st-lead { margin: clamp(1.5rem, 3vw, 2rem) 0 0; font-weight: 700; color: var(--navy); }
.st-lead-role {
  display: block; margin-bottom: 0.2rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.st-lead--light { color: var(--cream); }
.st-lead--light .st-lead-role { color: rgba(255, 255, 255, 0.55); }

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

/* Young Adults run their own Instagram; the link sits under their copy on the
   dark band, so it needs the light-on-dark treatment the rest of that block
   uses rather than the site's default link colour. */
.st-ya-social { margin-top: 1rem; }
.st-ya-social a {
  color: #fff; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--royal);
}
.st-ya-social a:hover { border-bottom-color: #fff; }

/* Students Director, inside their campus card. The card already says which
   campus this is, so the label is just the role.

   PINNED TO THE BOTTOM. margin-top:auto takes the slack above it, so the
   director sits directly above Campus Details in every card no matter how
   many meeting times are listed — Republic has one line and Nixa has three,
   and the names still land on the same level across the row.

   The link below it must NOT also claim the slack: two auto margins split
   the leftover space between them and neither ends up where it was meant to
   be, which is why .event-link's own auto is cancelled directly under here. */
.st-campus-lead {
  margin: 1.4rem 0 0; padding-top: 1.1rem;
  margin-top: auto;
  border-top: 1px solid var(--line);
  font-size: 1.02rem; font-weight: 800; line-height: 1.3;
  color: var(--navy);
}
.st-campus-times .st-campus-lead + .event-link { margin-top: 0; }
.st-campus-lead-role {
  display: block; margin-bottom: 0.35rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate);
}