/* Graceway design tokens — the CMS Theme tab maps onto these custom properties.
   Design language: teal page frame, floating white canvas, bold Manrope titles,
   warm orange accents, dotted-map texture, circular imagery. */
:root {
  --color-primary: #ec0470;     /* bright pink — buttons, highlights */
  --color-secondary: #14181d;   /* near-black — titles, dark pills */
  --color-tertiary: #0c010b;   /* near-black — titles, dark pills */
  --color-accent: #1e9e63;      /* green — highlighted cards */
  --color-frame: #2ba98f;       /* teal page frame behind the canvas */
  --color-default: #3d4650;
  --font-default: 'Text Me One', sans-serif;   /* body — the site default */
  --font-heading: 'Baumans', cursive;           /* titles & logo */
  --font-secondary: 'Bellota', cursive;           /* highligthed and secondary headers */
  --font-alt-1: 'Abel', sans-serif;
  --primary-soft: color-mix(in srgb, var(--color-primary) 8%, #fff); /* light tint of the primary — chips, hovers, icon tiles */
  --color-bg: #f7f3ee;           /* warm cream — site background (from the profile page) */
  --radius: 14px;
  --section-max-width: 90rem;
  --container-width: 70rem;      /* narrower container used by profile sections */
  --section-pad-y: 80px;
  --base-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: var(--base-size); scroll-behavior: smooth; }
body { font-family: var(--font-default); font-size: 1.2rem; text-shadow: 0 0 0 rgba(0, 0, 0, 0); color: var(--color-default); line-height: 1.7; background: var(--color-bg); }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.12; color: var(--color-secondary); letter-spacing: -0.02em; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Church preloader: radiant cross in a circular emblem (initial load + route changes) ── */
.app-loader { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(circle at 50% 42%, #fffdf7 0%, #fdf6ea 55%, #f8ecd8 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loader-badge { position: relative; width: 170px; height: 170px; display: grid; place-items: center; margin-bottom: 22px; }
.loader-rays { position: absolute; inset: -20px; width: 210px; height: 210px;
  animation: loader-rotate 9s linear infinite; }
.loader-ring { position: absolute; inset: 10px; border-radius: 50%; background: #fff;
  border: 4px solid var(--color-secondary); box-shadow: 0 0 0 7px #fff, 0 0 0 8px var(--color-secondary), 0 14px 34px rgba(20, 24, 29, .16); }
.loader-cross { position: relative; width: 52px; height: 70px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary) 90%, transparent));
  animation: loader-glow 1.6s ease-in-out infinite; }
.loader-title { font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-secondary); }
.loader-motto { font-family: var(--font-secondary); font-weight: 700; font-size: 1rem; color: #1c2687; background: #fdf3b8;
  padding: .15rem 1.1rem; border-radius: 4px; margin-top: .5rem; animation: app-loader-pulse 1.8s ease-in-out infinite; }
.loader-verse { font-size: .78rem; font-weight: 700; letter-spacing: .18em; color: #1c2687; margin-top: .55rem; }
@keyframes loader-rotate { to { transform: rotate(360deg); } }
@keyframes loader-glow {
  0%, 100% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-primary) 55%, transparent)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 16px rgba(247, 148, 30, 1)); transform: scale(1.06); }
}
@keyframes app-loader-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.loader-fade-leave-active { transition: opacity .35s ease; }
.loader-fade-leave-to { opacity: 0; }

/* ── The floating white canvas inside the teal frame ── */
.canvas { background: var(--color-bg); min-height: 100vh; overflow: clip visible; } /* clip x-overflow only — overflow:hidden here would break the sticky header */

.container { max-width: var(--section-max-width); margin: 0 auto; padding: 0 24px; }
.container2 { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }
/* Content sections run at the narrower --container-width; header, hero and footer keep --section-max-width */
.times .container, .welcome .container, .directions .container, .ministries .container,
.worship .container, .bible-study .container, .broadcast .container, .sermons .container,
.sermon-list .container, .books .container, .events .container,
.youth-programs .container, .pastors .container, .donate-cta .container, .newsletter .container,
.contact .container, .ministry-list .container, .study-list .container, .study-detail .container {
  max-width: var(--container-width); }
section { padding: var(--section-pad-y) 0; }
.eyebrow { color: var(--color-primary); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .7rem; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; margin-bottom: .7rem; }
h3 { font-weight: 700; }
.lead { font-size: 1.1rem; max-width: 46ch; }

/* Buttons: orange pill (primary) · black pill (header) · ghost */
.btn { display: inline-block; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 1.1rem;
  padding: .8rem 2.7rem; border-radius: 999px; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 35%, transparent); font-family: var(--font-secondary); }
.btn:hover { transform: translateY(-2px); }
.btn.dark { background: var(--color-secondary); box-shadow: none; }
.btn.light { background: #fffdf7; box-shadow: none; color: #14181d; transition: background .3s ease, color .3s ease; }
/* header CTA inverts once the page scrolls (white header): dark pill, light text */
.site-header.scrolled .header-cta .btn.light { background: var(--color-secondary); color: #fffdf7; }
.btn.ghost { background: transparent; color: var(--color-secondary); border: 1.5px solid #d9dee4; box-shadow: none; }

/* ── Top bar: contact info + socials ── */
.topbar { background: #fff; border-bottom: 1px solid #e8ebee; font-size: .9rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 42px; }
.topbar-info { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem 1.8rem; color: #454e58; }
.topbar-info li { display: flex; align-items: center; gap: .45rem; }
.topbar-info li::before { content: '•'; color: var(--color-primary); margin-right: .25rem; }
.topbar-info svg { width: 15px; height: 15px; color: #8a7a2d; flex: 0 0 auto; }
.topbar-info a:hover { color: var(--color-primary); }
.topbar-social { display: flex; align-items: center; gap: 1.1rem; }
.topbar-social a { color: var(--color-secondary); display: flex; }
.topbar-social svg { width: 16px; height: 16px; }
.topbar-social a:hover { color: var(--color-primary); }
@media (max-width: 880px) { .topbar { display: none; } }

/* ── Header ── */
.header-wrap { display: contents; } /* lets .site-header stick to the viewport, not this wrapper */
.site-header { position: sticky; top: 0; z-index: 40; background: transparent;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.site-header.scrolled { background: rgba(255,255,255,.94); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(20,24,29,.07); }
/* at the top (transparent, in front of the hero collage) the header text is white;
   once scrolled the white background returns it to black via the base colors */
.site-header { z-index: 45; }
.site-header:not(.scrolled) .logo, .site-header:not(.scrolled) .logo-text small { color: #fff; }
.site-header:not(.scrolled) .site-nav, .site-header:not(.scrolled) .site-nav a { color: #fff; }
.site-header:not(.scrolled) .site-nav a.active { color: var(--color-primary); }
.site-header:not(.scrolled) .burger span { background: #fff; }
.site-header .container { display: flex; align-items: center; gap: 2rem; height: 130px; }
.logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; color: var(--color-secondary); display: flex; align-items: center; gap: .5rem; }
.logo .mark { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffc46b, var(--color-primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.logo .dot { color: var(--color-primary); }
.logo .logo-img { width: 114px; height: 114px; object-fit: contain; }
.site-nav { display: flex; gap: 2rem; margin: 0 auto; font-weight: 600; font-size: 1.25rem; color: #454e58; }
.site-nav a, .header-cta .btn { white-space: nowrap; }
/* a second logo in the header (Site Profile › Second logo): tighter header between the burger breakpoint and wide screens */
@media (min-width: 1231px) and (max-width: 1500px) {
  .site-header .container:has(.logo-second) { gap: 1.1rem; }
  .site-header .container:has(.logo-second) .logo { font-size: 1.1rem; }
  .site-header .container:has(.logo-second) .logo .logo-img { width: 100px; height: 100px; }
  .site-header .container:has(.logo-second) .site-nav { gap: clamp(1rem, 1.5vw, 1.6rem); font-size: clamp(1.05rem, 1.45vw, 1.25rem); }
  .site-header .container:has(.logo-second) .header-cta .btn { font-size: 1rem; padding-left: 1.1rem; padding-right: 1.1rem; }
}
.site-nav a:hover { color: var(--color-primary); }
.site-nav a.active { color: var(--color-primary); }
.header-cta { margin-left: auto; }
.site-header .btn { padding: .6rem 1.4rem; font-size: .9rem; }

/* Animated burger + mobile menu */
.burger { display: none; position: relative; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; margin-left: auto; z-index: 60; }
.burger span { position: absolute; left: 7px; width: 26px; height: 3px; border-radius: 3px; background: var(--color-secondary);
  transition: transform .3s ease, opacity .2s ease, top .3s ease; }
.burger span:nth-child(1) { top: 12px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 26px; }
.burger.open span:nth-child(1) { top: 19px; transform: rotate(45deg); background: var(--color-primary); }
.burger.open span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.burger.open span:nth-child(3) { top: 19px; transform: rotate(-45deg); background: var(--color-primary); }

.mobile-menu { display: none; }

@media (max-width: 1230px) {
  .site-header .container { height: 105px; gap: 1rem; }
  .logo { font-size: 1.15rem; }
  .logo .logo-img { width: 110px; height: 110px; }
  .site-nav, .header-cta { display: none; }
  .burger { display: block; }
  .mobile-menu { display: grid; gap: .2rem; padding: .8rem 24px 1.4rem; background: #fff; border-top: 1px solid #e8ebee;
    box-shadow: 0 18px 30px rgba(20, 24, 29, .08); }
  .mobile-menu a { padding: .65rem 0; font-weight: 600; color: #454e58; border-bottom: 1px solid #f1f3f5; }
  .mobile-menu a:hover { color: var(--color-primary); }
  .mobile-menu a.active { color: var(--color-primary); }
  .mobile-menu .btn { margin-top: .9rem; text-align: center; color: #fff; border-bottom: 0; }
  .menu-slide-enter-active, .menu-slide-leave-active { transition: opacity .25s ease, transform .25s ease; }
  .menu-slide-enter-from, .menu-slide-leave-to { opacity: 0; transform: translateY(-10px); }
}

/* ── Page hero (inner pages) + ministry cards ── */
/* inner-page hero: same design language as the home hero (dark base, primary wash,
   fading dot pattern) — compact height, no pill collage */
.page-hero { position: relative; overflow: hidden; color: #fff; padding: 96px 0 72px; margin-top: -130px; padding-top: calc(96px + 40px);
  /* exactly the home hero's background: dark token base + primary wash + accent glow */
  background-color: color-mix(in srgb, var(--color-tertiary) 100%, var(--color-bg)); /* lighter base */
  background-image:
    radial-gradient(85% 65% at 20% 40%, color-mix(in srgb, var(--color-primary) 86%, transparent), transparent 95%)
    /* radial-gradient(46% 32% at 88% 80%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%);*/ }
	
.page-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--color-primary) 45%, transparent) 1.6px, transparent 2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(85% 65% at 25% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(85% 65% at 25% 30%, #000 30%, transparent 78%); }
.page-hero .container { position: relative; z-index: 1; }
@media (max-width: 1230px) { .page-hero { margin-top: -130px; padding-top: calc(72px + 64px); } }
.page-hero .eyebrow { color: #f3e6d8; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #f3e6d8; margin-top: .5rem; max-width: 620px; font-size: 1.1rem; }

.ministry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 880px) { .ministry-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ministry-grid { grid-template-columns: 1fr; } }
.ministry-card { border: 1px solid #e8ebee; border-radius: var(--radius); padding: 2rem 1.7rem; background: #fff;
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.ministry-card .icon { width: 54px; height: 54px; border-radius: 14px; background: color-mix(in srgb, var(--color-primary) 13%, transparent);
  display: grid; place-items: center; font-size: 1.5rem; }
.ministry-card h3 { font-size: 1.15rem; }
.ministry-card p { font-size: 1rem; }
.ministry-card .facts { list-style: none; font-size: .9rem; color: #454e58; margin: .3rem 0 .8rem; display: grid; gap: .25rem; }
.ministry-card .facts b { color: var(--color-secondary); }
.ministry-card .btn { margin-top: auto; font-size: .9rem; padding: .55rem 1.4rem; }

/* ── Newsletter / join page ── */
.newsletter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 880px) { .newsletter-grid { grid-template-columns: 1fr; } }
.perks { list-style: none; margin-top: 1rem; display: grid; gap: .7rem; }
.perks li { padding-left: 1.8rem; position: relative; font-size: 1rem; }
.perks li::before { content: '✓'; position: absolute; left: 0; color: var(--color-accent); font-weight: 800; }
.newsletter-form { display: grid; gap: 1rem; background: #fff; border: 1px solid #e8ebee; border-radius: var(--radius); padding: 2rem; }
.newsletter-form label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 700; color: var(--color-secondary); }
.newsletter-form input[type="text"], .newsletter-form input[type="email"], .newsletter-form input[type="tel"] {
  font: inherit; font-weight: 400; border: 1px solid #d9dee4; border-radius: 10px; padding: .7rem .95rem; width: 100%; }
.newsletter-form input:focus { outline: 2px solid var(--color-primary); border-color: transparent; }
.newsletter-form .check { display: flex; align-items: center; gap: .6rem; font-weight: 500; font-size: .95rem; }
.newsletter-form .fine { font-size: .82rem; color: #7b858f; font-weight: 400; }
.newsletter-thanks { background: #f4f9f6; border: 1px solid #d8ece1; border-radius: var(--radius); padding: 2.4rem; display: grid; gap: 1rem; justify-items: start; }

/* ── Hero: headline left · staggered pill photo collage right (FaithConnect style) ── */
.hero { position: relative; padding: 0 0 0; overflow: hidden; min-height: 100vh; margin-top: -130px; display: flex; align-items: center;
  background-color: var(--color-tertiary);
  background-image:
    radial-gradient(85% 65% at 25% 30%, color-mix(in srgb, var(--color-primary) 42%, transparent), transparent 75%),
    radial-gradient(46% 32% at 88% 80%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%);
  background-size: 100% 100%, 100% 100%; }
/* primary-tinted dot pattern that fades out into the dark parts of the gradient */
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--color-primary) 45%, transparent) 1.6px, transparent 2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(85% 65% at 25% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(85% 65% at 25% 30%, #000 30%, transparent 78%); }

/* light copy over the dark hero */
.hero-copy h1 { color: #fff; }
.hero-copy .lead, .hero-copy .eyebrow { color: #f3e6d8; }
.hero .giving .row { color: #f3e6d8; }
.hero .giving .bar { background: rgba(255, 255, 255, .18); }
.hero .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.hero > .container { width: 100%; }
.hero .container { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: stretch; }
.hero .lead { margin: 1.1rem 0 1.6rem; }
.hero-copy { position: relative; z-index: 2; align-self: center; padding: 40px 0; }
.hero-copy h1 .hl { color: var(--color-primary); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* grayed-out congregation photo fading in along the bottom */
.hero-crowd { position: absolute; left: 0; bottom: 0; width: 100%; height: 35%; pointer-events: none;
  background: url('/storage/template-shells/u-ednm6gcoom/assets/images/welcome.jpg') center bottom / cover no-repeat;
  filter: grayscale(1); opacity: .08;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
          mask-image: linear-gradient(to top, #000 30%, transparent 100%); }

/* scattered accent dots */
.hero .dot { position: absolute; border-radius: 50%; }
.hero .d1 { width: 18px; height: 18px; background: var(--color-primary); right: 8%; top: -6%; }
.hero .d2 { width: 10px; height: 10px; background: var(--color-accent); left: 42%; top: 46%; }
.hero .d3 { width: 13px; height: 13px; background: #2f9fd0; left: 24%; bottom: -18%; }
.hero .d4 { width: 16px; height: 16px; background: #e0394a; left: -3%; bottom: 24%; }
.hero .d5 { width: 15px; height: 15px; background: var(--color-accent); right: -1%; bottom: 30%; }

/* pill photo collage — fills the full hero height; middle column bleeds off the top,
   outer columns get clipped at the bottom fold, like the FaithConnect reference */
.hero-collage { position: relative; height: 100vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.hero-collage .col { display: flex; flex-direction: column; gap: 1.1rem; min-height: 0;
  transition: transform .5s ease, padding .5s ease; }
.hero-collage .col-a { padding-top: 14vh; margin-bottom: -6vh; }
.hero-collage .col-b { margin-top: -10vh; margin-bottom: 4vh; }
.hero-collage .col-c { padding-top: 8vh; margin-bottom: -3vh; }
/* hovering a clipped pill slides its whole column to reveal it fully:
   outer columns' bottom pills pull the column up; middle column's top pill pulls it down */
.hero-collage .col-a:has(.pill:nth-child(2):hover) { transform: translateY(-6vh); }
.hero-collage .col-c:has(.pill:nth-child(2):hover) { transform: translateY(-3vh); }
.hero-collage .col-b:has(.pill:nth-child(1):hover) { transform: translateY(10vh); }
/* pills keep their original height — the column is nudged with padding instead */
.hero-collage .col-a:has(.pill:nth-child(2):hover),
.hero-collage .col-c:has(.pill:nth-child(2):hover) { padding-bottom: 80px; }
.hero-collage .col-b:has(.pill:nth-child(1):hover) { padding-top: 80px; }
.pill { border-radius: 999px; overflow: hidden; flex: 1; min-height: 0; }
.pill { position: relative; display: block; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: inherit; background: #fff;
  transition: flex-grow .5s ease; }
/* the color tint is its own layer: full-bleed at rest, retracting to 80% × 90% on hover */
.pill::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--tint, #eab41f);
  transition: inset .4s ease; z-index: 0; }
.pill:hover::before, .pill:focus-visible::before, .pill.active::before { inset: 5% 10%; }
.pill img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .96;
  transition: transform .4s ease, filter .4s ease; }
.pill:hover img, .pill:focus-visible img, .pill.active img { transform: scale(1.03); filter: grayscale(1); }

/* always-visible label chip; slides to the middle on hover.
   Top-row pills carry it at the bottom, bottom-row pills (clipped at the fold) at the top. */
.pill-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; z-index: 3;
  background: rgba(255, 255, 255, .92); color: var(--color-secondary); font-weight: 700; font-size: 1.17rem;
  padding: .3rem .95rem; border-radius: 999px; pointer-events: none;
  transition: background .35s ease, color .35s ease; }
.pill:hover .pill-label, .pill:focus-visible .pill-label, .pill.active .pill-label {
  background: var(--color-primary); color: #fff; }

/* overlay grows from the center to 80% × 80% of the pill */
.pill-overlay { position: absolute; z-index: 2; left: 10%; top: 5%; width: 80%; height: 90%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: .4rem; text-align: center; padding: 12% 10% 20%; border-radius: 999px;
  background: rgba(20, 24, 29, .72); color: #fff; opacity: 0; transform: scale(.55);
  transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.pill-overlay b { font-family: var(--font-heading); font-size: 1rem; color: #ffb44d; }
.pill-overlay small { font-size: .76rem; line-height: 1.45; color: #e8ebee; }
.pill:hover .pill-overlay, .pill:focus-visible .pill-overlay, .pill.active .pill-overlay { opacity: 1; transform: scale(1); }

/* hero copy swap transition */
.copy-swap-enter-active, .copy-swap-leave-active { transition: opacity .22s ease, transform .22s ease; }
.copy-swap-enter-from, .copy-swap-leave-to { opacity: 0; transform: translateY(8px); }
.tint-yellow { --tint: #eab41f; }
.tint-gold { --tint: #d9a13a; }
.tint-red { --tint: #e0394a; }
.tint-blue { --tint: #2545b8; }
.tint-teal { --tint: #a5dcda; }
.tint-green { --tint: #4cae57; }
.copy-close { display: none; }

/* ── Mobile hero: full-screen 2-column pill grid over an abstract gradient;
      tapping a pill opens its text as a bottom sheet ── */
@media (max-width:1230px) {
  .hero { padding: 80px 0 24px; margin-top: -105px; display: block; height: auto; min-height: 100svh; overflow: hidden;
    background-color: var(--color-secondary); /* solid base from the theme token */
    background-image:
      /* subtle dot pattern over everything */
        /* primary glow — enlarged to cover most of the hero */
      radial-gradient(85% 65% at 25% 30%, color-mix(in srgb, var(--color-primary) 42%, transparent), transparent 75%),
      radial-gradient(46% 32% at 88% 80%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 70%);
    background-size: 100% 100%, 100% 100%;
  }
  .hero .container { display: flex; flex-direction: column; justify-content: center; gap: 0;
    min-height: calc(100svh - 104px); padding-left: 5px; padding-right: 5px; }
  /* no pill collage on mobile — the hero is just the centered text */
  .hero-collage { display: none; }
  .hero-collage .col { display: contents; } /* pills flow directly into the 2-col grid */
  .hero-collage .pill { aspect-ratio: auto; height: 100%; min-height: 0; }
  /* equal-width pills; whole columns staggered — column 1 pushed down, column 2 pushed up.
     (with display:contents, each col's 1st pill lands in grid column 1, the 2nd in column 2) */
  .hero-collage .col .pill:nth-child(1) { transform: translateY(20px); }
  .hero-collage .col .pill:nth-child(2) { transform: translateY(-140px); }
  /* column 1, row 2 shorter so column 1's bottom pill rises to ~75% in view */
  .hero-collage .col-b .pill:nth-child(1) { height: 60%; }
  .hero-collage .col-c .pill:nth-child(1) { margin-top: -15.2svh; }
  /* labels dead-center inside every pill */
  .hero-collage .pill .pill-label { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
  /* bottom-row pills bleed off the bottom — label near the TOP (the visible part), with padding */
  .hero-collage .col-c .pill .pill-label { top: 2rem; transform: translate(-50%, 0); }
  /* column 2, row 1 bleeds off the top — label near the BOTTOM (the visible part), with padding */
  .hero-collage .col-a .pill:nth-child(2) .pill-label { top: auto; bottom: 2rem; transform: translate(-50%, 0); }
  /* column 2, row 2: centered */
  .hero-collage .col-b .pill:nth-child(2) .pill-label { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
  /* hover column-slide tricks off on touch */
  .hero-collage .col-a:has(.pill:nth-child(2):hover),
  .hero-collage .col-c:has(.pill:nth-child(2):hover) { transform: none; padding-bottom: 0; }
  .hero-collage .col-b:has(.pill:nth-child(1):hover) { transform: none; padding-top: 0; }
  .pill-label { font-size: .72rem; padding: .5rem 1.2rem; }
  /* hero text centered on mobile */
  .hero-copy { display: block; text-align: center; padding: 1.5rem 1rem; }
  .hero-copy h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-copy .lead { margin-left: auto; margin-right: auto; }
  .giving { margin-left: auto; margin-right: auto; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; }
  .hero .dot { display: none; }
  .hero-crowd { display: none; } /* the gradient pattern replaces it on mobile */
  /* tapped pill: its text opens as a bottom sheet over the grid */
  .hero.pill-open .hero-copy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; border-radius: 26px 26px 0 0; padding: 2rem 1.6rem 2.2rem; text-align: left;
    box-shadow: 0 -18px 44px rgba(20, 24, 29, .25); animation: sheet-up .3s ease; }
  /* the sheet is white — dark text, overriding the dark-hero light copy */
  .hero.pill-open .hero-copy h1 { color: var(--color-secondary); }
  .hero.pill-open .hero-copy .lead { color: var(--color-default); }
  .hero.pill-open .hero-copy .eyebrow { color: var(--color-primary); }
  .copy-close { display: grid; place-items: center; position: absolute; top: 1rem; right: 1rem;
    width: 36px; height: 36px; border-radius: 50%; border: 0; background: #eceef1; color: var(--color-secondary);
    font-size: 1rem; cursor: pointer; }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}

/* ── Showcase layout (fashion-template): copy + search + tags · staggered photo grid with promo tiles ── */
.showcase .container { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
@media (max-width: 880px) { .showcase .container { grid-template-columns: 1fr; } }
.showcase.flip .showcase-copy { order: 2; }
.showcase.flip .showcase-grid { order: 1; }
@media (max-width: 880px) { .showcase.flip .showcase-copy { order: 1; } .showcase.flip .showcase-grid { order: 2; } }
.showcase-copy .sub { margin: 1rem 0 1.6rem; }
.search-row { display: flex; background: #fff; border: 1px solid #e5e0d7; border-radius: 12px; padding: .35rem;
  max-width: 420px; box-shadow: 0 10px 26px rgba(20, 24, 29, .06); }
.search-row input { flex: 1; border: 0; padding: .55rem .9rem; font: inherit; font-size: .95rem; background: transparent; outline: none; }
.search-btn { width: 46px; height: 46px; border: 0; border-radius: 10px; background: var(--color-primary); color: #fff;
  display: grid; place-items: center; cursor: pointer; }
.search-btn svg { width: 20px; height: 20px; }
.trend { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 1.6rem; font-size: .88rem; }
.trend-label { font-weight: 700; color: var(--color-secondary); }
.trend a { color: var(--color-primary); font-weight: 600; }
.trend a:last-child { color: var(--color-secondary); text-decoration: underline; }

.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.sg-col { display: flex; flex-direction: column; gap: 1rem; }
.sg-col-mid { margin-top: -2.2rem; }
.sg-col-last { margin-top: 1.8rem; }
.sg-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; box-shadow: 0 12px 28px rgba(20, 24, 29, .12); }
.sg-photo.tall { aspect-ratio: 3 / 4.6; }
.sg-tile { position: relative; border-radius: 14px; background: var(--color-primary); color: #fff;
  font-weight: 700; font-size: 1.05rem; line-height: 1.35; padding: 1.4rem 1.2rem 2.2rem;
  background-image: radial-gradient(circle at 3px 3px, rgba(255, 255, 255, .25) 1.4px, transparent 1.8px);
  background-size: 12px 12px; background-position: bottom left; background-repeat: repeat-x; }
.sg-tile.small { padding: 1.2rem 1.1rem 2rem; font-size: .95rem; }
.sg-tile-badge { position: absolute; right: -12px; bottom: -12px; width: 44px; height: 44px; border-radius: 12px;
  background: #fff; color: var(--color-secondary); display: grid; place-items: center; font-size: 1.15rem;
  box-shadow: 0 10px 22px rgba(20, 24, 29, .15); }
.sg-tile-badge.top { bottom: auto; top: -12px; }
/* variations */
.showcase.dark-tiles .sg-tile { background-color: var(--color-secondary); }
.showcase.green-tiles .sg-tile { background-color: var(--color-accent); }
@media (max-width: 880px) {
  .showcase-grid { gap: .7rem; }
  .sg-col-mid { margin-top: -1.2rem; }
  .sg-col-last { margin-top: 1rem; }
}

/* ── Bible study (learning-template): copy + email CTA · photo in arch with chips · stats row ── */
.study-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
@media (max-width: 880px) { .study-top { grid-template-columns: 1fr; } }
.study-form { display: flex; background: #fff; border: 1px solid #e5e0d7; border-radius: 12px; padding: .35rem;
  max-width: 430px; box-shadow: 0 10px 26px rgba(20, 24, 29, .06); }
.study-form input { flex: 1; border: 0; padding: .55rem .95rem; font: inherit; font-size: .95rem; background: transparent; outline: none; }
.study-form .btn { padding: .65rem 1.5rem; font-size: .92rem; border-radius: 10px; white-space: nowrap; }
.study-thanks { font-weight: 700; color: var(--color-accent); }
.study-note { margin-top: .9rem; font-size: .85rem; color: #7b858f; }
.study-photo { position: relative; display: grid; place-items: center; min-height: 380px; }
.study-arch { position: absolute; width: 74%; height: 96%; background: #e9a0b4; border-radius: 999px 999px 26px 26px; transform: rotate(-4deg); }
.study-photo img { position: relative; width: 68%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 22px 22px; }
.study-chip { position: absolute; z-index: 2; background: #f4c73f; color: var(--color-secondary); font-size: .78rem; font-weight: 700;
  padding: .5rem .8rem; border-radius: 10px; box-shadow: 0 10px 24px rgba(20, 24, 29, .16); display: grid; gap: .1rem; }
.study-chip b { font-size: .72rem; font-weight: 600; color: #6b5410; }
.study-chip.c1 { left: 2%; top: 38%; }
.study-chip.c2 { right: 0; top: 12%; }
.study-spark { position: absolute; width: 22px; height: 22px; color: var(--color-secondary); }
.study-spark.s1 { right: 6%; bottom: 8%; }
.study-spark.s2 { left: 8%; top: 6%; width: 15px; height: 15px; }
.study-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.5rem;
  border-top: 1px solid #e5e0d7; padding-top: 2.2rem; }
@media (max-width: 720px) { .study-stats { grid-template-columns: 1fr 1fr; } }
.study-stat { display: grid; gap: .15rem; text-align: center; border-right: 1px solid #e5e0d7; padding-right: 1rem; transition: transform .2s ease; }
.study-stat:last-child { border-right: 0; }
.study-stat:hover { transform: translateY(-4px); }
.study-stat b { font-size: 1.9rem; font-family: var(--font-heading); color: var(--color-secondary); }
.study-stat span { font-size: .88rem; color: #55606b; font-weight: 600; }
.study-stat:hover span { color: var(--color-primary); }

/* Bible study pages: group cards + detail */
.study-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 720px) { .study-cards { grid-template-columns: 1fr; } }
.study-card { display: grid; grid-template-columns: 38% 1fr; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 32px rgba(20, 24, 29, .08); transition: transform .2s ease; }
.study-card:hover { transform: translateY(-5px); }
.study-card img { width: 100%; height: 100%; object-fit: cover; }
.study-card .body { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.study-card .icon { font-size: 1.4rem; }
.study-card h3 { font-size: 1.2rem; }
.study-card p { font-size: .9rem; color: #55606b; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.study-card .meta { font-size: .82rem; font-weight: 700; color: var(--color-secondary); }
.study-card .more { margin-top: auto; padding-top: .4rem; color: var(--color-primary); font-weight: 700; font-size: .9rem; }
.study-detail-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; }
@media (max-width: 880px) { .study-detail-grid { grid-template-columns: 1fr; } }
.study-detail-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px;
  box-shadow: 0 16px 36px rgba(20, 24, 29, .12); }
.study-facts { list-style: none; margin: 1.2rem 0 1.6rem; display: grid; gap: .5rem; }
.study-facts b { color: var(--color-secondary); }
.study-detail-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ── Sermons: latest cards + media pages ── */
.sermon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 880px) { .sermon-grid { grid-template-columns: 1fr; } }
.sermon-card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 32px rgba(20, 24, 29, .08); transition: transform .2s ease, box-shadow .2s ease; }
.sermon-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(20, 24, 29, .13); }
.sermon-thumb { position: relative; }
.sermon-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.media-badge { position: absolute; left: .9rem; bottom: .9rem; background: rgba(20, 24, 29, .85); color: #fff;
  font-size: .75rem; font-weight: 700; padding: .3rem .75rem; border-radius: 999px; }
.sermon-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; }
.sermon-body .meta { font-size: .78rem; color: #8b949e; font-weight: 600; }
.sermon-body h3 { font-size: 1.15rem; }
.sermon-body .preacher { font-size: .85rem; font-weight: 700; color: var(--color-primary); }
.sermon-body .summary { font-size: .9rem; color: #55606b;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sermon-more { text-align: center; margin-top: 2.4rem; }

/* single sermon view */
.sermon-view .container { max-width: var(--container-width); }
.sermon-media { border-radius: 20px; overflow: hidden; box-shadow: 0 18px 40px rgba(20, 24, 29, .14); }
.sermon-media.video { aspect-ratio: 16 / 9; }
.sermon-media.video iframe { width: 100%; height: 100%; border: 0; }
.sermon-media.audio { background: #fff; }
.sermon-media.audio img { width: 100%; max-height: 320px; object-fit: cover; }
.sermon-media.audio audio { width: 100%; display: block; padding: 1rem; }
.sermon-media.article img { width: 100%; max-height: 380px; object-fit: cover; }
.sermon-text { max-width: 68ch; margin: 2.2rem auto 0; }
.sermon-text .lead { font-weight: 700; color: var(--color-secondary); margin-bottom: 1rem; }
.sermon-nav { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2.4rem; }

/* ── Youth (media-ads template): copy left · tightly-packed pill cluster right ── */
.broadcast-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; }
@media (max-width: 880px) { .broadcast-grid { grid-template-columns: 1fr; } }
.youth-cta { display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem; }
.youth-cta.center { justify-content: center; margin-top: 2.4rem; }
.broadcast-stats.left { justify-content: flex-start; margin-top: 2rem; }
.youth-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--color-secondary);
  color: var(--color-secondary); display: grid; place-items: center; transition: background .2s, color .2s; }
.youth-arrow:hover { background: var(--color-secondary); color: #fff; }
.youth-arrow svg { width: 22px; height: 22px; }

/* platform tiles shown inside the youth layout's right column */
.youth-tiles { display: flex; flex-wrap: wrap; gap: 1.8rem; align-items: center; justify-content: center; min-height: 300px; }
.youth-tiles .tile { position: relative; width: 104px; height: 104px; border-radius: 24px; background: #fff;
  display: grid; place-items: center; box-shadow: 0 14px 32px rgba(20, 24, 29, .14); }
.youth-tiles .tile svg { width: 54px; height: 54px; }

/* the pill band centered inside the broadcast layout */
.youth-center .broadcast-band { max-width: 560px; margin: 2.4rem auto 0; height: 400px; }

/* photo tiles on the broadcast sides */
.broadcast-side .tile.photo { overflow: hidden; padding: 0; }
.broadcast-side .tile.photo img { width: 100%; height: 100%; object-fit: cover; }

/* pill-sized platform icons centered in the solid pills */
.bc-icon { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.bc-icon svg { width: 58%; max-width: 110px; height: auto; aspect-ratio: 1; opacity: .95; }
.bc-pill .tile-tag { position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); z-index: 2; }
.bc-pill.plain .tile-tag { bottom: 18%; }

/* tight 3-column pill band, clipped at top and bottom like the reference banner */
.broadcast-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: .48rem; height: 460px; }
.bc-col { display: flex; flex-direction: column; gap: .48rem; min-height: 0; }
.bc-col-mid { padding-top: 2rem; } /* gentle stagger, still fully inside the band */
.bc-pill { position: relative; border-radius: 999px; overflow: hidden; flex: 1; min-height: 0;
  transition: transform .25s ease; }
.broadcast-band:hover .bc-pill { transform: translateY(-3px); }
.bc-pill img { width: 100%; height: 100%; object-fit: cover; object-position: top; mix-blend-mode: multiply; opacity: .96; }
.bc-pill.half-top { margin-top: 0; }
.bc-pill.half-bottom { margin-bottom: 0; flex: .55; } /* short filler pill, fully visible */
.bc-pill.tall { flex: 1.6; }
.bc-yellow { background-color: #f2c230; }
.bc-red { background-color: #d1242f; }
.bc-teal { background-color: #1a9e96; }
.bc-orange { background-color: #e8813a; }
.bc-blue { background-color: #1d5fd1; }
.bc-dark { background-color: #8a1f2b; }
@media (max-width: 880px) { .broadcast-band { height: 360px; } }

/* /youth page: alternating program rows with the same arch pill imagery */
.youth-program { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; padding: 2.4rem 0; }
.youth-program.flip .youth-program-pill { order: 2; }
@media (max-width: 880px) { .youth-program { grid-template-columns: 1fr; } .youth-program.flip .youth-program-pill { order: 0; } }
.youth-program-pill { aspect-ratio: 4 / 5; border-radius: 999px 999px 26px 26px; overflow: hidden; max-width: 340px; margin: 0 auto; }
.youth-program-pill img { width: 100%; height: 100%; object-fit: cover; object-position: top; mix-blend-mode: multiply; opacity: .96; }

/* ── Podcast section (FaithConnect style) ── */
.mega { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; }
.sub { color: #55606b; max-width: 46ch; margin-top: 1rem; }
.podcast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem; }
@media (max-width: 880px) { .podcast-grid { grid-template-columns: 1fr; } }
.podcast-copy .spark { width: 44px; height: 44px; color: var(--color-secondary); margin-bottom: .4rem; }
.podcast-copy .kicker { font-size: 1.05rem; margin-bottom: .2rem; }
.podcast-copy .kicker b { font-weight: 800; }

.podcast-collage { position: relative; min-height: 460px; }
.podcast-collage .deco-label { position: absolute; top: -6%; left: 18%; font-weight: 700; font-size: 1.2rem; color: var(--color-secondary); }
.podcast-collage .deco-grid { position: absolute; top: 0; left: 6%; width: 180px; height: 120px;
  background-image: linear-gradient(#c9ced4 1px, transparent 1px), linear-gradient(90deg, #c9ced4 1px, transparent 1px);
  background-size: 14px 14px; transform: perspective(300px) rotateX(38deg) skewX(-8deg); opacity: .7; }
.podcast-collage .ghost-card { position: absolute; right: 0; top: 12%; width: 42%; height: 46%; background: #e8e8e8; border-radius: 26px; }
.podcast-collage .photo-card { position: absolute; left: 22%; top: 4%; width: 52%; aspect-ratio: 1 / 1.1; border-radius: 26px; overflow: hidden;
  box-shadow: 0 24px 50px rgba(20, 24, 29, .18); }
.podcast-collage .photo-card img { width: 100%; height: 100%; object-fit: cover; }
.podcast-collage .spark-badge { position: absolute; left: 6%; bottom: 26%; width: 66px; height: 66px; border-radius: 50%;
  background: #d9a13a; display: grid; place-items: center; }
.podcast-collage .spark-badge svg { width: 34px; height: 34px; }
.podcast-collage .player-card { position: absolute; left: 14%; bottom: 2%; width: 56%; padding: 1.6rem 1.8rem; border-radius: 26px;
  background: #efefef; box-shadow: 0 16px 34px rgba(20, 24, 29, .12); display: grid; gap: 1rem; }
.podcast-collage .track { display: block; height: 3px; background: #14181d; position: relative; }
.podcast-collage .knob { position: absolute; left: 26%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #14181d; transform: translateY(-50%); }
.podcast-collage .controls { display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.podcast-collage .controls svg { width: 20px; height: 20px; }
.podcast-collage .play { width: 38px; height: 38px; border-radius: 50%; background: #14181d; display: grid; place-items: center; }
.podcast-collage .play svg { width: 18px; height: 18px; }
.podcast-collage .vinyl { position: absolute; right: 2%; bottom: 8%; width: 150px; height: 150px; border-radius: 50%;
  background: repeating-radial-gradient(circle, #1c1f24 0 3px, #2c3036 3px 6px); display: grid; place-items: center;
  box-shadow: 0 14px 30px rgba(20, 24, 29, .25); animation: vinyl-spin 12s linear infinite; }
.podcast-collage .vinyl span { width: 46px; height: 46px; border-radius: 50%; background: #efe9dc; border: 2px solid #14181d; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
@media (max-width: 880px) { .podcast-collage { min-height: 380px; } }

/* 24hr podcast banner */
.podcast-banner { position: relative; display: block; border-radius: 26px; overflow: hidden; min-height: 150px; }
.podcast-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(1.2); }
.podcast-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(16, 24, 68, .75), rgba(90, 10, 30, .55)); }
.podcast-banner p { position: relative; z-index: 1; color: #fff; text-align: center; font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  padding: 2.6rem 1rem; font-family: var(--font-heading); }
.podcast-banner b { font-size: 1.6em; color: #fff; }
.podcast-banner .live-dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #23c552; margin-left: .6rem;
  animation: app-loader-pulse 1.6s ease-in-out infinite; }

/* ── Broadcast section: GitHub-style centered headline flanked by floating tiles ── */
.broadcast { position: relative; overflow: hidden; min-height: 660px; display: flex; align-items: center; }
.broadcast > .container { width: 100%; }
.broadcast-side { position: absolute; top: 50%; transform: translateY(-50%); width: 300px; height: 560px; pointer-events: none;
  background: url('/storage/template-shells/u-ednm6gcoom/assets/images/mosaic.svg') center / contain no-repeat; }
.broadcast-side.left { left: 2%; }
.broadcast-side.right { right: 2%; transform: translateY(-50%) scaleX(-1); }
.broadcast-side.right .tile { transform: scaleX(-1); } /* un-mirror tile content */
.broadcast-side .tile { position: absolute; width: 96px; height: 96px; border-radius: 22px; display: grid; place-items: center;
  background: #fff; box-shadow: 0 14px 32px rgba(20, 24, 29, .16); font-size: 2.5rem; pointer-events: auto;
  animation: badge-bob 3.6s ease-in-out infinite; }
.broadcast-side .tile svg { width: 52px; height: 52px; }
.broadcast-side .t1 { left: 10%; top: 6%; }
.broadcast-side .t2 { left: 58%; top: 26%; animation-delay: .7s; }
.broadcast-side .t3 { left: 16%; top: 52%; animation-delay: 1.2s; }
.broadcast-side .t4 { left: 62%; top: 76%; animation-delay: .4s; }
.tile.youtube { color: #ff0000; }
.tile.facebook { color: #1877f2; }
.tile.tiktok { color: #14181d; opacity: .8; }
.tile-tag { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: .58rem; font-weight: 800;
  letter-spacing: .06em; padding: .1rem .5rem; border-radius: 999px; color: #fff; }
.tile-tag.live { background: #d1242f; }
.tile-tag.soon { background: #8b949e; }
.broadcast-side.right .tile-tag { transform: translateX(-50%); } /* inherits un-mirror from .tile */
.youth-center { max-width: 620px; margin: 0 auto; text-align: center; }
.youth-center .mega { margin-bottom: 1rem; }
.sub.center { margin-left: auto; margin-right: auto; }
.broadcast-stats { display: flex; justify-content: center; gap: 4rem; margin-top: 2.6rem; }
.broadcast-stats b { display: block; font-size: 2.2rem; font-family: var(--font-heading); color: var(--color-secondary); }
.broadcast-stats span { font-size: .9rem; color: #55606b; }
.broadcast-platforms { display: none; }
@media (max-width: 1200px) {
  .broadcast { min-height: 0; display: block; }
  .broadcast-side { position: static; transform: none; width: auto; height: auto; background: none;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 0 24px; margin-bottom: 1.4rem; }
  .broadcast-side.right { transform: none; }
  .broadcast-side.right .tile { transform: none; }
  .broadcast-side .tile { position: static; width: 84px; height: 84px; }
  .broadcast-platforms { display: flex; justify-content: center; gap: 1.6rem; margin-top: 2.2rem; }
  .broadcast-platforms .tile { position: relative; width: 76px; height: 76px; border-radius: 18px; display: grid; place-items: center;
    background: #fff; box-shadow: 0 12px 28px rgba(20, 24, 29, .14); }
  .broadcast-platforms .tile svg { width: 40px; height: 40px; }
}
@media (max-width: 600px) { .broadcast-stats { gap: 2rem; } }

/* ── Books section (cream, purple blob) ── */
.highlighted-section { 
  background-color: color-mix(in oklab, var(--color-primary), white 95%);
box-shadow: 0 0 10px -5px;	
 }
.books-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 880px) { .books-grid { grid-template-columns: 1fr; } }
.books-copy .hl { color: var(--color-primary); }
.books-copy .btn { margin-top: 1.6rem; }
.books-collage { display: grid; place-items: center; }
.books-collage img { width: 88%; max-width: 520px; }

/* Giving progress (wired to the CMS donations feature on live sites) */
.giving { max-width: 340px; margin-bottom: 1.7rem; }
.giving .bar { height: 8px; border-radius: 999px; background: #eceef1; overflow: hidden; }
.giving .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffb44d, var(--color-primary)); }
.giving .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: .5rem; font-size: .9rem; font-weight: 600; color: var(--color-secondary); }
.giving .pct { color: var(--color-primary); font-weight: 800; }

/* Circle cluster */
.cluster { position: relative; min-height: 420px; }
.cluster .big { position: absolute; right: 8%; top: 10%; width: 300px; height: 300px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, #21584a, #2ba98f); box-shadow: 0 30px 60px rgba(20,24,29,.18); }
.cluster .small-a { position: absolute; left: 2%; bottom: 12%; width: 130px; height: 130px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, #f7941e, #ffc46b); box-shadow: 0 18px 36px rgba(20,24,29,.15); }
.cluster .small-b { position: absolute; right: -2%; top: 0; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, #10395c, #2f7fbf); box-shadow: 0 18px 36px rgba(20,24,29,.15); }
.cluster .big img, .cluster .small-a img, .cluster .small-b img { width: 100%; height: 100%; object-fit: cover; }
.cluster .deco-a { position: absolute; left: 18%; top: 6%; width: 14px; height: 14px; border-radius: 50%; background: var(--color-primary); }
.cluster .deco-b { position: absolute; right: 4%; bottom: 22%; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); }
.cluster .deco-ring { position: absolute; left: 46%; bottom: 2%; width: 46px; height: 46px; border-radius: 50%;
  border: 6px solid var(--color-primary); border-top-color: transparent; transform: rotate(-40deg); }

/* Members chip ("1k+ our members") */
.members { position: absolute; right: 0; top: -6%; display: flex; align-items: center; gap: .5rem;
  background: #fff; border-radius: 999px; padding: .35rem .9rem .35rem .4rem; box-shadow: 0 10px 24px rgba(20,24,29,.12); font-size: .85rem; font-weight: 600; }
.members .faces { display: flex; }
.members .faces img, .members .faces span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; }
.members .faces :first-child { margin-left: 0; }
.members .count { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff;
  display: grid; place-items: center; font-size: .62rem; font-weight: 800; border: 2px solid #fff; margin-left: -8px; }

/* ── Welcome ("Who we are"): flex row, rounded photo like the event cards ── */
.welcome .container { display: flex; align-items: center; gap: 3rem; }
.welcome img { flex: 0 0 46%; width: 46%; aspect-ratio: 16 / 12; object-fit: cover; border-radius: 24px;
  box-shadow: 0 18px 40px rgba(20, 24, 29, .12); }
.welcome blockquote { border-left: 4px solid var(--color-primary); padding-left: 1.1rem; margin: 1rem 0; font-style: italic; color: #55606b; }
@media (max-width: 880px) {
  .welcome .container { flex-direction: column; }
  .welcome img { flex: none; width: 100%; }
}

/* ── Ministries: colorful bento grid (mosaic template) ── */
.ministries { padding-top: 0; }
.ministry-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 1.1rem; }
.mcard { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: .6rem;
  border-radius: 20px; padding: 1.4rem 1.5rem; color: #fff; overflow: hidden;
  background-image: url('/storage/template-shells/u-ednm6gcoom/assets/images/squiggle.svg'); background-size: cover; background-position: center;
  transition: transform .25s ease, box-shadow .25s ease; }
.mcard:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(20, 24, 29, .2); }
.mcard.small { grid-column: span 1; grid-row: span 1; }
.mcard.big { grid-column: span 2; grid-row: span 2; }
.m-red { background-color: #cd5b58; }
.m-green { background-color: #1d8a68; }
.m-orange { background-color: #d07d2c; }
.m-pink { background-color: #d060ae; }
.m-blue { background-color: #5069d8; }
.m-purple { background-color: #8a5bc7; }
.m-teal { background-color: #2ba98f; }
.mcard-top { display: flex; align-items: flex-start; justify-content: space-between; }
.mcard-tag { font-size: .8rem; font-weight: 600; opacity: .95; }
.mcard-badge { width: 46px; height: 46px; background: #fff; display: grid; place-items: center; font-size: 1.3rem;
  clip-path: polygon(50% 0%, 61% 6%, 73% 3%, 80% 13%, 92% 15%, 93% 27%, 100% 36%, 96% 48%, 100% 60%, 93% 70%, 92% 82%, 80% 84%, 73% 94%, 61% 91%, 50% 97%, 39% 91%, 27% 94%, 20% 84%, 8% 82%, 7% 70%, 0% 60%, 4% 48%, 0% 36%, 7% 27%, 8% 15%, 20% 13%, 27% 3%, 39% 6%); }
.mcard-body h3 { color: #fff; font-size: 1.35rem; margin-bottom: .3rem; }
.mcard.big .mcard-body h3 { font-size: 2rem; }
.mcard-body p { font-size: .88rem; line-height: 1.55; opacity: .95;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard.big .mcard-body p { font-size: 1.05rem; -webkit-line-clamp: 3; }
.mcard-meta { display: flex; gap: 1.3rem; font-size: .82rem; font-weight: 700; }
.mcard.big .mcard-meta { font-size: 1rem; }
@media (max-width: 880px) {
  .ministry-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; }
  .mcard.big { grid-column: span 2; }
}
@media (max-width: 560px) {
  .ministry-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .mcard.small, .mcard.big { grid-column: span 1; grid-row: span 1; min-height: 190px; }
}

/* ── "Directions of ministry" (pastel card carousel template) ── */
.directions-head { position: relative; display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; align-items: start; margin-bottom: 3rem; }
.directions-intro { max-width: 320px; }
.directions-intro .star-badge { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: #1d4d3b; color: #d9e021; font-size: 1.1rem; margin-bottom: 1rem; }
.directions-intro p { font-size: .95rem; }
.directions-title { font-size: clamp(2.6rem, 5.4vw, 4.2rem); line-height: 1.02; margin: 0; }
.directions-squiggle { position: absolute; right: -2%; top: -30%; width: 200px; height: 260px; pointer-events: none; }
@media (max-width: 880px) { .directions-head { grid-template-columns: 1fr; } .directions-squiggle { display: none; } }

.directions-row { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.1rem;
  -webkit-overflow-scrolling: touch; scrollbar-color: #1d4d3b #e4e0da; scrollbar-width: thin; }
.directions-row::-webkit-scrollbar { height: 7px; }
.directions-row::-webkit-scrollbar-track { background: #e4e0da; border-radius: 999px; }
.directions-row::-webkit-scrollbar-thumb { background: #1d4d3b; border-radius: 999px; }
.dcard { position: relative; flex: 0 0 calc((100% - 2.8rem) / 3); scroll-snap-align: start; min-height: 300px;
  border-radius: 26px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .25s ease; }
.dcard:hover { transform: translateY(-5px); }
.d-green { background: #b5e08a; }
.d-orange { background: #ec8a4e; }
.d-blue { background: #a9c8e8; }
.dcard-arrow { position: absolute; top: 1.3rem; left: 1.3rem; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: #14181d; display: grid; place-items: center; }
.dcard-arrow svg { width: 20px; height: 20px; }
.dcard-img { position: absolute; right: 1.2rem; width: 56%; aspect-ratio: 16 / 11; object-fit: cover;
  border-radius: 60px 18px 60px 18px; }
.layout-a .dcard-img { top: 1.6rem; }
.layout-b .dcard-img { top: 34%; }
.layout-b .dcard-arrow { top: auto; bottom: 1.3rem; }
.layout-b .dcard-info { margin-bottom: 0; align-self: flex-start; margin-top: 0; }
.layout-b { justify-content: flex-start; }
.dcard-info { max-width: 60%; }
.layout-b .dcard-info { max-width: 55%; }
.dcard-tag { display: inline-block; border: 1.5px solid #14181d; border-radius: 999px; font-size: .72rem; font-weight: 700;
  padding: .1rem .7rem; margin-bottom: .5rem; color: #14181d; }
.dcard-info h3 { font-size: 1.45rem; color: #14181d; margin-bottom: .15rem; }
.dcard-info p { font-size: .88rem; color: #2c3230; }
@media (max-width: 880px) { .dcard { flex: 0 0 86%; } }

/* ── Generic sections reused by inner pages/blocks ── */
.section-head { max-width: 620px; margin-bottom: 2.4rem; margin: 0 auto 3rem; text-align: center; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e8ebee; border-radius: var(--radius); padding: 1.7rem; }
.card .icon { width: 48px; height: 48px; border-radius: 50%; background: #fdeeda; display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 1rem; }
.card h3 { margin-bottom: .5rem; font-size: 1.1rem; }
.card p { font-size: 1rem; }

/* Service times ribbon */
.times { background: var(--color-secondary); }
/* auto-fit: the grid tracks the Services collection size instead of a fixed 4 */
.times .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; padding-top: 2rem; padding-bottom: 2rem; }
@media (max-width: 720px) { .times .container { grid-template-columns: 1fr; } }
.times h3 { color: #ffb44d; font-family: var(--font-default); font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: .2rem; }
.times p { color: #fff; font-weight: 600; }
.times-wrap { padding: 0 24px; }

/* Sermons */
.sermon { border: 1px solid #e8ebee; border-radius: var(--radius); overflow: hidden; background: #fff; }
.sermon .thumb { height: 160px; background: linear-gradient(120deg, var(--color-frame), var(--color-accent));
  display: grid; place-items: center; color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; }
.sermon .body { padding: 1.3rem 1.5rem 1.6rem; }
.sermon .meta { font-size: .85rem; color: #8b949e; margin-bottom: .4rem; }

/* ── Reusable event card: a poster (picture + date) over the essentials, "View Event" pill ── */
.event-card { position: relative; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 18px 40px rgba(20, 24, 29, .1);
  display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.event-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(20, 24, 29, .14); }
.ec-poster { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-secondary); }
.ec-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.event-card:hover .ec-poster img { transform: scale(1.05); }
/* no picture: the page-hero look — primary into near-black, dotted */
.ec-poster.is-plain { background:
  radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .14) 1px, transparent 0) 0 0 / 18px 18px,
  linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 35%, var(--color-secondary)) 70%, var(--color-secondary)); }
.ec-poster-plain { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem;
  color: #fff; text-align: center; padding: 1rem; }
.ec-poster-plain .event-icon { opacity: .9; }
.ec-poster-plain span { font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: .04em; }
.ec-date { position: absolute; top: .9rem; left: .9rem; display: grid; justify-items: center; gap: .2rem; min-width: 58px;
  padding: .55rem .7rem .5rem; border-radius: 14px; background: #fff; color: var(--color-secondary); line-height: 1;
  box-shadow: 0 8px 20px rgba(20, 24, 29, .18); }
.ec-date b { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-primary); }
.ec-date span { font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.ec-countdown, .ec-featured { position: absolute; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem;
  border-radius: 999px; font-size: .76rem; font-weight: 800; line-height: 1.3; box-shadow: 0 6px 16px rgba(20, 24, 29, .16); }
.ec-countdown { top: .9rem; right: .9rem; background: var(--color-primary); color: #fff; }
.ec-featured { bottom: .9rem; left: .9rem; background: #fff; color: var(--color-primary); }
.ec-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.3rem 1.4rem 1.5rem; }
.ec-type { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); line-height: 1.2; }
.ec-body h3 { font-size: 1.4rem; line-height: 1.15; }
.ec-body h3 a { color: inherit; }
.ec-body h3 a:hover { color: var(--color-primary); }
.ec-desc { font-size: .95rem; line-height: 1.6; color: #55606b; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ec-meta { list-style: none; padding: .75rem 0 0; margin: .15rem 0 0; width: 100%; display: grid; gap: .45rem; border-top: 1.5px dashed #ece5da; margin-bottom: .6rem; }
.ec-meta li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--color-secondary); }
.ec-meta .event-icon { color: var(--color-primary); }
.ec-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  background: var(--color-primary); color: #fff; font-weight: 700; font-size: 1rem; padding: .8rem 1.5rem; border-radius: 999px;
  transition: background .2s, transform .15s; }
.ec-cta:hover { background: color-mix(in srgb, var(--color-primary) 82%, #000); transform: translateY(-2px); }
.ec-cta .event-icon { transition: transform .2s; }
.ec-cta:hover .event-icon { transform: translateX(3px); }
/* horizontal variant (the featured event): poster left, details right */
.event-card.horizontal { display: grid; grid-template-columns: 1.15fr 1fr; }
.event-card.horizontal .ec-poster { aspect-ratio: auto; min-height: 100%; }
.event-card.horizontal .ec-poster img { position: absolute; inset: 0; }
.event-card.horizontal .ec-body { padding: 2rem 2.2rem; justify-content: center; }
.event-card.horizontal .ec-body h3 { font-size: 1.9rem; }
.event-card.horizontal .ec-desc { -webkit-line-clamp: 4; line-clamp: 4; font-size: 1rem; }
.event-card.horizontal .ec-cta { width: auto; margin-top: .4rem; }
@media (max-width: 760px) {
  .event-card.horizontal { grid-template-columns: 1fr; }
  .event-card.horizontal .ec-poster { aspect-ratio: 16 / 10; min-height: 0; }
  .event-card.horizontal .ec-body { padding: 1.3rem 1.4rem 1.5rem; }
  .event-card.horizontal .ec-body h3 { font-size: 1.5rem; }
  .event-card.horizontal .ec-cta { width: 100%; }
}

.events .featured { margin-bottom: 1.6rem; }

/* Event carousel: 3-up desktop, 1-up mobile, horizontal scroll with snap */
.event-carousel { position: relative; }
.event-card-row { display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
  /* room for the cards' shadows (a scroller clips them), pulled back so the layout doesn't move */
  padding: 1rem .5rem 3rem; margin: -1rem -.5rem -2rem; scroll-padding-left: .5rem; -webkit-overflow-scrolling: touch; scrollbar-color: var(--color-primary) #eceef1; scrollbar-width: thin; }
.event-card-row::-webkit-scrollbar { height: 6px; }
.event-card-row::-webkit-scrollbar-track { background: #eceef1; border-radius: 999px; }
.event-card-row::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 999px; }
.event-card-row .event-card { flex: 0 0 calc((100% - 3.2rem) / 3); scroll-snap-align: start; }
/* right-edge fade hints that more cards continue off-screen */
.event-carousel::after { content: ''; position: absolute; right: 0; top: 0; bottom: 1rem; width: 70px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--color-bg)); }
.carousel-hint { display: flex; align-items: center; justify-content: flex-end; gap: .4rem;
  font-size: .85rem; font-weight: 700; color: var(--color-primary); margin-top: .3rem; }
.carousel-hint span { animation: hint-nudge 1.4s ease-in-out infinite; }
@keyframes hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (max-width: 880px) {
  .event-card-row .event-card { flex: 0 0 86%; } /* 1-up with a peek of the next card */
}

/* Events */
.event { display: flex; gap: 1.2rem; align-items: center; background: #fff; border: 1px solid #e8ebee; border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.event .event-img { width: 110px; height: 82px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
@media (max-width: 600px) { .event .event-img { width: 100%; height: 150px; } }
.event .date { text-align: center; background: #fdeeda; border-radius: 10px; padding: .55rem .85rem; color: var(--color-primary); font-weight: 800; line-height: 1.15; }
.event .date small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

/* Pastors — flex row of portrait cards */
.team-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.team-flex .member { flex: 0 1 calc((100% - 6rem) / 4); text-align: center; } /* desktop: 4 per row (2rem gaps) */
@media (max-width: 1024px) { .team-flex .member { flex-basis: calc((100% - 4rem) / 3); } } /* tablet: 3 per row */
@media (max-width: 640px) { .team-flex { gap: 1.2rem; } .team-flex .member { flex-basis: calc((100% - 1.2rem) / 2); } } /* mobile: 2 per row */
.team-flex .member img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius) var(--radius) 999px 999px;
  margin-bottom: 1rem; box-shadow: 0 16px 34px rgba(20, 24, 29, .12); transition: transform .3s ease; }
.team-flex .member:hover img { transform: translateY(-6px); }
.team-flex .member h3 { font-size: 1.15rem; }
.team-flex .member p { color: var(--color-primary); font-size: .9rem; font-weight: 700; }
.team-flex a.member { display: block; }
.team-more { text-align: center; margin-top: 2.4rem; }

/* ── Leadership profile page (portfolio-style) ── */
.profile-page { background: var(--color-bg); }
.profile-page section:not(.page-hero) { background: transparent; }
.profile-page .hl { color: var(--color-primary); }

.profile-hero { padding-top: 30px; }
.profile-hero .container, .profile-skills .container { max-width: var(--container-width); }
.profile-hero .container { display: flex; align-items: center; gap: 3rem; }
.profile-hero-copy { flex: 1; }
.profile-socials { display: flex; gap: .7rem; margin-bottom: 1rem; }
.profile-socials a { width: 34px; height: 34px; border-radius: 9px; background: #fff; color: var(--color-primary);
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(20, 24, 29, .1); }
.profile-socials svg { width: 17px; height: 17px; }
.profile-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.profile-role { font-weight: 700; color: var(--color-secondary); margin: .2rem 0 .6rem; }
.profile-intro { color: #55606b; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.profile-hero-photo { position: relative; flex: 0 0 38%; }
.profile-hero-photo img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; border-radius: 30px;
  box-shadow: 0 24px 50px rgba(20, 24, 29, .16); }
.float-badge { position: absolute; width: 52px; height: 52px; border-radius: 14px; background: #fff; display: grid; place-items: center;
  font-size: 1.5rem; box-shadow: 0 10px 24px rgba(20, 24, 29, .15); animation: badge-bob 3.2s ease-in-out infinite; }
.fb-1 { top: -6%; left: -8%; }
.fb-2 { right: -7%; top: 30%; animation-delay: .6s; }
.fb-3 { left: -6%; bottom: 8%; animation-delay: 1.1s; }
@keyframes badge-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.about-card { max-width: 680px; margin: 0 auto; background: #fdf1e3; border-radius: 18px; padding: 1.8rem 2rem; }
.about-card blockquote { font-style: italic; color: var(--color-secondary); margin-bottom: .8rem; font-weight: 600; }
.about-card p { color: #55606b; }
.profile-stats { display: flex; justify-content: center; gap: 3.5rem; margin-top: 2.2rem; text-align: center; }
.profile-stats b { display: block; font-size: 1.7rem; color: var(--color-primary); font-family: var(--font-heading); }
.profile-stats span { font-size: .85rem; color: #55606b; }

.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 880px) { .skills-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .skills-grid { grid-template-columns: 1fr; } }
.skill-card { background: #fff; border-radius: 16px; padding: 1.3rem 1.4rem; box-shadow: 0 10px 26px rgba(20, 24, 29, .07);
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.skill-head { display: flex; align-items: center; gap: .7rem; }
.skill-icon { width: 42px; height: 42px; border-radius: 12px; background: #fdf1e3; display: grid; place-items: center; font-size: 1.2rem; }
.skill-head b { font-size: .98rem; color: var(--color-secondary); }
.skill-check { width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem; justify-self: end; }

.profile-form { max-width: 640px; margin: 0 auto; display: grid; gap: 1rem; background: #fff; border-radius: 20px; padding: 2rem;
  box-shadow: 0 14px 34px rgba(20, 24, 29, .08); }
.profile-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .profile-form .row { grid-template-columns: 1fr; } }
.profile-form textarea { min-height: 130px; resize: vertical; }
.profile-form .btn { width: 100%; }
@media (max-width: 880px) {
  .profile-hero .container { flex-direction: column-reverse; text-align: center; }
  .profile-socials, .profile-actions { justify-content: center; }
  .profile-hero-photo { width: 70%; flex: none; }
  .profile-stats { gap: 2rem; }
}
/* anchored sections land below the sticky header when scrolled to */
#leadership, #worship, #bible-study, #sermons, #store, #events, #youth { scroll-margin-top: 110px; }

/* Donate CTA band */
.donate-cta { background: linear-gradient(120deg, var(--color-frame), var(--color-accent)); border-radius: var(--radius); }
.donate-cta .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 3rem; padding-bottom: 3rem; }
.donate-cta h2, .donate-cta p { color: #fff; }
.donate-cta-wrap { padding: 0 24px; }

/* Forms (contact) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
input, textarea, select { width: 100%; font: inherit; padding: .8rem 1rem; border: 1.5px solid #e0e4e8; border-radius: 10px; outline: none; }
input:focus, textarea:focus { border-color: var(--color-primary); }
label { font-size: .85rem; font-weight: 700; color: var(--color-secondary); display: block; margin-bottom: .35rem; }

/* Footer */
.site-footer { background: var(--color-secondary); color: #aeb6bf; margin-top: var(--section-pad-y); }
.site-footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-top: 3.5rem; padding-bottom: 2rem; }
@media (max-width: 720px) {
  .site-footer .container { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .site-footer .container p { margin-left: auto; margin-right: auto; }
}
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.site-footer a { display: block; padding: .18rem 0; font-size: .95rem; }
.site-footer a:hover { color: var(--color-primary); }
.site-footer .legal { border-top: 1px solid rgba(255,255,255,.08); padding: 1.2rem 24px; text-align: center; font-size: .85rem; }

/* Header wordmark: CAC + branch line */
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text small { font-family: var(--font-default); font-weight: 600; font-size: .862rem; letter-spacing: .06em; color: #55606b; }

/* ── Youth gallery: masonry photos, filter tabs, pagination ── */
.gallery-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.gallery-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.gallery-tabs button { font: inherit; font-size: .88rem; font-weight: 600; padding: .45rem 1.2rem; border-radius: 999px;
  border: 1.5px solid #d9d2c6; background: transparent; color: var(--color-default); cursor: pointer; transition: all .2s; }
.gallery-tabs button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.gallery-tabs button.active { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.gallery-sort { font: inherit; font-size: .88rem; padding: .45rem .9rem; border-radius: 10px; border: 1.5px solid #d9d2c6;
  background: #fff; cursor: pointer; }
.gallery-grid { columns: 4 220px; column-gap: 1rem; }
.gallery-item { break-inside: avoid; margin: 0 0 1rem; position: relative; border-radius: 16px; overflow: hidden; }
.gallery-item img { width: 100%; display: block; transition: transform .35s ease; }
.gallery-item:nth-child(3n) img { aspect-ratio: 3 / 4.4; object-fit: cover; }
.gallery-item:nth-child(3n+1) img { aspect-ratio: 3 / 3; object-fit: cover; }
.gallery-item:nth-child(3n+2) img { aspect-ratio: 3 / 3.8; object-fit: cover; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption { position: absolute; inset: auto 0 0 0; padding: 1.6rem .9rem .7rem; color: #fff;
  background: linear-gradient(transparent, rgba(20, 24, 29, .75)); font-size: .8rem; display: grid;
  opacity: 0; transition: opacity .25s ease; }
.gallery-item:hover figcaption { opacity: 1; }
.gallery-item figcaption span { font-size: .72rem; opacity: .85; }
.gallery-pages { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.gallery-pages button { font: inherit; font-weight: 700; min-width: 40px; height: 40px; border-radius: 12px;
  border: 1.5px solid #d9d2c6; background: #fff; cursor: pointer; transition: all .2s; }
.gallery-pages button:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.gallery-pages button.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.gallery-pages button:disabled { opacity: .4; cursor: default; }

/* ── Youth interactive blocks ── */
/* countdown */
.yv-countdown { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem;
  background: var(--color-secondary); color: #fff; border-radius: 18px; padding: 1.3rem 1.8rem; margin-bottom: 2rem; }
.yv-cd-label { font-weight: 700; }
.yv-cd-units { display: flex; gap: 1.1rem; }
.yv-cd-units span { display: grid; text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #b9c2cc; }
.yv-cd-units b { font-family: var(--font-heading); font-size: 1.7rem; color: var(--color-primary); }

/* events + RSVP */
.yv-event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 880px) { .yv-event-grid { grid-template-columns: 1fr; } }
.yv-event { display: flex; gap: 1.1rem; background: #fff; border-radius: 18px; padding: 1.4rem;
  box-shadow: 0 12px 28px rgba(20, 24, 29, .07); }
.yv-event .date { flex: 0 0 auto; width: 58px; text-align: center; background: var(--primary-soft); color: var(--color-primary);
  border-radius: 12px; padding: .5rem 0; font-weight: 800; height: fit-content; }
.yv-event .date b { display: block; font-size: 1.3rem; line-height: 1.1; }
.yv-event .date span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.yv-event h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.yv-event p { font-size: .88rem; color: #55606b; }
.rsvp-row { display: flex; align-items: center; gap: .9rem; margin-top: .8rem; }
.rsvp-btn { font: inherit; font-weight: 700; font-size: .85rem; padding: .5rem 1.2rem; border-radius: 999px;
  border: 1.5px solid var(--color-primary); background: transparent; color: var(--color-primary); cursor: pointer; transition: all .2s; }
.rsvp-btn:hover { background: var(--primary-soft); }
.rsvp-btn.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.rsvp-count { font-size: .82rem; font-weight: 700; color: #55606b; }
.yv-details { margin-left: auto; font-size: .85rem; font-weight: 700; color: var(--color-secondary); }
.yv-details:hover { color: var(--color-primary); }
.yv-empty { text-align: center; color: #55606b; margin: 1rem 0 2rem; }

/* highlight reels */
.yv-reel-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; max-width: 56rem; margin: 0 auto; }
@media (max-width: 880px) { .yv-reel-row { grid-template-columns: repeat(2, 1fr); } }
.yv-reel { position: relative; border: 0; padding: 0; cursor: pointer; border-radius: 18px; overflow: hidden;
  aspect-ratio: 9 / 15; background: var(--color-secondary); }
.yv-reel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.yv-reel:hover img { transform: scale(1.05); }
.yv-reel .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--color-secondary); display: grid; place-items: center;
  transition: transform .2s; }
.yv-reel:hover .play { transform: translate(-50%, -50%) scale(1.12); }
.yv-reel .play svg { width: 24px; height: 24px; }
.yv-reel .meta { position: absolute; inset: auto 0 0 0; padding: 1.6rem .8rem .7rem; text-align: left; color: #fff;
  background: linear-gradient(transparent, rgba(20, 24, 29, .8)); display: grid; font-size: .82rem; }
.yv-reel .meta small { opacity: .8; }

/* poll + prayer box */
.yv-engage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 880px) { .yv-engage-grid { grid-template-columns: 1fr; } }
.yv-card { background: #fff; border-radius: 20px; padding: 2rem; box-shadow: 0 14px 32px rgba(20, 24, 29, .08); }
.yv-card h3 { font-size: 1.4rem; margin-bottom: 1.1rem; }
.yv-poll { display: grid; gap: .7rem; }
.yv-poll-opt { position: relative; overflow: hidden; font: inherit; font-weight: 700; text-align: left; padding: .8rem 1.1rem;
  border-radius: 12px; border: 1.5px solid #e5ddd0; background: #faf7f2; cursor: pointer; display: flex; justify-content: space-between; }
.yv-poll-opt:hover:not(.done) { border-color: var(--color-primary); }
.yv-poll-opt.done { cursor: default; }
.yv-poll-opt.picked { border-color: var(--color-primary); }
.yv-poll-opt .bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--primary-soft); transition: width .6s ease; }
.yv-poll-opt.picked .bar { background: #fbd9e4; }
.yv-poll-opt .label, .yv-poll-opt .pct { position: relative; }
.yv-poll-opt .pct { color: var(--color-primary); }
.yv-fine { margin-top: .9rem; font-size: .8rem; color: #8b949e; }
.yv-prayer { display: grid; gap: .9rem; }
.kind-row { display: flex; gap: .7rem; }
.kind-row label { flex: 1; text-align: center; font-size: .88rem; font-weight: 700; padding: .55rem; border-radius: 10px;
  border: 1.5px solid #e5ddd0; cursor: pointer; transition: all .2s; }
.kind-row label.on { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.kind-row input { display: none; }
.yv-prayer textarea { min-height: 110px; resize: vertical; }
.yv-sent { display: grid; gap: 1rem; justify-items: start; }

/* new here + verse */
.yv-verse { text-align: center; margin-bottom: 2.4rem; }
.yv-verse blockquote { font-family: var(--font-heading); font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--color-secondary);
  max-width: 640px; margin: .5rem auto 0; }
.yv-nh-card { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.5rem; align-items: center;
  background: var(--color-secondary); color: #fff; border-radius: 24px; padding: 2.6rem; }
@media (max-width: 880px) { .yv-nh-card { grid-template-columns: 1fr; } }
.yv-nh-card h2 { color: #fff; }
.yv-nh-list { list-style: none; display: grid; gap: .6rem; margin-top: 1rem; font-size: .95rem; color: #d5dce2; }
.yv-nh-list b { color: #fff; }
.yv-nh-social { display: grid; gap: .8rem; justify-items: stretch; }
.yv-nh-social p { font-weight: 700; }
.yv-nh-social .btn { text-align: center; }
.yv-nh-social .btn.dark { background: var(--color-primary); }
.yv-nh-social .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }

/* gallery: mixed media (video + audio items) */
.gallery-tabs.cats { margin-bottom: 1.6rem; }
.gallery-item video { width: 100%; display: block; aspect-ratio: 3 / 3.8; object-fit: cover; background: #14181d; }
.gallery-item.is-video figcaption, .gallery-item.is-audio figcaption { opacity: 1; pointer-events: none; }
.gallery-item.is-video figcaption { padding-bottom: 3.4rem; } /* keep clear of the native controls */
.audio-card { display: grid; justify-items: center; gap: .9rem; padding: 1.6rem 1rem 3.4rem;
  background: linear-gradient(140deg, var(--color-secondary), #3a2030); }
.audio-card .audio-icon { font-size: 2rem; }
.audio-wave { display: flex; align-items: center; gap: 4px; height: 34px; }
.audio-wave i { width: 4px; border-radius: 2px; background: var(--color-primary); animation: wave-bob 1.2s ease-in-out infinite; }
.audio-wave i:nth-child(odd) { height: 60%; }
.audio-wave i:nth-child(even) { height: 100%; animation-delay: .3s; }
.audio-wave i:nth-child(3n) { height: 40%; animation-delay: .6s; }
@keyframes wave-bob { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1); } }
.audio-card audio { width: 100%; height: 36px; }

/* gallery lightbox */
.gallery-item.clickable { cursor: pointer; }
.thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--color-secondary); display: grid; place-items: center;
  transition: transform .2s; }
.gallery-item:hover .thumb-play { transform: translate(-50%, -50%) scale(1.12); }
.thumb-play svg { width: 24px; height: 24px; }
.audio-hint { font-size: .8rem; font-weight: 700; color: #fff; opacity: .85; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10, 12, 16, .92);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: 1rem; }
.lb-body { max-width: min(920px, 92vw); margin: 0 auto; text-align: center; }
.lb-body img, .lb-body video { max-width: 100%; max-height: 78vh; border-radius: 14px; }
.lb-audio { display: grid; justify-items: center; gap: 1.2rem; background: linear-gradient(140deg, var(--color-secondary), #3a2030);
  border-radius: 18px; padding: 3rem 2.5rem; min-width: min(480px, 80vw); }
.lb-audio .audio-icon { font-size: 3rem; }
.lb-audio audio { width: 100%; }
.lb-caption { color: #d5dce2; margin-top: 1rem; font-size: .9rem; }
.lb-caption b { color: #fff; }
.lb-close { position: absolute; top: 1.2rem; right: 1.4rem; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.1rem; cursor: pointer; }
.lb-close:hover { background: var(--color-primary); }
.lb-nav { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 1.15rem; cursor: pointer; }
.lb-nav:hover { background: var(--color-primary); }
.lb-fade-enter-active, .lb-fade-leave-active { transition: opacity .25s ease; }
.lb-fade-enter-from, .lb-fade-leave-to { opacity: 0; }
@media (max-width: 600px) { .lightbox { grid-template-columns: 1fr; } .lb-nav { position: fixed; bottom: 1.2rem; }
  .lb-nav.prev { left: 24%; } .lb-nav.next { right: 24%; } }

/* ── Youth page: main column + sticky right sidebar ── */
.youth-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }
@media (max-width: 1000px) { .youth-layout { grid-template-columns: 1fr; } }
.youth-main > section { padding: 44px 0; }
.youth-main .container { max-width: none; padding: 0; }
.yv-engage-grid.single { grid-template-columns: 1fr; }
.youth-sidebar { position: sticky; top: 120px; display: grid; gap: 1.2rem; padding: 44px 0; align-self: start; }
@media (max-width: 1000px) { .youth-sidebar { position: static; } }
.ys-widget { background: #fff; border-radius: 18px; padding: 1.4rem 1.5rem; box-shadow: 0 12px 28px rgba(20, 24, 29, .07); }
.ys-label { font-weight: 800; font-size: .92rem; color: var(--color-secondary); margin-bottom: .9rem; }
.ys-verse { background: var(--color-secondary); }
.ys-verse .ys-label { color: #f3e6d8; }
.ys-verse blockquote { font-family: var(--font-heading); font-size: 1.15rem; color: #fff; line-height: 1.4; }
.ys-verse cite { display: block; font-style: normal; font-size: .8rem; color: var(--color-primary); margin-top: .5rem; }
.ys-leader { display: flex; gap: .9rem; align-items: center; padding: .55rem 0; }
.ys-leader + .ys-leader { border-top: 1px solid #f1ece3; }
.ys-leader img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ys-leader b { font-size: .95rem; color: var(--color-secondary); }
.ys-leader small { color: var(--color-primary); font-weight: 700; }
.ys-leader p { font-size: .82rem; color: #55606b; line-height: 1.45; }
.ys-fine { margin-top: .7rem; font-size: .78rem; color: #8b949e; }
.ys-newhere ul { list-style: none; display: grid; gap: .45rem; font-size: .86rem; color: #55606b; margin-bottom: 1rem; }
.ys-newhere b { color: var(--color-secondary); }
.ys-newhere .btn { display: block; text-align: center; font-size: .88rem; padding: .6rem 1rem; margin-top: .6rem; }

/* RSVP lightbox form */
.rsvp-lightbox { grid-template-columns: 1fr; }
.rsvp-modal { position: relative; background: #fff; border-radius: 22px; padding: 2.4rem 2.2rem; width: min(480px, 92vw);
  /* min-width:0 stops the grid item growing past the viewport when a form row's
     intrinsic width is wide; tall forms scroll inside the modal instead of clipping */
  min-width: 0; max-width: 92vw; max-height: 92svh; overflow-y: auto; overflow-x: hidden;
  margin: 0 auto; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea { min-width: 0; max-width: 100%; }
@media (max-width: 600px) {
  .rsvp-modal { padding: 1.8rem 1.2rem; }
  .rsvp-modal .rsvp-form .row { grid-template-columns: 1fr; }
}
.rsvp-modal h3 { font-size: 1.35rem; margin-bottom: 1.2rem; }
/* sticky modal header — stays pinned while the form scrolls beneath it */
.rsvp-head { position: sticky; top: -2.4rem; z-index: 3; background: #fff;
  margin: -2.4rem -2.2rem 0; padding: 2.4rem 2.2rem .9rem; border-radius: 22px 22px 0 0; }
.rsvp-head h3 { margin-bottom: 0 !important; }
@media (max-width: 600px) {
  .rsvp-head { top: -1.8rem; margin: -1.8rem -1.2rem 0; padding: 1.8rem 1.2rem .8rem; }
}

.rsvp-modal .lb-close { top: 1rem; right: 1rem; background: var(--color-primary); color: #fff; width: 38px; height: 38px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.rsvp-modal .lb-close:hover { background: var(--color-secondary); }
.rsvp-countdown { display: flex !important; flex-wrap: wrap; gap: .7rem; margin: .4rem 0 1.4rem; }
.rsvp-countdown span { display: grid !important; justify-items: center; min-width: 64px; padding: .6rem .7rem; border-radius: 14px;
  background: var(--color-primary); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.rsvp-countdown b { font-family: var(--font-heading); font-size: 1.5rem; color: #fff; line-height: 1.15; }
.rsvp-form { display: grid; gap: 1rem; }
.rsvp-form label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 700; color: var(--color-secondary); }
.rsvp-form .row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; }
.rsvp-form .btn { width: 100%; }
.rsvp-done { display: grid; gap: .7rem; justify-items: center; text-align: center; }
.rsvp-emoji { font-size: 2.6rem; }

/* sidebar leader rows are links to the profile pages */
a.ys-leader { border-radius: 12px; margin: 0 -.5rem; padding: .55rem .5rem; transition: background .2s; }
a.ys-leader:hover { background: #faf6ef; }
a.ys-leader:hover .ys-leader-go { transform: translateX(3px); color: var(--color-primary); }
.ys-leader-go { margin-left: auto; color: #c6cdd4; font-weight: 800; transition: transform .2s, color .2s; }

/* breadcrumbs (on the dark page hero) */
.breadcrumbs { margin-top: 1.5rem; margin-bottom: 1.1rem; font-size: 1rem; font-family: var(--font-secondary); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.breadcrumbs li { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; }
.breadcrumbs li + li::before { content: '›'; color: rgba(255, 255, 255, .45); font-weight: 400; }
.breadcrumbs a { color: rgba(255, 255, 255, .65); font-weight: 600; transition: color .2s; }
.breadcrumbs a:hover { color: var(--color-primary); }

/* ── Bible study archive + study view ── */
.studies-controls { display: flex; gap: .7rem; }
.studies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 1000px) { .studies-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .studies-grid { grid-template-columns: 1fr; } }
.study-entry { display: flex; flex-direction: column; gap: .55rem; background: #fff; border-radius: 18px; padding: 1.6rem;
  box-shadow: 0 12px 28px rgba(20, 24, 29, .07); transition: transform .2s ease, box-shadow .2s ease; }
.study-entry:hover { transform: translateY(-5px); box-shadow: 0 20px 42px rgba(20, 24, 29, .12); }
.study-entry .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.study-entry .chip { font-size: .72rem; font-weight: 700; padding: .18rem .7rem; border-radius: 999px;
  background: #f1ece3; color: var(--color-secondary); }
.study-entry .chip.series { background: var(--color-secondary); color: #fff; }
.study-entry .chip.video { background: var(--primary-soft); color: var(--color-primary); }
.study-entry h3 { font-size: 1.2rem; }
.study-entry .passage { font-size: .85rem; font-weight: 700; color: var(--color-primary); }
.study-entry .summary { font-size: .9rem; color: #55606b;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.study-entry .more { margin-top: auto; padding-top: .5rem; font-weight: 700; font-size: .9rem; color: var(--color-secondary); }
.study-entry:hover .more { color: var(--color-primary); }

.study-view .container { max-width: var(--container-width); }
.sv-passage { background: #fff; border-left: 5px solid var(--color-primary); border-radius: 14px; padding: 1.8rem 2rem;
  box-shadow: 0 12px 28px rgba(20, 24, 29, .07); margin-bottom: 2rem; }
.sv-passage blockquote { font-family: var(--font-heading); font-size: 1.35rem; color: var(--color-secondary); line-height: 1.4; }
.sv-passage a { display: inline-block; margin-top: .8rem; font-weight: 700; font-size: .9rem; color: var(--color-primary); }
.sv-video { margin-bottom: 2rem; }
.sv-video video { width: 100%; display: block; }
.sv-body { max-width: 68ch; }
.sv-body h2 { font-size: 1.4rem; margin: 1.8rem 0 .6rem; }
.sv-questions { padding-left: 1.3rem; display: grid; gap: .6rem; }
.sv-takeaway { background: var(--primary-soft); border-radius: 14px; padding: 1.3rem 1.5rem; margin-top: 1.8rem; }
.sv-takeaway b { color: var(--color-primary); display: block; margin-bottom: .3rem; }
.sv-verse { display: flex; align-items: baseline; gap: .8rem; margin-top: 1.4rem; background: var(--color-secondary);
  color: #fff; border-radius: 14px; padding: 1.1rem 1.5rem; }
.sv-verse span { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #f3e6d8; }
.sv-verse b { font-family: var(--font-heading); font-size: 1.2rem; }
.study-detail-actions.center { justify-content: center; margin-top: 2.4rem; }

/* directions as a static grid (ministries page) instead of the carousel */
.directions-row.grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
.directions-row.grid .dcard { flex: none; }
@media (max-width: 1000px) { .directions-row.grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .directions-row.grid { grid-template-columns: 1fr; } .directions-row.grid .dcard { flex: none; } }

/* ── Community care & outreach ── */
.oc-help-strip { background: var(--color-primary); color: #fff; padding: 1.1rem 0; }
.oc-help-strip p { max-width: none; font-size: .98rem; text-align: center; }
.oc-help-strip a { font-weight: 800; text-decoration: underline; }
.oc-programmes { padding-top: 56px; }
.oc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 800px) { .oc-grid { grid-template-columns: 1fr; } }
.oc-card { display: grid; grid-template-columns: 40% 1fr; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 32px rgba(20, 24, 29, .08); transition: transform .2s ease; }
.oc-card:hover { transform: translateY(-5px); }
.oc-card img { width: 100%; height: 100%; object-fit: cover; }
.oc-card .body { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.oc-card h3 { font-size: 1.25rem; }
.oc-card p { font-size: .92rem; color: #55606b; }
.oc-card .meta { font-size: .82rem; font-weight: 700; color: var(--color-secondary); }
.oc-card .more { margin-top: auto; padding-top: .4rem; color: var(--color-primary); font-weight: 700; font-size: .9rem; }
.oc-impact { padding: 30px 0; }
.oc-story-card { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: center;
  background: #fff; border-radius: 20px; padding: 2rem; box-shadow: 0 14px 32px rgba(20, 24, 29, .08); max-width: 780px; margin: 0 auto; }
@media (max-width: 700px) { .oc-story-card { grid-template-columns: 1fr; } }
.oc-story-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.oc-story-card blockquote { font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-secondary); line-height: 1.45; }
.oc-story-card cite { display: block; font-family: var(--font-default); font-style: normal; font-size: .88rem;
  color: var(--color-primary); font-weight: 700; margin-top: .8rem; }
.oc-involve .card { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.oc-involve .card .btn { margin-top: auto; font-size: .88rem; padding: .55rem 1.4rem; }
.oc-detail-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
@media (max-width: 900px) { .oc-detail-cols { grid-template-columns: 1fr; } }
.oc-panel { background: #fff; border-radius: 16px; padding: 1.6rem; box-shadow: 0 12px 28px rgba(20, 24, 29, .07);
  display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.oc-panel.help { background: var(--primary-soft); }
.oc-panel h3 { font-size: 1.1rem; }
.oc-panel p { font-size: .92rem; color: #55606b; }
.oc-panel .btn { margin-top: auto; font-size: .88rem; padding: .55rem 1.4rem; }
.oc-req { font-size: .82rem !important; color: #8b949e !important; }
.oc-needs { list-style: none; display: grid; gap: .4rem; font-size: .92rem; color: #55606b; }
.oc-needs li::before { content: '✓ '; color: var(--color-accent); font-weight: 800; }
.oc-partners { font-size: .8rem !important; color: #8b949e !important; margin-top: auto; }
.oc-lead-link { color: var(--color-primary); font-weight: 700; }

/* ── Worship & praise page ── */
.wp-video { max-width: 820px; margin: 0 auto; }
.wp-video video { width: 100%; display: block; }
.wp-live { text-align: center; margin-top: 1.2rem; font-size: .95rem; }
.wp-live a { color: var(--color-primary); font-weight: 700; }
.wp-song-list { list-style: none; display: grid; gap: .7rem; max-width: 640px; }
.wp-song-list li { display: flex; align-items: center; gap: 1.1rem; background: #fff; border-radius: 14px; padding: .9rem 1.2rem;
  box-shadow: 0 10px 24px rgba(20, 24, 29, .06); }
.wp-song-list .num { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--color-primary);
  display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: 0 0 auto; }
.wp-song-list .info { display: grid; }
.wp-song-list .info b { color: var(--color-secondary); }
.wp-song-list .info small { color: #8b949e; font-size: .8rem; }
.wp-song-list .listen { margin-left: auto; font-weight: 700; font-size: .85rem; color: var(--color-primary); white-space: nowrap; }
.wp-ccli { margin-top: 1rem; font-size: .75rem; color: #a9b0b8; }
.wp-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
@media (max-width: 900px) { .wp-roles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .wp-roles { grid-template-columns: 1fr; } }

/* worship sidebar widgets */
.ws-songs { list-style: none; display: grid; gap: .55rem; }
.ws-songs li { display: flex; align-items: center; gap: .7rem; }
.ws-songs .num { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--color-primary);
  display: grid; place-items: center; font-weight: 800; font-size: .72rem; flex: 0 0 auto; }
.ws-songs .info { display: grid; line-height: 1.3; }
.ws-songs .info b { color: #fff; font-size: .88rem; }
.ws-songs .info small { color: #b9c2cc; font-size: .72rem; }
.ws-songs a { margin-left: auto; color: var(--color-primary); font-weight: 800; }
.ws-ccli { margin-top: .8rem; font-size: .68rem; color: #8b949e; }
.ws-times { list-style: none; display: grid; gap: .55rem; }
.ws-times li { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.ws-times b { color: var(--color-secondary); }
.ws-times span { color: #55606b; }
.ws-join-note { font-size: .88rem; color: #55606b; margin-bottom: .4rem; }

/* ── Worship page: NFT-dashboard template ── */
.wb-banner-sec { padding-top: 44px; }
.wb-banner { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; overflow: hidden;
  border-radius: 22px; padding: 2.6rem 2.4rem; color: #fff; min-height: 220px;
  background: linear-gradient(115deg, #f7a23b 0%, var(--color-primary) 55%, #b0186f 100%); }
.wb-banner h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 18ch; }
.wb-banner-actions { display: flex; gap: .8rem; margin-top: 1.4rem; }
.wb-btn { display: inline-block; font-weight: 700; font-size: .9rem; padding: .6rem 1.5rem; border-radius: 999px;
  border: 1.5px solid #fff; color: #fff; transition: all .2s; }
.wb-btn:hover { background: rgba(255, 255, 255, .15); }
.wb-btn.solid { background: #fff; color: var(--color-primary); }
.wb-btn.dark { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; padding: .55rem 1.3rem; }
.wb-btn.dark:hover { background: #000; }
.wb-banner > img { position: absolute; right: 0; top: 0; height: 100%; width: 42%; object-fit: cover; object-position: top;
  mix-blend-mode: luminosity; opacity: .9; -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
  mask-image: linear-gradient(to right, transparent, #000 30%); }
.wb-dots { position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); display: flex; gap: .4rem; }
.wb-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.wb-dots i.on { background: #fff; }

.wb-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.wb-row-head h2 { margin: 0; font-size: 1.5rem; }
.wb-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.wb-tabs button { font: inherit; font-size: .85rem; font-weight: 600; color: #8b949e; padding: .35rem 1rem; border-radius: 999px;
  border: 0; background: transparent; cursor: pointer; transition: all .2s; }
.wb-tabs button:hover { color: var(--color-secondary); }
.wb-tabs button.active { background: var(--primary-soft); color: var(--color-primary); }

.wb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 720px) { .wb-cards { grid-template-columns: 1fr; } }
.wb-card { background: #fff; border-radius: 18px; padding: 1rem; box-shadow: 0 14px 32px rgba(20, 24, 29, .08);
  display: flex; flex-direction: column; gap: .9rem; transition: transform .2s ease; }
.wb-card:hover { transform: translateY(-4px); }
.wb-card-media { position: relative; border-radius: 14px; overflow: hidden; }
.wb-card-media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.wb-heart { position: absolute; top: .7rem; right: .7rem; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: #fff; color: #d9d2c6; font-size: 1rem; cursor: pointer; transition: color .2s, transform .15s; }
.wb-heart:hover { transform: scale(1.1); }
.wb-heart.on { color: var(--color-primary); }
.wb-card-body { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0 .3rem; }
.wb-card-body h3 { font-size: 1.05rem; }
.wb-card-body p { font-size: .8rem; color: #8b949e; }
.wb-faces { display: flex; align-items: center; }
.wb-faces img, .wb-faces i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -9px; object-fit: cover; }
.wb-faces :first-child { margin-left: 0; }
.wb-faces i { background: var(--color-secondary); color: #fff; display: grid; place-items: center;
  font-style: normal; font-size: .58rem; font-weight: 800; }
.wb-card-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 .3rem .2rem; }
.wb-price { font-weight: 800; font-size: .88rem; color: var(--color-primary); }

/* sidebar: top leaders + history */
.ws-widget-head { display: flex; justify-content: space-between; align-items: baseline; }
.ws-seeall { font-size: .78rem; font-weight: 700; color: #8b949e; }
.ws-seeall:hover { color: var(--color-primary); }
.ws-creator { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; }
.ws-creator + .ws-creator { border-top: 1px solid #f1ece3; }
.ws-creator .rank { font-weight: 800; color: var(--color-secondary); width: 18px; }
.ws-creator-id { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ws-creator-id img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ws-creator-id b { display: block; font-size: .88rem; color: var(--color-secondary); }
.ws-creator-id small { color: #8b949e; font-size: .74rem; }
.ws-follow { margin-left: auto; font: inherit; font-size: .72rem; font-weight: 700; padding: .35rem .9rem; border-radius: 999px;
  border: 0; background: var(--primary-soft); color: var(--color-primary); cursor: pointer; transition: all .2s; }
.ws-follow.on { background: var(--color-primary); color: #fff; }
.ws-history { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
.ws-history + .ws-history { border-top: 1px solid #f1ece3; }
.ws-history img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.ws-history span { display: grid; min-width: 0; }
.ws-history b { font-size: .82rem; color: var(--color-secondary); }
.ws-history small { font-size: .72rem; color: #8b949e; }
.ws-history em { margin-left: auto; font-style: normal; font-size: .66rem; color: #b6bec6; white-space: nowrap; }

/* ── Media watch page: player + comments · related sidebar ── */
.media-player-sec .sermon-media.audio img { width: 100%; max-height: 340px; object-fit: cover; }
.media-comments h2 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.mc-form { display: grid; gap: .8rem; margin-bottom: 1.8rem; }
.mc-form input { max-width: 280px; }
.mc-form .row { display: flex; gap: .8rem; align-items: flex-start; }
.mc-form textarea { flex: 1; min-height: 64px; resize: vertical; }
.mc-form .btn { padding: .7rem 1.6rem; font-size: .9rem; }
.mc-item { display: flex; gap: .9rem; padding: .9rem 0; border-top: 1px solid #e9e2d6; }
.mc-item .avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--color-secondary);
  color: #fff; display: grid; place-items: center; font-weight: 800; }
.mc-item b { font-size: .9rem; color: var(--color-secondary); }
.mc-item em { font-style: normal; font-weight: 400; font-size: .76rem; color: #8b949e; }
.mc-item p { font-size: .92rem; color: #3d4650; }
.mr-item { display: flex; gap: .7rem; padding: .5rem 0; border-radius: 10px; }
.mr-item + .mr-item { border-top: 1px solid #f1ece3; }
.mr-item .thumb { position: relative; flex: 0 0 94px; border-radius: 10px; overflow: hidden; }
.mr-item .thumb img { width: 94px; height: 60px; object-fit: cover; }
.mr-item .thumb i { position: absolute; right: 4px; bottom: 4px; font-style: normal; font-size: .62rem;
  background: rgba(20, 24, 29, .85); color: #fff; border-radius: 6px; padding: .05rem .35rem; }
.mr-item .info { display: grid; align-content: start; min-width: 0; }
.mr-item .info b { font-size: .82rem; color: var(--color-secondary); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mr-item .info small { font-size: .7rem; color: #8b949e; margin-top: .15rem; }
.mr-item:hover .info b { color: var(--color-primary); }

/* ── Sermons section rebuild ── */
.sm-featured { padding-bottom: 0; }
.sm-hero-card { display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(20, 24, 29, .1); transition: transform .2s ease; }
.sm-hero-card:hover { transform: translateY(-4px); }
.sm-hero-card img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.sm-hero-card .body { padding: 2.4rem 2.4rem 3.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.sm-hero-card h2 { font-size: 1.8rem; margin: 0; }
.sm-hero-card .meta { font-size: .88rem; font-weight: 700; color: var(--color-primary); }
.sm-hero-card .sum { font-size: .98rem; color: #55606b; }
.sm-hero-card .btn { margin-top: auto; }
@media (max-width: 800px) { .sm-hero-card { grid-template-columns: 1fr; } }

.sm-series { padding-bottom: 0; }
.sm-series-strip { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.sm-series-card { display: flex; align-items: center; gap: .9rem; background: #fff; border: 2px solid transparent;
  border-radius: 16px; padding: .7rem 1.3rem .7rem .7rem; cursor: pointer; font: inherit; text-align: left;
  box-shadow: 0 10px 24px rgba(20, 24, 29, .07); transition: all .2s; }
.sm-series-card:hover { transform: translateY(-3px); }
.sm-series-card.active { border-color: var(--color-primary); }
.sm-series-card img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.sm-series-card b { display: block; color: var(--color-secondary); }
.sm-series-card small { color: #8b949e; font-size: .78rem; }

.sm-filters { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.8rem; align-items: center; }
.sm-search { flex: 1; min-width: 220px; max-width: 420px; font: inherit; font-size: .92rem; padding: .6rem 1rem;
  border: 1.5px solid #d9d2c6; border-radius: 999px; background: #fff; outline: none; }
.sm-search:focus { border-color: var(--color-primary); }
/* the global `select { width: 100% }` would push each dropdown onto its own row */
.sm-filters .gallery-sort { width: auto; flex: 0 0 auto; font-size: .92rem; padding: .6rem 2.2rem .6rem 1rem; border-radius: 999px; }
@media (max-width: 560px) { .sm-search, .sm-filters .gallery-sort { flex: 1 1 100%; max-width: none; } }
.sm-clear { font: inherit; font-size: .82rem; font-weight: 700; color: var(--color-primary); background: none; border: 0; cursor: pointer; }
.sm-empty { text-align: center; padding: 3rem 0; color: #55606b; }
.sm-empty button { font: inherit; color: var(--color-primary); font-weight: 700; background: none; border: 0; cursor: pointer; text-decoration: underline; }
.series-badge { position: absolute; left: .8rem; top: .8rem; background: rgba(20, 24, 29, .85); color: #fff;
  font-size: .7rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; }
.sm-media-icons { display: flex; gap: .5rem; font-size: .95rem; margin-top: .2rem; }

/* sermon detail */
.sd-series-badge { display: inline-block; background: rgba(255, 255, 255, .16); color: #fff; font-size: .8rem; font-weight: 700;
  padding: .3rem .9rem; border-radius: 999px; margin-bottom: .8rem; }
.sd-series-badge:hover { background: var(--color-primary); }
.sd-view .container { max-width: var(--container-width); }
.sd-tabs { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.sd-tabs button { font: inherit; font-weight: 700; font-size: .9rem; padding: .5rem 1.4rem; border-radius: 999px;
  border: 1.5px solid #d9d2c6; background: #fff; cursor: pointer; transition: all .2s; }
.sd-tabs button.active { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.sd-media { position: relative; }
.sd-facade { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; }
.sd-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.sd-audio { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 36px rgba(20, 24, 29, .1); }
.sd-audio img { width: 100%; max-height: 320px; object-fit: cover; }
.sd-audio .controls { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; }
.sd-audio audio { flex: 1; }
.sd-audio .speed { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: var(--color-secondary); }
.sd-audio .speed select { font: inherit; font-size: .82rem; padding: .25rem .5rem; border-radius: 8px; border: 1.5px solid #d9d2c6; }
.sd-body { max-width: 70ch; margin: 2rem 0 0; }
.sd-body p { line-height: 1.85; margin-bottom: 1.2rem; }
.sd-attachments { margin-top: 2.2rem; }
.sd-attachments h3 { margin-bottom: .8rem; }
.sd-file { display: flex; align-items: baseline; gap: .6rem; font-weight: 700; color: var(--color-secondary);
  padding: .6rem 0; border-bottom: 1px solid #e9e2d6; }
.sd-file:hover { color: var(--color-primary); }
.sd-file small { color: #8b949e; font-weight: 400; }
.sd-share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 2.2rem; font-weight: 700; }
.sh { font: inherit; font-size: .82rem; font-weight: 700; padding: .45rem 1.1rem; border-radius: 999px; border: 0; cursor: pointer; color: #fff; }
.sh.wa { background: #25d366; }
.sh.fb { background: #1877f2; }
.sh.x { background: #14181d; }
.sh.copy { background: var(--primary-soft); color: var(--color-primary); }
.sd-series-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.4rem;
  border-top: 1px solid #e9e2d6; padding-top: 1.4rem; }
.sd-series-nav a { display: grid; font-weight: 700; color: var(--color-secondary); }
.sd-series-nav a:hover { color: var(--color-primary); }
.sd-series-nav small { font-weight: 400; color: #8b949e; font-size: .78rem; }
.sd-series-nav .next { text-align: right; }
.sd-related { margin-top: 3rem; }
.sd-related h2 { margin-bottom: 1.4rem; }

/* hero copy wrapper (PageHeroContent) */
.page-hero-content { margin-top: 1rem; }

/* ── Main menu dropdowns ── */
.nav-item { position: relative; }
.nav-item .caret { font-size: .7em; opacity: .7; }
.dropdown { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); min-width: 210px;
  background: #fff; border-radius: 14px; padding: .6rem; box-shadow: 0 18px 44px rgba(20, 24, 29, .16);
  display: grid; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease; z-index: 60; }
.dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } /* hover bridge */
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 2px); }
.dropdown a { display: block; padding: .5rem .9rem; border-radius: 9px; font-size: .92rem; font-weight: 600;
  color: var(--color-default) !important; white-space: nowrap; }
.dropdown a:hover { background: var(--primary-soft); color: var(--color-primary) !important; }
/* the submenu entry for the page you are on */
.dropdown a.active { background: var(--color-primary); color: #fff !important; }
.mm-sub a.active { color: var(--color-primary) !important; font-weight: 800; }

/* mobile submenu accordion */
.mm-row { display: flex; align-items: center; }
.mm-row a { flex: 1; }
.mm-toggle { font: inherit; border: 0; background: none; color: var(--color-secondary); width: 40px; height: 40px;
  cursor: pointer; transition: transform .25s ease; }
.mm-toggle.open { transform: rotate(180deg); color: var(--color-primary); }
.mm-sub { display: grid; padding-left: 1rem; border-left: 2px solid var(--primary-soft); margin: 0 0 .4rem .3rem; }
.mm-sub a { padding: .5rem 0; font-size: .92rem; font-weight: 500; color: #55606b; border-bottom: 0 !important; }
.mm-sub a:hover { color: var(--color-primary); }


/* ── Contact page (info card · form panel · map) ── */
.ct-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.8rem; align-items: start; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } }
.ct-info { background: #fff; border-radius: 20px; padding: 2rem; box-shadow: 0 14px 32px rgba(20, 24, 29, .08); }
.ct-info h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.ct-intro { font-size: .9rem; color: #55606b; padding-bottom: 1.1rem; border-bottom: 1px solid #f1ece3; }
.ct-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid #f1ece3; }
.ct-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ct-row .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); display: grid; place-items: center;
  font-size: 1.15rem; flex: 0 0 auto; }
.ct-row b { display: block; font-size: .95rem; color: var(--color-secondary); }
.ct-row a, .ct-row p { font-size: 1.25rem; color: #55606b; }
.ct-row a:hover { color: var(--color-primary); }

.ct-form-panel { background: #fdf1e9; border-radius: 20px; padding: 2.4rem; }
.ct-chip { display: inline-block; background: #fff; border-radius: 999px; padding: .4rem 1.1rem; font-size: .82rem;
  font-weight: 700; color: var(--color-secondary); box-shadow: 0 8px 20px rgba(20, 24, 29, .08); margin-bottom: 1rem; }
.ct-chip::first-letter { color: var(--color-primary); }
.ct-form-panel h2 { margin-bottom: .4rem; }
.ct-sub { font-size: .92rem; color: #55606b; margin-bottom: 1.6rem; max-width: 52ch; }
.ct-form { display: grid; gap: 1rem; }
.ct-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .ct-form .row { grid-template-columns: 1fr; } }
.ct-form input, .ct-form select, .ct-form textarea { background: transparent; border: 1px solid #e4cfc0; border-radius: 10px;
  padding: .8rem 1rem; font: inherit; font-size: .92rem; outline: none; width: 100%; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { border-color: var(--color-primary); }
.ct-form textarea { min-height: 130px; resize: vertical; }
.ct-send { justify-self: start; display: inline-flex; align-items: center; gap: .6rem; }
.ct-send .arrow { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--color-primary);
  display: grid; place-items: center; font-size: .85rem; }
.ct-thanks { display: grid; gap: 1rem; justify-items: start; }

.ct-map-sec { padding-top: 0; }
.ct-map-sec .section-head h2 { max-width: 22ch; margin: auto; margin-right: auto; }
.ct-map { border-radius: 20px; overflow: hidden; box-shadow: 0 16px 36px rgba(20, 24, 29, .1); }
.ct-map iframe { width: 100%; height: 420px; border: 0; display: block; }

/* breadcrumbs on light backgrounds (e.g. the leadership profile hero) */
.breadcrumbs.dark li { color: var(--color-secondary); }
.breadcrumbs.dark li + li::before { color: #b6aa98; }
.breadcrumbs.dark a { color: #8b949e; }
.breadcrumbs.dark a:hover { color: var(--color-primary); }

/* home page: all buttons use the primary color */
.home .btn.dark, .home .btn.blue, .home .btn.light {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.home .btn.ghost { background: transparent; color: var(--color-bg); border-color: var(--color-bg); box-shadow: none; }

/* submenu ministry icons */
.dropdown .mi-icon, .mm-sub .mi-icon { display: inline-block; width: 1.4em; margin-right: .35em; text-align: center; }

/* event countdown chip */
.event-countdown {
  display: inline-block; align-self: flex-start; margin-bottom: .5rem;
  padding: .25rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary);
}

/* form submit error */
.form-error { color: #c0392b; font-size: .85rem; font-weight: 600; margin: -.3rem 0 .2rem; }

/* ── book store ── */
.bookstore { padding: 5rem 0; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.6rem; margin-top: 2rem; }
.bs-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(20, 24, 29, .08); display: flex; flex-direction: column; }
.bs-cover { position: relative; aspect-ratio: 4 / 3; }
.bs-cover img { width: 100%; height: 100%; object-fit: cover; }
.bs-cat { position: absolute; top: .8rem; left: .8rem; padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: rgba(255, 255, 255, .92); color: var(--color-secondary, #14181d); }
.bs-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.bs-body h3 { font-size: 1.05rem; }
.bs-body p { font-size: .88rem; color: #4d5661; flex: 1; }
.bs-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; }
.bs-price { font-size: 1.05rem; color: var(--color-primary); }
.bs-fulfilment { display: grid; gap: .4rem; }

/* ── giving page ── */
.giving-page { padding: 5rem 0; }
.giving-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .giving-grid { grid-template-columns: 1fr; } }
.giving-panel { padding: 2.2rem; }
.giving-amounts { display: flex; flex-wrap: wrap; gap: .6rem; }
.giving-amt { padding: .7rem 1.2rem; border-radius: 999px; border: 2px solid var(--color-primary); background: #fff; color: var(--color-primary); font-weight: 800; font-size: 1rem; cursor: pointer; transition: background .15s, color .15s; }
.giving-amt.on, .giving-amt:hover { background: var(--color-primary); color: #fff; }
.giving-custom { width: 7.5rem; padding: .7rem 1rem; border-radius: 999px; border: 2px solid #d8dde3; font-weight: 700; }
.giving-fine { font-size: .8rem; color: #6b7480; }
.giving-thanks h3 { margin-bottom: .4rem; }
.giving-ways { display: grid; gap: 1.4rem; align-content: start; }
.giving-way { display: flex; gap: 1rem; background: #fff; border-radius: 16px; padding: 1.2rem 1.4rem; box-shadow: 0 8px 22px rgba(20, 24, 29, .07); }
.giving-way .icon { font-size: 1.6rem; }
.giving-way h3 { font-size: 1rem; margin-bottom: .25rem; }
.giving-way p { font-size: .88rem; color: #4d5661; }
.giving-verse { font-style: italic; color: #4d5661; border-left: 3px solid var(--color-primary); padding-left: 1rem; font-size: .95rem; }
.giving-verse cite { display: block; margin-top: .4rem; font-weight: 700; font-style: normal; }

/* hero live strip (replaces the building-fund bar) */
.hero-live { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.7rem; font-weight: 700; font-size: .95rem; color: #f3e6d8; }
.hero-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #05ec3f; box-shadow: 0 0 0 4px rgba(4, 235, 81, 0.25); animation: hero-live-pulse 1.6s ease-in-out infinite; }
@keyframes hero-live-pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 77, 77, .08); } }

/* sermon / study pages: the description above the media, uploaded video files */
.sd-summary { font-size: 1.15rem; line-height: 1.6; color: #55606b; max-width: 760px; margin: 0 0 1.6rem; }
.sd-media video { width: 100%; height: 100%; display: block; background: #000; border-radius: inherit; }
.study-byline { font-size: .85rem; color: #8a929b; margin-top: .4rem; }

/* ── Ministry page sidebar components (Ministry Leaders / Events / Verse / Prayer) ── */
.ms-block:not(.ms-inline) { display: contents; }
.ms-inline { padding: 0 0 3rem; }
.ms-inline .ms-card { max-width: 420px; margin: 0 auto; }
.ms-card { background: #fff; border-radius: 22px; padding: 1.5rem 1.4rem; box-shadow: 0 14px 34px rgba(20, 24, 29, .08); }
.ms-title { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-secondary); margin-bottom: .9rem; }
.ms-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; font-weight: 700; color: var(--color-primary); }
.ms-empty { border: 2px dashed color-mix(in srgb, var(--color-primary) 45%, transparent); box-shadow: none; background: #fff; }
.ms-empty-note { font-size: .9rem; line-height: 1.5; color: #8a929b; }