/* ==========================================================================
   Dundonald Baptist Church — prototype design system
   Built from the DBC Figma homepage: colours, type and component language
   are taken from that file and extended consistently to the inner pages.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- colour tokens (from Figma) --- */
  --ink: #121923;
  --ink-soft: #1b2531;
  --accent: #9cfbff;
  --white: #ffffff;
  --cream: #f9f8e8;
  --cream-2: #f1f0dd;
  --cream-3: #e9e8d2;

  --text-body: rgba(18,25,35,0.78);
  --text-muted: rgba(18,25,35,0.6);
  --line: rgba(18,25,35,0.12);
  --line-on-dark: rgba(255,255,255,0.18);

  /* --- type --- */
  --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- layout --- */
  --container: 1240px;
  --container-wide: 1360px;
  --radius-lg: 20px;
  --radius-md: 10px;
  --radius-sm: 4px;
  --gutter: clamp(24px, 5vw, 96px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; cursor: pointer; }

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
h1{ font-size: clamp(38px, 5vw, 64px); line-height: 1.1; }
h2{ font-size: clamp(28px, 3.4vw, 36px); line-height: 1.3; }
h3{ font-size: 24px; font-family: var(--sans); font-weight: 600; }
h4{ font-size: 21px; font-family: var(--sans); font-weight: 600; }

p{ margin: 0 0 1em; color: var(--text-body); }
p:last-child{ margin-bottom: 0; }

.eyebrow{
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
}

:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.on-dark :focus-visible, .btn-primary:focus-visible{
  outline-color: var(--accent);
}

.container{
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow{ max-width: 760px; }
.container--reading{ max-width: 720px; }
/* The Church page's own intro paragraph — wider than the standard reading
   column (one grid-column's worth more, ~960px vs 720px) and left-aligned
   rather than centred. Only used here, so it doesn't touch .container--reading
   itself, which every other narrow-content page still relies on. */
.church-intro{ max-width: 960px; margin-left: 0; margin-right: auto; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link{
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: var(--white);
  padding: 12px 18px; border-radius: var(--radius-sm);
  z-index: 400; transition: top .15s ease;
}
.skip-link:focus{ top: 12px; }

/* ---------------------------------- buttons ---------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease,
    transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .3s ease;
}
.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(18,25,35,0.15);
}
.btn:active{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(18,25,35,0.12); }
.btn svg{ width: 20px; height: 20px; flex: none; transition: transform .3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.btn:hover svg{ transform: translateX(4px); }

.btn-primary{
  background: var(--accent);
  color: var(--ink);
}
.btn-primary:hover{ background: #b3fcff; }

.btn-ghost-dark{
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-ghost-dark:hover{ background: var(--ink); color: var(--white); }

.btn-ghost-light{
  border-color: var(--white);
  color: var(--white);
  background: transparent;
}
.btn-ghost-light:hover{ background: var(--white); color: var(--ink); }

.btn-solid-dark{
  background: var(--ink);
  color: var(--white);
}
.btn-solid-dark:hover{ background: var(--ink-soft); }

.btn-sm{ padding: 12px 20px; font-size: 14px; }
.btn-block{ width: 100%; }

/* The core WordPress Button block, dropped into any WYSIWYG content area
   (page content, a Who Is Jesus? step's Body, etc.), matches our own
   .btn.btn-primary by default instead of WordPress's own bare styling — an
   editor's own colour choice from the block's toolbar still overrides this
   via its inline style, same as it would override any other CSS default. */
.wp-block-buttons{ gap: 14px; }
.wp-block-button__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease,
    transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .3s ease;
}
.wp-block-button__link:hover{
  background: #b3fcff;
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(18,25,35,0.15);
}
.wp-block-button__link:active{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(18,25,35,0.12); }
/* .prose a's underline (higher specificity: class + element) would otherwise
   win over the single-class reset above whenever a button sits inside a
   WYSIWYG content area. */
.prose .wp-block-button__link{ text-decoration: none; }
/* The block's own "Outline" style toggle reads as our ghost-dark button instead of a thin accent-coloured outline. */
.is-style-outline .wp-block-button__link{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.is-style-outline .wp-block-button__link:hover{ background: var(--ink); color: var(--white); }

/* ---------------------------------- header ---------------------------------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Same padding in every state (transparent-over-hero or solid) and on
     every page, so the logo/nav sit at an identical distance from the top
     of the viewport everywhere — only the background/position differ.
     Always fixed (never sticky/absolute) so it never reserves flow space —
     switching position type on scroll was what caused the page content to
     visibly jump the moment the header turned solid. */
  padding: 18px var(--gutter);
  transition: transform 0.3s ease, background 0.25s ease;
}
/* Slid fully out of view while scrolling down past the hero — it only
   reappears (see .site-header--solid below) once the user scrolls back up,
   so it doesn't compete for attention while reading down the page. */
.site-header.is-hidden{ transform: translateY(-100%); }
/* The transparent homepage header is position:absolute, so — unlike the
   solid header below, which sits in normal document flow and is naturally
   pushed down by the logged-in admin bar's reserved space — it ignores
   that space and renders 0-32px (0-46px on mobile) higher, underneath the
   fixed admin bar, instead of level with every other page's header. */
.admin-bar .site-header{
  top: var(--wp-admin--admin-bar--height, 32px);
}
.site-header--solid{
  /* Slightly transparent rather than fully solid --ink, so page content is
     still faintly visible scrolling underneath. */
  background: rgba(18, 25, 35, 0.92);
}
.header-row{
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.brand img{ width: 30px; height: 30px; }
.brand-name{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--white);
  letter-spacing: 0.05em;
}
.brand-name span{
  display: block;
  color: var(--accent);
  letter-spacing: 0.5em;
}

.primary-nav{
  display: flex;
  align-items: center;
  gap: 6px;
}
.primary-nav > ul{
  display: flex;
  align-items: center;
  gap: 24px;
}
.primary-nav a, .nav-trigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.05em;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  text-decoration: none;
}
.primary-nav a:hover, .nav-trigger:hover{ color: var(--accent); }
.primary-nav .current > a,
.primary-nav .current > .nav-trigger,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-parent > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav .current_page_item > a,
.primary-nav .current_page_parent > a{ color: var(--accent); }

/* Dropdowns for menu items with children — built from whatever hierarchy
   the menu at Appearance → Menus actually has (or the fallback menu below),
   not a fixed list, so any parent/child structure "just works". */
.primary-nav > ul > li{ position: relative; }

.nav-caret{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  padding: 0;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  vertical-align: 1px;
}
.primary-nav > ul > li:hover > .nav-caret,
.primary-nav > ul > li:focus-within > .nav-caret,
.primary-nav > ul > li.open > .nav-caret{ color: var(--accent); }
.nav-caret svg{ width: 10px; height: 10px; transition: transform .15s ease; }
.primary-nav > ul > li:hover > .nav-caret svg,
.primary-nav > ul > li:focus-within > .nav-caret svg,
.primary-nav > ul > li.open > .nav-caret svg{ transform: rotate(180deg); }

.primary-nav .sub-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  margin: 0;
  background: var(--ink);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  z-index: 150;
}
/* Invisible bridge over the 6px visual gap above — without it, moving the
   mouse straight down from the link into the dropdown crosses a dead zone
   that belongs to neither element, and :hover drops before the pointer
   reaches the sub-menu. This is a descendant of .sub-menu (not the gap
   itself), so hovering it keeps the parent li's :hover — and so this
   dropdown's own display:flex — active across the gap. */
.primary-nav .sub-menu::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}
.primary-nav > ul > li:hover > .sub-menu,
.primary-nav > ul > li:focus-within > .sub-menu,
.primary-nav > ul > li.open > .sub-menu{ display: flex; }
.primary-nav .sub-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  letter-spacing: 0;
  white-space: nowrap;
}
.primary-nav .sub-menu a:hover{ background: rgba(255,255,255,0.08); }

.header-cta{ flex: none; }
.menu-toggle{
  display: none;
  position: relative;
  z-index: 210;
  background: transparent;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-sm);
  color: var(--white);
  padding: 10px 12px;
}
.menu-toggle .icon-close{ display: none; }
.menu-toggle[aria-expanded="true"] .icon-open{ display: none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display: block; }
.menu-toggle[aria-expanded="true"]{
  border-color: var(--white);
  background: var(--ink);
}

@media (max-width: 980px){
  .primary-nav{
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 200;
    width: min(340px, 86vw);
    background: var(--ink);
    flex-direction: column;
    align-items: stretch;
    padding: 100px 28px 40px;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .primary-nav > ul{ flex-direction: column; align-items: stretch; gap: 2px; }
  .primary-nav.open{ transform: translateX(0); }
  /* Inline accordion instead of a floating flyout — no hover on touch, and a
     panel positioned "absolute" would run off the edge of the narrow drawer. */
  .primary-nav .sub-menu{
    position: static;
    border: none;
    box-shadow: none;
    padding: 4px 0 4px 16px;
    display: none;
  }
  .primary-nav > ul > li:hover > .sub-menu,
  .primary-nav > ul > li:focus-within > .sub-menu{ display: none; }
  .primary-nav > ul > li.open > .sub-menu{ display: flex; }
  .header-cta{ display: none; }
  .menu-toggle{ display: inline-flex; }
}

/* ---------------------------------- page hero (inner pages) ---------------------------------- */
.page-hero{
  background: var(--ink);
  color: var(--white);
  padding: 168px var(--gutter) 72px;
  min-height: 460px;
  display: flex;
  align-items: center;
}
.page-hero .container{ max-width: var(--container-wide); width: 100%; }
.breadcrumb{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 22px;
  letter-spacing: 0.03em;
}
.breadcrumb a{ color: rgba(255,255,255,0.75); }
.breadcrumb a:hover{ color: var(--accent); }
.page-hero h1{ color: var(--white); max-width: 780px; }
.page-hero .lede{
  color: rgba(255,255,255,0.75);
  font-size: 18px;
  max-width: 640px;
  margin-top: 20px;
}
.page-hero--photo{
  position: relative;
  overflow: hidden;
}
.page-hero--photo .hero-bg{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.page-hero--photo .hero-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,25,35,0.55), rgba(18,25,35,0.86));
}
.page-hero--photo .container{ position: relative; }

/* ---------------------------------- sections ---------------------------------- */
.section{ padding: 96px var(--gutter); }
.section--tight{ padding: 64px var(--gutter); }
.section--ink{ background: var(--ink); color: var(--white); }
.section--ink h2, .section--ink h3{ color: var(--white); }
.section--ink p{ color: rgba(255,255,255,0.72); }
.section--cream2{ background: var(--cream-2); padding: 40px 0; }

.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
}
.section-head h2{ max-width: 620px; }
.section-head p{ max-width: 460px; }

/* ---------------------------------- homepage hero ---------------------------------- */
.hero{
  position: relative;
  min-height: 860px;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
  padding: 130px 0 60px;
}
.hero-bg{
  position: absolute; inset: 0;
  background-image: url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center 30%;
}
.hero-scrim{
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.62);
}
.hero > .container{
  position: relative;
  max-width: var(--container-wide);
  width: 100%;
}
.hero-content{
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hero-content h1{ color: var(--white); }
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------------------------------- nav cards ---------------------------------- */
.nav-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: -80px;
  position: relative;
  z-index: 5;
  padding: 0 var(--gutter);
}
.nav-card{
  position: relative;
  height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  gap: 12px;
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.nav-card::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,25,35,0.1), var(--ink) 92%);
  z-index: 0;
}
.nav-card > *{ position: relative; z-index: 1; }
.nav-card span{ font-size: 24px; font-weight: 600; line-height: 1.35; }
.nav-card svg{ width: 22px; height: 22px; color: var(--accent); transition: transform .15s ease; }
.nav-card:hover svg{ transform: translateX(4px); }

/* ---------------------------------- sermon spotlight ---------------------------------- */
.spotlight{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: center;
}
.spotlight-video{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 715/470;
  background: var(--ink);
}
.spotlight-video > img:first-child{ width: 100%; height: 100%; object-fit: cover; }
.spotlight-video .play-badge{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 59px;
  object-fit: contain;
}
.spotlight-video iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.spotlight-tag{
  display: inline-flex;
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  padding: 8px 16px;
  border-radius: 50px;
  margin-bottom: 24px;
}
.passage-text{
  background: var(--cream);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 24px 28px;
}
.passage-text p{
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0 0 12px;
}
.passage-text cite{
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.spotlight-body h3{ font-family: var(--serif); font-size: 36px; margin-bottom: 24px; }
.spotlight-byline{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.spotlight-byline img{
  width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
}
.spotlight-byline p{ font-weight: 600; font-size: 16px; }
.spotlight-byline .date{ font-weight: 500; color: var(--text-muted); }

/* ---------------------------------- service times ---------------------------------- */
.service-times{
  background: var(--ink);
  border-radius: var(--radius-md);
  padding: 24px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  color: var(--white);
  flex-wrap: nowrap;
}
.service-times .divider{
  width: 1px; align-self: stretch;
  background: var(--line-on-dark);
  min-height: 120px;
  flex: none;
}
.service-item{ flex: 0 1 240px; min-width: 0; }
.service-item .label{ color: var(--white); font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.service-item .time{ font-family: var(--serif); color: var(--accent); font-size: 36px; font-weight: 700; margin-bottom: 8px; }
.service-item .note{ color: rgba(255,255,255,0.7); font-size: 15px; }

/* ---------------------------------- split feature (photo grid + copy) ---------------------------------- */
/* Pixel-measured straight off the Figma render (not the auto-generated
   code, which mishandled this file's nested "contents" groups and reported
   the mosaic as flush to the panel edge — it isn't). The photo mosaic sits
   128px in from the panel's left edge, so its own grid column is widened
   to 572px (128px inset + the mosaic's true 444px content width) and
   feature-copy's left padding adjusted to 108px so the copy text still
   starts exactly where Figma has it (680px from the panel's left edge).
   The panel itself also bleeds past its parent .container's padded content
   column, back out to the container's own outer edge (its unpadded
   max-width) — matching how wide the panel sits in the Figma file. */
.feature{
  position: relative;
  background: var(--cream-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 572px 1fr;
  align-items: stretch;
  height: 585px;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
}
/* Matches the Figma reference exactly: fixed-height tiles (not a stretched
   auto-fit grid, which is what caused rows to drift out of alignment
   between the two columns), a 20px gap, and the second column offset 80px
   down to create the brick-like stagger.
   The panel is a fixed height (above), so a mosaic with more photos than
   fit is *expected* to run taller than that — each column is taken out of
   normal flow with position:absolute so its real height can never inflate
   the panel itself, however many photos it holds. .photo-mosaic just clips
   whatever spills past the panel's edge.
   Fixed pixel offsets, not padding: an absolutely positioned child's
   containing block is its ancestor's *padding box*, whose top-left is the
   same point as the border edge — so padding-left on .photo-mosaic doesn't
   actually inset a left:0 child at all. Placing the columns at explicit
   128px/360px left offsets is what actually produces the inset. */
.photo-mosaic{
  position: relative;
  align-self: stretch;
  overflow: hidden;
}
.photo-mosaic-col{
  position: absolute;
  top: 0;
  width: 212px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.photo-mosaic-col:first-child{
  left: 128px;
}
.photo-mosaic-col:nth-child(2){
  left: 360px;
  top: 80px;
}
/* The single-row, all-photos-in-order variant (see dbc_render_photo_mosaic())
   only ever replaces .photo-mosaic-columns below the 1180px breakpoint —
   shown there in the responsive section. */
.photo-mosaic-row{ display: none; }
/* Each .photo-mosaic-set is one "copy" of a column's photos — every mosaic
   renders two (see dbc_render_photo_mosaic()), but on desktop the repeat
   copy only actually shows (and loops) once there are more photos than fit
   the fixed-height panel — otherwise it'd peek past the panel's clipped
   edge as a visible duplicate. Mobile always shows + loops it (below). */
.photo-mosaic-set{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.photo-mosaic-set--repeat{ display: none; }
.photo-mosaic--scrolling .photo-mosaic-set--repeat{ display: flex; }
.photo-mosaic-item{
  flex: none;
  height: 250px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.photo-mosaic-item img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Shown instead of an <img> for any mosaic slot with no image uploaded yet —
   a touch darker than .feature's own background so the empty slot still reads
   as a deliberate placeholder, not a rendering bug. */
.photo-placeholder{
  width: 100%;
  height: 100%;
  background: var(--cream-3);
}
/* More than 4 photos: each column's photos are duplicated back-to-back in
   the markup and scrolled exactly one set's height (-50%), so the loop
   point is seamless — slow enough to read as ambient motion, not a slideshow. */
.photo-mosaic--scrolling .photo-mosaic-col{
  animation: dbc-mosaic-scroll 62s linear infinite;
}
@keyframes dbc-mosaic-scroll{
  from{ transform: translateY(0); }
  to{ transform: translateY(-50%); }
}
/* Used from the 1180px breakpoint down, once the mosaic's columns become
   horizontal rows (see the responsive section) — same seamless-loop trick,
   just sliding sideways instead of down. */
@keyframes dbc-mosaic-scroll-x{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .photo-mosaic-col, .photo-mosaic-row{ animation: none !important; }
}
.feature-copy{
  position: relative;
  padding: 64px 80px 64px 108px;
  align-self: center;
}
.feature-copy h2{ margin-bottom: 24px; }
.feature-copy p{ margin-bottom: 24px; font-size: 16px; }

/* Pixel-measured against the Figma panel (not .feature-copy, which centers
   vertically and would make these drift with text length) — both marks are
   the same asset; the closing mark is just the opening one rotated 180°,
   since the old "bottom" SVG was actually an unrotated duplicate of "top"
   and so faced the wrong way. */
.quote-feature .quote-mark{
  position: absolute;
  width: 165px;
  height: 118px;
}
.quote-feature .quote-mark.top{ top: 41px; left: 612px; }
.quote-feature .quote-mark.bottom{ bottom: 40px; right: 40px; transform: rotate(180deg); }
.quote-feature blockquote{ position: relative; margin-top: 44px; }
.quote-feature blockquote{
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 20px;
}
.quote-feature cite{ font-style: normal; font-weight: 600; font-size: 16px; }
.quote-feature cite span{ font-weight: 500; color: var(--text-muted); }

/* ---------------------------------- events layout (intro left, cards right) ---------------------------------- */
.events-layout{
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 56px;
  align-items: start;
}
.events-intro h2{ margin-bottom: 20px; }
.events-intro p{ margin-bottom: 28px; }

/* ---------------------------------- event rows ---------------------------------- */
.event-list{ display: flex; flex-direction: column; gap: 16px; }
.event-row{
  background: var(--cream-2);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.event-row-main{ display: flex; align-items: center; gap: 23px; flex: 1; min-width: 260px; }
.event-date-block{
  background: var(--ink);
  color: var(--cream);
  border-radius: 5px;
  padding: 22px 19px 24px 20px;
  text-align: center;
  width: 120px;
  flex: none;
}
.event-date-block .day{ font-size: 12px; font-weight: 500; letter-spacing: 0.05em; display: block; margin-bottom: 8px; }
.event-date-block .time{ font-size: 24px; font-weight: 600; letter-spacing: 0.05em; }
.event-row h4{ font-size: 21px; margin-bottom: 5px; }
.event-row .venue{ color: var(--text-body); font-size: 16px; }
.event-row .btn{ flex: none; }
/* Past events (3-up grid, template-parts/card-event-past.php) stack the date
   block above the title instead of beside it — only here, not the upcoming
   list, which keeps its side-by-side layout. .event-date-block itself is
   untouched, so it stays the same size either way. */
.event-row--stacked .event-row-main{ flex-direction: column; align-items: flex-start; gap: 16px; }

/* ---------------------------------- generic card grids ---------------------------------- */
.grid{ display: grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.card:hover, .card.is-linked:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(18,25,35,0.1);
}
.card-media{ aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); }
.card-media img{ width: 100%; height: 100%; object-fit: cover; }
/* Sermon thumbnails come straight from YouTube at their native 16:9 — the
   shared .card-media's taller 4:3 box was cropping a lot off the sides of
   every thumbnail. A shorter, video-matching ratio shows the image properly. */
.card-sermon .card-media{ aspect-ratio: 16/9; }
.card-body{ padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-tag{
  display: inline-flex;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--accent);
  color: var(--ink);
}
.card-body h3{ font-size: 20px; }
.card-meta{ font-size: 14px; color: var(--text-muted); }
.card-foot{ margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--text-muted); }

/* icon card (e.g. Giving methods on the Contact page) — a plain .card with
   no .card-media photo, topped instead with a small circular badge showing
   a Material Icons glyph, chosen from an ACF select field so each method's
   icon is editable in wp-admin (see inc/options-page.php). */
.card-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cream-2);
  margin-bottom: 4px;
}
.card-icon .material-icons{ font-size: 26px; color: var(--ink); }

/* team card */
.team-card{ text-align: left; }
.team-card .card-media{ aspect-ratio: 1/1; }
.team-card .role{ color: var(--text-muted); font-size: 14px; font-weight: 600; }

/* download row */
.download-list{ display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.download-row{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.download-row .file-name{ font-weight: 600; font-size: 17px; }
.download-row .file-meta{ font-size: 14px; color: var(--text-muted); }
.download-row .file-info{ display: flex; align-items: center; gap: 16px; }
.download-icon{
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--cream-2); display: flex; align-items: center; justify-content: center;
  flex: none;
}
.download-icon svg{ width: 20px; height: 20px; }

/* ---------------------------------- table of contents (What We Believe) ---------------------------------- */
.toc{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 48px;
}
.toc-label{
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.toc ol{
  list-style: decimal;
  margin: 0;
  padding-left: 20px;
}
.toc li + li{ margin-top: 10px; }
.toc a{ font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------- accordion (beliefs / FAQ) ---------------------------------- */
.accordion{ border-top: 1px solid var(--line); }
.accordion-item{ border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.accordion-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
}
.accordion-trigger svg{ width: 20px; height: 20px; flex: none; transition: transform .2s ease; }
.accordion-item.open .accordion-trigger svg{ transform: rotate(45deg); }
.accordion-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.accordion-panel-inner{ padding: 0 4px 28px; max-width: 720px; }
.accordion-panel-inner p{ font-size: 16px; }

/* What We Believe: the page's own editor content and each accordion
   section's copy run at half the (wide, un-capped) container's width on
   desktop, widening as the viewport narrows — almost full width from
   tablet down, and full width on mobile — rather than sitting in a single
   fixed-width reading column at every size. Overrides
   .accordion-panel-inner's 720px cap above via specificity, not source
   order, so it doesn't matter that this comes after it. */
.page-template-template-what-we-believe-php .prose,
.page-template-template-what-we-believe-php .accordion-panel-inner{
  max-width: 50%;
}
@media (max-width: 1180px){
  .page-template-template-what-we-believe-php .prose,
  .page-template-template-what-we-believe-php .accordion-panel-inner{
    max-width: 92%;
  }
}
@media (max-width: 760px){
  .page-template-template-what-we-believe-php .prose,
  .page-template-template-what-we-believe-php .accordion-panel-inner{
    max-width: 100%;
  }
}

/* ---------------------------------- forms ---------------------------------- */
.form-grid{ display: grid; grid-template-columns: 1fr; gap: 20px; }
.field{ display: flex; flex-direction: column; gap: 8px; }
.field label{ font-weight: 600; font-size: 14px; }
.field input, .field select, .field textarea{
  font: inherit;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 2px solid var(--ink); outline-offset: 1px;
}
.field textarea{ resize: vertical; min-height: 140px; }
.form-note{ font-size: 13px; color: var(--text-muted); }

/* ---------------------------------- misc content blocks ---------------------------------- */
.stat-row{ display: flex; gap: 48px; flex-wrap: wrap; }
.stat-row .stat b{ display: block; font-family: var(--serif); font-size: 40px; }
.stat-row .stat span{ color: var(--text-muted); font-size: 14px; }

.info-panel{
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 32px;
}
.info-panel h3{ color: var(--white); margin-bottom: 16px; }
.info-panel p{ color: rgba(255,255,255,0.8); font-size: 15px; margin-bottom: 20px; }
.info-panel dl{ display: grid; gap: 12px; }
.info-panel dt{ font-size: 13px; color: rgba(255,255,255,0.55); }
.info-panel dd{ margin: 0; font-size: 16px; font-weight: 500; }

.prose h2{ margin: 48px 0 16px; }
.prose h3{ margin: 32px 0 12px; font-family: var(--serif); }
/* Whatever block an editor happens to start the content with — h2, h3, a
   plain paragraph — its top margin is zeroed so .prose always starts flush
   with the top of its own box. Without this, content starting with (say) an
   h3 sits visibly lower than the aside panel beside it on pages like a
   single event, even though the two grid columns themselves are aligned. */
.prose > :first-child{ margin-top: 0; }
.prose p{ font-size: 17px; margin-bottom: 20px; }
.prose ul{ margin: 0 0 20px; padding-left: 22px; list-style: disc; }
.prose li{ margin-bottom: 8px; font-size: 17px; color: var(--text-body); }
.prose a{ text-decoration: underline; text-underline-offset: 3px; }

/* A video dropped into page content — whether WordPress's Embed/Video block
   or a raw <iframe> pasted from YouTube's own "Share → Embed" code — always
   fills the content column's full width instead of sitting at whatever
   fixed width="…" the embed code happened to specify, scaling its height
   to match at a standard 16:9. */
.prose iframe,
.prose video,
.prose .wp-block-embed__wrapper{
  width: 100%;
}
.prose iframe{
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  margin: 24px 0;
}

.tag-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.filter-pill{
  padding: 10px 18px;
  border-radius: 50px;
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  background: var(--white);
}
.filter-pill.is-active{ background: var(--ink); color: var(--white); border-color: var(--ink); }

.pagination{
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 56px;
}
.pagination a, .pagination span{
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; border: 1px solid var(--line);
}
.pagination .is-current{ background: var(--ink); color: var(--white); border-color: var(--ink); }

.cta-banner{
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-banner h2{ color: var(--white); max-width: 520px; }

/* ---------------------------------- footer ---------------------------------- */
.site-footer{
  background: var(--ink);
  color: var(--white);
  padding: 80px var(--gutter) 40px;
}
.footer-top{
  display: flex;
  justify-content: center;
  padding-bottom: 48px;
}
.footer-brand{ display: flex; align-items: center; gap: 14px; }
.footer-brand img{ width: 30px; height: 30px; }
.footer-cols{
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.2fr;
  gap: 32px;
  padding-bottom: 56px;
}
.footer-col h5{
  font-size: 18px; font-weight: 600; letter-spacing: 0.03em;
  margin: 0 0 20px;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 12px; }
.footer-col a{
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}
.footer-col a:hover{ color: var(--accent); text-decoration: none; }
.footer-col p{ color: rgba(255,255,255,0.85); font-size: 16px; margin: 0; }

.footer-bottom{
  border-top: 1px solid var(--line-on-dark);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}
.footer-legal{ display: flex; flex-direction: column; gap: 6px; }
.footer-legal p{ color: inherit; margin: 0; }
.footer-social{ display: flex; gap: 20px; }
.footer-social a{
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}
.footer-social a:hover{ color: var(--accent); text-decoration: none; }

/* ---------------------------------- responsive ---------------------------------- */
@media (max-width: 1180px){
  /* Nav cards scroll horizontally from tablet down through mobile (not
     just mobile) instead of switching to a 2-column grid at this
     breakpoint — each card is undersized relative to the viewport so the
     next one peeks in, hinting that there's more to swipe. */
  .nav-cards{
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 32px;
    margin-left: 20px;
  }
  .nav-cards::-webkit-scrollbar{ display: none; }
  /* Smaller than the original 78vw/320px/360px-tall card, with padding,
     gap and icon scaled down to match — font-size only comes down slightly
     so the title stays easily readable at the smaller size. */
  .nav-card{
    flex: 0 0 82vw;
    max-width: 330px;
    height: 180px;
    padding: 16px;
    gap: 6px;
    scroll-snap-align: start;
  }
  .nav-card span{ font-size: 18px; }
  .nav-card svg{ width: 18px; height: 18px; }

  .feature{ grid-template-columns: 1fr; height: auto; }
  /* Once .feature stacks, the desktop two-column mosaic (.photo-mosaic-columns)
     is swapped out for .photo-mosaic-row — every photo, in order, as one
     continuous strip that auto-scrolls sideways. Always loops here regardless
     of photo count, since the point at this width is ambient motion, not
     reaching overflow content the way desktop's is. */
  .photo-mosaic{ aspect-ratio: auto; height: auto; }
  .photo-mosaic-columns{ display: none; }
  .photo-mosaic-row{
    display: flex;
    /* A block-level flex container in normal flow defaults to filling its
       parent's width, same as a plain <div> would — it does NOT shrink to
       its content just because it's flex. Left at that default, it'd fill
       the panel's full width, and translateX(-50%) would compute against
       that stretched width instead of the row's actual (2-sets-wide)
       content, breaking the seamless-loop math and causing a visible
       jump/skip every cycle. width:max-content makes it hug its two
       .photo-mosaic-row-set children instead, exactly like desktop's
       column does via its explicit 212px width, so -50% lands exactly one
       set over. */
    width: max-content;
    height: 160px;
    animation: dbc-mosaic-scroll-x 62s linear infinite;
  }
  .photo-mosaic-row-set{ display: flex; flex-direction: row; gap: 20px; }
  .photo-mosaic-row .photo-mosaic-item{ width: 180px; height: 100%; }
  /* Desktop's left:612px/top:41px lands the opening quote mark in the
     middle of the text column — once .feature stacks, that same position
     instead falls inside the photo row above the text and, since
     .quote-mark paints after .photo-mosaic in DOM order, sits on top of a
     photo like a stray tile. Moved to the panel's left edge and down into
     the text area instead, sitting just behind the blockquote (z-index) as
     a quiet background accent rather than blocking a photo. */
  .quote-feature .quote-mark.top{ top: 200px; left: 20px; z-index: 0; }
  .photo-mosaic{ position: relative; z-index: 1; }
  .quote-feature blockquote{ position: relative; z-index: 1; }
  /* Desktop's bottom:-78px/right:-125px pushes the closing mark almost
     entirely outside the panel, relying on .feature's fixed 585px height to
     place it meaningfully — below 1180px the panel is auto-height instead,
     so that offset would just clip it away completely. Pulled fully inside
     the panel's bottom-right corner instead. */
  .quote-feature .quote-mark.bottom{ bottom: 20px; right: 20px; }
  .feature-copy{ padding: 40px; }
  .spotlight{ grid-template-columns: 1fr; }
  .events-layout{ grid-template-columns: 1fr; }
  .footer-cols{ grid-template-columns: repeat(3, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){
  /* --gutter drives every side-padding site-wide (.container, header,
     footer, sections) — on mobile the clamp() on :root never drops below
     24px, so redefine it here to give mobile a flat, smaller 20px max. */
  :root{ --gutter: 20px; }
  /* .section/.section--tight always wrap an inner .container, and both
     already add the gutter as horizontal padding — nested, that doubled
     the real inset to ~40px. Leaving the horizontal padding to .container
     alone keeps it at the intended single 20px each side. */
  .section, .section--tight{ padding-left: 0; padding-right: 0; }
  .hero{ min-height: 620px; padding-top: 180px; }
  .page-hero{ min-height: 0; padding: 130px var(--gutter) 48px; }
  /* Every button becomes full width for easy tapping — .btn-sm is excluded
     since those are small inline download links inside a card footer, not
     primary CTAs, and stretching them to full width would look wrong. */
  .btn:not(.btn-sm){ width: 100%; }
  .hero-actions{ flex-direction: column; }
  .spotlight-body h3{ font-size: 26px; }

  /* The feature panels' photo mosaic (About / theme-verse) keeps its
     single-row layout from the 1180px breakpoint — just smaller tiles,
     since a phone-width panel can't fit the same 180px tiles as a
     tablet-width one. */
  .feature{ grid-template-columns: 1fr; height: auto; }
  .photo-mosaic-row{ height: 130px; }
  .photo-mosaic-row .photo-mosaic-item{ width: 140px; }
  .feature-copy{ padding: 32px 24px; }

  .service-times{ flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 28px; padding: 24px 32px; }
  .service-times .divider{ display: none; }
  .service-item{ flex: none; width: 100%; }
  /* padding-top/bottom only — a plain "padding: 64px var(--gutter)" shorthand
     would reset the left/right component the .section rule above just zeroed
     out, silently doubling the real inset back up to ~40px (.container's
     20px plus this reintroduced 20px) and knocking anything in a plain
     .section (the homepage's featured-sermon spotlight, upcoming events,
     etc.) out of alignment with content in a .section--tight (e.g. service
     times), which has no such override to fight with. */
  .section{ padding-top: 64px; padding-bottom: 64px; }
  .section-head{ flex-direction: column; align-items: flex-start; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .footer-cols{ grid-template-columns: repeat(2, 1fr); }

  /* Every event row's contents stack top-to-bottom (date, then title/venue,
     then the CTA) instead of the desktop's side-by-side layout, since that
     row gets too cramped to read at a phone width — applies everywhere,
     whether the list itself scrolls or stacks (below). */
  .event-row{ flex-direction: column; align-items: stretch; }
  .event-row-main{ flex-direction: column; align-items: stretch; gap: 16px; min-width: 0; }
  .event-date-block{ width: 100%; text-align: left; }
  .event-row .btn{ width: 100%; }

  /* Homepage only (.events-layout): horizontal swipe, offset so the next
     card visibly peeks in — otherwise it isn't obvious there's more to
     scroll. The dedicated Events page and single-event "other events" list
     are also .event-list but outside .events-layout, so they're unaffected
     and stay a plain single-column list. */
  .events-layout .event-list{
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The peeking card is the main scroll cue, but it can still read as the
       row just ending rather than being cut off — a soft fade at the right
       edge makes it unambiguous that content continues past it. */
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }
  .events-layout .event-list::-webkit-scrollbar{ display: none; }
  .events-layout .event-row{ flex: 0 0 88vw; max-width: 340px; scroll-snap-align: start; }
  .cta-banner{ padding: 40px; flex-direction: column; align-items: flex-start; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------- Who Is Jesus?: guided-journey layout ----------------------------------
   A sticky left-hand rail (desktop-only — dropped on mobile rather than
   swapped for a top progress bar) tracks scroll position down a sequence
   of full-width "step" panels, each one the size of a .journey_steps
   flexible-content row. Distinct from every other page's plain .section
   stack — this template is the one place the site uses a reading rail. */
.journey-shell{ display: flex; align-items: flex-start; max-width: var(--container-wide); margin: 0 auto; }
.journey-rail{
  position: sticky;
  top: 90px;
  flex: 0 0 260px;
  align-self: flex-start;
  padding: 48px 0 48px 40px;
}
.rail-track{ position: relative; padding-left: 30px; }
/* The line sits at rail-track's left edge (absolute positioning ignores
   the ancestor's own padding-left:30px — see the containing-block note
   above), so its offset is measured in that same frame, not rail-step's.
   rail-step::before is a 10px circle at left:-30px relative to rail-step,
   whose own box starts at x:30 in rail-track's frame, so the circle spans
   x:0–10 there — center x:5. The line must share that center. */
.journey-rail-line{ position: absolute; left: 4px; top: 16px; bottom: 16px; width: 2px; background: var(--line); }
.journey-rail-fill{ position: absolute; left: 4px; top: 16px; width: 2px; background: var(--accent); height: 0%; transition: height .25s ease; }
.rail-step{ position: relative; padding: 12px 0; cursor: pointer; }
.rail-step::before{
  content: "";
  position: absolute; left: -30px; top: 16px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--line);
  transition: all .2s ease;
}
.rail-step .num{ font-family: var(--serif); font-size: 13px; color: var(--text-muted); display: block; }
.rail-step .label{ font-size: 14.5px; font-weight: 500; color: var(--text-muted); transition: color .2s ease; }
.rail-step.is-active::before{ background: var(--accent); border-color: var(--accent); transform: scale(1.3); }
.rail-step.is-active .label{ color: var(--ink); font-weight: 700; }
.rail-step:hover .label{ color: var(--ink); }

.journey-main{ flex: 1; min-width: 0; }
.step{ padding: 96px var(--gutter); border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.step:last-of-type{ border-bottom: none; }
.step--dark{ background: var(--ink); border-bottom-color: var(--line-on-dark); }
.step--dark h2, .step--dark h3{ color: var(--white); }
.step--dark p{ color: rgba(255,255,255,0.72); }
.step-inner{ max-width: 720px; }
.step-eyebrow{ font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.step--dark .step-eyebrow{ color: var(--accent); }
.step h2{ font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 22px; }
.step .body p{ font-size: 17px; margin-bottom: 18px; color: var(--text-body); }
.step-photo{ border-radius: var(--radius-lg); overflow: hidden; margin: 28px 0; aspect-ratio: 16/9; }
.step-photo img{ width: 100%; height: 100%; object-fit: cover; }
.step-video{ border-radius: var(--radius-lg); overflow: hidden; margin: 28px 0; aspect-ratio: 16/9; }
.step-video iframe{ width: 100%; height: 100%; border: none; }

.verse-chip-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.verse-chip{
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text-muted);
  border-radius: 999px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px;
}
.step--dark .verse-chip{ border-color: var(--line-on-dark); color: rgba(255,255,255,0.65); }
.verse-chip svg{ width: 12px; height: 12px; transition: transform .15s ease; }
.verse-chip.is-open svg{ transform: rotate(45deg); }
.verse-chip:hover{ border-color: var(--accent); color: var(--ink); }
.step--dark .verse-chip:hover{ color: var(--white); }
.verse-detail{
  display: none; font-size: 14px; color: var(--text-muted); background: var(--cream-2);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 10px; width: 100%;
}
.step--dark .verse-detail{ background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.verse-detail.is-open{ display: block; }

/* the "running your own life / trusting Jesus" pivot diagram */
.two-roads{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
.road{ border-radius: var(--radius-md); padding: 26px 22px; border: 1px solid var(--line-on-dark); background: rgba(255,255,255,0.04); }
.road.is-rescue{ background: rgba(156,251,255,0.08); border-color: rgba(156,251,255,0.4); }
.road .icon{ width: 34px; height: 34px; margin-bottom: 14px; }
.road h4{ font-family: var(--serif); font-size: 19px; color: var(--white); margin: 0 0 8px; }
.road.is-rescue h4{ color: var(--accent); }
.road p{ font-size: 14.5px; color: rgba(255,255,255,0.65); margin: 0; }
.step--dark .verses{ display: block; margin-top: 16px; color: rgba(255,255,255,0.5); font-size: 14px; }

@media (max-width: 980px){
  .journey-rail{ display: none; }
  .step{ padding: 64px 24px; }
  /* "What next" closing cards scroll horizontally on mobile, same peeking-
     card pattern as the homepage's .nav-cards, instead of stacking to one
     column like a plain .grid-3 — reusing .card here (image + body) rather
     than .nav-card's full-bleed background-image style, so the sizing is
     tuned to that shape instead of copied wholesale from .nav-card. */
  .whatnext-cards{
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .whatnext-cards::-webkit-scrollbar{ display: none; }
  .whatnext-cards .card{ flex: 0 0 82vw; max-width: 330px; scroll-snap-align: start; }
}
@media (max-width: 640px){
  .two-roads{ grid-template-columns: 1fr; }
}