/* ==========================================================================
   Hope Centre — site.css
   New nav bar, homepage content blocks, scroll-reveal, parallax and
   hover-zoom effects. Plain CSS (no build step available), loaded after
   style.css. Reuses the existing colour palette / type scale / buttons
   defined in style.css rather than redefining them.
   ========================================================================== */

:root {
  --hc-white: #ffffff;
  --hc-lightblue: #F1F9FB;
  --hc-darkerlightblue: #D2EDF3;
  --hc-blue: #35B1C9;
  --hc-midblue: #227798;
  --hc-darkblue: #0D3E67;
  --hc-blackkblue: #072137;

  /* Shared brush-stroke shape behind highlighted keywords (see
     .brush-highlight below) — every instance across the site reuses
     this same hand-drawn underline, just stretched to fit its word. */
  --brush-path: path("M4,32 C2,18 20,10 45,9 L255,6 C280,5 297,14 296,30 C295,46 278,53 253,54 L48,57 C22,58 5,48 4,32 Z");
}

/* --------------------------------------------------------------------
   Header / navigation bar
   -------------------------------------------------------------------- */

#header {
  padding: 0 !important;
  position: static;
  z-index: 200;
  background: var(--hc-white);
  box-shadow: 0 2px 12px rgba(13, 62, 103, 0.08);
}

#header:before {
  display: none !important;
}

#header .container {
  max-width: 1500px;
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.site-nav__logo {
  display: block;
  flex: 0 0 auto;
}

.site-nav__logo img {
  display: block;
  width: 120px;
  height: auto;
}

@media (max-width: 767px) {
  .site-nav__logo img {
    width: 64px;
  }
}

.site-nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 210;
}

.site-nav__toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--hc-darkblue);
  border-radius: 2px;
  transition: transform 250ms ease, opacity 250ms ease;
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav__menu a {
  display: inline-block;
  color: var(--hc-darkblue);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 200ms ease, background-color 200ms ease;
}

.site-nav__menu a:hover,
.site-nav__menu a:focus-visible {
  color: var(--hc-blue);
  background-color: rgba(53, 177, 201, 0.12);
}

.site-nav__menu .button {
  color: var(--hc-white);
}

/* Below ~1100px the full desktop nav ("Family & Kids", "Get a Bible",
   "Support Us", etc.) no longer has room to sit on one line and starts
   wrapping/crowding the logo, so it switches to the same collapsible
   hamburger pattern used on phones well before that happens. */
@media (max-width: 1100px) {
  .site-nav__toggle {
    display: flex;
  }

  /* The menu drops into normal flow below the logo/toggle row instead of
     being fixed at a hardcoded pixel offset, so it can never overlap the
     row above it regardless of logo size or text wrapping. */
  .site-nav__inner {
    flex-wrap: wrap;
  }

  .site-nav__menu {
    order: 3;
    width: 100%;
    background: var(--hc-white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 20px;
    transition: max-height 300ms ease, opacity 250ms ease, padding 300ms ease;
  }

  .site-nav__menu.is-open {
    max-height: 70vh;
    overflow-y: auto;
    opacity: 1;
    padding: 10px 20px 24px;
  }

  .site-nav__menu a {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hc-lightblue);
    border-radius: 0;
    font-size: 22px;
  }

  .site-nav__menu a:hover,
  .site-nav__menu a:focus-visible {
    background-color: rgba(53, 177, 201, 0.08);
  }

  .site-nav__menu .button {
    margin-top: 16px;
    text-align: center;
  }
}

@media (min-width: 1101px) {
  .site-nav__toggle {
    display: none;
  }
}

/* Homepage only, and only above the mobile-nav breakpoint: nav bar
   floats transparently over the hero photo instead of sitting in its
   own solid bar. Below 1101px it's identical to every other page —
   solid white bar, dark text, white dropdown that pushes the page
   down instead of overlaying it. */

@media (min-width: 1101px) {
  body.home #header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    box-shadow: none;
  }

  body.home .site-nav__menu a {
    color: var(--hc-white);
  }

  body.home .site-nav__menu a:hover,
  body.home .site-nav__menu a:focus-visible {
    color: var(--hc-lightblue);
    background-color: rgba(255, 255, 255, 0.16);
  }

  body.home .site-nav__toggle span {
    background: var(--hc-white);
  }

  body.home .site-nav__logo img {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
  }

  /* Support Us button: reversed colours (white fill, blue text, white
     outline) so it stands out against the dark-blue nav on the homepage. */
  body.home .site-nav__menu .button {
    background: var(--hc-white);
    color: var(--hc-blackkblue);
    border: 2px solid var(--hc-white);
  }

  body.home .site-nav__menu .button:hover,
  body.home .site-nav__menu .button:focus-visible {
    background: transparent;
    color: var(--hc-white);
  }
}

/* --------------------------------------------------------------------
   Scroll reveal — headings/text/cards fade + rise into view
   -------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* Slides in from the right instead of rising from below, and slower
   than the default reveal — used for the verse quote beside the
   Sunday Service text. */
.reveal-right {
  transform: translateX(70px);
  transition: opacity 1400ms ease, transform 1400ms ease;
}

.reveal-right.in-view {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------
   Welcome hero — full-bleed photo behind the headline, sitting right
   under the (transparent, overlapping) nav bar.
   -------------------------------------------------------------------- */

.hero-welcome {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 640px;
  padding: 170px 20px 100px;
}

.hero-welcome__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-welcome__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.12);
  animation: hero-img-in 2.4s ease-out forwards, hero-img-drift 20s ease-in-out 2.4s infinite alternate;
}

@keyframes hero-img-in {
  from { opacity: 0; transform: scale(1.12); }
  to   { opacity: 1; transform: scale(1.05); }
}

@keyframes hero-img-drift {
  from { transform: scale(1.05); }
  to   { transform: scale(1.13); }
}

.hero-welcome__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 33, 55, 0.78) 0%, rgba(7, 33, 55, 0.32) 42%, rgba(7, 33, 55, 0.75) 100%);
}

.hero-welcome__content {
  position: relative;
  z-index: 2;
  max-width: 920px;
}

.hero-welcome__headline {
  color: var(--hc-white);
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.2;
  margin: 0 0 22px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-welcome__img {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 767px) {
  .hero-welcome {
    min-height: 520px;
    padding: 130px 20px 70px;
  }
}

/* Hand-drawn circle around a highlighted word (hero headline). Draws
   itself on load, slightly after the headline has faded in. */

.circle-word {
  position: relative;
  display: inline-block;
  padding: 0 6px;
}

.circle-word__svg {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 128%;
  height: 112%;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

.circle-word__svg path {
  fill: none;
  stroke: var(--hc-blue);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: circle-draw 1.1s ease-out 1.1s forwards;
}

@keyframes circle-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .circle-word__svg path {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* Brush-stroke highlight behind a keyword, same blue as the "all"
   circle. Paints in left-to-right once its .reveal ancestor scrolls
   into view, instead of on a fixed page-load timer. */

.brush-highlight {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding: 0 2px;
}

.brush-highlight__svg {
  position: absolute;
  left: -2%;
  top: 50%;
  width: 104%;
  height: 108%;
  transform: translateY(-50%);
  z-index: -1;
  overflow: visible;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms ease 400ms;
}

.reveal.in-view .brush-highlight__svg {
  clip-path: inset(0 0% 0 0);
}

.brush-highlight__svg path {
  d: var(--brush-path);
  fill: var(--hc-blue);
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .brush-highlight__svg {
    clip-path: inset(0 0% 0 0);
    transition: none;
  }
}

/* Wave divider — the mint background of Church Life sweeps up into
   the hero photo above it, instead of a hard edge. */

.wave-divider {
  position: relative;
  margin-top: -90px;
  height: 92px;
  line-height: 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wave-divider path {
  fill: var(--hc-lightblue);
}

@media (max-width: 767px) {
  .wave-divider {
    margin-top: -50px;
    height: 56px;
  }
}

/* Second divider, right after the welcome-text block — same curve,
   but filled white to hand off to the (white) Upcoming Events section
   below it. */
.wave-divider--white path {
  fill: var(--hc-white);
}

.wave-divider--grey path {
  fill: #F3F4F6;
}

/* Welcome text — the hero's lead line, moved onto its own mint block
   between the hero photo and Upcoming Events, curved on both edges. */

.welcome-text {
  background: var(--hc-lightblue);
  padding: 50px 20px 90px;
  text-align: center;
}

.welcome-text__lead {
  max-width: 780px;
  margin: 0 auto;
  color: var(--hc-darkblue);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.5;
}

/* --------------------------------------------------------------------
   Upcoming Events — single large promo tile (e.g. Christianity
   Explored) sitting above Church Life, same width/alignment rhythm.
   -------------------------------------------------------------------- */

.events-section {
  background: var(--hc-white);
  padding: 60px 0 10px;
}

.events-section__intro {
  max-width: 720px;
  margin: 0 auto 30px;
  padding: 0 20px;
  text-align: center;
}

.events-section__intro h2 {
  color: var(--hc-darkblue);
}

.events-section__wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.events-section__tile {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
}

.events-section__photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.events-section__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  transform: scale(1);
  transition: transform 600ms ease;
}

.events-section__label {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  max-width: 520px;
  padding: 30px 40px;
}

.events-section__title {
  color: var(--hc-white);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.2;
  text-shadow: 0 2px 14px rgba(7, 33, 55, 0.7);
}

.events-section__tile:hover .events-section__img,
.events-section__tile:focus-visible .events-section__img {
  transform: scale(1.06);
}

/* Grey footer bar under the image, holding the description and
   schedule badges — part of the same card, clipped to its rounded
   bottom corners. Living here (rather than over the photo) means it
   never has to fight the artwork's own text for space. */
.events-section__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #EEF1F3;
  padding: 26px 40px;
}

.events-section__desc {
  color: var(--hc-darkblue);
  font-size: 17px;
  line-height: 1.5;
  max-width: 640px;
}

.events-section__footer .events-schedule {
  margin-bottom: 0;
}

/* Extra detail rows (speakers, food) on richer event cards — small icon
   badge, same soft-circle style as the Who is Jesus illustrations, plus
   a line of text. */
.events-section__extra {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.events-section__extra-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--hc-darkblue);
  font-size: 15px;
  line-height: 1.4;
}

.events-section__extra-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.events-section__extra-text {
  display: flex;
  align-items: center;
  min-height: 34px;
  transform: translateY(-12px);
}

@media (max-width: 600px) {
  .events-section__label {
    padding: 18px 20px;
  }

  .events-section__title {
    font-size: 20px;
  }

  .events-section__footer {
    padding: 20px;
  }
}

/* --------------------------------------------------------------------
   Events carousel — horizontal scroll-snap so each event is a full
   "page", with a dot pager underneath synced to scroll position via
   JS. The dots container only ever gets populated (see site.js) when
   there's more than one event, and stays hidden while empty.
   -------------------------------------------------------------------- */

.events-carousel__track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  /* No native scroll-snap: "mandatory" snaps the instant a touch/swipe
     is released, however fast it was moving, which reads as an abrupt
     bounce. site.js eases to the nearest slide itself instead (see
     settleToNearest()), once the native momentum scroll has finished. */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  /* JS sets an explicit px height matching whichever slide is active,
     so a short card never inherits a taller sibling's empty space —
     see updateTrackHeight() in site.js. This just animates the change. */
  transition: height 350ms ease;
}

.events-carousel__track::-webkit-scrollbar {
  display: none;
}

/* While actively being dragged: smooth scroll-behavior would make every
   scrollLeft update animate instead of tracking the pointer 1:1 — off
   for the duration, then restored on release for the settle-in ease. */
.events-carousel__track.is-dragging {
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

.events-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.events-carousel__slide img {
  -webkit-user-drag: none;
  user-drag: none;
}

.events-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.events-carousel__dots:empty {
  display: none;
}

.events-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #D7DEE4;
  cursor: pointer;
  transition: background-color 250ms ease, width 250ms ease;
}

.events-carousel__dot:hover {
  background: #B9C4CC;
}

.events-carousel__dot.is-active {
  background: var(--hc-blue);
  width: 26px;
}

.events-carousel__dot.is-active:hover {
  background: var(--hc-blue);
}

/* --------------------------------------------------------------------
   Church Life — full-width mint section holding a rounded, gapped
   grid of photo tiles linking through to the site's key pages/actions.
   -------------------------------------------------------------------- */

.church-life {
  padding: 20px 0 90px;
  background: var(--hc-lightblue);
}

.church-life__intro {
  max-width: 720px;
  margin: 0 auto 46px;
  padding: 0 20px;
  text-align: center;
}

.church-life__intro h2 {
  color: var(--hc-darkblue);
}

.church-life__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.church-life__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
}

.church-life__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 600ms ease;
}

.church-life__overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 33, 55, 0.22);
  transition: background 350ms ease;
}

.church-life__title {
  position: relative;
  z-index: 1;
  color: var(--hc-white);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  text-align: center;
  padding: 0 20px;
  text-shadow: 1px 1px 2px rgba(7, 33, 55, 0.75);
}

.church-life__tile:hover .church-life__img,
.church-life__tile:focus-visible .church-life__img {
  transform: scale(1.08);
}

.church-life__tile:hover .church-life__overlay,
.church-life__tile:focus-visible .church-life__overlay {
  background: rgba(53, 177, 201, 0.55);
}

@media (max-width: 991px) {
  .church-life__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .church-life__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0 20px;
  }

  .church-life__tile {
    height: 150px;
    border-radius: 14px;
  }
}

/* --------------------------------------------------------------------
   Homepage content blocks
   -------------------------------------------------------------------- */

.block-section {
  padding: 70px 0;
}

.block-section__intro {
  max-width: 720px;
  margin: 0 0 40px;
}

.block-section__intro h2 {
  color: var(--hc-darkblue);
}

/* Schedule badges (e.g. Christianity Explored day/time + date range) */

.events-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.events-schedule__item {
  display: inline-block;
  color: var(--hc-white);
  background: var(--hc-blue);
  font-weight: 600;
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 20px;
}

/* Responsive 16:9 video embed */

.video-embed {
  position: relative;
  width: 100%;
  max-width: 800px;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.card {
  background: var(--hc-white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(13, 62, 103, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 350ms ease, box-shadow 350ms ease;
}

.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(13, 62, 103, 0.16);
}

.card__media {
  position: relative;
  overflow: hidden;
  height: 190px;
}

.card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 500ms ease;
}

.card:hover .card__media img,
.card:focus-within .card__media img {
  transform: scale(1.08);
}

.card__body {
  padding: 22px 24px 26px;
}

.card__when {
  display: inline-block;
  color: var(--hc-white);
  background: var(--hc-blue);
  font-weight: 600;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.card__body h3 {
  margin-bottom: 10px;
  color: var(--hc-darkblue);
}

.card__body p {
  margin-bottom: 0;
  font-size: 16px;
}

/* Generic hover-zoom utility for standalone images (e.g. map, gallery shots) */

.zoom-on-hover {
  overflow: hidden;
  display: block;
}

.zoom-on-hover img {
  transition: transform 500ms ease;
}

.zoom-on-hover:hover img,
.zoom-on-hover:focus-visible img {
  transform: scale(1.06);
}

@media (max-width: 767px) {
  .block-section {
    padding: 50px 0;
  }
}

/* --------------------------------------------------------------------
   Dedicated sub-pages (visit / church / family-kids) — zig-zag layout
   -------------------------------------------------------------------- */

.page-hero {
  padding-top: 90px;
}

/* Curved mint band behind the page-hero heading/intro, same look as
   .welcome-text on the homepage. */
.page-hero--tint {
  background: var(--hc-lightblue);
  padding-top: 130px;
  padding-bottom: 140px;
}

/* Heading on the left, intro text on the right — same max-width as the
   zigzag rows below, so both line up and resize the same way. Below
   800px the columns stack instead of squeezing/overlapping. */
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(260px, 640px) 1fr;
  gap: 50px;
  align-items: start;
}

.page-hero__grid h1 {
  margin: 0;
}

.page-hero__grid p {
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  text-align: left;
  margin-top: 0.6em;
  color: var(--hc-darkblue);
}

@media (max-width: 800px) {
  .page-hero__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .page-hero--tint {
    padding-bottom: 60px;
  }
}

.zigzag {
  padding: 20px 0 80px;
}

.zigzag-row {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 0;
}

.zigzag-row--reverse {
  flex-direction: row-reverse;
}

/* Sunday Service row: photo, text and the verse quote card side by
   side in three roughly equal columns instead of the usual two. */
.zigzag-row--quote {
  align-items: stretch;
  flex-wrap: wrap;
}

.zigzag-row--quote .zigzag-row__media,
.zigzag-row--quote .zigzag-row__content {
  flex: 1 1 320px;
}

.zigzag-row--quote .verse-quote__box,
.zigzag-row--quote .verse-quote-group {
  flex: 1 1 280px;
}

.zigzag-row--quote .verse-quote__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Wraps two-or-more verse cards stacked together as a single column,
   e.g. the "He Rose Again" row's John 10:10 + Matthew 11:28 pair. */
.verse-quote-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

@media (max-width: 991px) {
  .zigzag-row--quote {
    flex-wrap: wrap;
  }

  .zigzag-row--quote .zigzag-row__media,
  .zigzag-row--quote .zigzag-row__content,
  .zigzag-row--quote .verse-quote__box,
  .zigzag-row--quote .verse-quote-group {
    flex: 1 1 100%;
  }
}

.zigzag-row__media,
.zigzag-row__content,
.zigzag-row__video {
  flex: 1 1 50%;
  min-width: 0;
}

.zigzag-row__video .video-embed {
  max-width: none;
}

.zigzag-row__media {
  overflow: hidden;
  border-radius: 10px;
  height: 480px;
}

.zigzag-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 500ms ease;
}

.zigzag-row__media:hover img,
.zigzag-row__media:focus-within img {
  transform: scale(1.06);
}

/* Auto-advancing crossfade slideshow variant — each slide is the same
   fixed box/object-fit: cover treatment as a single static photo, just
   stacked and faded between, so mixed source resolutions/orientations
   all display at the same size. */
.zigzag-row__media[data-slideshow] {
  position: relative;
}

.zigzag-row__media[data-slideshow] img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease, transform 500ms ease;
}

.zigzag-row__media[data-slideshow] img.is-active {
  opacity: 1;
}

.zigzag-row__content h2 {
  color: var(--hc-darkblue);
  font-size: clamp(38px, 4.8vw, 58px);
  line-height: 1.1;
  margin-bottom: 18px;
}

.zigzag-row__content .card__when {
  font-size: 20px;
  padding: 8px 20px;
}

.zigzag-row__content p {
  font-size: 19px;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .page-hero {
    padding-top: 50px;
  }

  .zigzag-row,
  .zigzag-row--reverse {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
  }

  .zigzag-row__media {
    height: 320px;
    width: 100%;
  }

  /* Slideshow / before-after slider variants: their photos are all
     position:absolute (no in-flow content), so the flex-basis: 50% from
     above can't resolve against the column layout's indeterminate
     height and collapses to 0. Force a concrete, non-percentage basis
     instead. */
  .zigzag-row__media[data-slideshow],
  .zigzag-row__media[data-before-after] {
    flex: 0 0 320px;
  }
}

/* --------------------------------------------------------------------
   Christianity Explored page — compact schedule badges in the hero,
   the text/video row, centred intro copy after the video, and the
   "Interested to explore more?" sign-up banner.
   -------------------------------------------------------------------- */

.events-schedule--lg {
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 24px;
}

.events-schedule--lg .events-schedule__item {
  font-size: 20px;
  padding: 6px 14px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .events-schedule--lg .events-schedule__item {
    font-size: 12px;
    padding: 5px 10px;
  }
}

/* Text/video row: stretch both columns to equal height (the video's
   own aspect ratio) and vertically centre the (larger) copy within it. */
.zigzag-row--video-row {
  align-items: stretch;
}

.zigzag-row--video-row .zigzag-row__content {
  display: flex;
  align-items: center;
}

.zigzag-row--video-row .zigzag-row__content p {
  font-size: 34px;
  line-height: 1.6;
}

.ce-intro-section {
  background: #F3F4F6;
  padding: 70px 0;
}

.ce-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.ce-intro p {
  font-size: 30px;
  line-height: 1.7;
  margin: 0;
}

/* Bible verse callout — soft grey rounded card. Sits as a third column
   alongside the Sunday Service photo/text (see .zigzag-row--quote), or
   stacked under a page-hero heading (see .page-hero__grid blockquote). */
.verse-quote__box {
  margin: 0;
  background: #F3F4F6;
  border-radius: 28px;
  padding: 36px 32px;
  text-align: center;
}

/* In the hero it sits directly on the tinted hero background rather
   than as a separate card — no fill, just a left rule like a plain
   pull-quote. */
.page-hero__grid blockquote.verse-quote__box {
  margin-top: 24px;
  background: none;
  border-radius: 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid var(--hc-blue);
  text-align: left;
}

.verse-quote__text {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.6;
  font-style: italic;
  color: var(--hc-darkblue);
  margin: 0 0 18px;
}

.verse-quote__ref {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--hc-midblue);
  font-size: 18px;
}

@media (max-width: 600px) {
  .verse-quote__box {
    padding: 34px 24px;
    border-radius: 20px;
  }
}

/* Spirit and Truth (About page) — reuses the .ce-intro-section curved
   grey band, but split left/right instead of centred: quote on the
   left, supporting paragraphs on the right. Stacks on mobile/tablet. */
.spirit-truth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}

.spirit-truth h2 {
  color: var(--hc-darkblue);
  margin-bottom: 18px;
}

.spirit-truth p {
  font-size: 20px;
  line-height: 1.7;
}

@media (max-width: 800px) {
  .spirit-truth {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.ce-cta {
  background: var(--hc-lightblue);
  padding: 70px 0;
}

.ce-cta__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.ce-cta__heading {
  color: var(--hc-blue);
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.15;
  margin: 0;
}

/* flex: 0 0 auto keeps the button sized to its own content — the pill
   background always hugs the "Sign up" text instead of stretching to
   fill whatever space is next to it. */
.ce-cta__button {
  flex: 0 0 auto;
  height: clamp(39px, 4.83vw, 60px);
  display: inline-flex;
  align-items: center;
  padding: 0 34px;
  font-size: clamp(18px, 2vw, 22px);
  border-radius: 40px;
}

@media (max-width: 600px) {
  .ce-cta__grid {
    gap: 16px;
  }

  .ce-cta__heading {
    font-size: 22px;
  }

  .ce-cta__button {
    height: 40px;
    padding: 0 20px;
    font-size: 15px;
  }
}

/* Small screens: the desktop sizing above (large schedule badges forced
   onto one line, oversized paragraph copy tuned to sit level with the
   video) stops fitting — badges overflow the viewport and the enlarged
   paragraphs turn into a huge wall of single-word lines. Scale it all
   back down and let the schedule badges wrap instead of clipping. */
/* The video row specifically stacks earlier than the 767px point above:
   at tablet widths the desktop copy still renders inline (side-by-side)
   but wraps onto far more lines in the narrower column than it does at
   full desktop width, growing much taller than the video and leaving a
   stretched, empty gap beneath it. Stack it — and drop back to the same
   smaller copy size used below 767px — before that gap appears. */
@media (max-width: 991px) {
  .zigzag-row--video-row {
    flex-direction: column;
  }

  .zigzag-row--video-row .zigzag-row__content p {
    font-size: 19px;
    line-height: 1.7;
  }
}

@media (max-width: 767px) {
  .events-schedule--lg {
    flex-wrap: wrap;
    margin-top: 16px;
  }

  .ce-intro-section {
    padding: 45px 0;
  }

  .ce-intro p {
    font-size: 19px;
    line-height: 1.7;
  }

  .ce-cta {
    padding: 45px 0;
  }

  .ce-cta__heading {
    font-size: 30px;
  }
}

/* --------------------------------------------------------------------
   Contact form — shared by the inline "Ask Us Anything" section and
   the "Get a Bible" modal.
   -------------------------------------------------------------------- */

.contact-form label {
  display: block;
  color: var(--hc-midblue);
  font-weight: 700;
  margin: 18px 0 8px;
}

.contact-form label:first-of-type {
  margin-top: 0;
}

.contact-form__required {
  color: var(--hc-blackkblue);
  font-weight: 400;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 24px;
  padding: 14px 20px;
  font-size: 16px;
  font-family: inherit;
  background: var(--hc-white);
}

.contact-form textarea {
  border-radius: 18px;
  resize: vertical;
}

.contact-form__postcode-row {
  display: flex;
  gap: 10px;
}

.contact-form__postcode-row input {
  flex: 1 1 auto;
}

.contact-form__lookup {
  flex: 0 0 auto;
  white-space: nowrap;
}

.contact-form__hint {
  margin: 8px 4px 0;
  font-size: 14px;
  color: var(--hc-midblue);
  min-height: 18px;
}

.contact-form__status:not(:empty) {
  font-weight: 600;
}

.contact-form__submit {
  margin-top: 26px;
  border-radius: 24px;
}

@media (max-width: 600px) {
  .contact-form__postcode-row {
    flex-direction: column;
  }
}

/* Newsletter signup — compact single-line variant of .contact-form:
   just an email box and a button, no stacked labels. */

.newsletter-form {
  max-width: 460px;
  margin-top: 18px;
}

.newsletter-form__pill {
  display: flex;
  flex-wrap: nowrap;
  border: 2px solid var(--hc-blue);
  border-radius: 999px;
  overflow: hidden;
  background: var(--hc-white);
}

.newsletter-form__pill input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.newsletter-form__pill button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
}

/* "here" trigger — animated blue underline that draws in once the
   sentence scrolls into view, same motion style as the brush
   highlight. Clicking it reveals the newsletter box below. */

.underline-reveal {
  position: relative;
  display: inline;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--hc-blue);
  cursor: pointer;
}

.underline-reveal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--hc-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms ease 300ms;
}

.reveal.in-view .underline-reveal::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .underline-reveal::after {
    transform: scaleX(1);
    transition: none;
  }
}

/* Newsletter box — collapsed until "here" is clicked. */

.newsletter-reveal {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 400ms ease, opacity 300ms ease;
}

.newsletter-reveal.is-open {
  max-height: 200px;
  opacity: 1;
}

/* "Ask Us Anything" — collapsed-until-clicked wrapper around the full,
   full-width .ask-section (the same section used inline on the
   homepage), so the revealed content is identical on desktop instead
   of a cut-down mobile-style card. The cap is well above any realistic
   content height across breakpoints — see .newsletter-reveal above for
   the same technique at a smaller scale. */

.ask-inline-reveal {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 600ms ease, opacity 300ms ease;
}

.ask-inline-reveal.is-open {
  max-height: 1600px;
  opacity: 1;
}

/* Row of CTA buttons under "Take the Next Step" — kept on one line even
   on narrow phones instead of "Plan Your Visit" wrapping to its own row. */
.next-step-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .next-step-actions .button {
    font-size: 15px;
    padding: 10px 12px 12px;
  }
}

/* --------------------------------------------------------------------
   Ask Us Anything — inline contact section on the homepage, sitting
   before the map on the same mint background as Church Life above it.
   -------------------------------------------------------------------- */

.ask-section {
  background: var(--hc-lightblue);
  padding: 10px 0 60px;
}

/* Same max-width/side-padding as .church-life__grid above it, so the
   two line up and both resize the same way across screen widths. */
.ask-section__inner {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.ask-section__intro h2 {
  color: var(--hc-darkblue);
}

.ask-section__lead {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.2px;
  color: var(--hc-blackkblue);
}

@media (max-width: 900px) {
  .ask-section__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .ask-section__inner {
    padding: 0 20px;
  }
}

/* --------------------------------------------------------------------
   Get a Bible modal — opened from its Church Life tile.
   -------------------------------------------------------------------- */

body.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 33, 55, 0.6);
  z-index: 500;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 501;
  width: 92%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--hc-lightblue);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 30px 60px rgba(7, 33, 55, 0.35);
}

.modal[hidden],
.modal-backdrop[hidden] {
  display: none;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: 0;
  font-size: 30px;
  line-height: 1;
  color: var(--hc-darkblue);
  cursor: pointer;
}

.modal h2 {
  color: var(--hc-midblue);
  margin: 0 0 14px;
}

.modal > p {
  margin: 0 0 24px;
  color: var(--hc-blackkblue);
}

@media (max-width: 600px) {
  .modal {
    padding: 56px 22px 30px;
  }
}

/* Footer "About Us" link — sits under the Giving column's Support Us
   button, same heading style as "Giving" above it, underlined so it
   still reads as a link rather than another heading. */
.footer-about {
  margin-top: 16px;
}

.footer-about a {
  text-decoration: underline;
  color: inherit;
}

/* --------------------------------------------------------------------
   Before/after image comparison slider (e.g. renovation photos on the
   About page). Two stacked photos — "after" clipped to the left of the
   handle position, "before" showing through on the right. Dragged via
   direct pointer events on the whole box (see site.js) rather than a
   native range input, so the drag isn't limited to one direction/spot.
   -------------------------------------------------------------------- */

.ba-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}

.ba-slider__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

.ba-slider__after-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
}

.ba-slider__after-wrap .ba-slider__img {
  position: absolute;
}

/* The hover-zoom on .zigzag-row__media would desync the two stacked
   photos at the clip boundary, so it's switched off for slider photos. */
.zigzag-row__media:hover .ba-slider__img,
.zigzag-row__media:focus-within .ba-slider__img {
  transform: none;
}

.ba-slider__handle {
  position: absolute;
  inset: 0 auto 0 50%;
  z-index: 2;
  pointer-events: none;
  transform: translateX(-50%);
}

.ba-slider__handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(53, 177, 201, 0.55);
  transform: translateX(-50%);
}

.ba-slider__handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 64px;
  border-radius: 999px;
  background: rgba(53, 177, 201, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 10px rgba(7, 33, 55, 0.25);
  transform: translate(-50%, -50%);
}

.ba-slider:focus-visible .ba-slider__handle-grip {
  box-shadow: 0 0 0 3px var(--hc-blue);
}

/* Keeps a highlighted phrase and its immediately-following punctuation
   (e.g. "Hope Centre.") from ever breaking onto separate lines. More
   reliable across browsers than a zero-width word-joiner character. */
.nb {
  white-space: nowrap;
}