/* =================================================================
   ACTS CHURCH BAHRAIN — DESIGN SYSTEM
   Palette derived from the church's own anchor mark (deep navy +
   silvered steel), paired with a warm gold accent for warmth so the
   site doesn't read as cold/corporate. Nautical anchor motif (the
   church's own "Anchored in Christ" identity) informs section
   dividers and iconography instead of generic stock church imagery.
   ================================================================= */

:root {
  /* --- Brand colors, sampled from the ACTS logo --- */
  --navy-950: #0c2330;
  --navy-900: #123146;
  --navy-800: #1a4058;
  --navy-700: #245576;
  --navy-600: #326d94;
  --steel-500: #6f92ac;
  --steel-300: #aec3d2;
  --steel-100: #e4ecf1;
  --fog-50: #f6f8fa;
  --white: #ffffff;

  /* --- Warm accent (gold) --- */
  --gold-600: #b8862f;
  --gold-500: #cf9d3f;
  --gold-400: #e0b563;
  --gold-100: #faf1de;

  /* --- Semantic --- */
  --ink: #16232c;
  --ink-soft: #4d5c66;
  --line: #e3e9ed;
  --success: #2f7d5b;
  --danger: #b8412f;

  /* --- Type --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Scale --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(12, 35, 48, 0.06);
  --shadow-md: 0 12px 32px rgba(12, 35, 48, 0.10);
  --shadow-lg: 0 24px 64px rgba(12, 35, 48, 0.16);
  --container: 1240px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy-950); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
p { margin: 0 0 1em; color: var(--ink-soft); }
button { font: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-900); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem;
  border: 2px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--gold-500); color: var(--navy-950); }
.btn-primary:hover { background: var(--gold-400); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--navy-900); color: #fff; }
.btn-secondary:hover { background: var(--navy-800); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; border-color: currentColor; color: var(--navy-900); }
.btn-ghost:hover { background: var(--navy-900); color: #fff; }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--navy-950); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: .85rem; }

/* ---------- Announcement bar ---------- */
.announcement-bar { background: var(--navy-950); color: var(--gold-400); font-size: .85rem; padding: 8px 0; }
.announcement-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; text-align: center; }
.announcement-close { background: none; border: none; color: inherit; font-size: 1.1rem; cursor: pointer; position: absolute; right: 24px; line-height: 1; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; gap: 24px; padding: 12px 24px; }
.brand-mark { height: 48px; width: auto; }
.main-nav { flex: 1; display: flex; justify-content: flex-end; }
.main-nav > ul { display: flex; gap: 4px; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a { display: flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: var(--radius-pill); font-weight: 600; font-size: .95rem; color: var(--navy-900); transition: background .15s ease; }
.main-nav > ul > li > a:hover, .main-nav > ul > li.is-open > a { background: var(--steel-100); }
.caret { font-size: .65rem; margin-top: 2px; }
.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .18s ease; z-index: 50;
}
.has-children:hover .submenu, .has-children.is-open .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
/* Round 136: the LAST menu opens towards the left, so its (hidden) dropdown can never push the page wider than the screen when the header button changes width. */
.main-nav > ul > li:last-child > .submenu { left: auto; right: 0; }
.submenu li a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .9rem; color: var(--ink); }
.submenu li a:hover { background: var(--fog-50); color: var(--navy-900); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-cta-secondary { display: none; }
@media (min-width: 1024px) { .header-cta-secondary { display: inline-flex; } }
/* Round 103: one more menu item (Connect) — keep the logo full size and the row on one line from 1024px up. */
.brand { flex: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-inner { gap: 14px; padding-left: 16px; padding-right: 16px; }
  .main-nav > ul { gap: 0; }
  .main-nav > ul > li > a { padding: 10px 9px; font-size: .88rem; }
  .header-portal-btn { padding-left: 18px; padding-right: 18px; white-space: nowrap; }
}
.header-portal-btn { white-space: nowrap; }

.nav-toggle { display: flex; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy-900); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) { .main-nav { display: flex; } .nav-toggle { display: none; } }
@media (max-width: 1023px) { .main-nav { display: none; } }

.mobile-nav { max-height: 0; overflow: hidden; background: #fff; border-top: 1px solid var(--line); transition: max-height .3s ease; }
.mobile-nav.is-open { max-height: 80vh; overflow-y: auto; }
.mobile-nav ul { padding: 12px 24px 24px; }
.mobile-nav-row { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav > ul > li > .mobile-nav-row > a { display: block; padding: 14px 0; font-weight: 600; font-size: 1.05rem; color: var(--navy-900); border-bottom: 1px solid var(--line); flex: 1; }
.mobile-submenu-toggle { background: none; border: none; font-size: 1rem; padding: 14px 8px; cursor: pointer; }
.mobile-submenu { margin: 0; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .25s ease, opacity .2s ease; padding-left: 12px; }
.mobile-submenu.is-open { max-height: 500px; opacity: 1; visibility: visible; }
.mobile-submenu li a { display: block; padding: 10px 0; color: var(--ink-soft); }
.mobile-nav-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.quick-prayer {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: flex; align-items: center; gap: 8px; background: var(--navy-950); color: #fff;
  padding: 14px 20px; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
  font-weight: 600; font-size: .9rem; transition: transform .2s ease, background .2s ease;
}
.quick-prayer:hover { background: var(--gold-500); color: var(--navy-950); transform: translateY(-3px); }
/* Phase 7: faded out (via main.js) while the footer is in view so it
   never sits on top of, and blocks, the footer's Privacy/Terms/CMS
   links. Kept in the layout (not display:none) so it reappears
   instantly, with no reflow, once you scroll back up. */
.quick-prayer.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media (max-width: 640px) { .quick-prayer-label { display: none; } .quick-prayer { padding: 14px; } }

/* ---------- Section scaffolding ---------- */
section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: var(--fog-50); }
.section-dark { background: var(--navy-950); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: var(--steel-300); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .12em;
  font-size: .78rem; font-weight: 700; color: var(--gold-600); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--gold-500); display: inline-block; }
.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head-row h2 { margin-bottom: 8px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 88vh; display: flex; align-items: center;
  /* Relative to this stylesheet's own location (assets/css/) rather than
     the site root, so this keeps working no matter what folder the whole
     project is served from (e.g. XAMPP's htdocs vs. a live domain root). */
  /* Lightened overlay (was rgba(12,35,48,.55)→.82) so the background photo
     reads clearly instead of looking almost black; text keeps its contrast
     via the text-shadow rules below rather than a heavy dark wash. Same
     overlay at every breakpoint — desktop, tablet, and mobile all use this
     background/cover treatment, so lightening it here fixes all three. */
  background: linear-gradient(180deg, rgba(12,35,48,var(--hero-a, .30)), rgba(12,35,48,var(--hero-b, .52))), url('../images/hero-banner.jpg') center/cover no-repeat;
  color: #fff;
}
/* Round 83: overlay strength is chosen in Website Content → Home Banner. */
.hero--light { --hero-a: .16; --hero-b: .34; }
.hero--dark { --hero-a: .50; --hero-b: .74; }
.hero.has-media { background: var(--navy-950); overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; }
.hero-media .hero-video, .hero-media .hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media .hero-slide-img { opacity: 0; transition: opacity 1.4s ease; }
.hero-media .hero-slide-img.is-active { opacity: 1; }
.hero-media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,35,48,var(--hero-a, .30)), rgba(12,35,48,var(--hero-b, .52))); }
.hero.has-media > .hero-content, .hero.has-media > .hero-scroll-cue { position: relative; z-index: 1; }
.hero.has-media > .hero-scroll-cue { position: absolute; }
.hero-content { max-width: 720px; }
.hero-content h1 {
  color: #fff; font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin-bottom: .3em;
  /* Added so headline stays crisp against a now-brighter background image. */
  text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
}
.hero-content .lede {
  color: var(--steel-100); font-size: 1.15rem; max-width: 560px;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
/* "Today's Program" — appears only during the service window. Gold outline +
   document icon so it reads as the time-sensitive action next to the other
   three buttons, without competing with the solid gold "Plan Your Visit". */
.btn-program {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(12,35,48,.35); border-color: var(--gold-400); color: var(--gold-400);
}
.btn-program:hover { background: var(--gold-400); color: var(--navy-950); }
.btn-program .btn-icon { flex: none; }
/* Four buttons: slightly tighter padding keeps them on one row where there is
   room; otherwise they wrap neatly. On phones they become a tidy 2-column grid
   (the fourth button never shrinks its text). */
.hero-actions.has-program { gap: 10px; }
.hero-actions.has-program .btn { padding-left: 18px; padding-right: 18px; white-space: nowrap; }
@media (max-width: 640px) {
  .hero-actions.has-program { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-actions.has-program .btn { padding-left: 12px; padding-right: 12px; text-align: center; justify-content: center; }
}
@media (max-width: 360px) {
  .hero-actions.has-program { grid-template-columns: 1fr; }
}
.hero-service-strip {
  margin-top: 56px; display: flex; flex-wrap: wrap; gap: 28px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.25);
  /* A light scrim behind just this strip keeps the service times readable
     even where the photo underneath is bright, without darkening the rest
     of the hero image above it. */
  background: linear-gradient(180deg, rgba(12,35,48,0), rgba(12,35,48,.38));
  padding-bottom: 18px; margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px;
}
.hero-service-strip div { display: flex; flex-direction: column; }
.hero-service-strip .label { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--gold-400); font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.hero-service-strip .value { font-size: 1.05rem; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hero-scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: #fff; opacity: .8; font-size: .8rem; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-scroll-cue span { width: 1px; height: 32px; background: rgba(255,255,255,.6); animation: scrollcue 1.8s infinite; }
@keyframes scrollcue { 0% { transform: scaleY(0); transform-origin: top;} 50% {transform: scaleY(1); transform-origin: top;} 51% {transform-origin: bottom;} 100% {transform: scaleY(0); transform-origin: bottom;} }

/* ---------- Welcome / intro ---------- */
.welcome-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) { .welcome-grid { grid-template-columns: 1fr 1fr; } }
.welcome-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.welcome-media img { width: 100%; height: 100%; object-fit: cover; }
/* Used only for the admin-selectable video/slider hero options (the
   plain static image keeps its natural, unconstrained aspect ratio) —
   both a video iframe and a multi-image slider need an explicit box to
   size themselves against. */
.welcome-media--fixed-ratio { aspect-ratio: 16 / 11; }
.welcome-media--fixed-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.welcome-media-slider { position: absolute; inset: 0; }
/* Nineteenth round: each slide is now a wrapper div (.hero-slide), not a
   bare <img>, so an optional per-slide heading/subtitle/button can be
   overlaid on top of its image — the fade/cross-fade behavior itself is
   unchanged from the original image-only slider. */
.welcome-media-slider .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.welcome-media-slider .hero-slide.is-active { opacity: 1; }
.welcome-media-slider .hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 24px; background: linear-gradient(0deg, rgba(6,20,40,.82), rgba(6,20,40,0)); color: #fff; }
.hero-slide-caption h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.3rem; }
.hero-slide-caption p { margin: 0 0 12px; opacity: .9; font-size: .92rem; }
.hero-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(6,20,40,.55); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hero-slider-arrow:hover { background: rgba(6,20,40,.8); }
.hero-slider-arrow.prev { left: 12px; }
.hero-slider-arrow.next { right: 12px; }
.hero-slider-dots { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; gap: 6px; }
.hero-slider-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; }
.hero-slider-dot.is-active { background: #fff; }
.stat-counters { display: grid; grid-template-columns: repeat(var(--stat-cols, 3), 1fr); gap: 16px; margin-top: 32px; }
.stat-counter { text-align: center; padding: 20px 8px; background: var(--fog-50); border-radius: var(--radius-md); }
.stat-counter .num { font-family: var(--font-display); font-size: 2.1rem; color: var(--navy-900); font-weight: 700; }
.stat-counter .label { font-size: .8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Service times ---------- */
.service-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .service-cards { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card .tag { display: block; width: fit-content; margin-bottom: 14px; }
.service-card .day { color: var(--gold-600); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.service-card .time { font-family: var(--font-display); font-size: 1.9rem; margin: 8px 0; color: var(--navy-950); }
.service-card .loc { color: var(--ink-soft); font-size: .92rem; }

/* ---------- Cards: events / ministries / news ---------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 640px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.event-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; }
.event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.event-card-media { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); display: flex; align-items: center; justify-content: center; }
.event-date-badge { position: absolute; top: 16px; left: 16px; background: #fff; border-radius: var(--radius-sm); padding: 8px 12px; text-align: center; box-shadow: var(--shadow-sm); }
.event-date-badge .m { display: block; font-size: .68rem; text-transform: uppercase; color: var(--gold-600); font-weight: 700; }
.event-date-badge .d { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--navy-950); line-height: 1; }
.event-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.event-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--ink-soft); margin-bottom: 10px; }
.event-card-body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.event-card-body p { flex: 1; font-size: .92rem; }
.tag { display: inline-block; background: var(--gold-100); color: var(--gold-600); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: var(--radius-pill); }

.ministry-card { background: #fff; border-radius: var(--radius-lg); padding: 32px 28px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ministry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-400); }
.ministry-icon { font-size: 2.2rem; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--steel-100); margin-bottom: 18px; }
/* Ministry logo (uploaded image, as opposed to the .ministry-icon emoji
   fallback above) — shown at its own natural aspect ratio with no cropping
   or background box, since ministry logos are usually wide wordmarks
   rather than square icons. */
.ministry-logo { display: block; height: 58px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 18px; }
.ministry-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.ministry-card .more-link { font-weight: 700; color: var(--gold-600); font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; transition: color .2s ease; }
.ministry-card:hover .more-link { color: var(--navy-900); }

/* Homepage "Our Ministries" marquee — a single continuously-sliding line
   of every active ministry, in a fresh random order each page load (see
   index.php). Lives inside .wrap like every other section (Forty-first
   round) so its edges line up with the rest of the page, rather than
   bleeding edge-to-edge across the full viewport. The track holds the
   shuffled ministry list rendered twice back-to-back; assets/js/main.js
   drives its position directly (both the automatic scroll and a
   visitor's drag/swipe) by setting `transform: translateX()` on it and
   wrapping the offset by exactly one copy's width — see that file for
   the loop/drag logic. cursor: grab signals it's draggable; .is-dragging
   (added by the JS while a drag is in progress) swaps that to grabbing
   and suppresses text selection and the hover lift/shadow so they don't
   fight with the drag. touch-action: pan-y hands horizontal swipes to
   our own JS while still letting a vertical swipe scroll the page. */
.ministry-marquee {
  width: 100%; overflow: hidden; padding: 28px 0; cursor: grab; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ministry-marquee.is-dragging { cursor: grabbing; }
.ministry-marquee-track { display: flex; width: max-content; gap: 20px; will-change: transform; }
.ministry-marquee.is-dragging .ministry-marquee-track { user-select: none; }
/* Each ministry is its own box — same light card format as the "Get
   Connected" tiles further down the homepage (.connect-card): logo/icon
   on top, name below, centered. On hover it lifts slightly and picks up
   a deep shadow in the brand's own dark navy (the same anchor-logo navy
   as --navy-950, which --shadow-md is already tinted from) rather than
   inverting to a solid fill, so a ministry's logo artwork never has to
   sit against a dark background. */
.ministry-marquee-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  flex-shrink: 0; width: 168px; min-height: 148px; text-align: center;
  background: var(--fog-50); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 24px 16px; box-shadow: var(--shadow-sm); color: var(--navy-950); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.ministry-marquee-item:hover {
  transform: translateY(-6px); border-color: var(--gold-400); background: #fff;
  box-shadow: 0 20px 40px rgba(12, 35, 48, .28);
}
.ministry-marquee.is-dragging .ministry-marquee-item:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); background: var(--fog-50); }
.ministry-marquee-item img { height: 56px; width: 56px; object-fit: contain; }
.ministry-marquee-icon { font-size: 2.1rem; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--steel-100); }
.ministry-marquee-name { font-weight: 700; font-size: .95rem; line-height: 1.25; white-space: normal; }

/* Ministry detail page hero — logo (or emoji icon) sits beside the title
   as a single centered lockup, rather than a tiny icon inline with the
   heading text. */
.ministry-hero-title { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.ministry-hero-title h1 { margin: 0; }
.ministry-hero-logo { height: 76px; width: auto; max-width: 240px; object-fit: contain; }
.ministry-hero-icon { font-size: 3.4rem; line-height: 1; }

.news-card { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 28px; box-shadow: var(--shadow-sm); }
.news-card .date { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gold-600); font-weight: 700; }
.news-card h3 { font-size: 1.1rem; margin: 10px 0; }

/* ---------- Sermon feature ---------- */
.sermon-feature { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .sermon-feature { grid-template-columns: 1.1fr 1fr; } }
.sermon-player { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-950); box-shadow: var(--shadow-lg); }
.sermon-player .play-btn {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.7); color: #fff; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px);
  transition: transform .2s ease, background .2s ease;
}
.sermon-player .play-btn:hover { transform: scale(1.08); background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.sermon-details .series-tag { color: var(--gold-600); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.sermon-details h3 { font-size: 1.8rem; margin: 10px 0; }
.sermon-resource-links { display: flex; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.sermon-resource-links a { font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; color: var(--navy-900); }

/* ---------- Gallery / lightbox ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-item { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; cursor: pointer; background: var(--steel-100); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after { content: '⤢'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; opacity: 0; background: rgba(12,35,48,.35); transition: opacity .2s ease; }
.gallery-item:hover::after { opacity: 1; }
.lightbox { position: fixed; inset: 0; background: rgba(12,20,26,.94); z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-md); }
.lightbox-close { position: absolute; top: 24px; right: 24px; color: #fff; font-size: 2rem; background: none; border: none; cursor: pointer; }

/* Round 36 — Gallery Image Navigation: a horizontally scrollable strip
   (left/right buttons, touch swipe, trackpad/mouse scroll) instead of a
   plain static grid, plus matching prev/next controls inside the
   full-size lightbox viewer. */
.gallery-scroll-wrap { position: relative; }
.gallery-grid.scroll-row {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding-bottom: 6px; /* room for the scrollbar so it doesn't cover the last row of images */
}
.gallery-grid.scroll-row::-webkit-scrollbar { height: 8px; }
.gallery-grid.scroll-row::-webkit-scrollbar-thumb { background: var(--steel-300); border-radius: var(--radius-pill); }
.gallery-grid.scroll-row::-webkit-scrollbar-track { background: transparent; }
.gallery-grid.scroll-row .gallery-item {
  flex: 0 0 42%;
  scroll-snap-align: start;
}
@media (min-width: 560px) { .gallery-grid.scroll-row .gallery-item { flex-basis: 29%; } }
@media (min-width: 900px) { .gallery-grid.scroll-row .gallery-item { flex-basis: 22%; } }
@media (min-width: 1200px) { .gallery-grid.scroll-row .gallery-item { flex-basis: 17.5%; } }

.gallery-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; color: var(--navy-900); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  transition: opacity .15s ease, transform .15s ease;
}
.gallery-nav-btn:hover { transform: translateY(-50%) scale(1.06); }
.gallery-nav-btn:disabled { opacity: 0; pointer-events: none; }
.gallery-nav-btn.prev { left: -14px; }
.gallery-nav-btn.next { right: -14px; }
@media (max-width: 640px) {
  .gallery-nav-btn { width: 34px; height: 34px; font-size: .95rem; }
  .gallery-nav-btn.prev { left: -8px; }
  .gallery-nav-btn.next { right: -8px; }
}

.lightbox-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.lightbox-nav-btn:hover { background: rgba(255,255,255,.24); }
.lightbox-nav-btn.prev { left: 16px; }
.lightbox-nav-btn.next { right: 16px; }
@media (max-width: 640px) {
  .lightbox-nav-btn { width: 40px; height: 40px; font-size: 1.2rem; }
  .lightbox-nav-btn.prev { left: 6px; }
  .lightbox-nav-btn.next { right: 6px; }
}

/* ---------- Scripture band ---------- */
.scripture-band { background: linear-gradient(135deg, var(--navy-950), var(--navy-800)); color: #fff; text-align: center; position: relative; overflow: hidden; }
.scripture-band .anchor-watermark { position: absolute; opacity: .08; width: 420px; right: -60px; top: -40px; }
.scripture-band blockquote { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.4rem); max-width: 820px; margin: 0 auto 16px; font-style: italic; position: relative; }
.scripture-band cite { color: var(--gold-400); font-weight: 700; font-style: normal; letter-spacing: .04em; }

/* Nineteenth round: multiple Bible verses rotating on the homepage.
   Only one .verse-slide is ever visible — .is-active (toggled by
   main.js on a per-slide timer read from data-duration) fades it in
   over the others, which are stacked out of the layout via
   position:absolute (the band's height follows the active verse and
   main.js eases it between verses). Single-verse sites (or the legacy
   settings fallback) render exactly one slide, already .is-active,
   with no JS needed to show it. */
.verse-rotator { position: relative; transition: height .6s ease; }
/* Seventy-third round: no fixed or minimum height. Only the active slide takes part in the
   layout, so the band is exactly as tall as that verse needs (short verse = compact band,
   long verse = grows). The other slides are stacked out of flow; assets/js/main.js animates
   the container between the two heights while verses rotate so the page doesn't jump. */
.verse-slide { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease; }
.verse-slide.is-active { position: relative; opacity: 1; visibility: visible; }
.scripture-band blockquote { overflow-wrap: anywhere; }

/* ---------- Get connected ---------- */
.connect-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .connect-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .connect-grid { grid-template-columns: repeat(6, 1fr); } }
.connect-card { background: var(--fog-50); border-radius: var(--radius-md); padding: 24px 18px; text-align: center; transition: background .2s ease, transform .2s ease; border: 1px solid var(--line); }
.connect-card:hover { background: var(--navy-950); color: #fff; transform: translateY(-4px); }
.connect-card:hover p { color: var(--steel-300); }
.connect-card .ic { font-size: 1.8rem; margin-bottom: 10px; display: block; }

/* ---------- Footer ---------- */
/* Seventieth round: typography/spacing/alignment pass. Logo and church-name sizes are
   deliberately untouched. Hierarchy: the four section headings (Service Times, Bible Study,
   Quick Links, Contact) are identical at 16px semi-bold white; every detail line is 13px
   (secondary lines and FOLLOW US 12px); line-height 1.45.
   Desktop (>=992px) 4 columns · tablet (600-991px) 2 x 2 · mobile 1 column. */
.site-footer { background: var(--navy-950); color: var(--steel-300); padding: 48px 0 18px; font-size: 13px; line-height: 1.45; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (min-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 40px; } }
@media (min-width: 992px) { .footer-grid { grid-template-columns: 1.1fr 1.3fr .75fr 1.25fr; gap: 40px; } }
.footer-grid > * { min-width: 0; text-align: left; }
.footer-logo { height: 44px; margin-bottom: 16px; display: block; }
.footer-brand > p:not(.social-links-label) { color: var(--steel-300); margin: 0; font-size: 15px; }
/* Full-colour brand icons (render_social_links() in includes/config.php): same 36px size as before. */
.social-links-label { color: var(--steel-300); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 16px 0 8px; line-height: 1.3; }
.social-links { display: flex; align-items: center; gap: 12px; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; transition: transform .15s ease, filter .15s ease; }
.social-links a:hover, .social-links a:focus-visible { transform: translateY(-3px); filter: brightness(1.1); }
.social-links svg { display: block; width: 36px; height: 36px; }
.mobile-nav .social-links { margin: 6px 0 2px; }
/* The four section headings — one shared style */
.site-footer h3 { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; margin: 0 0 12px; }
.site-footer h3.footer-subheading { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
/* Detail text */
.footer-list, .footer-compact { list-style: none; margin: 0; padding: 0; }
.footer-list li, .footer-compact li { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.footer-list li:last-child, .footer-compact li:last-child { margin-bottom: 0; }
.footer-list li strong, .footer-compact strong { color: #fff; font-weight: 600; }
.footer-list a { transition: color .15s ease; }
.footer-list a:hover, .footer-list a:focus-visible { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .muted { color: #8ea8bc; font-size: 12px; }
.footer-list li .muted { display: block; margin-top: 1px; }
.footer-compact small { display: block; color: #8ea8bc; font-size: 12px; margin-top: 1px; }
.footer-contact a { overflow-wrap: anywhere; }
/* Bottom bar */
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 16px; font-size: 13px; line-height: 1.45; }
.footer-bottom p { margin: 0; color: #8ea8bc; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.footer-legal a { color: var(--steel-300); transition: color .15s ease; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) {
  .site-footer { padding-top: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Generic page header (interior pages) ---------- */
.page-hero { background: linear-gradient(135deg, var(--navy-950), var(--navy-800)); color: #fff; padding: 120px 0 64px; text-align: center; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.page-hero p { color: var(--steel-300); max-width: 620px; margin: 12px auto 0; }
.breadcrumbs { display: flex; gap: 8px; justify-content: center; font-size: .82rem; color: var(--steel-500); margin-bottom: 14px; }
.breadcrumbs a { color: var(--steel-300); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 780px) { .form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Big "click to upload" photo dropzone (Phase 8 addendum) ----------
   Used for profile/family photo uploads on both the admin member form and the
   public registration form, so members' photos are big enough to actually
   recognize someone by, and so the upload control itself is easy to tap. */
.upload-dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; min-height: 220px; border: 2px dashed var(--line); border-radius: var(--radius-md);
  background: #fbfcfd; cursor: pointer; overflow: hidden; text-align: center; padding: 20px; transition: border-color .15s ease, background .15s ease;
}
.upload-dropzone:hover, .upload-dropzone:focus-within { border-color: var(--gold-500); background: var(--gold-100); }
.upload-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-dropzone .upload-icon { font-size: 2.4rem; line-height: 1; color: var(--steel-500, var(--ink-soft)); }
.upload-dropzone .upload-text { font-weight: 600; color: var(--navy-900); font-size: .95rem; }
.upload-dropzone .upload-hint { font-size: .78rem; color: var(--ink-soft); }
.upload-dropzone .upload-preview {
  display: none; width: 100%; height: 100%; position: absolute; inset: 0; align-items: center; justify-content: center; background: #fff;
}
.upload-dropzone .upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-dropzone.has-preview .upload-preview { display: flex; }
.upload-dropzone.has-preview .upload-icon,
.upload-dropzone.has-preview .upload-text,
.upload-dropzone.has-preview .upload-hint { opacity: 0; }
.upload-dropzone.has-preview:hover .upload-preview,
.upload-dropzone.has-preview:focus-within .upload-preview { opacity: .12; }
.upload-dropzone.has-preview:hover .upload-icon,
.upload-dropzone.has-preview:hover .upload-text,
.upload-dropzone.has-preview:hover .upload-hint,
.upload-dropzone.has-preview:focus-within .upload-icon,
.upload-dropzone.has-preview:focus-within .upload-text,
.upload-dropzone.has-preview:focus-within .upload-hint { opacity: 1; position: relative; z-index: 1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: .88rem; color: var(--navy-900); }
.field input, .field select, .field textarea {
  padding: 13px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); font: inherit; color: var(--ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-500); box-shadow: 0 0 0 4px var(--gold-100); outline: none; }
.field-hint { font-size: .78rem; color: var(--ink-soft); }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); }

/* ---------- Simple content pages ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin-top: 1.6em; }
/* Twenty-seventh round note: .prose-centered (the old narrow 760px
   centered/justified treatment) is no longer used anywhere on the About
   page as of the Thirty-first round below — "Who We Are" now uses the
   same full-width .about-box treatment as "Our History." The class is
   left in place since .prose alone is still shared by Give, Privacy,
   Terms, and generic CMS Pages. */
.prose-centered { text-align: center; }
.prose-centered .eyebrow { justify-content: center; }
.prose-centered p { text-align: justify; }

/* Thirtieth round — "Vision & Mission," "Statement of Faith," and "Our
   History" were a narrow 760px column (.prose) floating in the middle
   of a much wider page, with large empty margins on both sides. Per a
   reference screenshot of the live site's own "Our Story" page, these
   were widened to use the section's full width edge-to-edge instead. */

/* Thirty-first round — "Our History" dropped its dedicated photo-upload
   field (see admin/about-page.php's own comment) in favor of pasting an
   image straight into the rich-text editor, which removed the reason
   for a separate image column next to the text. It and "Who We Are"
   (previously the one section left at the old narrow centered width)
   now both use this same plain single "big box" treatment — one box,
   full width, no side-by-side split — for a single flowing piece of
   content. Vision & Mission keeps two boxes side by side below, since
   it's genuinely two pieces of content; .vm-card now just adds the
   small uppercase "VISION"/"MISSION" label on top of the same box. */
.about-box, .vm-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 40px; box-shadow: var(--shadow-sm); margin-top: 8px;
}
.about-box p, .vm-card p { text-align: justify; }
.about-box p:last-child, .vm-card p:last-child { margin-bottom: 0; }
.about-box img, .vm-card img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* Vision & Mission: two side-by-side boxes instead of two stacked
   "Vision: ..." / "Mission: ..." lines in a narrow column — the same
   content, just given a side each so it fills the section width. */
.vm-columns { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 8px; }
@media (min-width: 720px) { .vm-columns { grid-template-columns: 1fr 1fr; } }
.vm-columns .vm-card { margin-top: 0; }
.vm-card h3 { color: var(--gold-600); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }

/* Statement of Faith: the CMS rich-text content flows in two
   newspaper-style columns on wide screens (each column stays a
   readable width even though the section itself spans edge-to-edge),
   collapsing to one column on narrower screens. */
.faith-columns { column-count: 1; column-gap: 48px; text-align: justify; margin-top: 8px; }
@media (min-width: 760px) { .faith-columns { column-count: 2; } }
.faith-columns p, .faith-columns li { break-inside: avoid; }

/* Thirty-second round — "Our History" as a year-by-year milestone
   timeline (per a reference screenshot): a vertical dotted spine down
   the middle, with cards alternating left/right and a dot marking each
   milestone's place on the line. Falls back to the old single
   .about-box treatment (see about.php) when no milestones exist yet,
   so this only applies once at least one has been added in the CMS.
   Collapses to a single left-aligned column with the spine at the left
   edge on narrow screens, same breakpoint as .faith-columns above. */
.history-timeline { position: relative; margin-top: 8px; padding: 8px 0; }
.history-timeline::before {
  content: ''; position: absolute; top: 8px; bottom: 8px; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--gold-400) 0, var(--gold-400) 8px, transparent 8px, transparent 18px);
}
.timeline-item { position: relative; width: 50%; padding-bottom: 40px; box-sizing: border-box; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:nth-child(odd) { left: 0; padding-right: 44px; }
.timeline-item:nth-child(even) { left: 50%; padding-left: 44px; }
.timeline-dot {
  position: absolute; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-500); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--gold-500); z-index: 1;
}
.timeline-item:nth-child(odd) .timeline-dot { right: -9px; }
.timeline-item:nth-child(even) .timeline-dot { left: -9px; }
.timeline-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 28px; box-shadow: var(--shadow-sm);
}
.timeline-year {
  display: inline-block; background: var(--navy-900); color: #fff; font-weight: 700;
  font-size: .85rem; letter-spacing: .02em; padding: 6px 18px; border-radius: var(--radius-pill); margin-bottom: 12px;
}
.timeline-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.timeline-card p { margin-bottom: 0; color: var(--ink-soft); text-align: left; }
@media (max-width: 759px) {
  .history-timeline::before { left: 8px; }
  .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even) {
    width: 100%; left: 0; padding: 0 0 32px 40px;
  }
  .timeline-item:nth-child(odd) .timeline-dot, .timeline-item:nth-child(even) .timeline-dot {
    left: 0; right: auto;
  }
}
.anchor-target { scroll-margin-top: 100px; }
.leader-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .leader-grid { grid-template-columns: repeat(2, 1fr); } }
.leader-card {
  display: flex; align-items: stretch; text-align: left; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.leader-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Left graphic panel — a decorative navy gradient with a faint ring and a
   line-art cross (echoes the church's own anchor/cross mark), plus a
   numbered badge, matching the reference "Pastors & Leadership" format. */
.leader-card-graphic {
  position: relative; flex: 0 0 38%; min-height: 200px; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-950));
  display: flex; align-items: center; justify-content: center;
}
.leader-card-graphic::before {
  content: ''; position: absolute; width: 220px; height: 220px; left: -70px; bottom: -80px;
  border: 2px solid rgba(255, 255, 255, .14); border-radius: 50%;
}
.leader-card-badge {
  position: absolute; top: 14px; left: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--navy-900); font-weight: 700; font-size: .78rem;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); z-index: 2;
}
/* An uploaded leader photo (admin/about-page.php) fills the same panel
   the decorative gradient/cross otherwise occupies, so a leader with no
   photo still gets the original graphic treatment (badge stays on top
   either way) — see about.php's if/else on $l['photo_path']. */
/* object-position biased toward the top: a typical headshot has the face
   in the upper portion of the frame, and a plain center crop (the
   previous default) was cutting faces off entirely on the narrow/short
   mobile version of this panel below — see the @media block. */
.leader-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; z-index: 1; }
.leader-card-cross { position: relative; width: 64px; height: 64px; }
.leader-card-cross::before, .leader-card-cross::after {
  content: ''; position: absolute; background: rgba(255, 255, 255, .32); border-radius: 3px;
}
.leader-card-cross::before { top: 0; bottom: 0; left: 50%; width: 13px; transform: translateX(-50%); }
.leader-card-cross::after { left: 0; right: 0; top: 50%; height: 13px; transform: translateY(-50%); }
.leader-card-body { flex: 1; min-width: 0; padding: 30px 28px; display: flex; flex-direction: column; justify-content: center; }
.leader-card-eyebrow {
  text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; font-weight: 700;
  color: var(--gold-600); margin-bottom: 10px;
}
.leader-card-body h3 { font-size: 1.25rem; margin-bottom: 10px; }
.leader-card-desc { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin-bottom: 12px; }
.leader-card-contact { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--navy-700); }
.leader-card-contact a { color: inherit; }
@media (max-width: 560px) {
  .leader-card { flex-direction: column; }
  /* Stacking the card makes this panel full card-width but was only
     140px tall — cover-fitting a photo into that short, wide letterbox
     crops out most of a portrait headshot (this is the bug reported
     from a live screenshot: only chest/tie visible, no face). An
     aspect-ratio box instead of a fixed pixel height keeps a
     sensible portrait-ish crop area at any phone width. */
  .leader-card-graphic { flex: 0 0 auto; min-height: 0; aspect-ratio: 4 / 5; }
}

.resource-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%; }
.resource-card .file-badge { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--gold-100); color: var(--gold-600); display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 16px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter-chip { padding: 8px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); font-size: .85rem; font-weight: 600; cursor: pointer; background: #fff; color: var(--ink-soft); transition: all .15s ease; }
.filter-chip.is-active, .filter-chip:hover { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ---------- PDF reader ---------- */
.pdf-reader { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #fff; }
.pdf-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; background: var(--fog-50); border-bottom: 1px solid var(--line); }
.pdf-page-info { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.pdf-toolbar-sep { width: 1px; height: 22px; background: var(--line); }
.pdf-canvas-wrap { max-height: 80vh; overflow: auto; display: flex; justify-content: center; padding: 24px; background: #e9edf0; }
.pdf-canvas-wrap canvas { box-shadow: var(--shadow-md); background: #fff; }

.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-item summary { font-weight: 700; cursor: pointer; font-size: 1.02rem; color: var(--navy-950); list-style: none; display: flex; justify-content: space-between; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--gold-600); }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { margin-top: 12px; }

/* ---------- Empty state (shared with the admin CMS look) ---------- */
.empty-state { text-align: center; padding: 48px 24px; color: var(--ink-soft); }

/* ---------- Church calendar (Phase 6) ---------- */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.calendar-weekday { background: var(--fog-50); padding: 10px; text-align: center; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.calendar-day { background: #fff; min-height: 110px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.calendar-day-empty { background: var(--fog-50); }
.calendar-day-num { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.calendar-day.is-today { background: var(--gold-100); }
.calendar-day.is-today .calendar-day-num { color: var(--gold-600); }
.calendar-event { display: block; background: var(--navy-950); color: #fff; font-size: .72rem; padding: 3px 6px; border-radius: 4px; text-decoration: none; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event:hover { background: var(--gold-600); }
/* Recurring Services and Bible Study Groups share the calendar with
   one-off Events, colour-coded so the three are easy to tell apart at a
   glance (see the legend on calendar.php). */
.calendar-event--service { background: var(--navy-600); }
.calendar-event--service:hover { background: var(--gold-600); }
.calendar-event--bible-study { background: var(--gold-600); color: var(--navy-950); }
.calendar-event--bible-study:hover { background: var(--gold-500); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-size: .84rem; color: var(--ink-soft); }
.calendar-legend-item { display: flex; align-items: center; gap: 8px; }
.calendar-legend-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
@media (max-width: 720px) {
  .calendar-grid { grid-template-columns: repeat(7, minmax(38px, 1fr)); }
  .calendar-day { min-height: 64px; padding: 4px; }
  .calendar-event { font-size: 0; padding: 3px; }
  .calendar-event::before { content: '•'; font-size: .9rem; }
}

/* ---------- Video embeds (sermons, Phase 6) ---------- */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-md); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Scroll reveal ---------- */
/* Content is fully visible by default — this matters for SEO crawlers,
   no-JS visitors, and slow script loads. The hidden pre-reveal state is
   only switched on once JS confirms it can actually animate it back in
   (see the "js-reveal" class toggled in main.js), so nothing ever gets
   stuck invisible. */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
html.js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* =====================================================================
   Seventy-third round — homepage: gallery slider,
   upcoming events layout, empty states
   ===================================================================== */

/* ---- Church Gallery slider ---- */
.gal-slider { --gal-per-view: 2; --gal-gap: 10px; position: relative; padding: 0 4px; }
@media (min-width: 640px)  { .gal-slider { --gal-per-view: 3; --gal-gap: 12px; } }
@media (min-width: 900px)  { .gal-slider { --gal-per-view: 4; } }
@media (min-width: 1100px) { .gal-slider { --gal-per-view: 5; } }
@media (min-width: 1500px) { .gal-slider { --gal-per-view: 6; } }
.gal-viewport { overflow: hidden; touch-action: pan-y; border-radius: var(--radius-md); cursor: grab; }
.gal-viewport.is-dragging { cursor: grabbing; }
.gal-track { display: flex; gap: var(--gal-gap); will-change: transform; }
.gal-track.is-animating { transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.gal-slide { flex: 0 0 calc((100% - (var(--gal-per-view) - 1) * var(--gal-gap)) / var(--gal-per-view)); aspect-ratio: 4 / 3; }
.gal-slide img { user-select: none; -webkit-user-drag: none; }
.gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.94); color: var(--navy-950); font-size: 1.7rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 0 3px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.gal-arrow:hover, .gal-arrow:focus-visible { background: var(--navy-950); color: #fff; box-shadow: var(--shadow-md); }
.gal-prev { left: -6px; } .gal-next { right: -6px; }
@media (min-width: 1280px) { .gal-prev { left: -22px; } .gal-next { right: -22px; } }
.gal-slider.is-static .gal-arrow { display: none; }
.gal-slider.is-static .gal-track { justify-content: center; }
@media (max-width: 639px) { .gal-arrow { width: 36px; height: 36px; font-size: 1.4rem; } }

/* ---- Upcoming events: full-width, centred, count-aware layout (round 102) ----
   The grid fills the same content width as every other homepage section. It is a centred flex row, so a last row with fewer cards
   (3 + 2, 2 + 1 …) is always centred, never left-aligned. How many cards sit in a row depends on the NUMBER of events shown
   (the .event-grid--N class, N = 1…7 where 7 means "7 or more") and on the screen width:
     1 event  : one large featured card (full width on phones/tablets, a wide side-by-side card on desktop)
     2 events : 2 columns from 640px up          4 events : 2 × 2 from 640px up
     3 events : 2 columns (+1 centred) on tablets, 3 columns from 1024px     5+ events: same as 3 (3 + 2, 3 + 3 …)
   Phones always get one full-width card per row. */
.event-grid { --gap: 28px; --cols: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--gap); width: 100%; }
.event-grid > .event-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - .1px); min-width: 0; max-width: 100%; }
@media (min-width: 640px) {
  .event-grid--2, .event-grid--3, .event-grid--4, .event-grid--5, .event-grid--6, .event-grid--7 { --cols: 2; }
}
@media (min-width: 1024px) {
  .event-grid--3, .event-grid--5, .event-grid--6, .event-grid--7 { --cols: 3; }
}
.event-grid--1 .event-card-media, .event-grid--2 .event-card-media, .event-grid--4 .event-card-media { aspect-ratio: 16 / 9; }
/* One event: a prominent centred feature. */
.event-grid--1 > .event-card { margin-inline: auto; }
.event-grid--1 .event-card-body { padding: 28px 28px 30px; }
.event-grid--1 .event-card-body h3 { font-size: 1.45rem; margin-bottom: 10px; }
.event-grid--1 .event-card-body p { font-size: .98rem; }
@media (min-width: 900px) {
  .event-grid--1 > .event-card { flex: 0 1 min(100%, 1080px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .event-grid--1 .event-card-media { aspect-ratio: auto; min-height: 360px; }
  .event-grid--1 .event-card-body { padding: 36px 40px; justify-content: center; }
  .event-grid--1 .event-card-body p { flex: 0 1 auto; margin-bottom: 4px; }
  .event-grid--1 .event-card-body h3 { font-size: 1.7rem; }
  .event-grid--1 .event-card-actions { margin-top: 22px; }
}
/* "View Full Calendar": beside the heading on tablets/desktops, under the cards on phones. */
.events-cal-mobile { display: none; text-align: center; margin-top: 28px; }
@media (max-width: 639px) {
  .events-cal-desktop { display: none; }
  .events-cal-mobile { display: block; }
  .events-cal-mobile .btn { width: 100%; justify-content: center; }
  .event-card-body { padding: 20px; }
}
.event-card--link { position: relative; }
.event-card-stretch { color: inherit; text-decoration: none; }
.event-card-stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.event-card--link:focus-within { box-shadow: var(--shadow-md); outline: 2px solid var(--gold-400); outline-offset: 2px; }
.event-card-tagrow { margin-top: 12px; }
.event-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 2; }
.event-card--link:active { transform: scale(.992); }
/* Lift only where hover really exists, so a tap on a phone doesn't leave a "stuck" hover. */
@media (hover: none) { .event-card--link:hover { transform: none; box-shadow: var(--shadow-sm); } }
.home-empty { max-width: 560px; margin: 8px auto 0; text-align: center; padding: 28px 24px; background: var(--fog-50); border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--ink-soft); }
.home-empty p { margin: 0; }

/* =====================================================================
   Round 82 — Plan Your Visit "What to Expect"
   ===================================================================== */
.expect-intro-only { max-width: 760px; margin: 0 auto; text-align: center; }
.expect-figure { margin: 0; }
.expect-figure img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.expect-figure figcaption { padding: 10px 14px; font-size: .84rem; color: var(--ink-soft); background: #fff; }
.expect-grid { --cols: var(--expect-cols, 6); --gap: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: 36px; }
.expect-grid > .expect-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
@media (max-width: 1023px) { .expect-grid { --cols: 3; } }
.expect-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 14px; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); }
.expect-card h3 { font-size: 1.02rem; margin: 6px 0 4px; }
.expect-card p { font-size: .9rem; margin: 0; color: var(--ink-soft); line-height: 1.5; }
.expect-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--fog-50); font-size: 1.35rem; }
.expect-card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 6px; }
.visit-info-text { max-width: 640px; margin: 10px auto 0; }
@media (max-width: 520px) { .expect-grid { --cols: 2; --gap: 10px; } .expect-card { padding: 12px; } }

/* ---------- Sermons (round 82): compact 16:9 grid, Recent / Archive tabs, archive filters ---------- */
.sm-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.sm-tab { padding: 10px 18px; font-weight: 700; font-size: .95rem; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none; }
.sm-tab span { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 700; background: var(--fog-50); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--ink-soft); }
.sm-tab:hover { color: var(--navy-900); }
.sm-tab.is-active { color: var(--navy-900); border-bottom-color: var(--gold-500); }
.sm-chips { margin-bottom: 22px; }
.sm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1279px) { .sm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .sm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 479px) { .sm-grid { grid-template-columns: minmax(0, 1fr); } }
.sm-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: box-shadow .15s ease, transform .15s ease; }
.sm-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sm-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); overflow: hidden; }
.sm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(12, 35, 48, .72); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; padding-left: 2px; transition: background .15s ease; }
.sm-card:hover .sm-play { background: var(--gold-500); color: var(--navy-950); }
.sm-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sm-body h3 { font-size: .98rem; line-height: 1.3; margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sm-body h3 a { color: inherit; text-decoration: none; }
.sm-body h3 a:hover { color: var(--gold-600); }
.sm-speaker { margin: 0; font-size: .85rem; font-weight: 600; color: var(--ink); }
.sm-meta { margin: 0; font-size: .78rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.sm-watch { margin-top: auto; align-self: flex-start; padding: 5px 12px; font-size: .78rem; font-weight: 700; border-radius: 999px; background: var(--navy-900); color: #fff; text-decoration: none; transform: translateY(0); }
.sm-body .sm-meta + .sm-watch { margin-top: 8px; }
.sm-watch:hover { background: var(--gold-500); color: var(--navy-950); }
.sm-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr) auto; gap: 10px 12px; align-items: end; background: var(--fog-50); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 18px; }
.sm-filters label { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); min-width: 0; }
.sm-filters select, .sm-filters input[type=search] { width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .88rem; text-transform: none; letter-spacing: 0; background: #fff; color: var(--ink); min-width: 0; }
.sm-filter-actions { display: flex; gap: 8px; }
@media (max-width: 1100px) { .sm-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm-search { grid-column: span 3; } .sm-filter-actions { grid-column: span 3; } }
@media (max-width: 479px) { .sm-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm-search, .sm-filter-actions { grid-column: span 2; } }
.sm-count { font-size: .85rem; color: var(--ink-soft); margin: 0 0 4px; }
.sm-month { font-size: 1.15rem; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--navy-900); }
.sm-empty { padding: 28px 0; color: var(--ink-soft); text-align: center; }
.sm-pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 26px; font-size: .9rem; }
.sm-pager a { font-weight: 700; color: var(--navy-900); }

/* ---------- Event media (round 82): YouTube teaser thumbnails on cards, 16:9 player on the detail page ---------- */
.event-card-media .ev-yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.event-card-media .ev-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 54px; height: 54px; border-radius: 50%; background: rgba(12, 35, 48, .72); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.3); transition: background .15s ease, transform .15s ease; pointer-events: none; }
.event-card:hover .ev-play { background: var(--gold-500); color: var(--navy-950); transform: translate(-50%, -50%) scale(1.06); }
.event-card-media .event-date-badge { z-index: 3; }
.ev-media { display: grid; gap: 18px; margin: 24px 0; max-width: 900px; }
.ev-media--both { grid-template-columns: 1fr; }
.ev-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-950, #0c2330); box-shadow: var(--shadow-md); }
.ev-video iframe, .ev-video .ev-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ev-facade { display: block; padding: 0; cursor: pointer; background: var(--navy-950, #0c2330) center / cover no-repeat; border: 0; }
.ev-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-facade .ev-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: rgba(12, 35, 48, .78); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; padding-left: 4px; transition: background .15s ease; }
.ev-facade:hover .ev-play, .ev-facade:focus-visible .ev-play { background: var(--gold-500); color: var(--navy-950); }
.ev-image img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; border-radius: var(--radius-lg); background: var(--fog-50); }

/* ---------- Ministries page (round 83): compact cards, five per row on desktop ---------- */
.ministry-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1199px) { .ministry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 959px) { .ministry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ministry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 379px) { .ministry-grid { grid-template-columns: minmax(0, 1fr); } }
.ministry-grid .ministry-card { padding: 18px 16px; border-radius: var(--radius-md); display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ministry-grid .ministry-card:hover { transform: translateY(-3px); }
.ministry-grid .ministry-icon { width: 46px; height: 46px; font-size: 1.5rem; margin-bottom: 10px; }
.ministry-grid .ministry-logo { height: 42px; margin-bottom: 10px; }
.ministry-grid .ministry-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.ministry-grid .ministry-card p { font-size: .84rem; line-height: 1.45; margin: 0 0 6px; }
.ministry-grid .ministry-card .muted { font-size: .78rem; }
.ministry-grid .ministry-card .more-link { margin-top: auto; padding-top: 6px; font-size: .82rem; }

/* ---------- News & Announcements (round 84) ---------- */
.news-card { display: flex; flex-direction: column; overflow: hidden; }
.news-card--img { padding: 0; }
.news-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--fog-50); }
.news-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-card-body { display: flex; flex-direction: column; flex: 1; }
.news-card--img .news-card-body { padding: 22px 26px 26px; }
.news-card p { margin: 0 0 8px; }
.news-card .more-link { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--gold-600); font-size: .9rem; text-decoration: none; }
.news-card .more-link:hover { color: var(--navy-900); }
.news-article { max-width: 780px; }
.news-article-img img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 24px; }
.news-article-lede { font-size: 1.15rem; color: var(--ink-soft); }
.news-article-body { line-height: 1.75; overflow-wrap: anywhere; }
.news-article-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.news-grid { align-items: start; }

/* ---------- Round 101 — Event media: uploaded looping teaser, gallery strip, card badge ---------- */
.ev-teaser-h { margin: 6px 0 12px; font-family: inherit; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600, #b8860b); font-weight: 700; }
.ev-media--both { gap: 22px; }
.ev-image[data-lightbox] { cursor: zoom-in; }
.ev-video--upload { background: var(--navy-950, #0c2330); }
.ev-video--upload video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--navy-950, #0c2330); display: block; }
.ev-vctl { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(12, 35, 48, .72); color: #fff; font-size: .85rem; display: flex; align-items: center; justify-content: center; opacity: .85; transition: background .15s ease, opacity .15s ease; }
.ev-vctl:hover, .ev-vctl:focus-visible { background: var(--gold-500); color: var(--navy-950); opacity: 1; }
.ev-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-width: 900px; margin: -8px 0 24px; }
.ev-gal-item { cursor: zoom-in; border-radius: var(--radius-md); overflow: hidden; background: var(--fog-50); aspect-ratio: 4 / 3; }
.ev-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.ev-gal-item:hover img, .ev-gal-item:focus-visible img { transform: scale(1.04); }
.ev-gal-item:focus-visible, .ev-image[data-lightbox]:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.event-card-media .ev-card-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; z-index: 1; }
.event-card-media .ev-card-video.is-ready { opacity: 1; }
.event-card-media .ev-vbadge { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: rgba(12, 35, 48, .78); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; pointer-events: none; }
@media (max-width: 640px) { .ev-gallery { grid-template-columns: repeat(3, 1fr); } .ev-vctl { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .event-card-media .ev-card-video { transition: none; } }