/* ===================================================================
   CAMPUS DETAIL — /locations/<slug>/
   Built on the existing tokens in style.css. The campus card,
   section bands, and two-column rows all come from there; this
   file only adds the three-up "essentials" strip.
   =================================================================== */

.campus-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.campus-fact {
  background: #fff; border-radius: 10px;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  box-shadow: 0 18px 40px rgba(18, 18, 19, 0.07);
}
.campus-fact-label {
  margin: 0 0 0.9rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.campus-fact-value { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--navy); }
.campus-fact-value a { color: var(--navy); }
.campus-fact-times {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.campus-fact-times li {
  font-size: 1rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--navy);
}
.campus-fact-note { margin: 0.85rem 0 0; font-size: 0.88rem; color: var(--slate); }
.campus-fact .event-link { margin-top: 1rem; }

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

/* breadcrumb sits in the eyebrow slot */

/* ===================================================================
   LOCATIONS HUB + CAMPUS DETAIL — shared additions
   This sheet is loaded by src/locations.njk and src/locations-campus.njk.
   Everything below extends components that already live in style.css.
   =================================================================== */

/* The church's copy is written one sentence per line. A ~34rem measure
   keeps those short lines reading as intentional rather than as an
   accident of the container width. */
.head-sub--stack { max-width: 34rem; margin-inline: auto; }

/* --- campus card: directions link + campus pastor --------------------
   Card order follows the church's list: name, times, address,
   directions, campus pastor, CTA. The CTA stays pinned to the card
   bottom via `.campus-body > .btn { margin-top: auto }` in style.css. */
.campus-body .campus-times { margin-bottom: 0.75rem; }
.campus-body .event-link { align-self: flex-start; margin-top: 0.6rem; }

.campus-pastor {
  margin: 1.1rem 0 1.35rem;
  font-size: 0.95rem; line-height: 1.5; color: var(--navy);
}
.campus-pastor-label {
  display: block; margin-bottom: 0.3rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

/* Placeholder image plate — used where the church still owes us a photo.
   Deliberately reads as a hole in the page rather than as a design. */
.ph--empty {
  background-image: none;
  background-color: #e6e3de;
  border: 2px dashed #b9b4ac;
  border-radius: 10px;
}

/* Two-up campus cards for the /locations/ hub. .campus-grid defaults to four
   across, which suits the homepage row but left this page — hero, grid, CTA —
   looking thin. Scoped modifier: the base grid is shared with the homepage,
   Contact, Plan Your Visit and the campus pages. */
.campus-grid--2up { grid-template-columns: repeat(2, 1fr); }
.campus-grid--2up .campus-media { aspect-ratio: 16 / 9; }

@media (max-width: 48rem) { .campus-grid--2up { grid-template-columns: 1fr; } }

/* Campus pastor email, shown only where the church supplied one. */
.campus-pastor-email {
  display: block; margin-top: 0.2rem;
  font-size: 0.85rem; color: var(--red); text-decoration: none;
  word-break: break-word;
}
.campus-pastor-email:hover { text-decoration: underline; }

/* --- campus pastor photo -------------------------------------------
   The Springfield photo is a wide stage shot with a third person at the
   left of frame, so the crop is pushed right to keep the pastor and his
   wife centred. --photoFocus in campuses.js drives this. */
.campus-pastor-photo { background-position: center; }
.campus-pastor-photo--right { background-position: 72% center; }

/* --- ministries at this campus --------------------------------------
   Real per-campus copy (Kid Point / Students / Young Adults). Cards
   rather than stacked rows: each is a self-contained answer to "is there
   something here for my kid / my teenager / me". */
.campus-ministries {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.campus-ministry {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.campus-ministry-name {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy);
}
.campus-ministry-facts {
  margin: 1.1rem 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
}
.campus-ministry-facts dt {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.campus-ministry-facts dd {
  margin: 0.2rem 0 0.85rem;
  font-size: 0.95rem; line-height: 1.5; color: var(--navy); font-weight: 700;
}
.campus-ministry-facts dd:last-child { margin-bottom: 0; }
.campus-ministry-copy {
  margin: 1.1rem 0 0;
  font-size: 0.95rem; line-height: 1.7; color: var(--slate);
}
.campus-ministry .event-link { margin-top: auto; padding-top: 1.35rem; }

/* Two-card campuses (no confirmed Young Adults time). Capped and centred so
   the cards stay the width they are in the three-up row instead of stretching
   to half the container. */
.campus-ministries--pair {
  grid-template-columns: repeat(2, 1fr);
  max-width: 64rem;
  margin-inline: auto;
}

@media (max-width: 62rem) {
  .campus-ministries,
  .campus-ministries--pair { grid-template-columns: 1fr; }
}

/* Campus pastor sign-off under their welcome note. */
.about-pastor-signoff {
  margin: 1.25rem 0 0;
  font-weight: 700; color: var(--navy);
}

/* Breadcrumb on the campus pages. Was wearing .eyebrow purely because the
   styling matched; it is navigation and now looks like it — smaller and
   quieter than a section label, and the link is visibly a link. */
.crumb {
  display: flex; justify-content: center; align-items: center; gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.crumb a { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.crumb a:hover { color: var(--red); }

/* Campus pastor's title, on the sign-off line under their welcome note. */
.about-pastor-title {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}

/* Three-up campus cards, for "Our Other Locations" on a campus page — that
   row is always the four campuses minus the current one, so a four-column
   grid left an empty cell. Widening beats centring here: three wider cards
   fill the row and match the page's other full-width sections, where three
   centred narrow cards would have read as a short row that lost one. */
.campus-grid--3up { grid-template-columns: repeat(3, 1fr); }
.campus-grid--3up .campus-media { aspect-ratio: 16 / 10; }

@media (max-width: 62rem) { .campus-grid--3up { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .campus-grid--3up { grid-template-columns: 1fr; } }