/* ============================================================
   Ministry detail page — shared by all 11 /ministries/{slug}.html.
   Layered on top of styles.css.
   ============================================================ */

.page-ministry-detail { background: var(--canvas); }

/* ── "Our vision" block — declarative statement of intent for the group.
   Embedded inside the about-this-ministry column, beneath the body
   paragraphs. Body in Inter; the keyword is in Montserrat caps + brand
   orange to echo the typographic vocabulary used elsewhere on the site. */
.md-about-vision {
  margin-top: var(--xl);
  padding-top: var(--lg);
  border-top: 1px solid var(--hairline-soft);
}
.md-about-vision .eyebrow { margin: 0 0 12px; }
.md-vision-text {
  font-family: 'Inter', 'Airbnb Cereal VF', -apple-system, sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.2px;
  text-wrap: balance;
}
.md-vision-text strong {
  font-family: 'Montserrat', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  white-space: nowrap;
}

/* ── Hero ────────────────────────────────────────────────── */
.md-hero {
  position: relative;
  min-height: 460px;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.md-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.md-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.md-hero-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.md-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.75) 100%),
    linear-gradient(to right,  rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 60%, transparent 100%);
  pointer-events: none;
}
.md-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 48px;
  padding-bottom: 56px;
  color: var(--canvas);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
}
.md-hero .md-back-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  margin-bottom: 24px;
}
.md-hero .md-back {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--r-full);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}
.md-hero .md-back:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
  text-decoration: none;
}
.md-hero .eyebrow {
  color: rgba(255,255,255,0.85);
  margin: 0 0 8px;
}
.md-hero h1 {
  color: var(--canvas);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin: 0 0 14px;
  text-wrap: balance;
  max-width: 880px;
}
.md-hero-tagline {
  font-size: clamp(17px, 1.6vw, 20px);
  color: rgba(255,255,255,0.92);
  margin: 0 0 24px;
  max-width: 640px;
  line-height: 1.45;
}
.md-hero-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.md-hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-full);
  font-size: 13px;
  color: var(--canvas);
  font-weight: 500;
  line-height: 1;
}
.md-hero-meta strong { font-weight: 700; }

/* ── Anchor-event badges ─────────────────────────────────── */
/* Sits below .md-hero-meta in the hero. Each badge is a small link
   to /events/<slug> with a left-side date stamp and right-side title.
   Glass-morphism over the dark hero photo, matching .md-hero-meta. */
.md-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  max-width: 880px;
}
.md-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-full);
  color: var(--canvas);
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.2;
  transition: background 160ms ease, border-color 160ms ease, transform 100ms ease;
}
.md-hero-badge:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-1px);
  text-decoration: none;
}
.md-hero-badge-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.32);
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.md-hero-badge-mon {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
}
.md-hero-badge-day {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}
.md-hero-badge-title {
  font-weight: 600;
  color: #fff;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Section base ────────────────────────────────────────── */
.page-ministry-detail .section { padding: 64px 0; }
.page-ministry-detail .section h2 {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 0 0 24px;
  line-height: 1.2;
}

/* ── About ───────────────────────────────────────────────── */
.md-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: start;
  /* Default tint when ministry doesn't set --ministry-tint inline. */
  --ministry-tint: var(--accent-soft);
}
.md-about-text h2 { margin-top: 0; }
.md-about-body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  margin: 0 0 18px;
  max-width: 640px;
}
.md-about-body p:last-child { margin-bottom: 0; }

/* Decorative icon — soft tinted circle + larger themed glyph. */
.md-about-icon {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--ministry-tint) 55%, var(--canvas));
  display: grid;
  place-items: center;
  padding: 36px;
  margin-top: 6px; /* nudge to align with the H2 cap height */
  position: relative;
}
.md-about-icon::after {
  /* subtle inner highlight to give the disc some depth */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45), transparent 55%);
  pointer-events: none;
}
.md-about-icon svg {
  width: 100%;
  height: 100%;
  /* Stroke uses a deeper version of the tint so it stays in the same color
     family but reads against the soft background disc. */
  color: color-mix(in srgb, var(--ministry-tint) 55%, var(--ink));
  position: relative;
  z-index: 1;
}

/* All about sections share the same floor height so per-ministry layouts
   stay visually consistent — short-copy ministries don't collapse, and the
   photo-mode image keeps its presence next to the heading. Centering the
   inner container keeps short-copy text + icon balanced in the middle of
   the 500px box instead of pinned to the top. */
.md-about {
  min-height: 500px;
  display: grid;
  align-content: center;
  /* Section background = a tinted version of the ministry's color,
     mixed with the canvas so dark body text stays readable. 42% is
     strong enough that the tint clearly stands apart from the page
     canvas (which was the complaint at 18%) without overwhelming the
     copy. Adjust if any specific palette swatch ever feels too loud. */
  background: color-mix(in srgb, var(--ministry-tint, var(--accent-soft)) 42%, var(--canvas));
}
.md-about--photo {
  position: relative;
}
/* Photo-mode widens the inner container and uses an explicit text + photo
   layout so the unit reads as a centered block rather than a viewport-edge
   bleed. The grid is centered horizontally with `justify-content: center`,
   so text + gap + photo float as one balanced row regardless of viewport. */
.md-about--photo .container-narrow {
  max-width: 1520px;
}
.md-about--photo .md-about-grid {
  grid-template-columns: minmax(0, 540px) auto;
  gap: 64px;
  align-items: center;
  justify-content: center;
}
.md-about--photo .md-about-text {
  max-width: 540px;
  position: relative;
  z-index: 1;
}

/* Photo sits in its own grid column rather than absolutely positioned.
   Height is responsive (clamped) and width derives from aspect ratio,
   so the image stays substantial across viewport sizes without overflowing.
   `display: block` overrides the inherited `display: grid; place-items: center`
   from `.md-about-icon` — without it, an <img> with a natural aspect ratio
   different from the wrapper (e.g. prayer.png at 1402×1122) ignores `height: 100%`
   and overflows the wrapper. `overflow: hidden` is a belt-and-suspenders clip. */
.md-about-icon-photo {
  position: relative;
  display: block;
  height: clamp(320px, 32vw, 460px);
  width: auto;
  aspect-ratio: 2752 / 1536;
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
}
.md-about-icon-photo::after { display: none; }
.md-about-icon-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Default mask for opaque illustration PNGs (mens.png, kids.png, youth.png,
     etc.) — soft circular fade dissolves the rectangular silhouette into the
     section's cream background. */
  -webkit-mask-image: radial-gradient(circle at center, #000 18%, transparent 65%);
          mask-image: radial-gradient(circle at center, #000 18%, transparent 65%);
}
/* Prayer's hands artwork is centered and the section background is a near-
   match cream — the default tight mask makes the hands disappear. Open the
   opaque region so the silhouette reads clearly. */
.md-about-icon-photo--prayer img {
  -webkit-mask-image: radial-gradient(circle at center, #000 35%, transparent 78%);
          mask-image: radial-gradient(circle at center, #000 35%, transparent 78%);
}

/* Mobile: collapse the about-grid to one column. The carousel CSS
   further down handles its own narrow-screen layout. The .md-about-icon
   + .md-about-icon-photo rules are dead (legacy decorative icon path
   replaced by the feature carousel) but the selectors are kept here
   in case any future page reintroduces an icon-style decoration. */
@media (max-width: 720px) {
  .md-about-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .md-about-icon {
    width: 88px;
    height: 88px;
    padding: 18px;
    margin: 0 0 18px;
    grid-row: 1;
    justify-self: flex-start;
  }
  .md-about--photo .md-about-grid { grid-template-columns: 1fr; }
  .md-about--photo .md-about-text { max-width: none; grid-row: 2; }
  .md-about-icon-photo {
    position: static;
    width: 100%;
    max-width: 360px;
    height: 200px;
    aspect-ratio: auto;
    padding: 0;
    margin: 0 0 18px;
    grid-row: 1;
    justify-self: flex-start;
  }
  .md-about-text { grid-row: 2; }
}

/* Phone-class viewports — tighten hero density so it doesn't eat the
   whole viewport, and shrink anchor-event badges so two often fit per
   row instead of one. Leader badges relax their inner max-width too
   so a long Spanish role string can wrap a second line gracefully. */
@media (max-width: 600px) {
  .md-hero-content {
    min-height: 380px;
    padding-top: 32px;
    padding-bottom: 40px;
  }
  .md-hero h1 { font-size: clamp(28px, 7vw, 42px); }
  .md-hero-tagline { font-size: 15px; }
  .md-hero-meta { gap: 6px; }
  .md-hero-meta li { padding: 6px 11px; font-size: 12px; }
  .md-hero-badges { margin-top: 14px; gap: 6px; max-width: 100%; }
  .md-hero-badge {
    padding: 4px 12px 4px 4px;
    gap: 8px;
    font-size: 11.5px;
  }
  .md-hero-badge-stamp { min-width: 30px; padding: 3px 5px; }
  .md-hero-badge-mon { font-size: 8.5px; }
  .md-hero-badge-day { font-size: 11px; }
  .md-hero-badge-title { max-width: 150px; }

  .md-leader-badge-name,
  .md-leader-badge-role {
    max-width: 200px;
    white-space: normal;
    overflow: visible;
  }

  /* Tighter section paddings — the hero already eats real estate. */
  .page-ministry-detail .section { padding: 44px 0; }
  /* About min-height was 500 — too tall once stacked. */
  .md-about { min-height: 0; }
}

/* ── Schedule ────────────────────────────────────────────── */
.md-schedule { background: var(--surface-soft); }
.md-schedule-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.md-schedule-head h2 { margin: 0; }
.md-schedule-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.md-schedule-link:hover { color: var(--ink); text-decoration: underline; }
.md-schedule-empty {
  color: var(--muted);
  font-size: 15px;
  font-style: italic;
}

.md-week-strip {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  max-width: 560px;
}
.md-week-day {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 14px 8px 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.md-week-day.is-meeting {
  background: var(--ink);
  color: var(--canvas);
  border-color: var(--ink);
}
.md-week-dot {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: var(--r-full);
}
.md-week-day.is-meeting .md-week-dot { background: var(--canvas); }

.md-sched-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--base);
}
@media (max-width: 720px) { .md-sched-grid { grid-template-columns: 1fr; } }
.md-sched-card {
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.md-sched-day {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.md-sched-time {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.3px;
}
.md-sched-label {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  margin: 4px 0 0;
}
.md-sched-where {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* ── Recurring/anchor events — yearly-rhythm complement to the schedule ──
   Visual logic: schedule cards lead with day-of-week + a left accent stripe;
   event cards lead with cadence + a circular month chip in the top-right
   corner (date-stamp feel). Same canvas, hairline, radii — different signature. */
.md-events { background: var(--canvas); }
.md-events-head { margin-bottom: 28px; }
.md-events-head .eyebrow { margin: 0 0 6px; }
.md-events-head h2 { margin: 0 0 8px; }
.md-events-tagline {
  font-size: 16px;
  color: var(--muted);
  margin: 0;
  max-width: 540px;
}

/* Year strip — twelve cells echoing the seven-day week strip above. Active
   months get the soft accent fill + a dot, idle months stay quiet so the
   rhythm reads at a glance. */
.md-year-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
  margin: 0 0 28px;
}
.md-year-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 0 8px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-soft);
  min-height: 48px;
}
.md-year-month.is-active {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--canvas));
}
.md-year-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 720px) {
  .md-year-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
  }
}

/* Event cards grid — wider gutters than schedule to feel calmer (these are
   "bigger moments"), 3-up at desktop, 2-up at tablet, 1-up at mobile. */
.md-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1080px) { .md-events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .md-events-grid { grid-template-columns: 1fr; } }

.md-event-card {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.md-event-card:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--hairline);
  transform: translateY(-1px);
}
.md-event-chip {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-active);
  display: grid;
  place-items: center;
  font-family: var(--heading-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.md-event-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  padding-right: 60px; /* leave room for the chip */
}
.md-event-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 2px 0 0;
  line-height: 1.25;
  padding-right: 60px;
}
.md-event-blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 6px 0 0;
}

/* ── Leaders — horizontal badge row at the top of the about column.
   Each leader is a pill with an avatar (photo or initials over the
   staff tint), name, and role. Sits between the About H2 and the
   prose body so the people are the first thing readers see. Hidden
   if no leaders are configured. */
.md-about-leaders {
  margin: 12px 0 28px;
}
.md-about-leaders-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.md-leader-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.md-leader-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 80ms ease, box-shadow 200ms ease;
  max-width: 100%;
}
.md-leader-badge:hover {
  border-color: var(--border-strong);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -10px rgba(17, 24, 39, 0.18);
}
.md-leader-badge-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--accent-soft);
}
.md-leader-badge-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.md-leader-badge-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.md-leader-badge-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.md-leader-badge-role {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* ── About-section feature carousel ───────────────────────────
   Embedded in the right column of .md-about-grid. Center photo is
   largest; adjacent photos sit smaller and partially behind. Edge
   gradients fade slides into the section's tinted background.
   Auto-rotates every 5s (paused on hover/focus); center click opens
   the lightbox. Hidden when a ministry has zero gallery photos —
   .md-about-grid collapses to a single column via the
   .md-about--text-only modifier. */
.md-about-carousel {
  position: relative;
  width: 100%;
  /* Width derives from a responsive clamp so the carousel scales
     gracefully between desktop and tablet, then stacks on mobile. */
  width: clamp(280px, 36vw, 480px);
  /* Square stage gives the center image room to breathe; sides peek
     in from the masked edges. */
  aspect-ratio: 1 / 1;
  /* Linear-gradient mask fades the left + right edges into the section
     background so the partial side photos read as "passing by" rather
     than abruptly cut off. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.md-about-carousel-stage {
  position: absolute;
  inset: 0;
}
/* Every slide is absolutely-centered; class-based transforms (.is-center,
   .is-prev, .is-next, .is-far) move and scale them. The class swap is
   driven by wireAboutCarousel() in js/ministry-page.js. */
.md-about-carousel-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-strong);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: default;
  /* Default state: hidden, scaled down, sitting in the middle. The
     is-* classes override transform/opacity/z-index. */
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition:
    transform 560ms cubic-bezier(.2, .8, .25, 1),
    opacity 360ms ease,
    box-shadow 360ms ease;
  box-shadow: 0 18px 40px -16px rgba(17, 24, 39, 0.30);
}
.md-about-carousel-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.md-about-carousel-slide.is-center {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 4;
  pointer-events: auto;
  cursor: zoom-in;
  box-shadow:
    0 28px 56px -22px rgba(17, 24, 39, 0.36),
    0 8px 22px -10px rgba(17, 24, 39, 0.18);
}
.md-about-carousel-slide.is-prev {
  transform: translate(calc(-50% - 60%), -50%) scale(0.68);
  opacity: 0.55;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}
.md-about-carousel-slide.is-next {
  transform: translate(calc(-50% + 60%), -50%) scale(0.68);
  opacity: 0.55;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}
.md-about-carousel-slide.is-far {
  /* Out of the visual rotation but still in the DOM so click handlers
     and the next-tick promotion to is-prev/is-next can grab them. */
  transform: translate(-50%, -50%) scale(0.45);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.md-about-carousel-slide:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Text-only mode (ministry has no gallery photos) — collapse the
   2-col grid to single-column AND center the text content. Without
   a carousel on the right pulling the eye, left-aligning everything
   feels lopsided; centering makes the section feel intentional. */
.md-about--text-only .md-about-grid {
  grid-template-columns: minmax(0, 1fr);
}
.md-about--text-only .md-about-text {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Body paragraphs cap at 640px (set elsewhere) and are block-level,
   so text-align on the parent only centers the prose itself; need
   `margin: auto` on each <p> to center the 640px block within the
   720px parent. */
.md-about--text-only .md-about-body p {
  margin-left: auto;
  margin-right: auto;
}
/* Leader badges are flex; switch their main-axis alignment to
   center so the badge row sits in the middle rather than the start. */
.md-about--text-only .md-leader-badges {
  justify-content: center;
}

/* Carousel mode — let the right column size itself naturally based on
   the carousel's clamp() width. */
.md-about--carousel .md-about-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
}

@media (max-width: 880px) {
  /* Stack on narrow screens: about text first, carousel below.
     The carousel keeps its aspect-ratio so it shrinks to viewport. */
  .md-about--carousel .md-about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .md-about-carousel {
    width: min(420px, 92vw);
    margin: 0 auto;
  }
}

/* ── Lightbox — full-screen photo viewer ─────────────────── */
.md-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  animation: mdLightboxFade 180ms ease-out;
}
.md-lightbox[hidden] { display: none; }
.md-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 4, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.md-lightbox-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.md-lightbox-img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  display: block;
  animation: mdLightboxRise 240ms cubic-bezier(.2,.7,.2,1);
}
.md-lightbox-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 160ms ease;
}
.md-lightbox-close:hover { background: rgba(255,255,255,0.25); }
.md-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 32px;
  line-height: 1;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 160ms ease;
}
.md-lightbox-nav:hover { background: rgba(255,255,255,0.28); }
.md-lightbox-prev { left: -76px; }
.md-lightbox-next { right: -76px; }
.md-lightbox-counter {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
@media (max-width: 880px) {
  .md-lightbox-prev { left: 8px; }
  .md-lightbox-next { right: 8px; }
  .md-lightbox-close { top: 12px; right: 12px; }
}
@keyframes mdLightboxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mdLightboxRise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Inline "We're looking for" — only renders when this ministry has
   matching rows in /api/open-roles. Lives between About and Schedule so
   the apply CTA flows naturally out of "here's who runs it". ────────── */
.md-open-roles {
  padding-top: 12px;
}
.md-open-head { margin-bottom: 18px; }
.md-open-head .eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}
.md-open-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.md-open-role-card {
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.md-open-role-card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.08), 0 3px 8px rgba(0,0,0,0.04);
  transform: translateY(-2px);
  border-color: rgba(252,107,28,0.25);
}
.md-open-role-h {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.md-open-role-tag {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}
.md-open-role-time {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.md-open-role-cta {
  align-self: flex-start;
  padding: 8px 14px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  border-radius: 999px;
  text-decoration: none;
  margin-top: 4px;
  transition: background 160ms ease;
}
.md-open-role-cta:hover { background: #e85d12; }

/* ── Closing band (mirrors ministries page) ──────────────── */
.md-close-band {
  background: var(--surface-soft);
  padding: 24px 0 80px;
}
.md-close-card {
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--xl);
  align-items: center;
}
@media (max-width: 720px) {
  .md-close-card { grid-template-columns: 1fr; padding: 28px; gap: var(--base); }
}
.md-close-card .eyebrow { margin: 0 0 8px; }
.md-close-card h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
  line-height: 1.2;
}
.md-close-card p {
  margin: 0;
  color: var(--body);
  font-size: 15px;
  max-width: 560px;
  line-height: 1.5;
}
.md-close-card .btn { white-space: nowrap; }