/* ===================================================================
   BAPTISM — /baptism/
   Page-specific layout only. The cards, the accordion and the video
   player are shared components; nothing here restyles them.
   =================================================================== */

/* The hero photo sits behind the headline the way their design had it,
   with a scrim so the copy stays legible over water. */
.bap-hero {
  position: relative;
  background-image:
    linear-gradient(rgba(18, 18, 19, 0.62), rgba(18, 18, 19, 0.72)),
    url('/assets/img/photos/baptism-celebration.jpg');
  background-size: cover;
  background-position: center 38%;
}
.bap-hero .head,
.bap-hero .bap-intro { color: var(--cream); }
.bap-hero .btn--outline-dark { color: var(--cream); border-color: var(--cream); }
.bap-hero .btn--outline-dark:hover { background: var(--cream); color: var(--navy); }

.bap-intro {
  max-width: 44rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
}
.bap-intro p { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.75; }
.bap-intro p:last-child { margin-bottom: 0; }

/* --- sign up ------------------------------------------------------- */
/* The date stamp is .next-date in style.css — shared with the homepage. */

.bap-campuses {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.bap-campus {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: var(--card-pad);
}
.bap-campus-name {
  margin: 0 0 0.5rem;
  font-size: 1.05rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy);
}
.bap-campus-addr {
  margin: 0 0 1.35rem;
  font-size: 0.9rem; line-height: 1.6; color: var(--slate);
}
/* Pinned, so four cards with different address lengths end level. */
.bap-campus-cta { margin-top: auto; align-self: flex-start; }

/* --- what is baptism ----------------------------------------------- */
.bap-explain {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
.bap-copy { margin: 1.35rem 0 0; font-size: 1.02rem; line-height: 1.8; }
/* The shared .video-embed has no width of its own; here it fills its
   grid column, so there is nothing to override. */

/* --- faqs ----------------------------------------------------------- */
.bap-faqs {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3rem); align-items: start;
}
/* The shared .faq centres itself at 48rem; inside this two-column layout it
   should fill its side instead. */
.bap-faq-list { max-width: none; margin: 0; }
.bap-more { margin: clamp(2rem, 4vw, 2.75rem) 0 0; text-align: center; }

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