/* ============================================================
   Ministry Website — Modern Glass Morphism Design
   ============================================================ */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #2b2b2b;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 50%, #fff3e0 100%);
  background-attachment: fixed;
  line-height: 1.6;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
h1,h2,h3,h4 { line-height: 1.2; margin: 0 0 1rem; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }

/* ── CSS variables ── */
:root {
  --green:  #2C5F2E;
  --gold:   #d4a574;
  --red:    #c0392b;
  --dark:   #1a1a1a;
  --light:  #f9f6f1;
  --border: #e8e4de;
  --text:   #2b2b2b;
  --muted:  #666;
  --radius: 16px;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.7);
  --shadow-soft: 0 8px 32px rgba(31, 38, 135, 0.15);
  --shadow-medium: 0 12px 48px rgba(31, 38, 135, 0.25);
  --shadow-strong: 0 20px 60px rgba(31, 38, 135, 0.35);
}

/* ── Container ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: .875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  white-space: normal;
  word-break: break-word;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: translate(-50%, -50%);
  transition: width .6s, height .6s;
}
.btn:hover::before {
  width: 300px;
  height: 300px;
}
.btn-primary   { 
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  color: #fff; 
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(192, 57, 43, 0.4);
}
.btn-primary:hover { 
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(192, 57, 43, 0.5);
}
.btn-green-call {
  background: linear-gradient(135deg, #2C5F2E 0%, #3a7d3c 100%) !important;
  box-shadow: 0 4px 15px rgba(44, 95, 46, 0.4) !important;
}
.btn-green-call:hover {
  box-shadow: 0 6px 20px rgba(44, 95, 46, 0.5) !important;
  background: linear-gradient(135deg, #3a7d3c 0%, #4a9d4e 100%) !important;
}
.btn-secondary { 
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  color: var(--red); 
  border: 2px solid rgba(192, 57, 43, 0.5);
}
.btn-secondary:hover { 
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--red);
  transform: translateY(-2px);
}
.btn-gold { 
  background: linear-gradient(135deg, #d4a574 0%, #f4c794 100%);
  color: #fff; 
  box-shadow: 0 4px 15px rgba(212, 165, 116, 0.4);
}
.btn-gold:hover { 
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 165, 116, 0.5);
}
.btn-outline-gold { 
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  color: var(--gold); 
  border: 2px solid rgba(212, 165, 116, 0.6);
}
.btn-outline-gold:hover { 
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.btn-telegram  { 
  background: linear-gradient(135deg, #0088cc 0%, #00a0e9 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
}
.btn-telegram:hover { 
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 136, 204, 0.5);
}
.btn-instagram  { 
  background: linear-gradient(135deg, #E4405F 0%, #F56040 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(228, 64, 95, 0.4);
}
.btn-instagram:hover { 
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(228, 64, 95, 0.5);
}
.social-icons {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.social-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .social-buttons {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .social-buttons .btn {
    width: 200px;
  }
}

/* ── Header / Nav ── */
.site-header {
  position: sticky; top: 0; z-index: 999;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  transition: all .3s ease;
}
.site-header.scrolled { 
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
}
.site-header .container {
  display: flex; align-items: center;
  justify-content: space-between; height: 80px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}
.header-verse {
  display: none;
}
.site-logo {
  font-size: 1.3rem; font-weight: 700;
  color: var(--green); 
  display: flex; align-items: center; gap: .75rem;
  transition: transform .3s ease;
  flex-shrink: 0;
}
.site-logo:hover { 
  color: var(--gold);
  transform: scale(1.05);
}
.site-logo__img {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(44, 95, 46, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: all .3s ease;
}
.site-logo:hover .site-logo__img {
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}
.nav-links {
  display: flex; align-items: center; gap: 32px;
}
.nav-links a {
  color: #444; font-size: .95rem; font-weight: 600;
  padding: 8px 16px;
  position: relative;
  transition: all .3s ease;
  border-radius: 8px;
}
.nav-links a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  border-radius: 3px;
  transition: width .3s ease;
}
.nav-links a:hover, .nav-links a.active { 
  color: var(--green);
  background: rgba(44, 95, 46, 0.08);
}
.nav-links a:hover::before, .nav-links a.active::before { 
  width: 80%;
}
.header-social {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.header-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all .3s ease;
  background: rgba(255, 255, 255, 0.5);
}
.header-social a:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.header-social svg {
  width: 20px;
  height: 20px;
}
.hamburger {
  display: none; flex-direction: column; gap: 6px;
  width: 44px; height: 44px; padding: 10px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border: none; cursor: pointer; border-radius: 8px;
  transition: all .3s ease;
}
.hamburger:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}
.hamburger span {
  display: block; width: 24px; height: 3px;
  background: #333; border-radius: 3px;
  transition: all .3s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── Footer ── */
.site-footer {
  background: #111;
  color: #bdbdbd;
  padding: 3rem 0 1.5rem;
  margin-top: 0;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .container {
  max-width: 1100px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Brand column ---------------------------------------------------- */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-brand__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.footer-brand__logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-brand__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
}
.footer-brand__tagline {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #8e8e8e;
  margin: 0;
  max-width: 280px;
}

/* --- Column headings ------------------------------------------------- */
.footer-col__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8e8e8e;
  margin: 0 0 1rem;
}

/* --- Nav column ------------------------------------------------------ */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav a {
  color: #d1d1d1;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.footer-nav a:hover {
  color: #fff;
}

/* --- Connect column -------------------------------------------------- */
.footer-connect__icons {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.footer-connect__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.footer-connect__icon svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}
.footer-connect__icon:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.footer-connect__icon:hover svg {
  transform: scale(1.1);
}
.footer-connect__contact {
  font-size: 0.875rem;
  color: #d1d1d1;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.footer-connect__contact:hover {
  color: #fff;
}

/* --- Bottom bar ------------------------------------------------------ */
.footer-bottom {
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: #666;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom a {
  color: #666;
  transition: color 0.2s ease;
}
.footer-bottom a:hover {
  color: #bdbdbd;
}
.footer-bottom__links {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: left;
  }
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
  .footer-bottom__links {
    order: -1;
  }
}

/* ── Daily Content Banner ── */
.daily-content-banner {
  background: linear-gradient(135deg, rgba(44,95,46,0.95) 0%, rgba(44,95,46,0.9) 100%);
  backdrop-filter: blur(10px);
  padding: 2.5rem 0;
  position: relative;
  overflow: hidden;
}
.daily-content-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="verses" width="100" height="100" patternUnits="userSpaceOnUse"><text x="20" y="30" font-size="8" fill="rgba(255,255,255,0.05)" font-family="serif">✝</text><text x="70" y="70" font-size="6" fill="rgba(255,255,255,0.03)" font-family="serif">📖</text></pattern></defs><rect width="100" height="100" fill="url(%23verses)"/></svg>');
  opacity: 0.3;
}
.daily-content-banner__content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 2rem 2.5rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.daily-content-banner__label {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}
.daily-content-banner__text {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  line-height: 1.7;
  color: #fff;
  font-style: italic;
  margin: 0 0 1rem;
  quotes: """ """ "'" "'";
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.daily-content-banner__reference {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.daily-content-banner__actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  align-items: center;
}
.daily-content-banner__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
.btn-content-action {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 0.625rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all .3s ease;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  font-family: inherit;
}
.btn-content-action:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}
.btn-content-action span {
  font-size: 1.125rem;
}

/* ── Section helpers ── */
.section { padding: 6rem 0; position: relative; }
.section--light { 
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(249,246,241,0.4) 100%);
}
.section--white { 
  background: rgba(255, 255, 255, 0.3);
}
/* .section--bible-says is the original site-wide pattern for verse-
   centered intermezzo sections. The about-page no longer uses it
   (the Matthew 7:7-8 verse is folded into .who-is-jesus-hero
   below), but other pages may still import this style, so it stays
   in its original green-gradient form here. */
.section--bible-says {
  background: linear-gradient(135deg, rgba(44,95,46,0.95) 0%, rgba(44,95,46,0.9) 100%);
  position: relative;
  overflow: hidden;
}
.section--bible-says::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="bible-pattern" width="100" height="100" patternUnits="userSpaceOnUse"><text x="20" y="30" font-size="8" fill="rgba(255,255,255,0.05)" font-family="serif">✝</text><text x="70" y="70" font-size="6" fill="rgba(255,255,255,0.03)" font-family="serif">📖</text></pattern></defs><rect width="100" height="100" fill="url(%23bible-pattern)"/></svg>');
  opacity: 0.3;
}
.section--bible-says .container {
  position: relative;
  z-index: 2;
}
.section--bible-says .section-title {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.section--bible-says .section-title::after {
  background: linear-gradient(90deg, var(--gold), rgba(255,255,255,0.8));
}
.section--bible-says blockquote {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px);
  border-left-color: var(--gold) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.section--bible-says .bible-highlight {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 2.2;
  font-style: italic;
  margin: 0 0 1.5rem;
  font-weight: 400;
  color: #1a1a1a;
  background: linear-gradient(180deg, transparent 0%, transparent 25%, rgba(255, 255, 102, 0.7) 25%, rgba(255, 255, 102, 0.7) 90%, transparent 90%, transparent 100%);
  padding: 0.5rem 1rem;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border: none;
}
.section--bible-says .bible-reference {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  font-style: normal;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  margin-top: 1rem;
}

/* ── About-page combined "Who is Jesus?" hero + Matthew 7:7-8 verse ──
   Single full-bleed section on stw-background-1920x1080.jpg with a
   soft dark scrim. Page title at the top, "The Bible says..." gold
   eyebrow underneath, Matthew 7:7-8 with a yellow highlighter-pen
   effect at center, and "— Matthew 7:7-8 NIV" in gold below. No
   internal seam. */
.who-is-jesus-hero {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 0 6rem;
  background-image: url('../images/backgrounds/stw-background-1920x1080.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  overflow: hidden;
}
.who-is-jesus-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.65) 100%);
  z-index: 1;
  pointer-events: none;
}
.who-is-jesus-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
  color: #fff;
}
.who-is-jesus-hero__title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  margin: 0 0 1.5rem;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  letter-spacing: -0.01em;
}
.who-is-jesus-hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 1.75rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.who-is-jesus-hero__verse {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.who-is-jesus-hero__verse p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 2;
  font-style: italic;
  color: #1a1a1a;
  background: linear-gradient(180deg, transparent 0%, transparent 22%, rgba(255, 255, 102, 0.92) 22%, rgba(255, 255, 102, 0.92) 90%, transparent 90%, transparent 100%);
  padding: 0.4rem 0.8rem;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin: 0;
}
.who-is-jesus-hero__verse cite {
  display: block;
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: normal;
  color: var(--gold);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .who-is-jesus-hero {
    min-height: 70vh;
    padding: 3.5rem 0 4rem;
  }
  .who-is-jesus-hero__verse p {
    font-size: clamp(1rem, 4vw, 1.25rem);
    line-height: 1.95;
  }
}
.section--jesus-background {
  background-image: url('../images/backgrounds/john-3-16.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  padding: 6rem 0;
}
.section--jesus-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
}
.section--jesus-background .container {
  position: relative;
  z-index: 2;
}
.section--jesus-background .section-title {
  color: var(--text);
  text-shadow: 0 2px 8px rgba(255,255,255,0.8);
}
.jesus-content-box {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #3a3a3a;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 3rem 3.5rem;
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.2);
}

/* ── AboutGospelSection: gospel-stage layout (Requirements 6, 9) ── */

.gospel-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin: 0 0 3rem;
  padding: 1.5rem 0;
}

.gospel-stage:last-child {
  margin-bottom: 0;
}

/* Alternate the layout: odd stages put the media on the left, even stages
   put it on the right. CSS source order is always media-then-copy; we flip
   which column it lives in via `direction` for accessibility. */
.gospel-stage:nth-child(even) .gospel-stage__media {
  order: 2;
}

.gospel-stage__media {
  margin: 0;
}

.gospel-stage__media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.18);
  display: block;
}

.gospel-stage__copy h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  color: var(--green);
  margin: 0 0 1rem;
}

.gospel-stage__copy p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #3a3a3a;
}

/* Reuse the existing about-page blockquote pattern (subtle green-left
   border, soft green background). Requirement 9.3. */
.gospel-stage__quote {
  background: rgba(44, 95, 46, 0.08);
  border-left: 4px solid var(--green);
  padding: 1.25rem 1.75rem;
  border-radius: 8px;
  margin: 1.25rem 0;
  font-style: italic;
}

.gospel-stage__quote p {
  margin: 0 0 0.5rem;
  font-weight: 400;
  color: #2b2b2b;
  font-style: italic;
}

.gospel-stage__quote cite {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green);
  font-style: normal;
}

/* Respond stage: full-width invitation card (no media column) */
.gospel-stage--respond {
  grid-template-columns: 1fr;
  text-align: center;
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.06) 0%, rgba(212, 165, 116, 0.06) 100%);
  border: 2px solid rgba(44, 95, 46, 0.18);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  margin-top: 2.5rem;
}

.gospel-stage--respond h3 {
  color: var(--green);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.gospel-stage--respond .invitation-cta__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #2b2b2b;
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

/* Softer, smaller variant for transitional sentences inside the
   Respond stage (e.g. "When you are ready, simply pray..."). */
.gospel-stage--respond .invitation-cta__lead--soft {
  font-size: 0.9875rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

/* "Voice of Jesus" blockquotes — softer, more letter-like than the
   gospel-stage scripture cards. Cream wash, gold accent line, serif
   italic body. Used inside the Respond stage to amplify Christ's
   own invitation. */
.gospel-stage--respond .invitation-cta__voice {
  max-width: 640px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.10) 0%, rgba(212, 165, 116, 0.04) 100%);
  border: 1px solid rgba(212, 165, 116, 0.35);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  text-align: left;
}
.gospel-stage--respond .invitation-cta__voice p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  font-style: italic;
  color: #2b2b2b;
  margin: 0 0 0.75rem;
}
.gospel-stage--respond .invitation-cta__voice cite {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  font-style: normal;
  color: var(--green);
  letter-spacing: 0.04em;
}

/* The suggested prayer — even softer than the voice block. Plain
   centered serif italic with a subtle white-cream background to
   set it apart from the surrounding prose without shouting. */
.gospel-stage--respond .invitation-cta__prayer {
  max-width: 640px;
  margin: 0.5rem auto 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(44, 95, 46, 0.18);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.gospel-stage--respond .invitation-cta__prayer p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--green);
  text-align: center;
  margin: 0;
}

.gospel-stage--respond .invitation-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

.gospel-stage--respond .invitation-cta__fallback {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--muted);
  font-style: italic;
}

/* Mobile: single column, image height capped at 50vh (Requirement 6.7, 6.8) */
@media (max-width: 767px) {
  .gospel-stage {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 0 0 1.5rem;
  }

  .gospel-stage:nth-child(even) .gospel-stage__media {
    order: 0; /* on mobile, media always sits above copy regardless of parity */
  }

  .gospel-stage__media img {
    max-height: 50vh;
    object-fit: cover;
  }

  /* Vertical spacing requirement 6.7 */
  .gospel-stage + .gospel-stage {
    margin-top: 1.5rem;
  }
}

/* ── Gospel image credits — discreet collapsed disclosure ─────── */
.gospel-credits {
  margin: 2rem auto 0;
  max-width: 760px;
  font-size: 0.875rem;
  color: var(--muted);
  border-top: 1px solid rgba(44, 95, 46, 0.18);
  padding-top: 1.25rem;
}
.gospel-credits > summary {
  cursor: pointer;
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--green);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}
.gospel-credits > summary::-webkit-details-marker { display: none; }
.gospel-credits > summary::before {
  content: '▸';
  font-size: 0.75rem;
  transition: transform 0.18s ease-out;
}
.gospel-credits[open] > summary::before { transform: rotate(90deg); }
.gospel-credits ul {
  margin: 0.75rem 0 0;
  padding-left: 1.5rem;
  line-height: 1.7;
}
.gospel-credits li {
  margin-bottom: 0.45rem;
}
.gospel-credits a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.gospel-credits a:hover { text-decoration-thickness: 2px; }

@media (max-width: 767px) {
  .gospel-credits {
    font-size: 0.8125rem;
  }
}

.section-title {
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 3rem;
  color: var(--text);
  font-weight: 800;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  border-radius: 2px;
}

/* ── Hero (shared) ── */
.hero {
  position: relative; width: 100%;
  min-height: 80vh; display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3a1a0a 0%, #7b3f1e 100%);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  overflow: hidden;
}
.hero--short { min-height: 50vh; }
.hero--fullscreen { 
  min-height: 100vh; 
  background-attachment: fixed;
}
.hero--jesus {
  min-height: 100vh;
  background-image: url('../images/backgrounds/stw-background-1920x1080.jpg');
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero--jesus::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

/* ── HomeHero decorative video (Requirements 2, 3) ───────────── */

/* The existing .hero--jesus::before pseudo-element renders the dark gradient.
   We add an explicit .hero__overlay-gradient div with the same gradient so
   stacking order is unambiguous when the <video> is present. */
.hero--jesus .hero__overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.30) 50%, rgba(0,0,0,.45) 100%);
  z-index: 1;
  pointer-events: none;
}

/* The decorative video sits behind the gradient and behind the welcome text.
   object-fit: cover makes it full-bleed at any aspect ratio between 320 and
   1920 CSS pixels (Requirement 2.9). */
.hero--jesus .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  /* Safari sometimes paints a pale flash on first frame; this masks it. */
  background: #1a1a1a;
  /* aria-hidden video is decorative; remove from tab order in case a UA
     surfaces it. */
  pointer-events: none;
}

/* The welcome text and CTA must sit above both the video and the gradient. */
.hero--jesus .hero__content--simple {
  position: relative;
  z-index: 2;
}

/* Honour reduced-motion at the CSS layer too — even if JS hasn't run yet,
   the autoplay attribute remains, but most engines respect this hint to
   suspend animations. The JS layer (below) is the source of truth and
   actively pauses the video. */
@media (prefers-reduced-motion: reduce) {
  .hero--jesus .hero__video {
    /* Keep the poster visible; hide the video element so it doesn't consume
       paint cycles even when paused. */
    display: none;
  }
}

/* iOS Safari fix (Requirement 3.6): background-attachment: fixed thrashes
   on iOS Safari. The existing .hero--jesus background-image is what shows
   when the <video> hasn't decoded yet, so we must NOT use a fixed
   attachment under 768 px. The body-level rule already declares
   background-attachment: fixed, so we override here for the hero. */
@media (max-width: 767px) {
  .hero--jesus {
    background-attachment: scroll;
  }
}

.hero__content--simple {
  position: relative;
  z-index: 2;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 2rem;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero__text {
  color: #fff;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.hero__text--intro {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  font-style: italic;
  font-family: 'Times New Roman', Times, serif;
  text-shadow: 0 2px 15px rgba(0,0,0,.8);
  margin: 0.125rem 0;
}
.hero__text--main {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  font-style: normal;
  font-family: 'Times New Roman', Times, serif;
  text-shadow: 0 3px 20px rgba(0,0,0,.9);
  margin: 0.125rem 0;
}
.hero__text--name {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 900;
  font-style: normal;
  font-family: 'Arial Black', Arial, sans-serif;
  text-shadow: 0 3px 20px rgba(0,0,0,.9);
  margin: 0.125rem 0;
}
.hero__cross {
  display: inline-block;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--gold);
  margin: 0 0.25rem;
  text-shadow: 0 2px 15px rgba(0,0,0,.8);
  font-weight: normal;
}
.hero--home    { 
  background-image: url('../images/backgrounds/stw-background.jpg'); 
  background-position: center top;
}
.hero--about   { background-image: url('../images/backgrounds/bible-in-background.jpg'); }
.hero--bundles { background-image: url('../images/backgrounds/gideon-background.jpg'); }
.hero--donate  { background-image: url('../images/backgrounds/john-3-16.jpg'); }
.hero--testimonies { background-image: url('../images/backgrounds/bible-in-background.jpg'); }
.hero--contact { background-image: url('../images/backgrounds/john-3-16.jpg'); background-position: center top; }
.hero--builder { background-image: url('../images/backgrounds/bible-ministry-1.jpg'); }
.hero__overlay { 
  position: absolute; inset: 0; 
  background: linear-gradient(135deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.2) 100%);
}
.hero__content {
  position: relative; z-index: 2;
  text-align: center; color: #fff;
  padding: 3rem 32px; max-width: 900px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.hero__content--no-bg {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 2rem 32px;
}
.hero__title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 4px 20px rgba(0,0,0,.8);
}
.hero__tagline {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 400;
  font-style: italic;
  margin: 1rem 0 0;
  opacity: 0.95;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.btn-jesus {
  background: #4CAF50;
  color: #fff;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  box-shadow: none;
  transition: all .3s ease;
  border: none;
  margin-top: 1.5rem;
  display: inline-block;
}
.btn-jesus:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
.btn-jesus:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(76, 175, 80, 0.5);
  background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
}
.hero__scroll-indicator {
  position: relative;
  margin-top: 2rem;
  z-index: 3;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all .3s ease;
  text-decoration: none;
  color: rgba(255,255,255,.9);
}
.hero__scroll-indicator:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-5px);
}
.hero__scroll-indicator span {
  font-size: 2rem;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-12px); }
  60% { transform: translateX(-50%) translateY(-6px); }
}

/* ── Photo strip ── */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.photo-strip__item {
  aspect-ratio: 4/3; overflow: hidden; position: relative;
}
.photo-strip__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(44,95,46,0.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .4s ease;
}
.photo-strip__item:hover::after {
  opacity: 1;
}
.photo-strip__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
  display: block;
}
.photo-strip__item:hover img { transform: scale(1.1); }

/* ── Team photo ── */
.team-photo-wrap {
  max-width: 900px; margin: 0 auto 3rem;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  border: 3px solid rgba(255, 255, 255, 0.5);
}
.team-photo-wrap img { width: 100%; height: auto; display: block; }

/* ── Ministry gallery (stitch logo grid) ── */
.ministry-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}
.ministry-gallery__item {
  aspect-ratio: 1/1; overflow: hidden; border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,.15);
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: all .4s ease;
}
.ministry-gallery__item:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.ministry-gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
  display: block;
}
.ministry-gallery__item:hover img { transform: scale(1.15); }

/* ── S.E.E.D. Interactive Grid ── */
.seed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.seed-tile {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255, 255, 255, 0.4);
  /* Mobile: remove 300ms tap delay and suppress blue tap-highlight */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.seed-tile:hover,
.seed-tile:focus-within,
.seed-tile.seed-tile--open {
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
  transform: translateY(-8px) scale(1.02);
}
.seed-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all .5s ease;
}
.seed-tile:hover img,
.seed-tile:focus-within img,
.seed-tile.seed-tile--open img {
  opacity: 0.2;
  transform: scale(1.1);
}
.seed-tile__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(44,95,46,.5) 0%, rgba(44,95,46,.4) 100%);
  backdrop-filter: blur(5px);
  padding: 1.5rem;
  text-align: center;
  transition: all .5s ease;
  pointer-events: none;
}
.seed-tile:hover .seed-tile__label,
.seed-tile:focus-within .seed-tile__label,
.seed-tile.seed-tile--open .seed-tile__label {
  opacity: 0;
  transform: scale(0.9);
}
.seed-tile__label-letter {
  font-size: 3rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-bottom: .75rem;
  display: block;
  text-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.seed-tile__label-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  display: block;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.seed-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(44,95,46,.97) 0%, rgba(44,95,46,.95) 100%);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transition: all .5s ease;
  overflow-y: auto;
}
.seed-tile:hover .seed-tile__overlay,
.seed-tile:focus-within .seed-tile__overlay,
.seed-tile.seed-tile--open .seed-tile__overlay {
  opacity: 1;
}
.seed-tile__content {
  text-align: center;
  color: #fff;
  transform: translateY(20px);
  transition: transform .5s ease .1s;
}
.seed-tile:hover .seed-tile__content,
.seed-tile:focus-within .seed-tile__content,
.seed-tile.seed-tile--open .seed-tile__content {
  transform: translateY(0);
}
.seed-tile__letter {
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--gold);
  margin: 0 0 .75rem;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.seed-tile__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1.3;
}
.seed-tile__text {
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(255,255,255,.95);
  margin: 0 0 .875rem;
}
.seed-tile__verse {
  font-size: .8rem;
  font-style: italic;
  color: rgba(255,255,255,.8);
  margin: 0;
  font-weight: 500;
}

/* ── Cards grid ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ── Testimony card ── */
.testimony-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 2.5rem 2rem 2rem;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.testimony-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transform: scaleX(0);
  transition: transform .4s ease;
}
.testimony-card:hover::before {
  transform: scaleX(1);
}
.testimony-card:hover { 
  box-shadow: 0 16px 48px rgba(31, 38, 135, 0.25);
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.85);
}
.testimony-card__avatar {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, #e0dbd2 0%, #f0ebe2 100%);
  border: 4px solid rgba(255, 255, 255, 0.8);
  margin-bottom: 1.25rem; overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
  transition: all .4s ease;
}
.testimony-card:hover .testimony-card__avatar {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.testimony-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimony-card__name { 
  font-size: 1.125rem; 
  font-weight: 700; 
  color: var(--text); 
  margin-bottom: .625rem;
}
.testimony-card__text { 
  font-size: 1rem; 
  color: var(--muted); 
  line-height: 1.7; 
  text-align: center; 
  flex: 1;
}
.testimony-card__more { 
  font-size: .9rem; 
  color: var(--red); 
  font-weight: 600; 
  margin-top: 1.25rem; 
  cursor: pointer; 
  background: none; 
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all .3s ease;
}
.testimony-card__more:hover {
  background: rgba(192, 57, 43, 0.1);
}

/* ── Testimony button ── */
.btn-testimony {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.625rem 1.5rem;
  background: var(--green);
  color: white;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid var(--green);
  transition: all 0.3s ease;
  cursor: pointer;
}
.btn-testimony:hover {
  background: transparent;
  color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44, 95, 46, 0.2);
}

/* ── How We S.E.E.D. accordion (about.html) ── */
.seed-accordion {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.seed-accordion__item {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(44, 95, 46, 0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(31, 38, 135, 0.1);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.seed-accordion__item[open] {
  box-shadow: 0 8px 28px rgba(31, 38, 135, 0.18);
  border-color: rgba(44, 95, 46, 0.4);
}
.seed-accordion__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  -webkit-tap-highlight-color: rgba(44, 95, 46, 0.15);
  user-select: none;
}
.seed-accordion__summary::-webkit-details-marker { display: none; }
.seed-accordion__summary::marker { content: ''; }
.seed-accordion__summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}
.seed-accordion__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.seed-accordion__title {
  flex: 1;
  line-height: 1.35;
}
.seed-accordion__plus {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
}
.seed-accordion__item[open] .seed-accordion__plus {
  transform: rotate(45deg);
  background: #3a7d3c;
}
.seed-accordion__body {
  padding: 1.1rem 1.2rem 1.3rem 1.2rem;
  color: #3a3a3a;
  font-size: 1rem;
  line-height: 1.7;
  border-top: 1px solid rgba(44, 95, 46, 0.12);
}
.seed-accordion__body p,
.seed-accordion__body ul,
.seed-accordion__body blockquote {
  text-align: left;
  margin: 0 0 0.9rem;
}
.seed-accordion__body ul {
  list-style: disc;
  padding-left: 1.4rem;
}
.seed-accordion__body ul li { margin-bottom: 0.35rem; }
.seed-accordion__body .btn {
  margin-top: 0.4rem;
}
.seed-accordion__quote {
  background: rgba(44, 95, 46, 0.08);
  border-left: 3px solid var(--green);
  padding: 0.85rem 1.1rem;
  border-radius: 6px;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
}
.seed-accordion__quote p {
  margin: 0 0 0.4rem;
  color: #2b2b2b;
}
.seed-accordion__quote cite {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green);
  font-style: normal;
}
@media (max-width: 480px) {
  .seed-accordion__summary {
    padding: 0.95rem 1rem;
    font-size: 1rem;
    gap: 0.7rem;
  }
  .seed-accordion__icon { font-size: 1.3rem; }
  .seed-accordion__plus { width: 32px; height: 32px; font-size: 1.25rem; }
  .seed-accordion__body {
    padding: 1rem 1rem 1.15rem 1rem;
    font-size: 0.95rem;
  }
}

/* ── Step cards (legacy — kept for any other page that might use them) ── */
.steps { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.step {
  flex: 1 1 280px; max-width: 360px;
  text-align: center; padding: 2.5rem 2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.step::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(44,95,46,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  /* Purely decorative — must not intercept hover/click on the card's
     interactive children (See more toggle). */
  pointer-events: none;
}
.step:hover::before {
  opacity: 1;
}
.step:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(31, 38, 135, 0.25);
  background: rgba(255, 255, 255, 0.85);
}
.step__num {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  color: #fff;
  font-size: 1.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 15px rgba(192, 57, 43, 0.3);
  transition: all .4s ease;
}
.step:hover .step__num {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(192, 57, 43, 0.4);
}
.step__title { 
  font-size: 1.25rem; 
  font-weight: 700; 
  margin-bottom: 1rem;
  color: var(--text);
}
.step__desc { 
  font-size: 1rem; 
  color: var(--muted);
  line-height: 1.7;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  position: relative;
}
.step__desc p,
.step__desc ul,
.step__desc blockquote {
  /* Inline content inside a centered .step should read left-aligned
     (lists and blockquotes look broken when their text centers), and
     it needs to stay inside the step padding on narrow viewports. */
  text-align: left;
  max-width: 100%;
  box-sizing: border-box;
}
.step__desc blockquote {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ── "See more" collapse for long step cards ──
   Single source of truth. main.js wraps each .step__desc in a
   .step__desc--clampable and appends a .step__toggle. The clamp is
   mobile-only — desktop shows full content and hides the toggle. */
.step__desc--clampable {
  position: relative;
}
.step__toggle {
  display: none; /* shown on mobile only via media query below */
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  background: #2C5F2E;
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(44, 95, 46, 0.32);
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: rgba(44, 95, 46, 0.2);
}
.step__toggle:hover,
.step__toggle:focus-visible {
  background: #3a7d3c;
  outline: none;
}
.step__toggle-chev {
  display: inline-block;
  font-size: 0.9em;
  line-height: 1;
}

@media (max-width: 768px) {
  .step__desc--clampable {
    max-height: 11rem;
    overflow: hidden;
  }
  .step__desc--clampable::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3.5rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.98) 100%);
  }
  .step.is-step-open {
    overflow: visible;
  }
  .step.is-step-open .step__desc--clampable {
    max-height: none;
  }
  .step.is-step-open .step__desc--clampable::after {
    display: none;
  }
  .step__toggle {
    display: inline-flex;
  }
}

/* Tighter padding on narrow phones so content has room to breathe.
   Targets sub-400px because that's where the 2rem horizontal padding
   starts eating the Prayer & Worship card's blockquote width. */
@media (max-width: 400px) {
  .step {
    padding: 2rem 1.1rem;
  }
  .step__desc blockquote {
    padding: 0.7rem 0.85rem !important;
    font-size: 0.9rem !important;
  }
  .step__desc ul {
    padding-left: 1.15rem !important;
  }
}

/* ── CTA blocks ── */
.cta-blocks { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.cta-block {
  flex: 1 1 280px; max-width: 360px;
  text-align: center; padding: 3rem 2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.cta-block::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transform: scaleX(0);
  transition: transform .4s ease;
}
.cta-block:hover::after {
  transform: scaleX(1);
}
.cta-block:hover { 
  box-shadow: 0 16px 48px rgba(31, 38, 135, 0.25);
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.85);
}
.cta-block__icon { 
  font-size: 3rem; 
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.1));
  transition: transform .4s ease;
}
.cta-block:hover .cta-block__icon {
  transform: scale(1.15) rotate(5deg);
}
.cta-block__title { 
  font-size: 1.25rem; 
  font-weight: 700; 
  margin: 0;
  color: var(--text);
}
.cta-block__desc { 
  font-size: 1rem; 
  color: var(--muted); 
  flex: 1; 
  margin: 0;
  line-height: 1.7;
}

/* ── Community strip ── */
.community-strip {
  background: linear-gradient(135deg, rgba(249,246,241,0.8) 0%, rgba(255,255,255,0.8) 100%);
  backdrop-filter: blur(10px);
  padding: 4rem 0;
  border-top: 2px solid rgba(226,217,203,0.5);
  border-bottom: 2px solid rgba(226,217,203,0.5);
}
.community-strip .container {
  display: flex; align-items: center;
  justify-content: center; gap: 2.5rem; flex-wrap: wrap; text-align: center;
}
.community-strip__title { 
  font-size: 1.5rem; 
  font-weight: 700; 
  margin-bottom: .5rem;
}
.community-strip__desc { 
  font-size: 1.05rem; 
  color: var(--muted); 
  margin: 0;
}

/* ── Bundle catalog ── */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.bundle-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  overflow: hidden;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
}
.bundle-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(135deg, rgba(44,95,46,0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 1;
}
.bundle-card:hover::before {
  opacity: 1;
}
.bundle-card:hover { 
  box-shadow: 0 16px 48px rgba(31, 38, 135, 0.25);
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.85);
}
.bundle-card__img {
  width: 100%; aspect-ratio: 1/1; overflow: hidden;
  background: linear-gradient(135deg, #d4a574 0%, #8b5e3c 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  position: relative;
}
.bundle-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.bundle-card:hover .bundle-card__img img {
  transform: scale(1.1);
}
.bundle-card__body { 
  padding: 1.5rem 1.75rem 1.75rem;
  position: relative;
  z-index: 2;
}
.bundle-card__title { 
  font-size: 1.125rem; 
  font-weight: 700; 
  margin: 0 0 .75rem;
  color: var(--text);
}
.bundle-card__list { 
  list-style: disc; 
  padding-left: 1.5rem; 
  font-size: .9375rem; 
  color: var(--muted);
  line-height: 1.7;
}

/* ── Bundle builder ── */
.builder-layout { display: flex; gap: 3rem; align-items: flex-start; }
.builder-controls { flex: 1 1 0; min-width: 0; }
.builder-summary { flex: 0 0 340px; width: 340px; position: sticky; top: 100px; }
.builder-mission {
  background: linear-gradient(135deg, rgba(247,243,236,0.9) 0%, rgba(255,250,243,0.9) 100%);
  backdrop-filter: blur(10px);
  border-left: 4px solid var(--gold);
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  margin-bottom: 3rem;
  font-size: 1rem;
  color: #4a3728;
  line-height: 1.7;
  box-shadow: 0 4px 15px rgba(0,0,0,.08);
}
.builder-step { margin-bottom: 3rem; }
.builder-step__head {
  display: flex; align-items: center; gap: .75rem;
  font-size: 1.25rem; font-weight: 700; color: #2c1a0e;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid rgba(228,221,214,0.5);
  padding-bottom: .75rem;
}
.builder-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, #f4c794 100%);
  color: #fff; font-size: .95rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(212, 165, 116, 0.3);
}
.bundle-radios { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); 
  gap: 1.25rem;
}
.bundle-radio { cursor: pointer; }
.bundle-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.bundle-radio__card {
  border: 2px solid rgba(221,213,200,0.6);
  border-radius: 12px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  transition: all .3s ease;
}
.bundle-radio:hover .bundle-radio__card { 
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 165, 116, 0.2);
}
.bundle-radio input:checked ~ .bundle-radio__card {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212,165,116,.15);
  background: rgba(255,250,243,0.9);
}
.bundle-radio__name { 
  font-weight: 700; 
  font-size: .95rem; 
  color: #2c1a0e; 
  display: block; 
  margin-bottom: .375rem;
}
.bundle-radio__price { 
  font-size: .85rem; 
  font-weight: 600; 
  color: var(--gold);
}
.addon-pills { display: flex; flex-wrap: wrap; gap: .875rem; }
.addon-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .625rem 1.125rem;
  border: 2px solid rgba(201,185,154,0.5);
  border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  font-size: .9375rem; color: #4a3728;
  transition: all .3s ease;
  user-select: none;
}
.addon-pill:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.2);
}
.addon-pill.on {
  background: linear-gradient(135deg, var(--gold) 0%, #f4c794 100%);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3);
}
.addon-pill__price { font-size: .8125rem; color: #8a6a3a; }
.addon-pill.on .addon-pill__price { color: rgba(255,255,255,.9); }
.summary-panel {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}
.summary-panel__title { 
  font-size: 1.25rem; 
  font-weight: 700; 
  color: #2c1a0e; 
  margin-bottom: 1.25rem;
  border-bottom: 2px solid rgba(228,221,214,0.5);
  padding-bottom: .75rem;
}
.summary-panel__bundle { 
  font-size: 1.05rem; 
  font-weight: 600; 
  color: #2c1a0e; 
  margin-bottom: 1rem;
}
.summary-panel__addons { 
  font-size: .9375rem; 
  color: #4a3728; 
  margin-bottom: 1.25rem; 
  min-height: 1.5rem;
  line-height: 1.7;
}
.summary-panel__total-row { 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  border-top: 2px solid rgba(228,221,214,0.5);
  padding-top: 1rem;
  margin-bottom: 1.5rem;
}
.summary-panel__total-label { 
  font-size: 1rem; 
  color: #6b5744;
  font-weight: 600;
}
.summary-panel__total { 
  font-size: 1.75rem; 
  font-weight: 800; 
  color: var(--gold);
  text-shadow: 0 2px 4px rgba(212, 165, 116, 0.2);
}
.summary-panel__actions { 
  display: flex; 
  flex-direction: column; 
  gap: .875rem;
}
/* ── Forms ── */
.form-group { margin-bottom: 1.5rem; }
.form-group label { 
  display: block; 
  font-size: 1rem; 
  font-weight: 600; 
  color: var(--text); 
  margin-bottom: .5rem;
}
.form-group .req { color: var(--red); margin-left: 2px; }
.form-group input,
.form-group select,
.form-group textarea {
  display: block; width: 100%;
  padding: .875rem 1.125rem; font-size: 1rem;
  border: 2px solid rgba(213,208,203,0.5);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-family: inherit;
  transition: all .3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(44,95,46,.12);
  background: rgba(255, 255, 255, 0.95);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-error { 
  display: none; 
  background: rgba(254,242,242,0.9);
  backdrop-filter: blur(10px);
  border: 2px solid #fca5a5;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  color: #b91c1c;
  font-size: .9375rem;
  margin-bottom: 1.25rem;
}
.form-success { 
  display: none; 
  background: rgba(240,250,242,0.9);
  backdrop-filter: blur(10px);
  border: 2px solid #4caf50;
  border-radius: 12px;
  padding: 1.75rem;
  color: #2e7d32;
  font-weight: 600;
}

/* ── Impact cards (donate) ── */
.impact-cards { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.impact-card {
  flex: 1 1 280px; max-width: 360px;
  text-align: center; padding: 3rem 2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.impact-card:hover { 
  box-shadow: 0 16px 48px rgba(31, 38, 135, 0.25);
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.85);
}
.impact-card__stat { 
  font-size: clamp(2.5rem,6vw,3.5rem); 
  font-weight: 900; 
  color: var(--red); 
  line-height: 1; 
  display: block; 
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(192, 57, 43, 0.2);
}
.impact-card__label { 
  font-size: 1.25rem; 
  font-weight: 700; 
  margin-bottom: 1rem;
  color: var(--text);
}
.impact-card__desc { 
  font-size: 1rem; 
  color: var(--muted); 
  line-height: 1.7; 
  margin: 0;
}

/* ── Contact 2-col ── */
.contact-layout { 
  display: grid; 
  grid-template-columns: 1fr 400px; 
  gap: 4rem; 
  align-items: start;
}
.contact-sidebar { 
  background: rgba(249,246,241,0.8);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 3rem 2.5rem;
  border: 2px solid rgba(232,228,222,0.5);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}
.contact-sidebar__block { 
  margin-bottom: 2.5rem; 
  padding-bottom: 2.5rem; 
  border-bottom: 1px solid rgba(232,228,222,0.5);
}
.contact-sidebar__block:last-child { 
  margin-bottom: 0; 
  padding-bottom: 0; 
  border-bottom: none;
}
.contact-sidebar__heading { 
  font-size: 1.375rem; 
  font-weight: 700; 
  margin-bottom: .875rem;
  color: var(--text);
}
.contact-sidebar__label { 
  font-size: .8125rem; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: .1em; 
  color: #888; 
  margin-bottom: .625rem;
}
.contact-sidebar__text { 
  font-size: 1rem; 
  color: var(--muted); 
  line-height: 1.7; 
  margin-bottom: 1rem;
}
.contact-sidebar__link { 
  color: #3a3a7a; 
  font-size: 1rem; 
  font-weight: 500;
  transition: color .3s ease;
}
.contact-sidebar__link:hover { 
  color: var(--red); 
  text-decoration: underline;
}
.contact-sidebar__links li + li { margin-top: .625rem; }

/* ── Ways to help (testimonies page) ── */
.ways-section { 
  background: linear-gradient(135deg, #5a2d0c 0%, #8b4513 100%); 
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.ways-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}
.ways-section .section-title { 
  color: #fff; 
  position: relative;
  z-index: 2;
}
.ways-intro { 
  text-align: center; 
  color: rgba(255,255,255,.9); 
  font-size: 1.125rem; 
  max-width: 700px; 
  margin: -1.5rem auto 3rem;
  position: relative;
  z-index: 2;
}
.ways-cards { 
  display: grid; 
  grid-template-columns: repeat(3,1fr); 
  gap: 2.5rem;
  position: relative;
  z-index: 2;
}
.ways-card {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 16px;
  padding: 2.75rem 2.25rem 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all .4s ease;
}
.ways-card:hover {
  background: rgba(255,255,255,.25);
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.ways-card__icon { 
  font-size: 3rem; 
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.2));
}
.ways-card__title { 
  font-size: 1.25rem; 
  font-weight: 700; 
  color: #fff; 
  margin-bottom: 1rem;
}
.ways-card__desc { 
  font-size: 1rem; 
  color: rgba(255,255,255,.85); 
  line-height: 1.7; 
  margin-bottom: 1.75rem; 
  flex: 1;
}

/* ── Accordion (builder step 3) ── */
.accordion-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: inherit; font-weight: inherit; color: inherit;
  display: flex; align-items: center; gap: .5rem; width: 100%;
  transition: color .3s ease;
}
.accordion-toggle:hover {
  color: var(--green);
}
.accordion-icon { 
  transition: transform .3s ease; 
  font-size: 1rem;
}
.accordion-toggle[aria-expanded="true"] .accordion-icon { 
  transform: rotate(-180deg);
}
.accordion-body { 
  padding: 1.25rem 0;
  animation: slideDown .3s ease;
}
.accordion-body[hidden] { 
  display: none;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Donation request panel ── */
.donation-panel {
  background: linear-gradient(135deg, rgba(253,248,242,0.95) 0%, rgba(255,250,243,0.95) 100%);
  backdrop-filter: blur(15px);
  border-top: 4px solid var(--gold);
  margin-top: 3rem;
  padding: 3rem 2rem;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}
.donation-panel[hidden] { display: none; }
.donation-panel__inner { 
  max-width: 700px; 
  margin: 0 auto; 
  position: relative;
}
.donation-panel__close {
  position: absolute; top: 0; right: 0;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  color: #8a6a3a;
  padding: .5rem .75rem;
  border-radius: 8px;
  transition: all .3s ease;
}
.donation-panel__close:hover {
  background: rgba(255,255,255,0.95);
  color: var(--red);
  transform: scale(1.1);
}
.donation-panel__title { 
  font-size: 1.5rem; 
  font-weight: 700; 
  color: #2c1a0e; 
  margin: 0 0 1rem; 
  padding-right: 3rem;
}
.donation-panel__intro { 
  font-size: 1rem; 
  color: #5a4032; 
  line-height: 1.7; 
  margin: 0 0 2rem;
}

/* ── Daily Verse Page ── */
.daily-verse-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: cover;
  background-position: center;
  padding: 2rem;
  position: relative;
}
.daily-verse-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="sparkle" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="1.5" fill="rgba(255,255,255,0.15)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23sparkle)"/></svg>');
  opacity: 0.6;
}
.daily-verse-container {
  max-width: 800px;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 2px solid rgba(255,255,255,.6);
  border-radius: 24px;
  box-shadow: 0 16px 64px rgba(0,0,0,.2);
  padding: 4rem 3rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
.daily-verse-logo {
  display: inline-block;
  margin-bottom: 2.5rem;
}
.daily-verse-logo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255,255,255,.8);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  transition: transform .4s ease;
}
.daily-verse-logo:hover img {
  transform: scale(1.1) rotate(5deg);
}
.daily-verse-label {
  font-size: .9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--muted);
  margin-bottom: 2rem;
}
.daily-verse-text {
  font-size: clamp(1.375rem, 4vw, 2rem);
  line-height: 1.8;
  color: var(--text);
  font-weight: 400;
  font-style: italic;
  margin: 0 0 2rem;
  quotes: """ """ "'" "'";
}
.daily-verse-reference {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--green);
  margin: 0 0 3rem;
}
.daily-verse-actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.daily-verse-back {
  display: inline-block;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s ease;
  padding: 8px 16px;
  border-radius: 8px;
}
.daily-verse-back:hover {
  color: var(--green);
  background: rgba(44, 95, 46, 0.1);
}
/* ── Responsive ── */
@media (max-width: 1023px) {
  .bundle-grid { grid-template-columns: repeat(2,1fr); }
  .container { padding: 0 24px; }
}
@media (max-width: 900px) {
  .builder-summary { flex: 0 0 300px; width: 300px; }
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .cards-grid { gap: 2rem; }
  .cta-blocks { gap: 2rem; }
  .steps { gap: 2rem; }
}
@media (max-width: 768px) {
  .hamburger { display: flex; }
  #site-nav {
    position: absolute; top: 80px; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    overflow: hidden; max-height: 0;
    transition: max-height .4s ease, padding .4s ease;
    padding: 0 32px;
  }
  #site-nav.open { 
    max-height: 400px; 
    padding: 16px 32px 24px;
  }
  .nav-links { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 0; 
    width: 100%;
  }
  .nav-links li { 
    width: 100%; 
    border-bottom: 1px solid rgba(240,240,240,0.8);
  }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a { 
    display: block; 
    padding: 16px 0; 
    font-size: 1.05rem;
  }
  .nav-links a::before { display: none; }
  .cards-grid, .cards-grid--2 { grid-template-columns: 1fr; }
  .testimony-cards-grid { grid-template-columns: 1fr; }
  .ways-cards { grid-template-columns: 1fr; }
  .cta-blocks { flex-direction: column; align-items: center; }
  .cta-block { max-width: 100%; width: 100%; }
  .steps { flex-direction: column; align-items: center; }
  .step { max-width: 100%; width: 100%; }
  .community-strip .container { flex-direction: column; }
  .site-footer { padding: 48px 24px 32px; }
  .photo-strip { grid-template-columns: 1fr; }
  .ministry-gallery { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .seed-grid { grid-template-columns: 1fr; gap: 1rem; }
  .seed-tile__content { padding: 1.5rem; }
  .seed-tile__letter { font-size: 2.25rem; }
  .seed-tile__title { font-size: 1.125rem; }
  .seed-tile__text { font-size: .875rem; }
  .seed-tile__label-letter { font-size: 2.25rem; }
  .seed-tile__label-title { font-size: .95rem; }
  .hero__scroll-indicator { bottom: 1.5rem; }
  .hero__scroll-indicator span { font-size: 1.75rem; }
  .hero--fullscreen { background-attachment: scroll; }
  .daily-verse-container {
    padding: 3rem 2rem;
  }
  .daily-verse-text {
    font-size: 1.25rem;
  }
  .section { padding: 4rem 0; }
  .container { padding: 0 20px; }
}
@media (max-width: 680px) {
  .builder-layout { flex-direction: column; }
  .builder-summary { 
    position: static; 
    width: 100%; 
    flex: 1 1 auto;
    margin-top: 2rem;
  }
  .bundle-grid { grid-template-columns: 1fr; }
  .hero__content { padding: 2rem 24px; }
  .btn-hero { min-width: 160px; }
}
@media (min-width: 769px) {
  #site-nav { 
    max-height: none !important; 
    overflow: visible !important;
  }
  .hamburger { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .hero__scroll-indicator {
    animation: none;
  }
}

/* ── Video Gallery ── */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}
.video-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(31, 38, 135, 0.25);
}
.video-card video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #f0f0f0;
}
.video-card__content {
  padding: 1.5rem;
}
.video-card__content h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--text);
}
.video-card__content p {
  font-size: .9375rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* ── Activity Feed ── */
.activity-feed {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}
.activity-feed h3 {
  text-align: center;
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--text);
}
.activity-items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all .3s ease;
}
.activity-item:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateX(4px);
}
.activity-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(44, 95, 46, 0.1);
  border-radius: 50%;
  flex-shrink: 0;
}
.activity-content {
  flex: 1;
}
.activity-content p {
  margin: 0 0 .25rem;
  font-size: .9375rem;
  line-height: 1.5;
}
.activity-time {
  font-size: .8125rem;
  color: var(--muted);
  font-style: italic;
}

/* ── QR Code Section ── */
.qr-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.qr-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.qr-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(31, 38, 135, 0.25);
}
.qr-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.qr-card__header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.qr-card__code {
  width: 200px;
  height: 200px;
  margin: 0 auto 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.qr-placeholder {
  text-align: center;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.5;
}
.qr-placeholder p {
  margin: .25rem 0;
}
.qr-placeholder strong {
  color: var(--text);
  font-size: 1rem;
}
.qr-card__desc {
  font-size: .9375rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Social Media Integration ── */
.section--glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ── Floating Elements ── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.floating {
  animation: float 6s ease-in-out infinite;
}

/* ── Shimmer Effect ── */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200px 100%;
  animation: shimmer 2s infinite;
}

/* ── 3-Column Announcements Layout ── */
.announcements-3col-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.announcements-column {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 280px;
}

.announcements-column:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2);
  background: rgba(255, 255, 255, 0.9);
}

.announcements-column__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.75rem;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(44, 95, 46, 0.2);
}

.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.announcement-item {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 0.75rem;
  position: relative;
  transition: all .3s ease;
}

.announcement-item:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(31, 38, 135, 0.15);
}

.announcement-item__status {
  position: absolute;
  top: -8px;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}

.announcement-item.live .announcement-item__status {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
  animation: pulse 2s infinite;
}

.announcement-item.current .announcement-item__status {
  background: linear-gradient(135deg, #2C5F2E 0%, #3a7d3c 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(44, 95, 46, 0.4);
}

.announcement-item.upcoming .announcement-item__status {
  background: linear-gradient(135deg, #d4a574 0%, #f4c794 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(212, 165, 116, 0.4);
}

.announcement-item.ongoing .announcement-item__status {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.announcement-item__content h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.announcement-item__time {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--green);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.announcement-item__desc {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.announcement-item .btn {
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
  padding: 0.625rem 1rem;
}

/* ── Ministry Calendar ── */
.calendar-container {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(44, 95, 46, 0.2);
}

.calendar-month {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.calendar-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(44, 95, 46, 0.1);
  border: 2px solid rgba(44, 95, 46, 0.3);
  color: var(--green);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-nav-btn:hover {
  background: var(--green);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(44, 95, 46, 0.3);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: rgba(44, 95, 46, 0.1);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.calendar-day-header {
  background: var(--green);
  color: white;
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calendar-day {
  background: rgba(255, 255, 255, 0.9);
  min-height: 80px;
  padding: 0.5rem;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.calendar-day:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.02);
  z-index: 2;
  box-shadow: 0 4px 15px rgba(31, 38, 135, 0.2);
}

.calendar-day.other-month {
  background: rgba(240, 240, 240, 0.5);
  color: #ccc;
}

.calendar-day.today {
  background: rgba(44, 95, 46, 0.1);
  border: 2px solid var(--green);
}

.calendar-day-number {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.calendar-day.other-month .calendar-day-number {
  color: #ccc;
}

.calendar-day.today .calendar-day-number {
  color: var(--green);
  font-weight: 700;
}

.calendar-event {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  margin-bottom: 0.25rem;
  width: 100%;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.2);
}

.calendar-event:hover {
  transform: scale(1.05);
}

.calendar-event.live {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: white;
  animation: pulse 2s infinite;
}

.calendar-event.upcoming {
  background: linear-gradient(135deg, #d4a574 0%, #f4c794 100%);
  color: white;
}

.calendar-event.ongoing {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-dot.live {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  animation: pulse 2s infinite;
}

.legend-dot.upcoming {
  background: linear-gradient(135deg, #d4a574 0%, #f4c794 100%);
}

.legend-dot.ongoing {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ── Event Modal ── */
.event-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.event-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
}

.event-modal__content {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 16px 48px rgba(31, 38, 135, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.event-modal.show .event-modal__content {
  transform: scale(1);
}

.event-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-modal__close:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--red);
  transform: scale(1.1);
}

.event-modal__body h3 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1rem;
}

.event-modal__body p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.event-modal__body .btn {
  margin-top: 1rem;
}

/* ── Live Stream Section ── */
.live-stream-section {
  margin-bottom: 3rem;
}

.live-stream-embed {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.live-stream-embed h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1.5rem;
}

.live-stream-embed iframe {
  border-radius: 12px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ── Stream Header & Engagement ── */
.stream-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 71, 87, 0.1);
  border-radius: 12px;
  border: 2px solid rgba(255, 71, 87, 0.2);
}

.stream-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--red);
}

.stream-engagement {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.live-indicator {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: pulse 2s infinite;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.viewer-count {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 600;
}

/* ── Stream Player Container ── */
.stream-player-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.stream-player-container iframe {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ── Stream Overlays ── */
.stream-overlays {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 300px;
}

.stream-overlay {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
  animation: slideInFromRight 0.5s ease;
  transition: all 0.3s ease;
}

.stream-overlay:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.3);
}

.stream-overlay.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

.stream-overlay__content {
  padding: 1.25rem;
  position: relative;
}

.stream-overlay__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--muted);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.stream-overlay__close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--red);
}

.stream-overlay__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.5rem;
  padding-right: 1.5rem;
}

.stream-overlay__message {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.stream-overlay__button {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 8px;
  width: 100%;
  text-align: center;
}

/* ── Stream Overlay Types ── */
.stream-overlay--bible-bundle .stream-overlay__content {
  border-left: 4px solid var(--gold);
}

.stream-overlay--testimony .stream-overlay__content {
  border-left: 4px solid var(--red);
}

.stream-overlay--prayer .stream-overlay__content {
  border-left: 4px solid var(--green);
}

.stream-overlay--community .stream-overlay__content {
  border-left: 4px solid #0088cc;
}

/* ── Stream Info & Engagement Panel ── */
.stream-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.stream-description {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.stream-description p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
}

.stream-engagement-panel {
  background: rgba(44, 95, 46, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.25rem;
  border: 2px solid rgba(44, 95, 46, 0.2);
}

.engagement-section {
  margin-bottom: 1.25rem;
}

.engagement-section:last-child {
  margin-bottom: 0;
}

.engagement-section h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 0.5rem;
}

.engagement-section p {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.engagement-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.engagement-buttons .btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.engagement-buttons .btn span {
  font-size: 1rem;
}

/* ── Stream Links ── */
.stream-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.stream-links .btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stream-links .btn span {
  font-size: 1.125rem;
}

/* ── Stream Offline State ── */
.stream-offline {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.stream-offline h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.stream-offline p {
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
}

.offline-content {
  max-width: 800px;
  margin: 0 auto;
}

.next-stream-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
  text-align: left;
}

.stream-schedule {
  background: rgba(44, 95, 46, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  border: 2px solid rgba(44, 95, 46, 0.2);
}

.stream-schedule h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 0.75rem;
}

.stream-schedule p {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.stream-schedule p:last-child {
  margin: 0;
}

.stream-preview {
  background: rgba(212, 165, 116, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  border: 2px solid rgba(212, 165, 116, 0.2);
}

.stream-preview h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 0.75rem;
}

.stream-agenda {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stream-agenda li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--text);
  border-bottom: 1px solid rgba(212, 165, 116, 0.2);
}

.stream-agenda li:last-child {
  border-bottom: none;
}

.stream-agenda li span {
  font-size: 1rem;
  flex-shrink: 0;
}

.offline-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.offline-actions .btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.offline-actions .btn span {
  font-size: 1.125rem;
}

/* ── Stream Overlay Animations ── */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* ── Live Notification ── */
.live-notification {
  position: fixed;
  top: 100px;
  right: 2rem;
  z-index: 1001;
  background: rgba(255, 71, 87, 0.95);
  backdrop-filter: blur(10px);
  color: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(255, 71, 87, 0.4);
  animation: slideInRight 0.5s ease;
}

.live-notification__content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
}

.live-notification__icon {
  font-size: 1.25rem;
  animation: pulse 2s infinite;
}

.live-notification__text {
  font-weight: 600;
  flex: 1;
}

.live-notification .btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.live-notification__close {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.live-notification__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ── Community Engagement Hub ── */
.engagement-hub-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.engagement-column {
  display: flex;
  flex-direction: column;
}

.engagement-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.engagement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(31, 38, 135, 0.25);
  background: rgba(255, 255, 255, 0.9);
}

.engagement-card__header {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.1) 0%, rgba(44, 95, 46, 0.05) 100%);
  padding: 1.5rem 2rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.engagement-card__icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.engagement-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.engagement-card__content {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Stream Status Card ── */
.stream-status-offline {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stream-status-offline h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 1rem;
}

.next-stream-details {
  flex: 1;
  margin-bottom: 1.5rem;
}

.next-stream-details p {
  margin: 0 0 0.75rem;
  line-height: 1.6;
}

.next-stream-details p:first-child {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

.stream-time {
  font-size: 1rem;
  font-weight: 600;
  color: var(--red) !important;
}

.stream-description {
  font-size: 0.9375rem;
  color: var(--muted) !important;
}

.stream-actions {
  display: flex;
  justify-content: center;
}

/* ── Live Stream Status ── */
.stream-status-live {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stream-status-live h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--red);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.stream-status-live .live-indicator {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: pulse 2s infinite;
}

/* ── Engagement Options ── */
.engagement-options {
  flex: 1;
  margin-bottom: 1.5rem;
}

.engagement-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.engagement-option:last-child {
  border-bottom: none;
}

.engagement-option__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.engagement-option__content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.25rem;
}

.engagement-option__content p {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.engagement-actions {
  display: flex;
  justify-content: center;
}

/* ── Archive Categories ── */
.archive-intro {
  text-align: center;
  margin-bottom: 1.5rem;
}

.archive-intro p {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.archive-categories {
  flex: 1;
  margin-bottom: 1.5rem;
}

.archive-category {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: 8px;
}

.archive-category:last-child {
  border-bottom: none;
}

.archive-category:hover {
  background: rgba(255, 255, 255, 0.4);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.archive-category__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 165, 116, 0.2);
  border-radius: 50%;
  border: 2px solid rgba(212, 165, 116, 0.4);
}

.archive-category__content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.25rem;
}

.archive-category__content p {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.archive-actions {
  display: flex;
  justify-content: center;
}

/* ── Archive Modal ── */
.archive-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.archive-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.archive-modal__content {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  max-width: 900px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(31, 38, 135, 0.3);
}

.archive-modal__header {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.1) 0%, rgba(44, 95, 46, 0.05) 100%);
  padding: 1.5rem 2rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.archive-modal__header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.archive-modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.archive-modal__close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--red);
}

.archive-modal__body {
  padding: 2rem;
  max-height: 60vh;
  overflow-y: auto;
}

.archive-loading {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--muted);
}

/* ── Archive Modal Content ── */
.archive-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.archive-section {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.archive-section h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.archive-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.archive-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.archive-item:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(31, 38, 135, 0.15);
}

.archive-item__thumbnail {
  width: 80px;
  height: 60px;
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.2) 0%, rgba(44, 95, 46, 0.1) 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(44, 95, 46, 0.3);
}

.archive-item__play {
  font-size: 1.25rem;
  color: var(--green);
}

.archive-item__icon {
  font-size: 1.5rem;
  color: var(--gold);
}

.archive-item__content {
  flex: 1;
}

.archive-item__content h5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.5rem;
}

.archive-item__content p {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

/* ── Live Stream Details ── */
.live-stream-details {
  flex: 1;
  margin-bottom: 1.5rem;
}

.live-engagement {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.live-engagement p {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--text);
}

.live-engagement ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.live-engagement li {
  padding: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ── Button Sizes ── */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 8px;
}

.btn-sm span {
  font-size: 1rem;
}
@media (max-width: 1024px) {
  .announcements-3col-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .engagement-hub-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .calendar-day {
    min-height: 60px;
  }
  
  .calendar-event {
    font-size: 0.7rem;
  }
  
  .stream-info {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .next-stream-info {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .stream-overlays {
    position: static;
    max-width: 100%;
    margin-top: 1rem;
  }
}

@media (max-width: 768px) {
  .announcements-column {
    padding: 1.25rem;
  }
  
  .announcement-item {
    padding: 1rem;
  }
  
  .calendar-container {
    padding: 1.5rem;
  }
  
  .calendar-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .calendar-day {
    min-height: 50px;
    padding: 0.25rem;
  }
  
  .calendar-day-number {
    font-size: 0.75rem;
  }
  
  .calendar-event {
    font-size: 0.65rem;
    padding: 0.125rem 0.25rem;
  }
  
  .legend-item {
    font-size: 0.8125rem;
  }
  
  .event-modal {
    padding: 1rem;
  }
  
  .event-modal__content {
    padding: 1.5rem;
  }
  
  .live-notification {
    right: 1rem;
    left: 1rem;
  }
  
  .live-notification__content {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .stream-header {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .stream-engagement {
    justify-content: center;
  }
  
  .stream-overlays {
    position: static;
    max-width: 100%;
    margin-top: 1rem;
  }
  
  .stream-overlay {
    margin: 0 auto;
  }
  
  .engagement-buttons {
    gap: 0.75rem;
  }
  
  .stream-links {
    flex-direction: column;
    align-items: center;
  }
  
  .stream-links .btn {
    width: 200px;
  }
  
  .offline-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .offline-actions .btn {
    width: 200px;
  }
}

/* ============================================================
   Glass Morphism Calendar & Event Cards
   ============================================================ */

/* ── Glass Morphism Base Classes ── */
.glass-morphism {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-morphism-subtle {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1);
}

.glass-morphism:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.25);
  transform: translateY(-2px);
}

/* ── Enhanced Calendar Container ── */
.calendar-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(31, 38, 135, 0.2);
  position: relative;
  overflow: hidden;
}

.calendar-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

/* ── Calendar Header ── */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1rem 0;
}

.calendar-month {
  font-size: 2rem;
  font-weight: 700;
  color: #2b2b2b;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0;
}

.calendar-nav-btn {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #2b2b2b;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1);
}

.calendar-nav-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31, 38, 135, 0.2);
}

/* ── Calendar Grid ── */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 2rem;
}

.calendar-day-header {
  padding: 1rem 0.5rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: #666;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calendar-day {
  min-height: 120px;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.calendar-day:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
}

.calendar-day.today {
  background: linear-gradient(135deg, rgba(192, 57, 43, 0.2) 0%, rgba(231, 76, 60, 0.15) 100%);
  border-color: rgba(192, 57, 43, 0.4);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.3);
}

.calendar-day.other-month {
  opacity: 0.4;
  background: rgba(255, 255, 255, 0.05);
}

.calendar-day-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
}

.calendar-day.today .calendar-day-number {
  color: #c0392b;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
}

/* ── Calendar Events ── */
.calendar-event {
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.3rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Dark text shadow for better readability */
}
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #1a1a1a;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.calendar-event:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(31, 38, 135, 0.3);
  font-weight: 800;
}

.calendar-event.live {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.6) 0%, rgba(192, 57, 43, 0.5) 100%);
  border-color: rgba(231, 76, 60, 0.8);
  color: #8b0000;
  font-weight: 800;
  animation: pulse-live 2s infinite;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 1);
}

.calendar-event.upcoming {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.6) 0%, rgba(41, 128, 185, 0.5) 100%);
  border-color: rgba(52, 152, 219, 0.8);
  color: #1e3a8a;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 1);
}

.calendar-event.ongoing {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.6) 0%, rgba(39, 174, 96, 0.5) 100%);
  border-color: rgba(44, 95, 46, 0.8);
  color: #0f5132;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 1);
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── Event Cards ── */
.event-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.event-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

.event-card:hover::before {
  left: 100%;
}

.event-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.2) 100%);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(31, 38, 135, 0.25);
}

.event-card.live {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.2) 0%, rgba(255, 255, 255, 0.15) 100%);
  border-color: rgba(231, 76, 60, 0.4);
}

.event-card.live::after {
  content: '';
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 12px;
  height: 12px;
  background: #e74c3c;
  border-radius: 50%;
  animation: pulse-live 1.5s infinite;
  box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
}

.event-card.upcoming {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-color: rgba(52, 152, 219, 0.3);
}

.event-card.ongoing {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-color: rgba(44, 95, 46, 0.3);
}

.event-card__status {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  display: inline-block;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.event-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2b2b2b;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.event-card__time {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.event-card__description {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.event-card__location {
  font-size: 0.75rem;
  color: #777;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.event-card__location::before {
  content: '📍';
}

/* ── Event Modal ── */
.event-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.event-modal.show {
  opacity: 1;
}

.event-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.event-modal__content {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(31, 38, 135, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-modal.show .event-modal__content {
  transform: scale(1);
}

.event-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.event-modal__close:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #333;
  transform: rotate(90deg);
}

.event-modal__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2b2b2b;
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.event-modal__details p {
  margin-bottom: 0.75rem;
  color: #555;
  line-height: 1.6;
}

.event-modal__actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.event-modal__actions .btn {
  flex: 1;
  min-width: 140px;
}

/* ── Calendar Legend ── */
.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #666;
  font-weight: 500;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.legend-dot.live {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.8) 0%, rgba(192, 57, 43, 0.6) 100%);
  animation: pulse-live 2s infinite;
}

.legend-dot.upcoming {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.8) 0%, rgba(41, 128, 185, 0.6) 100%);
}

.legend-dot.ongoing {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.8) 0%, rgba(39, 174, 96, 0.6) 100%);
}

/* ── Responsive Design ── */
@media (max-width: 768px) {
  .calendar-container {
    padding: 1rem;
    border-radius: 16px;
  }
  
  .calendar-grid {
    gap: 4px;
  }
  
  .calendar-day {
    min-height: 80px;
    padding: 0.5rem;
  }
  
  .calendar-month {
    font-size: 1.5rem;
  }
  
  .calendar-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  
  .event-card {
    padding: 1rem;
  }
  
  .event-modal__content {
    padding: 1.5rem;
    border-radius: 16px;
  }
  
  .event-modal__actions {
    flex-direction: column;
  }
  
  .calendar-legend {
    gap: 1rem;
  }
}

/* ── Enhanced Animations ── */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.loading-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 2s infinite;
}

/* ── Accessibility Enhancements ── */
@media (prefers-reduced-motion: reduce) {
  .glass-morphism,
  .calendar-day,
  .event-card,
  .calendar-nav-btn,
  .event-modal__content {
    transition: none;
  }
  
  .calendar-event.live,
  .legend-dot.live,
  .event-card.live::after {
    animation: none;
  }
}

/* ── Focus States ── */
.calendar-day:focus,
.event-card:focus,
.calendar-nav-btn:focus {
  outline: 2px solid rgba(192, 57, 43, 0.6);
  outline-offset: 2px;
}

.event-modal__close:focus {
  outline: 2px solid rgba(192, 57, 43, 0.6);
  outline-offset: 2px;
}

/* ============================================================
   Livestream Section Styles
   ============================================================ */

.livestream-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.livestream-card.live {
  border-color: rgba(255, 0, 0, 0.3);
  box-shadow: 0 8px 32px rgba(255, 0, 0, 0.1);
}

.livestream-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(44, 95, 46, 0.1);
}

.live-indicator, .offline-indicator {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.live-indicator {
  color: #ff0000;
}

.offline-indicator {
  color: var(--muted);
}

.viewer-count, .next-stream {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}

.livestream-content {
  margin-bottom: 2rem;
}

.livestream-title {
  font-size: 1.5rem;
  color: var(--text);
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.livestream-category {
  color: var(--muted);
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.livestream-description {
  color: var(--text);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}

.livestream-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-live {
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
  color: white;
  border: none;
  animation: pulse-live 2s infinite;
}

.btn-live:hover {
  background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
  transform: translateY(-2px);
}

@keyframes pulse-live {
  0%, 100% { box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3); }
  50% { box-shadow: 0 4px 20px rgba(255, 0, 0, 0.5); }
}

.livestream-preview {
  margin-top: 2rem;
}

.stream-placeholder {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--green) 0%, #3a7d3c 100%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.stream-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.recent-videos {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(44, 95, 46, 0.1);
}

.recent-videos h4 {
  color: var(--text);
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .livestream-card {
    padding: 1.5rem;
  }
  
  .livestream-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .livestream-actions {
    flex-direction: column;
  }
  
  .livestream-actions .btn {
    width: 100%;
  }
}


/* ============================================================
   Community Page — Redesign
   ============================================================ */

/* ── Livestream Card ── */
.livestream-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  border-radius: 20px;
}
.livestream-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.livestream-card__title {
  font-size: 1.5rem;
  margin: 0;
  color: var(--text);
}
.livestream-card__desc {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.livestream-card__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #ff4757, #ff2a3a);
  color: #fff;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.35);
}
.live-pill__dot {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.offline-pill {
  background: rgba(149, 165, 166, 0.25);
  color: #7f8c8d;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ── Bible Plan ── */
.bible-plan {
  max-width: 900px;
  margin: 0 auto;
}
.bible-plan__today-banner {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.9), rgba(58, 125, 60, 0.9));
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 16px;
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 24px rgba(44, 95, 46, 0.25);
}
.bible-plan__week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.bible-day-card {
  position: relative;
  padding: 1rem 0.75rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bible-day-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(31, 38, 135, 0.18);
}
.bible-day-card__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.bible-day-card__reading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.bible-day-card.past {
  opacity: 0.55;
}
.bible-day-card.today {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.18), rgba(212, 165, 116, 0.15));
  border-color: rgba(44, 95, 46, 0.4);
  box-shadow: 0 8px 24px rgba(44, 95, 46, 0.2);
}
.bible-day-card.today .bible-day-card__reading {
  color: var(--green);
}
.bible-day-card__badge {
  position: absolute;
  top: -10px;
  right: 8px;
  background: var(--green);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bible-plan__note {
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}
@media (max-width: 700px) {
  .bible-plan__week {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Featured Slideshow ── */
.featured-slideshow {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 16 / 9;
}
.featured-slideshow__slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.featured-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: inherit;
}
.featured-slide.active {
  opacity: 1;
  z-index: 1;
}
.featured-slide__overlay {
  width: 100%;
  padding: 2rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 70%);
  color: #fff;
}
.featured-slide__caption {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  line-height: 1.5;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.featured-slide__meta {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  opacity: 0.9;
}
.featured-slideshow__dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}
.featured-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}
.featured-dot.active {
  background: #fff;
  width: 28px;
  border-radius: 5px;
}

/* ── Instagram Grid ── */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.ig-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ig-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(31, 38, 135, 0.2);
}
.ig-card__image {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: #eee;
}
.ig-card__body {
  padding: 0.85rem 1rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
}
.ig-card__caption {
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
  color: var(--text);
}
.ig-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted);
}
.ig-empty {
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  border-radius: 16px;
}
.ig-empty p {
  margin: 0 0 1rem;
  color: var(--muted);
}

/* ── How-to Tutorial Cards ── */
.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
.howto-card {
  padding: 1.75rem;
  border-radius: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.howto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(31, 38, 135, 0.2);
}
.howto-card__icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}
.howto-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text);
}
.howto-card__intro {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 1rem;
  line-height: 1.5;
}
.howto-card details {
  margin-bottom: 1rem;
}
.howto-card summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--green);
  font-size: 0.9rem;
  padding: 0.3rem 0;
}
.howto-card summary::-webkit-details-marker { display: none; }
.howto-card summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.2s ease;
}
.howto-card details[open] summary::before {
  transform: rotate(90deg);
}
.howto-card ol {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.7;
}
.howto-card ol li {
  margin-bottom: 0.4rem;
}


/* ============================================================
   Homepage Showcase Carousel
   ============================================================ */

.showcase-section {
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}

.showcase-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top left, rgba(212, 165, 116, 0.18), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(44, 95, 46, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(26, 26, 26, 0.92) 0%, rgba(15, 15, 15, 0.96) 100%);
  z-index: 0;
}

.showcase-section .container {
  position: relative;
  z-index: 1;
}

.showcase-section .section-title {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.showcase-section .section-title::after {
  background: linear-gradient(90deg, var(--gold), #fff);
}

.showcase-section__intro {
  text-align: center;
  max-width: 620px;
  margin: -1.5rem auto 3rem;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}

/* --- Carousel container -------------------------------------------------- */
.showcase {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Side peeks — prev/next thumbnails fading into the background */
.showcase__peek {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 260px;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  filter: blur(6px) brightness(0.45) saturate(0.7);
  opacity: 0.55;
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: 0;
}
.showcase__peek--left  { left: -40px; }
.showcase__peek--right { right: -40px; }

/* Stage holds the centered card + nav arrows */
.showcase__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.showcase__slides {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 16 / 10;
  perspective: 1500px;
}

/* The slide itself */
.showcase-slide {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96) translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  pointer-events: none;
}
.showcase-slide.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Subtle Ken-Burns zoom on the active slide */
@keyframes showcase-kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}

.showcase-slide__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.showcase-slide.active .showcase-slide__image {
  animation: showcase-kenburns 12s ease-out forwards;
}

/* Vignette darkens the bottom so text has contrast */
.showcase-slide__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 35%,
      rgba(0, 0, 0, 0.55) 75%,
      rgba(0, 0, 0, 0.88) 100%);
}

.showcase-slide__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 2.75rem 2.25rem;
  color: #fff;
  z-index: 2;
}

.showcase-slide__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(212, 165, 116, 0.28);
  color: var(--gold);
  border: 1px solid rgba(212, 165, 116, 0.45);
  margin-bottom: 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.showcase-slide__title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.showcase-slide__body {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 0 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.showcase-slide__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.showcase-slide__cta:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  gap: 0.75rem;
}
.showcase-slide__cta span {
  transition: transform 0.3s ease;
}
.showcase-slide__cta:hover span {
  transform: translateX(3px);
}

/* Scripture slides get an elegant serif treatment */
.showcase-slide.is-scripture .showcase-slide__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
}
.showcase-slide.is-scripture .showcase-slide__body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-style: italic;
  line-height: 1.75;
}

/* Instagram slides get a pink/purple accent */
.showcase-slide.is-instagram .showcase-slide__eyebrow {
  background: linear-gradient(135deg, rgba(228, 64, 95, 0.35), rgba(245, 96, 64, 0.35));
  border-color: rgba(228, 64, 95, 0.55);
  color: #ffe6ec;
}

/* --- Nav arrows ---------------------------------------------------------- */
.showcase__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-bottom: 4px;
}
.showcase__nav:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.1);
}
.showcase__nav--prev { left: -24px; }
.showcase__nav--next { right: -24px; }

/* --- Dots ---------------------------------------------------------------- */
.showcase__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.showcase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.showcase-dot:hover {
  background: rgba(255, 255, 255, 0.55);
}
.showcase-dot.active {
  background: var(--gold);
  width: 32px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(212, 165, 116, 0.6);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .showcase__peek { display: none; }
  .showcase { padding: 0 1rem; }
  .showcase__nav--prev { left: -8px; }
  .showcase__nav--next { right: -8px; }
}
@media (max-width: 600px) {
  .showcase__slides { aspect-ratio: 4 / 5; }
  .showcase-slide__content { padding: 1.5rem 1.5rem 1.25rem; }
  .showcase-slide__body { display: none; }
  .showcase__nav { width: 40px; height: 40px; font-size: 1.3rem; }
}


/* ============================================================
   Platform CTA Cards (community page — Telegram / Spotify / Twitch / Instagram)

   Four parallel cards in the "Daily Touchpoints" row. Each card has a
   tinted glow, an icon bubble, title, blurb, bullet list, CTA button,
   and foot line. Brand color is set per-card via CSS variables.
   ============================================================ */

.community-feeds-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .community-feeds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .community-feeds-grid { grid-template-columns: 1fr; }
}

.platform-cta {
  /* Per-card brand theming — overridden by modifier classes below */
  --platform-color: #0088cc;
  --platform-color-2: #00a0e9;
  --platform-glow: rgba(0, 136, 204, 0.45);
  --platform-shadow: rgba(0, 136, 204, 0.4);
  --platform-dot-glow: rgba(0, 136, 204, 0.6);

  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 20px;
  overflow: hidden;
  min-height: 420px;
}

.platform-cta__glow {
  position: absolute;
  top: -40%;
  right: -30%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--platform-glow) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.platform-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.platform-cta__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--platform-color), var(--platform-color-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 10px 26px var(--platform-shadow);
}

.platform-cta__title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: var(--text);
}

.platform-cta__blurb {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 1rem;
}

.platform-cta__points {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
}

.platform-cta__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}

.platform-cta__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--platform-color);
  box-shadow: 0 0 8px var(--platform-dot-glow);
}

.platform-cta__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  font-size: 0.92rem;
  margin-top: auto;
}

.platform-cta__btn span {
  transition: transform 0.25s ease;
}

.platform-cta__btn:hover span {
  transform: translateX(4px);
}

.platform-cta__foot {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.6rem 0 0;
}

/* Brand color theming per platform */
.platform-cta--telegram {
  --platform-color: #0088cc;
  --platform-color-2: #00a0e9;
  --platform-glow: rgba(0, 136, 204, 0.45);
  --platform-shadow: rgba(0, 136, 204, 0.4);
  --platform-dot-glow: rgba(0, 136, 204, 0.6);
}
.platform-cta--spotify {
  --platform-color: #1DB954;
  --platform-color-2: #1ed760;
  --platform-glow: rgba(29, 185, 84, 0.45);
  --platform-shadow: rgba(29, 185, 84, 0.4);
  --platform-dot-glow: rgba(29, 185, 84, 0.6);
}
.platform-cta--twitch {
  --platform-color: #9146FF;
  --platform-color-2: #a970ff;
  --platform-glow: rgba(145, 70, 255, 0.45);
  --platform-shadow: rgba(145, 70, 255, 0.4);
  --platform-dot-glow: rgba(145, 70, 255, 0.6);
}
.platform-cta--instagram {
  /* Instagram uses its signature gradient on the icon */
  --platform-color: #E4405F;
  --platform-color-2: #fd1d1d;
  --platform-glow: rgba(228, 64, 95, 0.4);
  --platform-shadow: rgba(228, 64, 95, 0.4);
  --platform-dot-glow: rgba(228, 64, 95, 0.6);
}
.platform-cta--instagram .platform-cta__icon {
  background: linear-gradient(135deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5);
}

@media (max-width: 600px) {
  .platform-cta {
    min-height: auto;
    padding: 1.5rem 1.25rem;
  }
}


/* ============================================================
   Telegram CTA Card (community page — legacy, kept for any
   callers that still use the old class names)
   ============================================================ */

.telegram-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem 2rem;
  border-radius: 22px;
  overflow: hidden;
  min-height: 440px;
}

.telegram-cta__glow {
  position: absolute;
  top: -40%;
  right: -30%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 136, 204, 0.45) 0%, rgba(0, 136, 204, 0) 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.telegram-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.telegram-cta__icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0088cc, #00a0e9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 12px 32px rgba(0, 136, 204, 0.4);
}

.telegram-cta__title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.telegram-cta__blurb {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.telegram-cta__points {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text);
}

.telegram-cta__points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.telegram-cta__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0088cc;
  box-shadow: 0 0 8px rgba(0, 136, 204, 0.6);
}

.telegram-cta__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  margin-top: auto;
}

.telegram-cta__btn span {
  transition: transform 0.25s ease;
}

.telegram-cta__btn:hover span {
  transform: translateX(4px);
}

.telegram-cta__foot {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

@media (max-width: 600px) {
  .telegram-cta {
    min-height: auto;
    padding: 1.75rem 1.5rem;
  }
}


/* ============================================================
   Community Discussion section
   ============================================================ */

.discussion {
  max-width: 1080px;
  margin: 0 auto;
}

/* Stats strip at top */
.discussion__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.discussion__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.discussion__stat--text {
  flex-direction: row;
  align-items: center;
}

.discussion__stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.discussion__stat-num--online {
  color: var(--green);
  position: relative;
  padding-left: 1.1rem;
}

.discussion__stat-num--online::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
  animation: tg-pulse 2s infinite;
}

@keyframes tg-pulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.55; transform: translateY(-50%) scale(0.85); }
}

.discussion__stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.discussion__stat-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0088cc;
  text-decoration: none;
  transition: color 0.2s ease;
}

.discussion__stat-link:hover {
  color: #006ba3;
}

/* Action cards */
.discussion__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.discussion-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.discussion-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 136, 204, 0), rgba(0, 136, 204, 0.08));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.discussion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(31, 38, 135, 0.18);
}

.discussion-card:hover::after {
  opacity: 1;
}

.discussion-card__icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.discussion-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--text);
}

.discussion-card__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 1rem;
  flex: 1;
}

.discussion-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0088cc;
  margin-top: auto;
}

.discussion-card__action span {
  transition: transform 0.25s ease;
}

.discussion-card:hover .discussion-card__action span {
  transform: translateX(4px);
}

/* How-it-works info panel */
.discussion__howto {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  align-items: flex-start;
}

.discussion__howto-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.discussion__howto-body h4 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.discussion__howto-body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.discussion__howto-body a {
  color: #0088cc;
  font-weight: 600;
}

.discussion__howto-body a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .discussion__stats {
    gap: 1.25rem;
    padding: 1rem;
  }
  .discussion__stat-num {
    font-size: 1.4rem;
  }
  .discussion__howto {
    flex-direction: column;
    gap: 0.75rem;
  }
}


/* ============================================================
   Ministry Highlights — mixed grid (photos + videos + see-more)
   ============================================================ */

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

.highlight-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
  background: #111 center / cover no-repeat;
  box-shadow: 0 8px 24px rgba(31, 38, 135, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.highlight-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(31, 38, 135, 0.25);
}

/* Video tiles: native video fills the tile */
.highlight-tile--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Photo tiles: image fills the tile, mirrors the video tile shape so they
   sit on the same grid without visual jumps. */
.highlight-tile--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Overlay — visible by default, fades out slightly on hover */
.highlight-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.55) 80%,
    rgba(0, 0, 0, 0.85) 100%);
  color: #fff;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* When video is playing the controls should be usable; our overlay gets in
   the way. Just soften it on hover so the controls are easier to reach. */
.highlight-tile--video:hover .highlight-tile__overlay {
  opacity: 0.4;
}

.highlight-tile__type {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
  padding: 0.25rem 0.55rem;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 0.4rem;
  align-self: flex-start;
}

.highlight-tile__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* "See More" tile */
.highlight-tile--more {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.85), rgba(58, 125, 60, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.highlight-tile--more:focus {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.highlight-more {
  position: relative;
  width: 100%;
  height: 100%;
}

.highlight-more__default,
.highlight-more__choices {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  color: #fff;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.highlight-more__default {
  opacity: 1;
}
.highlight-more__choices {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  gap: 0.65rem;
  justify-content: center;
}

.highlight-tile--more.open .highlight-more__default {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
.highlight-tile--more.open .highlight-more__choices {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.highlight-more__icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}

.highlight-more__title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
  color: #fff;
}

.highlight-more__desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 240px;
}

.highlight-more__heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.highlight-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease, transform 0.2s ease;
  width: 85%;
  justify-content: center;
}

.highlight-more__btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.highlight-more__btn--ig {
  border-color: rgba(228, 64, 95, 0.6);
}

.highlight-more__btn--tg {
  border-color: rgba(0, 136, 204, 0.6);
}

/* Responsive */
@media (max-width: 900px) {
  .highlight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .highlight-grid {
    grid-template-columns: 1fr;
  }
  .highlight-tile {
    aspect-ratio: 4 / 3;
  }
}


/* ============================================================
   Contact — 3-column "pick your channel" layout
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}

.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

a.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(31, 38, 135, 0.2);
}

.contact-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.contact-card__icon--ig {
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}
.contact-card__icon--tg {
  background: linear-gradient(135deg, #0088cc 0%, #00a0e9 100%);
}
.contact-card__icon--email {
  background: linear-gradient(135deg, #2C5F2E 0%, #3a7d3c 100%);
}

.contact-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: var(--text);
}

.contact-card__desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 1.25rem;
  flex: 1;
}

.contact-card__cta {
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
}

a.contact-card--ig .contact-card__cta {
  color: #E4405F;
}
a.contact-card--tg .contact-card__cta {
  color: #0088cc;
}

a.contact-card .contact-card__cta span {
  transition: transform 0.25s ease;
}
a.contact-card:hover .contact-card__cta span {
  transform: translateX(4px);
}

/* --- Email card has a form inside --- */
.contact-card--email {
  cursor: default;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: auto;
}

.contact-form .form-row input,
.contact-form .form-row select,
.contact-form .form-row textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}

.contact-form .form-row input:focus,
.contact-form .form-row select:focus,
.contact-form .form-row textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(44, 95, 46, 0.15);
}

.contact-form .form-row textarea {
  min-height: 90px;
}

.contact-form .btn {
  margin-top: 0.25rem;
}

.form-error {
  display: none;
  padding: 0.6rem 0.85rem;
  background: rgba(192, 57, 43, 0.1);
  border: 1px solid rgba(192, 57, 43, 0.3);
  border-radius: 8px;
  color: #8a2318;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.form-success {
  display: none;
  padding: 0.85rem 1rem;
  background: rgba(44, 95, 46, 0.1);
  border: 1px solid rgba(44, 95, 46, 0.3);
  border-radius: 10px;
  color: var(--green);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 0.75rem;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive */
@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
  .contact-card--email {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-card--email {
    grid-column: auto;
  }
}


/* ============================================================
   "This Week in God's Word" — sub-section headings + podcast embed
   ============================================================ */

.week-subhead {
  max-width: 900px;
  margin: 3rem auto 1.25rem;
  text-align: center;
}

.week-subhead__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.5rem;
  letter-spacing: 0.01em;
}

.week-subhead__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 auto;
  max-width: 640px;
}

/* Spotify podcast embed */
.podcast-embed {
  max-width: 900px;
  margin: 0 auto;
}

.podcast-embed iframe {
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.18);
}

.podcast-embed__foot {
  text-align: center;
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.podcast-embed__foot a {
  color: #1DB954;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.podcast-embed__foot a:hover {
  color: #1ed760;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .week-subhead {
    margin-top: 2.5rem;
    padding: 0 1rem;
  }
  .podcast-embed iframe {
    border-radius: 12px;
  }
}


/* ============================================================
   Header socials — responsive spacing
   ============================================================ */

.header-social {
  gap: 0.5rem;
}
.header-social a {
  width: 34px;
  height: 34px;
}
.header-social svg {
  width: 18px;
  height: 18px;
}

/* On narrow phones, hide the social icons so hamburger + logo fit. */
@media (max-width: 480px) {
  .header-social { display: none; }
}


/* ============================================================
   Recommendations — What We're Listening To + Partner Ministries
   ============================================================ */

.reco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.reco-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.reco-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(31, 38, 135, 0.18);
}

.reco-card__header {
  margin-bottom: 0.5rem;
}

.reco-card__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.07);
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.reco-card__badge--spotify {
  background: rgba(29, 185, 84, 0.15);
  color: #1a7e3c;
}
.reco-card__badge--youtube {
  background: rgba(255, 0, 0, 0.1);
  color: #cc0000;
}
/* Friends in Jesus — creator-feed platform badges (added by
   .kiro/specs/friends-in-jesus-creator-platforms). YouTube channel and
   playlist reuse the YouTube red palette. Instagram uses the brand
   gradient (purple → pink → orange). Twitch uses brand purple. */
.reco-card__badge--youtube-channel,
.reco-card__badge--youtube-playlist {
  background: rgba(255, 0, 0, 0.1);
  color: #cc0000;
}
.reco-card__badge--instagram {
  background: linear-gradient(45deg,
    rgba(247, 119, 55, 0.18),
    rgba(220, 39, 67, 0.18) 50%,
    rgba(188, 24, 136, 0.18));
  color: #c13584;
}
.reco-card__badge--twitch {
  background: rgba(145, 70, 255, 0.15);
  color: #6441a5;
}
.reco-card__badge--drive {
  background: rgba(15, 157, 88, 0.12);
  color: #0a8f4d;
}

.reco-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 0.3rem;
  color: var(--text);
}

.reco-card__source {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
  font-weight: 600;
}

.reco-card__note {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0.75rem 0 1rem;
  font-style: italic;
}

.reco-card__embed {
  margin-bottom: 0.75rem;
}

.reco-card__embed iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
}

.reco-card__embed--video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.reco-card__embed--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.reco-card__thumb {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #eee;
  border-radius: 12px;
  margin-bottom: 0.75rem;
}

.reco-card__link {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.reco-card__link:hover {
  text-decoration: underline;
}

.reco-card__link span {
  transition: transform 0.25s ease;
}

.reco-card__link:hover span {
  transform: translateX(3px);
}

/* --- Partner cards --------------------------------------------------- */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  border-radius: 18px;
  text-decoration: none;
  text-align: center;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(31, 38, 135, 0.18);
}

.partner-card__logo {
  max-width: 120px;
  max-height: 80px;
  object-fit: contain;
}

.partner-card__name {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  color: var(--text);
}

.partner-card__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* --- Partner cards (rich profile variant) -----------------------------
   Appended below the existing .partner-card / .partner-card__logo /
   .partner-card__name / .partner-card__desc rules so the rich variant
   inherits the legacy base where it makes sense and overrides where
   the new layout demands it. Rich cards are <article>, not <a>, so
   they cannot inherit the wrapping-link semantics of the legacy card
   — that's what .partner-card--rich resets.
   Spec: .kiro/specs/partner-ministries-rich-profiles/ §5.2
   ====================================================================*/

.partner-card--rich {
  /* Override the legacy card's centered, anchor-styled chrome. The rich
     card is left-aligned, content-rich, and contains nested links. */
  display: block;
  text-align: left;
  padding: 1.75rem 1.5rem;
  cursor: default;          /* override the implicit pointer from <a> base */
  /* Span the full grid track so socials/photos/videos have room. */
  grid-column: 1 / -1;
}
.partner-card--rich:hover {
  /* Suppress the legacy translateY hover — the card is no longer a
     single click target. */
  transform: none;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.partner-card__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.partner-card__name-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

.partner-card--rich .partner-card__name {
  /* Reset the centered legacy treatment. */
  text-align: left;
  margin: 0;
}
.partner-card--rich .partner-card__name a {
  color: var(--green);
  text-decoration: none;
}
.partner-card--rich .partner-card__name a:hover,
.partner-card--rich .partner-card__name a:focus {
  text-decoration: underline;
}

.partner-card__poc {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  margin: 0;
}

.partner-card--rich .partner-card__desc {
  /* Smaller, lighter subtitle when shown alongside POC. */
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.partner-card__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.partner-card__social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.partner-card__social-link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.85);
}
.partner-card__social-link svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.partner-card__social-handle {
  font-size: 0.82rem;
  font-weight: 600;
}

.partner-card__story {
  margin: 0 0 1.25rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text);
}

.partner-card__photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}
.partner-card__photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.partner-card__videos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.partner-card__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}
.partner-card__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.partner-card__contributions {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--cream, #fdf6ec);
  border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0;
}
.partner-card__contributions-heading {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.partner-card__contributions ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.7;
}
.partner-card__contributions a {
  color: var(--green);
  text-decoration: underline;
}
.partner-card__contributions a:hover,
.partner-card__contributions a:focus {
  text-decoration: none;
}

/* --- Partner outreach preview strip --------------------------------- */
.partner-card__outreach-preview {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.partner-card__outreach-preview-heading {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #2C5F2E);
  font-weight: 700;
}
.partner-card__outreach-preview-meta {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.partner-card__outreach-thumbs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.partner-card__outreach-thumb {
  flex: 1;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--cream, #f5f0e8);
  min-height: 72px;
  overflow: hidden;
}
.partner-card__outreach-thumb--skeleton {
  background: linear-gradient(90deg, #e8e2d8 25%, #f0ebe2 50%, #e8e2d8 75%);
  background-size: 200% 100%;
  animation: thumb-shimmer 1.4s infinite;
}
.partner-card__outreach-thumb--empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  background: var(--cream, #f5f0e8);
  border-radius: 6px;
  min-height: 72px;
  padding: 0.5rem;
  text-align: center;
}
@keyframes thumb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.partner-card__outreach-cta {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.15s;
}
.partner-card__outreach-cta:hover,
.partner-card__outreach-cta:focus {
  opacity: 0.75;
}

/* --- Empty state shared --------------------------------------------- */
.reco-empty {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 2.25rem;
  text-align: center;
  border-radius: 16px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.reco-empty p {
  margin: 0;
}

@media (max-width: 600px) {
  .reco-grid,
  .partners-grid {
    grid-template-columns: 1fr;
  }
  .reco-card,
  .partner-card {
    padding: 1.25rem;
  }
  /* --- Partner cards (rich profile variant) — mobile overrides
     Spec: .kiro/specs/partner-ministries-rich-profiles/ §5.3 --- */
  .partner-card--rich {
    padding: 1.25rem;
  }
  .partner-card__header {
    /* Stack logo above the name+POC column on narrow screens. */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .partner-card__photos {
    grid-template-columns: 1fr;
  }
  .partner-card__socials {
    justify-content: center;
  }
  .partner-card__video {
    /* Aspect-ratio already responsive; explicit max-width belt-and-braces. */
    width: 100%;
  }
}


/* ============================================================
   Featured Elsewhere — partner/recommended content (community page)
   Visually distinct from STW-produced sections so readers know:
   this is external, not ours.
   ============================================================ */

.featured-elsewhere {
  position: relative;
  background:
    radial-gradient(ellipse at top left, rgba(212, 165, 116, 0.1), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(44, 95, 46, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(249, 246, 241, 0.5) 0%, rgba(255, 255, 255, 0.35) 100%);
}

.featured-elsewhere::before,
.featured-elsewhere::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(60%, 480px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44, 95, 46, 0.28), transparent);
}
.featured-elsewhere::before { top: 0; }
.featured-elsewhere::after  { bottom: 0; }

.featured-elsewhere__eyebrow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 0.75rem;
}

.featured-elsewhere__sub {
  margin-top: 3rem;
}

.featured-elsewhere__sub:first-of-type {
  margin-top: 0;
}

.featured-elsewhere__subtitle {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.5rem;
  text-align: center;
}

.featured-elsewhere__subdesc {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}


/* ============================================================
   Stay Connected — sub-section structure (Discussion + Feeds)
   ============================================================ */

.stay-sub {
  max-width: 1080px;
  margin: 3rem auto 0;
}
.stay-sub:first-of-type {
  margin-top: 0;
}

.stay-sub__title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.stay-sub__desc {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ============================================================
   Bridge teasers — small pull toward Friends in Jesus section
   ============================================================ */

.bridge-teaser {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 900px;
  margin: 1.5rem auto 0;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212, 165, 116, 0.14), rgba(44, 95, 46, 0.1));
  border: 1px solid rgba(212, 165, 116, 0.35);
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.bridge-teaser:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(31, 38, 135, 0.14);
  background: linear-gradient(90deg, rgba(212, 165, 116, 0.22), rgba(44, 95, 46, 0.16));
}

.bridge-teaser__label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.6);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.bridge-teaser__text {
  flex: 1;
  color: var(--text);
  font-weight: 500;
}

@media (max-width: 600px) {
  .bridge-teaser {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
  }
}


/* ============================================================
   Calendar — month-themed backdrop on the header
   Uses one of 12 images from assets/images/calendar-template/ as
   a subtle backdrop behind the month title & nav arrows. Live day
   grid below remains fully functional/unstyled by this.
   ============================================================ */

.calendar-header.has-month-bg {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  isolation: isolate;
  min-height: 92px;
}

.calendar-header.has-month-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--calendar-month-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  z-index: -2;
  transition: opacity 0.4s ease;
}

.calendar-header.has-month-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.82) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: -1;
}

.calendar-header.has-month-bg .calendar-month {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  color: #1a1a1a;
}

.calendar-header.has-month-bg .calendar-nav-btn {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
  .calendar-header.has-month-bg {
    padding: 1.25rem 1rem;
    min-height: 78px;
  }
}


/* ============================================================
   Calendar event color system (authoritative — overrides earlier)
   RED    = LIVE
   GREEN  = TODAY
   YELLOW = UPCOMING (within a week)
   PURPLE = FUTURE (more than a week out)
   BLUE   = RECURRING / routine
   ============================================================ */

.calendar-event {
  color: #1a1a1a;
  font-weight: 600;
  border: 1px solid transparent;
}

.calendar-event.live {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.55) 0%, rgba(192, 57, 43, 0.45) 100%);
  border-color: rgba(231, 76, 60, 0.75);
  color: #8a1a12;
  font-weight: 700;
  animation: pulse-live 2s infinite;
}

.calendar-event.today {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.5) 0%, rgba(44, 95, 46, 0.4) 100%);
  border-color: rgba(34, 197, 94, 0.75);
  color: #0e4723;
}

.calendar-event.upcoming {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.55) 0%, rgba(202, 138, 4, 0.45) 100%);
  border-color: rgba(234, 179, 8, 0.75);
  color: #6b4800;
}

.calendar-event.future {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.45) 0%, rgba(109, 40, 217, 0.4) 100%);
  border-color: rgba(147, 51, 234, 0.7);
  color: #4a1a7e;
}

.calendar-event.ongoing {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.5) 0%, rgba(41, 128, 185, 0.4) 100%);
  border-color: rgba(52, 152, 219, 0.75);
  color: #123a5c;
}

/* Legend dots mirror the same palette */
.legend-dot.live {
  background: linear-gradient(135deg, #ef4444, #c0392b);
  animation: pulse-live 2s infinite;
}
.legend-dot.today {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}
.legend-dot.upcoming {
  background: linear-gradient(135deg, #eab308, #ca8a04);
}
.legend-dot.future {
  background: linear-gradient(135deg, #9333ea, #6d28d9);
}
.legend-dot.ongoing {
  background: linear-gradient(135deg, #3498db, #2980b9);
}

/* ============================================================
   Event modal — redesigned card
   ============================================================ */

#event-modal-body {
  padding: 2rem 2.25rem;
}

.event-modal__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
.event-modal__badge--live {
  background: rgba(231, 76, 60, 0.18);
  color: #8a1a12;
}
.event-modal__badge--today {
  background: rgba(34, 197, 94, 0.18);
  color: #0e4723;
}
.event-modal__badge--upcoming {
  background: rgba(234, 179, 8, 0.22);
  color: #6b4800;
}
.event-modal__badge--future {
  background: rgba(147, 51, 234, 0.18);
  color: #4a1a7e;
}
.event-modal__badge--ongoing {
  background: rgba(52, 152, 219, 0.2);
  color: #123a5c;
}

.event-modal__title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 1rem;
  color: var(--text);
  line-height: 1.25;
}

.event-modal__meta {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.event-modal__meta li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
}

.event-modal__meta li span:first-child {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}

.event-modal__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  margin: 0 0 1.5rem;
}

.event-modal__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.event-modal__actions .btn {
  flex: 1 1 auto;
  min-width: 180px;
}

@media (max-width: 520px) {
  #event-modal-body {
    padding: 1.5rem 1.25rem;
  }
  .event-modal__title {
    font-size: 1.15rem;
  }
  .event-modal__actions {
    flex-direction: column;
  }
  .event-modal__actions .btn {
    width: 100%;
  }
}


/* ============================================================
   Store page — v2 (three bundles + honest pricing + support)
   ============================================================ */

/* --- Top transparency strip ----------------------------------------- */
.store-honesty {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.store-honesty__icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1.2;
}
.store-honesty__text p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
}
.store-honesty__text em {
  color: var(--green);
  font-weight: 600;
  font-style: normal;
}

/* --- Bundle cards grid ---------------------------------------------- */
.bundle-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.bundle-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(31, 38, 135, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bundle-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(31, 38, 135, 0.2);
}

.bundle-card-v2--featured {
  border: 2px solid var(--gold);
  box-shadow: 0 12px 32px rgba(212, 165, 116, 0.3), 0 8px 28px rgba(31, 38, 135, 0.12);
}

.bundle-card-v2__flag {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  background: linear-gradient(135deg, var(--gold), #e5b77f);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.45);
}

.bundle-card-v2__header {
  padding: 1.75rem 1.75rem 1.25rem;
  color: #fff;
  position: relative;
}
.bundle-card-v2__header--essentials {
  background: linear-gradient(135deg, #2C5F2E 0%, #3a7d3c 100%);
}
.bundle-card-v2__header--lifegroup {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}
.bundle-card-v2__header--ministry {
  background:
    linear-gradient(180deg, rgba(26, 26, 26, 0.88) 0%, rgba(26, 26, 26, 0.95) 100%),
    radial-gradient(circle at top right, rgba(212, 165, 116, 0.5), transparent 60%);
}

.bundle-card-v2__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.75rem;
}

.bundle-card-v2__title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
  line-height: 1.2;
  color: #fff;
}
.bundle-card-v2__title-sub {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  font-style: italic;
  opacity: 0.8;
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
}

.bundle-card-v2__price {
  font-size: 1.15rem;
  margin: 0;
  color: #fff;
}
.bundle-card-v2__price strong {
  font-size: 1.65rem;
  font-weight: 900;
}
.bundle-card-v2__subprice {
  font-size: 0.8rem;
  margin: 0.25rem 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

/* --- Card body ------------------------------------------------------ */
.bundle-card-v2__body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bundle-card-v2__pitch {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 1rem;
}

.bundle-card-v2__list-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0.5rem 0 0.5rem;
}

.bundle-card-v2__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bundle-card-v2__list li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  padding-left: 1.25rem;
  position: relative;
}
.bundle-card-v2__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 800;
}

.bundle-card-v2__hint {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 1rem;
}

.bundle-card-v2__invite {
  background: rgba(212, 165, 116, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin: 0 0 1.25rem;
}
.bundle-card-v2__invite p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
}
.bundle-card-v2__invite em {
  color: var(--green);
  font-style: italic;
}
.bundle-card-v2__invite--soft {
  background: rgba(44, 95, 46, 0.06);
  border-left-color: var(--green);
}

.bundle-card-v2__verse {
  background: rgba(26, 26, 26, 0.04);
  border-left: 3px solid var(--text);
  padding: 1rem 1.1rem;
  margin: 0 0 1.25rem;
  border-radius: 8px;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
}
.bundle-card-v2__verse cite {
  display: block;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.5rem;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* --- Quick support pills (on Bundle 3 + support panel) ------------- */
.bundle-card-v2__support {
  margin: 0 0 1.25rem;
}
.bundle-card-v2__support-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.bundle-card-v2__support-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.support-pill {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: rgba(44, 95, 46, 0.1);
  border: 1.5px solid rgba(44, 95, 46, 0.3);
  color: var(--green);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.support-pill:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 95, 46, 0.35);
}
.support-pill--open {
  background: transparent;
  border-style: dashed;
}

/* --- CTA at bottom of card ---------------------------------------- */
.bundle-card-v2__cta {
  margin-top: auto;
  padding-top: 0.5rem;
}
.bundle-card-v2__cta-sub {
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  margin: 0.5rem 0 0;
}

/* --- Support panel (below bundle grid) ----------------------------- */
.support-panel {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 2.25rem;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.support-panel__title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
  color: var(--text);
}

.support-panel__blurb {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 1rem;
}

.support-panel__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.support-panel__bullets li {
  font-size: 0.9rem;
  color: var(--text);
}

.support-panel__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.support-panel__amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.support-panel__note {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
  .bundle-cards {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin: 0 auto;
  }
}

@media (max-width: 720px) {
  .support-panel {
    grid-template-columns: 1fr;
    padding: 1.75rem 1.5rem;
  }
}

@media (max-width: 520px) {
  .bundle-card-v2__header,
  .bundle-card-v2__body {
    padding: 1.25rem 1.25rem;
  }
  .bundle-card-v2__title {
    font-size: 1.2rem;
  }
  .store-honesty {
    flex-direction: column;
    gap: 0.5rem;
  }
}


/* ============================================================
   Bundle card slideshows — store.html
   Rotates through images in assets/images/bundles/{key}/ using
   each bundle's images.json manifest. JS: bundle-slideshow.js
   ============================================================ */

.bundle-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0d0d10;
  overflow: hidden;
  border-radius: 0;
}

.bundle-card-v2 .bundle-slideshow {
  /* Slideshow sits between __header and __body */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bundle-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  pointer-events: none;
}

.bundle-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.bundle-slide__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.75rem 1rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.4;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.bundle-slide__caption:empty {
  display: none;
}

.bundle-slide-dots {
  position: absolute;
  bottom: 0.55rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  z-index: 3;
}

.bundle-slide-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.bundle-slide-dot:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.15);
}

.bundle-slide-dot.active {
  background: #fff;
  transform: scale(1.25);
}

/* Slightly softer frame for the ministry-invitation card */
.bundle-card-v2--invitation .bundle-slideshow {
  aspect-ratio: 21 / 9;
}

@media (max-width: 640px) {
  .bundle-slideshow {
    aspect-ratio: 4 / 3;
  }
  .bundle-card-v2--invitation .bundle-slideshow {
    aspect-ratio: 16 / 9;
  }
  .bundle-slide__caption {
    font-size: 0.78rem;
    padding: 1.25rem 0.9rem 0.75rem;
  }
}


/* ============================================================
   Store + Bundle Builder — content-area background wrapper
   Wraps content sections with store.jpg behind them. Sections
   keep their own translucent tints, so the image reads through
   clearly without overpowering the cards.
   ============================================================ */

.store-page-bg {
  position: relative;
  background: linear-gradient(135deg, #fff8ef 0%, #fdf3e3 50%, #f5ead8 100%);
}

.store-page-bg::before {
  display: none;
}

.store-page-bg > * {
  position: relative;
  z-index: 1;
}

/* Restore section tints — the warm gradient under .section--light /
   .section--white reads through the wrapper, matching the rest of
   the site's bright/radiant feel. */
.store-page-bg .section--light {
  background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(249,246,241,0.45) 100%);
}
.store-page-bg .section--white {
  background: rgba(255, 255, 255, 0.4);
}

/* Drop the heavy attachment trick on smaller screens. */
@media (max-width: 900px) {
  .store-page-bg {
    background-attachment: scroll;
  }
}


/* ============================================================
   Bundle cards — v3 "picture-forward"
   The slideshow IS the card. A glass-morphism overlay at the
   bottom carries the title, a short pitch, and a single CTA.
   Hover lifts and pushes the overlay up, revealing more photo.
   ============================================================ */

.bundle-card-v2 {
  position: relative;
  display: block;
  height: 520px;              /* cinematic tall card */
  border-radius: 22px;
  overflow: hidden;
  background: #0d0d10;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.25);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.4s ease;
  cursor: default;
}

.bundle-card-v2:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.32);
}

/* Slideshow fills the entire card */
.bundle-card-v2 .bundle-slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  z-index: 1;
}

.bundle-card-v2 .bundle-slide {
  transition: opacity 1100ms ease-in-out, transform 8s ease-out;
}

.bundle-card-v2:hover .bundle-slide.active {
  transform: scale(1.04);
}

/* Hide the JS-provided bottom caption — the card overlay replaces it */
.bundle-card-v2 .bundle-slide__caption {
  display: none;
}

/* Float the slideshow dots up near the top-right */
.bundle-card-v2 .bundle-slide-dots {
  bottom: auto;
  top: 0.9rem;
  left: auto;
  right: 1rem;
  justify-content: flex-end;
  z-index: 4;
}

/* ── Top-left eyebrow "flag" (tier badge) ────────────────────── */
.bundle-card-v2__eyebrow {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.bundle-card-v2--essentials .bundle-card-v2__eyebrow {
  background: rgba(44, 95, 46, 0.75);
}
.bundle-card-v2--lifegroup .bundle-card-v2__eyebrow {
  background: rgba(192, 57, 43, 0.75);
}
.bundle-card-v2--ministry .bundle-card-v2__eyebrow {
  background: rgba(212, 165, 116, 0.85);
  color: #1a1a1a;
}

/* ── "Most Given" corner ribbon ─────────────────────────────── */
.bundle-card-v2__flag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  padding: 0.35rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  background: linear-gradient(135deg, #F4D35E 0%, #D4A574 100%);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(212, 165, 116, 0.45);
}

/* When both eyebrow and flag are present, shift dots down a bit */
.bundle-card-v2__flag ~ .bundle-slideshow .bundle-slide-dots {
  top: auto;
  bottom: 40%;
}

/* Featured-card golden frame */
.bundle-card-v2--featured {
  box-shadow:
    0 0 0 2px rgba(212, 165, 116, 0.7),
    0 18px 48px rgba(212, 165, 116, 0.25),
    0 18px 48px rgba(15, 23, 42, 0.25);
}

/* ── Glass overlay at the bottom (title + pitch + CTA) ───────── */
.bundle-card-v2__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 1.5rem 1.5rem 1.35rem;
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 40%,
    rgba(0, 0, 0, 0.82) 100%
  );
  backdrop-filter: blur(2px);
  transition: padding 0.4s ease;
}

.bundle-card-v2:hover .bundle-card-v2__overlay {
  padding-bottom: 1.65rem;
}

.bundle-card-v2__title {
  font-size: 1.55rem;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.bundle-card-v2__title-sub {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
}

.bundle-card-v2__pitch {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  /* Clamp so the card is tidy on very long pitches */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bundle-card-v2__price {
  font-size: 0.82rem;
  margin: 0 0 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}
.bundle-card-v2__price strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: #F4D35E;
}

/* See-more CTA — pill-style, a notch brighter than the overlay */
.bundle-card-v2__see-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, gap 0.25s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.bundle-card-v2__see-more:hover {
  background: #fff;
  transform: translateX(3px);
  gap: 0.7rem;
}

.bundle-card-v2--lifegroup .bundle-card-v2__see-more {
  background: linear-gradient(135deg, #F4D35E 0%, #D4A574 100%);
}

.bundle-card-v2--ministry .bundle-card-v2__see-more {
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
}

.bundle-card-v2__see-more-arrow {
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.bundle-card-v2__see-more:hover .bundle-card-v2__see-more-arrow {
  transform: translateX(2px);
}

/* Tiny verse line for the ministry card (shown above the title) */
.bundle-card-v2__verse-line {
  display: block;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(244, 211, 94, 0.95);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .bundle-card-v2 {
    height: 480px;
  }
}

@media (max-width: 640px) {
  .bundle-card-v2 {
    height: 440px;
  }
  .bundle-card-v2__title {
    font-size: 1.35rem;
  }
  .bundle-card-v2__overlay {
    padding: 1.2rem 1.1rem 1.1rem;
  }
}


/* ============================================================
   Bundle Builder — v2 polish
   Richer bundle picker with thumbnails, glass panels, and a
   consistent look with the Store page.
   ============================================================ */

/* Intro block above the builder columns */
.builder-intro {
  max-width: 820px;
  margin: 0 auto 3rem;
  padding: 1.75rem 2rem;
  border-radius: 18px;
  text-align: center;
}
.builder-intro__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 0.65rem;
}
.builder-intro__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.75rem;
}
.builder-intro__body {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.builder-intro__body strong {
  color: var(--green);
}

/* Builder step panels — glass frames */
.builder-step {
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 18px;
  margin-bottom: 1.75rem;
}
.builder-step .builder-step__head {
  margin-top: 0;
}

/* Picture-forward bundle radios */
.bundle-radios {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.bundle-radio__card {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(221, 213, 200, 0.55);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bundle-radio__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #0d0d10;
}
.bundle-radio__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
}
.bundle-radio__body {
  padding: 0.9rem 1rem 1rem;
}
.bundle-radio__name {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}
.bundle-radio__blurb {
  display: block;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 0.5rem;
  min-height: 2.4em;
}
.bundle-radio__price {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
}
.bundle-radio input:checked ~ .bundle-radio__card {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.2), 0 10px 28px rgba(212, 165, 116, 0.18);
  transform: translateY(-3px);
}
.bundle-radio input:checked ~ .bundle-radio__card .bundle-radio__thumb::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(44, 95, 46, 0.35) 100%);
}

/* Support pill for builder ministry-track quick-give */
.builder-support-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
}

/* Summary panel — slightly brighter against the background */
.summary-panel {
  background: rgba(255, 255, 255, 0.94);
}

/* Responsive tweak for the intro block */
@media (max-width: 640px) {
  .builder-intro { padding: 1.4rem 1.25rem; }
  .builder-intro__title { font-size: 1.35rem; }
}


/* ============================================================
   Permanent "A Message from Our Friend" video card
   Sits above the dynamic partner-ministries grid on community.html.
   ============================================================ */

.friend-message {
  max-width: 880px;
  margin: 0 auto 2.5rem;
  padding: 1.5rem;
  border-radius: 20px;
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) 1fr;
  gap: 1.5rem;
  align-items: stretch;
  border-left: 4px solid var(--gold);
}

.friend-message__video {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0d0d10;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25);
  aspect-ratio: 9 / 16;
  max-height: 480px;
}

/* Landscape variant — used by the HungryGen Drive embed and any other
   16:9 video. Drops the portrait aspect-ratio so the iframe can render
   at its native shape without being cropped. */
.friend-message__video--landscape {
  aspect-ratio: 16 / 9;
  max-height: none;
}

.friend-message__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Drive / iframe-based friend-message embeds — iframes don't support
   object-fit, so they fill the wrapper explicitly. The wrapper's
   aspect-ratio (portrait 9:16 by default, or landscape via the
   --landscape modifier) determines the player shape. */
.friend-message__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.friend-message__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.friend-message__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin: 0;
}

.friend-message__title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
}

.friend-message__from {
  font-size: 0.92rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.friend-message__body p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

@media (max-width: 720px) {
  .friend-message {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
  .friend-message__video {
    max-height: 520px;
    margin: 0 auto;
    max-width: 320px;
    aspect-ratio: 9 / 16;
  }
  .friend-message__title {
    font-size: 1.25rem;
  }
}


/* ============================================================
   Ministry Outreach cards — news.html
   Three picture-forward cards with mixed-media (photo + video)
   slideshows on top, testimony/details on bottom. Invitation
   card styling for the "join us" placeholder.
   ============================================================ */

.outreach-section {
  padding: 4rem 0 3rem;
}

.outreach-subheading {
  text-align: center;
  max-width: 780px;
  margin: -1.5rem auto 2.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

.outreach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

.outreach-divider {
  max-width: 680px;
  margin: 2.5rem auto 2rem;
  text-align: center;
  position: relative;
}
.outreach-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.1), transparent);
}
.outreach-divider span {
  position: relative;
  background: var(--cream, #fdf6ec);
  padding: 0 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.outreach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.12);
}

.outreach-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.outreach-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #0d0d10;
  overflow: hidden;
}

.outreach-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  pointer-events: none;
}
.outreach-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.outreach-slide--video {
  background: #000;
}
.outreach-slide__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.outreach-slide__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 0.9rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.40) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.outreach-slide-dots {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  z-index: 3;
}
.outreach-slide-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.outreach-slide-dot:hover { background: rgba(255, 255, 255, 0.8); }
.outreach-slide-dot.active {
  background: #fff;
  transform: scale(1.25);
}

.outreach-card__body {
  padding: 1.25rem 1.35rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.outreach-card__date {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.outreach-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.3;
  color: var(--text);
}
.outreach-card__location {
  font-size: 0.85rem;
  margin: 0;
  color: var(--muted);
  font-style: italic;
}
.outreach-card__body-text {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0.35rem 0 0;
  color: var(--text);
}
.outreach-card__testimony {
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--text);
  background: rgba(212, 165, 116, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
}

.outreach-card__cta {
  margin-top: auto;
  padding-top: 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  align-self: flex-start;
  transition: gap 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.outreach-card__cta:hover {
  gap: 0.45rem;
  color: #1d3f1f;
}

/* Invitation card (placeholder/CTA) */
.outreach-card--invite {
  background: linear-gradient(145deg, rgba(212, 165, 116, 0.12), rgba(255, 255, 255, 0.6));
  border: 2px dashed rgba(212, 165, 116, 0.55);
}
.outreach-card__invite {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  flex: 1;
  min-height: 340px;
}
.outreach-card__invite-icon {
  font-size: 2.5rem;
  margin-bottom: 0.25rem;
}
.outreach-card__invite-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.75rem;
}

/* Testimony-submission call-out (sits below the grid) */
.outreach-callout {
  max-width: 780px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  text-align: center;
  border-left: 4px solid var(--green);
}
.outreach-callout h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.45rem;
  color: var(--text);
}
.outreach-callout p {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 auto 1rem;
  max-width: 640px;
  text-align: center;
}
.outreach-callout__actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: center;
}
.outreach-callout__note {
  margin: 0.9rem auto 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  max-width: 520px;
  text-align: center;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .outreach-grid {
    grid-template-columns: 1fr 1fr;
  }
  .outreach-card--invite { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .outreach-grid { grid-template-columns: 1fr; }
  .outreach-card--invite { grid-column: auto; }
  .outreach-card__invite { min-height: auto; padding: 1.75rem 1.25rem; }
}


/* ============================================================
   Homepage (post-hero) — light theme ("Jesus is the light")
   The hero and Showcase Carousel remain dark (entering the light).
   From the "Lives Changed" section onward, the page is a warm cream
   canvas with gold/green accents so the Gospel content reads clear.
   ============================================================ */

/* Shared light canvas for every homepage section after the Showcase */
.lives-changed,
.homepage-dashboard-section {
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  color: var(--text);
}

.lives-changed::before,
.homepage-dashboard-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top left, rgba(212, 165, 116, 0.22), transparent 58%),
    radial-gradient(ellipse at bottom right, rgba(44, 95, 46, 0.14), transparent 60%),
    linear-gradient(180deg, #fdf8f1 0%, #f5ead6 100%);
  z-index: 0;
}

/* Seam between Showcase (dark) and Lives Changed (light): a subtle
   gold-to-cream fade so the transition feels intentional. */
.lives-changed::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(20, 20, 20, 0.85) 0%,
    rgba(20, 20, 20, 0.35) 40%,
    rgba(20, 20, 20, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Extra top padding on Lives Changed so the seam doesn't crash
   into the section title. */
.lives-changed {
  padding-top: 6.5rem;
}

.lives-changed .container,
.homepage-dashboard-section .container {
  position: relative;
  z-index: 1;
}

.lives-changed .section-title,
.homepage-dashboard-section .section-title {
  color: var(--text);
}
.lives-changed .section-title::after,
.homepage-dashboard-section .section-title::after {
  background: linear-gradient(90deg, var(--green), var(--gold));
}

/* ── Shared subtitle treatment on the light canvas ─────────── */
.lives-changed__subtitle,
.homepage-dashboard-section__subtitle {
  text-align: center;
  max-width: 680px;
  margin: -1.5rem auto 3rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--muted);
}

/* ── Lives Changed (light testimony cards) ─────────────────── */
.testimony-card--dark {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(212, 165, 116, 0.25);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 30px rgba(66, 44, 16, 0.08);
}
.testimony-card--dark .testimony-card__avatar {
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.4), rgba(44, 95, 46, 0.35));
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(66, 44, 16, 0.15);
}
.testimony-card--dark .testimony-card__name { color: var(--text); }
.testimony-card--dark .testimony-card__text { color: #4d3f33; }
.testimony-card--dark .testimony-card__more {
  color: var(--green);
  background: none;
  border: 1px solid rgba(44, 95, 46, 0.35);
}
.testimony-card--dark .testimony-card__more:hover {
  background: rgba(44, 95, 46, 0.08);
  color: var(--green);
}

.lives-changed__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 3rem;
}

/* ── Today at Seed the Word — 3-card rail (light) ─────────── */
.homepage-dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1160px;
  margin: 0 auto;
}

.hd-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  padding: 1.5rem 1.5rem 1.35rem;
  min-height: 280px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(212, 165, 116, 0.3);
  backdrop-filter: blur(12px) saturate(140%);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(66, 44, 16, 0.08);
}
.hd-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 165, 116, 0.65);
  box-shadow: 0 22px 44px rgba(66, 44, 16, 0.14);
}

.hd-card__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 0.65rem;
}

.hd-card__title {
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 0.45rem;
}

.hd-card__meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.65rem;
  font-style: italic;
}

.hd-card__body-text,
.hd-card__fallback {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #3a2e22;
  margin: 0 0 0.85rem;
}
.hd-card__fallback {
  color: var(--muted);
  font-style: italic;
}

.hd-card__when {
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 0.55rem;
}
.hd-card__when strong {
  color: var(--green);
  letter-spacing: 0.06em;
}

.hd-card__cta {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s ease, color 0.2s ease;
  padding-top: 0.5rem;
}
.hd-card__cta:hover {
  color: #1d3f1f;
  gap: 0.5rem;
}

.hd-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.75rem;
}
.hd-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hd-chip:hover {
  background: #fff;
  transform: translateY(-1px);
}
.hd-chip--primary {
  background: linear-gradient(135deg, var(--gold) 0%, #e6b884 100%);
  color: #1a1a1a;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(212, 165, 116, 0.35);
}

/* Verse card — warm cream with a gold accent */
.hd-card--verse {
  background: linear-gradient(
    135deg,
    rgba(253, 248, 242, 0.95) 0%,
    rgba(244, 232, 211, 0.9) 100%
  );
  border-color: rgba(212, 165, 116, 0.55);
}
.hd-card__verse {
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
}
.hd-card__verse p {
  font-size: 1rem;
  line-height: 1.65;
  color: #3a2e22;
  font-style: italic;
  margin: 0 0 0.6rem;
}
.hd-card__verse cite {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green);
  font-style: normal;
  letter-spacing: 0.02em;
}

/* Outreach — image-forward */
.hd-card--outreach {
  padding: 0;
  min-height: 340px;
}
.hd-card--outreach .hd-card__image {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hd-card--outreach .hd-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
}
.hd-card--outreach .hd-card__body {
  padding: 1.25rem 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .homepage-dashboard { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .homepage-dashboard { grid-template-columns: 1fr; }
  .hd-card { min-height: auto; }
}


/* ============================================================
   The Path of Light — homepage ministry map
   A dark atmospheric canvas right under the hero, with a glowing
   white road winding down, waypoint cards alternating left/right,
   and a "Repeat" terminus at the bottom. Matches the hero's dark
   tone so the site feels like a single continuous journey.
   ============================================================ */

.the-path {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 5rem;
  color: rgba(255, 255, 255, 0.92);
  /* Deep night-sky backdrop */
  background:
    radial-gradient(ellipse at 20% 15%, rgba(212, 165, 116, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(44, 95, 46, 0.18), transparent 55%),
    linear-gradient(180deg, #0a0a0d 0%, #14131a 50%, #0a0a0d 100%);
}

/* Soft twinkling-stars layer using box-shadows */
.the-path__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 78% 22%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 25% 72%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 88% 68%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 55% 40%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 40% 90%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 92% 14%, rgba(255, 255, 255, 0.4), transparent 60%);
  opacity: 0.6;
}

.the-path__head {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  margin-bottom: 3.5rem;
}

.the-path__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(212, 165, 116, 0.9);
  margin: 0 0 0.85rem;
}

.the-path__title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 1.25rem;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.the-path__verse {
  margin: 0 auto 1.25rem;
  padding: 0;
  border: 0;
  max-width: 540px;
}
.the-path__verse p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  font-style: italic;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.the-path__verse cite {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(212, 165, 116, 0.9);
  font-style: normal;
  letter-spacing: 0.04em;
}

.the-path__subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  max-width: 640px;
  margin: 0 auto;
}

/* ── The road + waypoints ──────────────────────────────────── */
.the-path__road {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.the-path__road-svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}

.the-path__waypoints {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.waypoint {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 92px 1fr;
  min-height: 180px;
}

.waypoint--left  .waypoint__card { grid-column: 1; text-align: right; justify-self: end; }
.waypoint--left  .waypoint__marker { grid-column: 2; }
.waypoint--right .waypoint__card { grid-column: 3; text-align: left;  justify-self: start; }
.waypoint--right .waypoint__marker { grid-column: 2; }

.waypoint__marker {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(244, 232, 211, 0.95) 40%,
    rgba(212, 165, 116, 0.85) 100%
  );
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.06),
    0 0 28px rgba(255, 255, 255, 0.35),
    0 0 60px rgba(212, 165, 116, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.4);
  animation: waypointPulse 3.8s ease-in-out infinite;
}
@keyframes waypointPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(255,255,255,0.06), 0 0 28px rgba(255,255,255,0.35), 0 0 60px rgba(212,165,116,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(255,255,255,0.10), 0 0 42px rgba(255,255,255,0.55), 0 0 88px rgba(212,165,116,0.65); }
}

.waypoint__icon {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.waypoint__card {
  max-width: 420px;
  padding: 1.5rem 1.75rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.waypoint__card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 165, 116, 0.55);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

.waypoint__phase {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 165, 116, 0.92);
  margin: 0 0 0.3rem;
}

.waypoint__title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.35rem;
  letter-spacing: 0.01em;
}

.waypoint__tag {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
  margin: 0 0 0.9rem;
}

.waypoint__body {
  font-size: 0.93rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1rem;
}

.waypoint__link {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(212, 165, 116, 0.92);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.waypoint__link:hover { color: #fff; }

/* Repeat terminus */
.waypoint--repeat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: auto;
  margin-top: 0.5rem;
}
.waypoint__marker--repeat {
  animation: waypointSpin 10s linear infinite;
}
@keyframes waypointSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.waypoint--repeat .waypoint__icon {
  font-size: 2rem;
  color: #6b4d1d;
  text-shadow: none;
  filter: none;
  font-weight: 700;
  display: inline-block;
  /* counter-rotate so "↻" stays legible while the marker spins */
  animation: waypointCounterSpin 10s linear infinite;
}
@keyframes waypointCounterSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.waypoint__repeat-label {
  margin: 1rem 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212, 165, 116, 0.95);
}
.waypoint__repeat-sub {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  font-style: italic;
  text-align: center;
  max-width: 320px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 820px) {
  .the-path { padding: 4rem 0 3.5rem; }

  .the-path__road-svg {
    left: 36px;
    transform: none;
    width: 60px;
  }

  .the-path__waypoints { gap: 2.25rem; }

  .waypoint {
    grid-template-columns: 72px 1fr;
    min-height: auto;
  }
  .waypoint--left  .waypoint__marker,
  .waypoint--right .waypoint__marker { grid-column: 1; justify-self: center; }
  .waypoint--left  .waypoint__card,
  .waypoint--right .waypoint__card {
    grid-column: 2;
    text-align: left;
    justify-self: stretch;
    max-width: none;
  }

  .waypoint--repeat { grid-template-columns: 1fr; }
  .waypoint--repeat .waypoint__marker { justify-self: center; grid-column: 1; }
}

@media (max-width: 520px) {
  .waypoint__card { padding: 1.25rem; }
  .waypoint__title { font-size: 1.35rem; }
}


/* ============================================================
   Event modal — Share to Telegram / copy-announcement hint
   ============================================================ */
.event-modal__actions {
  flex-wrap: wrap;
}
.event-modal__share-hint {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--green);
  font-weight: 600;
  min-height: 1.2rem;
  text-align: center;
}


/* ============================================================
   Event modal — Share dropdown menu
   Multi-platform share (Telegram, WhatsApp, Instagram, Device
   share sheet, Copy) replacing the previous single Telegram CTA.
   ============================================================ */
.event-share {
  position: relative;
  display: inline-block;
}
.event-share__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.event-share__caret {
  font-size: 0.85em;
  opacity: 0.9;
  transition: transform 0.2s ease;
}
.event-share__toggle[aria-expanded="true"] .event-share__caret {
  transform: rotate(180deg);
}
.event-share__menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  z-index: 10;
  min-width: 280px;
  max-width: 320px;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.event-share__menu[hidden] { display: none; }

.event-share__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease;
}
.event-share__item:hover,
.event-share__item:focus-visible {
  background: rgba(44, 95, 46, 0.07);
  outline: none;
}
.event-share__item-icon {
  font-size: 1.35rem;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.event-share__item-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.event-share__item-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.event-share__item-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.3;
}

.event-modal__share-hint.is-error {
  color: #b95828;
}

@media (max-width: 520px) {
  .event-share__menu {
    position: fixed;
    top: auto;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    min-width: 0;
    max-width: none;
    padding: 0.5rem;
  }
}


/* ============================================================
   Calendar event chips — readable at every cell width
   The chips live inside each day cell. Prior styling truncated
   titles to 15 chars and forced a single line, which made the
   grid unreadable. This block overrides to allow wrapping with
   a clamp of 2 lines, tight line-height, and sizing that scales
   comfortably across desktop, tablet, and phone widths.
   ============================================================ */
.calendar-event {
  font-size: clamp(0.68rem, 1.3vw, 0.82rem);
  line-height: 1.25;
  padding: 0.25rem 0.45rem;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-align: left;
}

/* A little more room inside each day cell so 2-line chips don't
   crowd the day number */
.calendar-day {
  padding: 0.5rem 0.45rem;
  row-gap: 0.2rem;
}
.calendar-day .calendar-event + .calendar-event {
  margin-top: 0.2rem;
}

/* Mid-size tablets: keep cells roomy, chips slightly smaller */
@media (max-width: 900px) {
  .calendar-event {
    font-size: clamp(0.66rem, 1.5vw, 0.78rem);
    padding: 0.22rem 0.4rem;
  }
}

/* Phones: chip becomes a single visible line with ellipsis so the
   cells don't grow tall, but the full title still shows on tap
   (via the title attribute + the event modal). */
@media (max-width: 560px) {
  .calendar-event {
    font-size: 0.68rem;
    padding: 0.2rem 0.35rem;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}


/* ============================================================
   Event modal hero image + card thumbnail
   When a Google Calendar event description includes image URLs,
   the calendar renderer extracts them and shows them here. Single
   image = hero; 2+ images = horizontal gallery strip.
   ============================================================ */

.event-modal__hero {
  margin: -0.5rem -0.5rem 1.1rem;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}
.event-modal__hero--single img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}
.event-modal__hero--gallery {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem;
  background: transparent;
}
.event-modal__hero-item {
  flex: 0 0 auto;
  width: 240px;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
  scroll-snap-align: start;
  background: #111;
}
.event-modal__hero-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Compact thumbnail for announcement cards on news.html */
.event-card__thumb {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}


/* ============================================================
   Event image fallback — shown when a Google Drive image can't
   be loaded (usually because the file is shared as "restricted"
   rather than "anyone with the link"). Gives admins a clear hint
   about what to fix and keeps the layout from looking broken.
   ============================================================ */
.event-img-fallback {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  background: #fff8ea;
  border: 1px solid #f0c95b;
  border-radius: 10px;
  color: #5a3913;
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0 0 0.75rem;
}
.event-img-fallback--drive {
  background: #fff0ef;
  border-color: #f7bdb8;
  color: #7a2f2b;
}
.event-img-fallback__icon { font-size: 1.3rem; flex-shrink: 0; }
.event-img-fallback__body { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.event-img-fallback__body strong { font-size: 0.92rem; }
.event-img-fallback__body span { font-size: 0.82rem; opacity: 0.85; }
.event-img-fallback__link {
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  padding: 0.3rem 0.65rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 0.8rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.event-img-fallback__link:hover { background: rgba(0, 0, 0, 0.06); }


/* ============================================================
   Store Bundle Journey — store.html stepwise reveal
   See .kiro/specs/store-bundle-journey/ for spec.
   ============================================================ */

#journey-root {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.journey-step {
  position: relative;
}

/* Active step — full controls visible */
.journey-step--active {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  padding: 1.75rem 1.85rem 2rem;
}

.journey-step__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
}

.journey-step__num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4a574 0%, #f4c794 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(212, 165, 116, 0.35);
}

.journey-step__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
.journey-step__title:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
  border-radius: 4px;
}

.journey-step__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.journey-step__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Reveal transition */
.journey-step--entering {
  opacity: 0;
  transform: translateY(8px);
}
.journey-step--active {
  transition: opacity 280ms ease, transform 280ms ease;
  opacity: 1;
  transform: translateY(0);
}

/* Chip — collapsed prior step */
.journey-step--chip {
  padding: 0;
}
.journey-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 165, 116, 0.35);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.journey-chip:hover,
.journey-chip:focus-visible {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--gold);
  outline: none;
  transform: translateY(-1px);
}
.journey-chip__num {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4a574 0%, #f4c794 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey-chip__label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.journey-chip__value {
  flex: 1;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journey-chip__edit {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Pickable cards (recipient, quantity, volume tier) */
.journey-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}
.journey-pick {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem;
  background: rgba(255, 255, 255, 0.65);
  border: 2px solid rgba(212, 165, 116, 0.35);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.journey-pick:hover,
.journey-pick:focus-visible {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--gold);
  outline: none;
  transform: translateY(-2px);
}
.journey-pick--selected {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.95) 0%, rgba(58, 125, 60, 0.95) 100%);
  color: #fff;
  border-color: var(--green);
}
.journey-pick--selected .journey-pick__sub {
  color: rgba(255, 255, 255, 0.85);
}
.journey-pick__title {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
}
.journey-pick__sub {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Toggle pills (personalization, items, add-ons) */
.journey-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.journey-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(212, 165, 116, 0.35);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: rgba(44, 95, 46, 0.15);
}
.journey-pill:hover,
.journey-pill:focus-visible {
  background: rgba(255, 255, 255, 1);
  border-color: var(--gold);
  outline: none;
  transform: translateY(-1px);
}
.journey-pill--on {
  background: linear-gradient(135deg, var(--green) 0%, #3a7d3c 100%);
  color: #fff;
  border-color: var(--green);
}
.journey-pill--on::before {
  content: '✓';
  font-weight: 800;
}

/* Inline text inputs inside steps */
.journey-input,
.journey-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 2px solid rgba(212, 165, 116, 0.35);
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.journey-input:focus,
.journey-textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(44, 95, 46, 0.15);
}
.journey-textarea {
  min-height: 5rem;
  resize: vertical;
}
.journey-input--inline {
  max-width: 220px;
}

.journey-field-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .journey-field-grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.journey-field-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  margin: 0 0 0.4rem;
}
.journey-field-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

/* Sub-section heading inside a step (e.g. "What's in the box" vs "Personal touches") */
.journey-subhead {
  margin: 0.5rem 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Inline notice / warning under controls */
.journey-notice {
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(212, 165, 116, 0.15);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
}
.journey-notice--error {
  background: rgba(192, 57, 43, 0.08);
  border-left-color: var(--red);
  color: var(--red);
  font-weight: 600;
}

/* Step actions row */
.journey-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.5rem;
}
.journey-actions .btn {
  margin: 0;
}
.journey-skip {
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.4rem 0;
}
.journey-skip:hover,
.journey-skip:focus-visible {
  color: var(--green);
  outline: none;
}

/* Review block (final step on store.html) */
.journey-review {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.06) 0%, rgba(212, 165, 116, 0.08) 100%);
  border: 2px solid var(--gold);
  border-radius: 18px;
  padding: 2rem 2rem 2.25rem;
}
.journey-review__title {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
}
.journey-review__verse {
  background: rgba(44, 95, 46, 0.08);
  border-left: 3px solid var(--green);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  margin: 0 0 1.2rem;
  font-style: italic;
  color: #2b2b2b;
}
.journey-review__verse cite {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  font-style: normal;
  color: var(--green);
}
.journey-review__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.journey-review__list dt {
  font-weight: 700;
  color: var(--muted);
}
.journey-review__list dd {
  margin: 0;
  color: var(--text);
}
.journey-review__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* Per-Bible names list (Life Group) */
.journey-name-list {
  display: grid;
  gap: 0.6rem;
}
.journey-name-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.7rem;
  align-items: center;
}
.journey-name-row__label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .journey-step--active {
    padding: 1.4rem 1.2rem 1.6rem;
  }
  .journey-step__title {
    font-size: 1.2rem;
  }
  .journey-review {
    padding: 1.5rem 1.3rem 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-step--entering {
    opacity: 1;
    transform: none;
  }
  .journey-step--active {
    transition: none;
  }
}

/* Builder-page review layout (handoff page) */
.review-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .review-layout {
    grid-template-columns: 1fr;
  }
}
.review-card,
.review-form-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  padding: 1.85rem 1.85rem 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}
.review-card h2,
.review-form-card h2 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  font-weight: 800;
}
.review-form-card .form-row {
  margin-bottom: 1rem;
}
.review-form-card label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0 0 0.4rem;
}
.review-form-card input,
.review-form-card textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border: 2px solid rgba(212, 165, 116, 0.4);
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
}
.review-form-card input:focus,
.review-form-card textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(44, 95, 46, 0.15);
}
.review-form-card textarea {
  min-height: 5rem;
  resize: vertical;
}
.review-back {
  margin-top: 1rem;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: underline;
  cursor: pointer;
}
.review-thanks {
  text-align: center;
  padding: 1rem 0;
}
.review-thanks h3 {
  font-size: 1.3rem;
  color: var(--green);
  margin: 0 0 0.75rem;
}
.review-error-state {
  text-align: center;
  padding: 3rem 1rem;
}
.review-error-state h2 {
  margin: 0 0 0.85rem;
}


/* ============================================================
   Bundle Customization Tiers — store + bundle-builder
   Spec: .kiro/specs/bundle-customization-tiers/
   ============================================================ */

/* ── Recommended pill (gold ★ badge, larger, gold border) ── */
.journey-pill[data-tier="recommended"] {
  padding: 0.6rem 1.05rem 0.6rem 0.85rem;
  font-size: 0.97rem;
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.98) 0%, rgba(253, 243, 227, 0.98) 100%);
  font-weight: 600;
}
.journey-pill[data-tier="recommended"]::before {
  content: '★';
  display: inline-block;
  margin-right: 0.45rem;
  color: var(--gold);
  font-size: 1.05em;
  line-height: 1;
}
.journey-pill[data-tier="recommended"].journey-pill--on,
.journey-pill[data-tier="recommended"][aria-pressed="true"] {
  background: linear-gradient(135deg, var(--green) 0%, #3a7d3c 100%);
  color: #fff;
  border-color: var(--green);
}
.journey-pill[data-tier="recommended"].journey-pill--on::before,
.journey-pill[data-tier="recommended"][aria-pressed="true"]::before {
  color: var(--gold);
}

/* ── Special-order pill (inside the <details> card) ── */
.journey-pill[data-tier="special"] {
  border-color: rgba(212, 165, 116, 0.65);
  background: #fffaf0;
}
.journey-pill[data-tier="special"]::after {
  content: 'special-order';
  display: inline-block;
  margin-left: 0.4rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(212, 165, 116, 0.25);
  color: #7a5a2a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.journey-pill[data-tier="special"].journey-pill--on,
.journey-pill[data-tier="special"][aria-pressed="true"] {
  background: linear-gradient(135deg, #7a5a2a 0%, #a07a3c 100%);
  color: #fff;
  border-color: #7a5a2a;
}
.journey-pill[data-tier="special"].journey-pill--on::after,
.journey-pill[data-tier="special"][aria-pressed="true"]::after {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* ── Special-order collapsed card (uses native <details>) ── */
.journey-special-card {
  border: 1.5px dashed rgba(212, 165, 116, 0.6);
  border-radius: 12px;
  background: rgba(255, 250, 240, 0.5);
  padding: 0;
  margin: 0.85rem 0 0;
}
.journey-special-card[open] {
  background: rgba(255, 250, 240, 0.85);
}
.journey-special-card__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--text);
  user-select: none;
  -webkit-tap-highlight-color: rgba(212, 165, 116, 0.2);
}
.journey-special-card__summary::-webkit-details-marker { display: none; }
.journey-special-card__summary::marker { content: ''; }
.journey-special-card__summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  border-radius: 12px;
}
.journey-special-card__icon {
  font-size: 1.15em;
}
.journey-special-card__title {
  color: #7a5a2a;
}
.journey-special-card__hint {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.9rem;
}
.journey-special-card__chevron {
  margin-left: auto;
  color: #7a5a2a;
  transition: transform 200ms ease;
}
.journey-special-card[open] .journey-special-card__chevron {
  transform: rotate(180deg);
}
.journey-special-card__body {
  padding: 0 1rem 1rem;
}
.journey-special-card__warn {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  color: #7a5a2a;
  background: rgba(212, 165, 116, 0.18);
  border-left: 3px solid var(--gold);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .journey-special-card__chevron { transition: none; }
}

/* ── Pill row (pill + info icon + tooltip) ── */
.journey-pill-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
}

/* ── Info icon (i) ── */
.info-icon {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1.5px solid rgba(44, 95, 46, 0.4);
  background: rgba(255, 255, 255, 0.95);
  color: var(--green);
  font-style: italic;
  font-weight: 700;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: rgba(44, 95, 46, 0.15);
}
.info-icon:hover,
.info-icon:focus-visible {
  background: rgba(44, 95, 46, 0.08);
  border-color: var(--green);
}
.info-icon:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ── Info tooltip ── */
.info-tooltip {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.4rem;
  padding: 0.55rem 0.75rem;
  background: #2b2b2b;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
  border-radius: 6px;
  max-width: 18rem;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.info-tooltip[hidden] { display: none; }

/* Desktop hover/focus reveal (no JS click needed) */
@media (hover: hover) {
  .journey-pill-row:hover .info-tooltip,
  .info-icon:focus-visible ~ .info-tooltip,
  .info-icon[aria-expanded="true"] ~ .info-tooltip {
    display: block;
  }
}

/* Mobile/touch: render inline below the pill row, not absolute. */
@media (max-width: 600px) {
  .journey-pill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .info-tooltip {
    position: static;
    margin-top: 0.3rem;
    width: 100%;
    max-width: 100%;
    pointer-events: auto;
  }
}

/* ── Back-cover signing opt-out toggle ── */
.journey-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(212, 165, 116, 0.4);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.journey-toggle input { width: auto; margin: 0; }
.journey-toggle__hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

/* ── Guides cards (3 named cards instead of generic pills) ── */
.journey-guides-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}
.journey-guide-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(212, 165, 116, 0.4);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.journey-guide-card:hover,
.journey-guide-card:focus-visible {
  background: #fff;
  border-color: var(--gold);
  outline: none;
  transform: translateY(-1px);
}
.journey-guide-card[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(44, 95, 46, 0.95) 0%, rgba(58, 125, 60, 0.95) 100%);
  color: #fff;
  border-color: var(--green);
}
.journey-guide-card[aria-pressed="true"] .journey-guide-card__desc {
  color: rgba(255, 255, 255, 0.92);
}
.journey-guide-card__icon {
  font-size: 1.4rem;
  line-height: 1;
}
.journey-guide-card__title {
  font-weight: 700;
  font-size: 0.97rem;
  line-height: 1.25;
}
.journey-guide-card__desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Made-to-order badge inside pills (existing behavior; keep) ── */
/* (already styled inline in JS via ::after-style mini-badge HTML) */

/* ── Special-order banner on bundle-builder.html review ── */
.review-special-banner {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.18) 0%, rgba(255, 250, 240, 0.95) 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  color: #5a3f1a;
  font-size: 0.92rem;
  line-height: 1.55;
}
.review-special-banner strong {
  color: #7a5a2a;
  font-weight: 800;
}
.review-special-banner em {
  font-style: italic;
  color: #5a3f1a;
}


/* ============================================================
   Bundle Customization Tiers — readability pass
   Spec: .kiro/specs/bundle-customization-tiers/
   ============================================================ */

/* More breathing room between section headings on long step pages */
.journey-step__body > .journey-subhead {
  margin-top: 1.5rem;
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
  letter-spacing: 0.10em;
}
.journey-step__body > .journey-subhead:first-of-type {
  margin-top: 0.5rem;
}

/* Sub-group label inside the kit section */
.journey-subgroup {
  margin: 0.85rem 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.journey-pills + .journey-subgroup {
  border-top: 1px dashed rgba(212, 165, 116, 0.25);
  padding-top: 0.85rem;
}

/* Slightly roomier pills site-wide so a long row reads less dense */
.journey-pills {
  gap: 0.6rem;
  row-gap: 0.7rem;
}
.journey-pill {
  font-size: 0.95rem;
  padding: 0.55rem 1rem;
  line-height: 1.35;
}

/* Smaller, less-shouty info-icon so it doesn't compete with pills */
.info-icon {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.78rem;
  border-width: 1px;
  opacity: 0.75;
}
.info-icon:hover,
.info-icon:focus-visible {
  opacity: 1;
}
.journey-pill-row {
  gap: 0.35rem;
}

/* On mobile: bigger tap targets, larger pill text, tighter row gap
   (rows already wrap so the gap is what matters). */
@media (max-width: 600px) {
  .journey-pill {
    font-size: 1rem;
    padding: 0.7rem 1.05rem;
    min-height: 44px;
  }
  .info-icon {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.95rem;
    opacity: 1; /* mobile users need it more visible since no hover */
  }
  .journey-pills {
    gap: 0.6rem;
    row-gap: 0.65rem;
  }
  .journey-step__body > .journey-subhead {
    margin-top: 1.25rem;
  }
}

/* Special-order card — slightly more padding so it feels distinct */
.journey-special-card {
  margin-top: 1.25rem;
}
.journey-special-card__summary {
  padding: 0.85rem 1.1rem;
  font-size: 0.97rem;
}
@media (max-width: 600px) {
  .journey-special-card__summary {
    padding: 1rem 1rem;
    min-height: 48px;
  }
}

/* Sign-opt-out toggle — give it more presence so it's findable */
.journey-toggle {
  padding: 0.85rem 1.1rem;
  margin-top: 1rem;
  font-size: 0.97rem;
}
.journey-toggle input {
  width: 1.15rem;
  height: 1.15rem;
}
@media (max-width: 600px) {
  .journey-toggle {
    width: 100%;
    box-sizing: border-box;
  }
}


/* ── Testimony cards (Seed the Word Ministry palette) ─────────────
   Used by assets/js/testimonies.js to render approved entries from
   assets/data/testimonies.json on three site surfaces:
     - news.html  → .testimonies-grid (full body cards)
     - about.html → .testimonies-strip (compact 1-2 tile soft strip)
     - index.html → showcase-carousel slide with .is-testimony class
   Spec: .kiro/specs/ministry-ops-and-testimonies/ */

.testimony-card {
  background: #fff;
  border: 1px solid var(--border, #e8e4de);
  border-left: 4px solid var(--green, #2C5F2E);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 4px 18px rgba(31, 38, 135, 0.06);
  font-family: inherit;
  color: #2b2b2b;
}
.testimony-card__quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #2b2b2b;
  margin: 0;
}
.testimony-card__quote p { margin: 0 0 0.85rem; }
.testimony-card__quote p:last-child { margin-bottom: 0; }
.testimony-card__footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #e8e4de);
}
.testimony-card__author {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: var(--green, #2C5F2E);
  font-size: 0.95rem;
}
.testimony-card__verse {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold, #d4a574);
}

/* news.html grid — auto-fit, comfortable on desktop, 1-up on mobile */
.testimonies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 0;
}
@media (max-width: 640px) {
  .testimonies-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* about.html soft strip — horizontal pair under the gospel section */
.testimonies-strip-section { padding: 2.5rem 0 3rem; }
.testimonies-strip-section__title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green, #2C5F2E);
  margin: 0 0 0.25rem;
  letter-spacing: 0.02em;
}
.testimonies-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 2rem auto 0;
  max-width: 920px;
}
.testimony-card--compact {
  padding: 1.1rem 1.25rem;
  border-left-width: 3px;
}
.testimony-card--compact .testimony-card__quote {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 0.5rem;
}
.testimony-card--compact .testimony-card__author {
  font-size: 0.85rem;
  margin: 0;
}
.testimony-card--compact .testimony-card__verse {
  font-size: 0.7rem;
  margin-left: 0.5rem;
}

/* homepage showcase tile — dressed inside .showcase-slide; the
   showcase carousel handles the outer slide chrome, we just style
   the inner pull-quote so it visually matches a testimony rather
   than a generic slide. */
.showcase-slide.is-testimony .showcase-slide__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.35rem;
}

.testimonies-empty {
  text-align: center;
  color: var(--muted, #666);
  font-style: italic;
  padding: 2rem 1rem;
}


/* ── Testimonies archive page (testimonies.html) ───────────────
   Full-archive rendering of every published testimony. Reuses the
   .testimony-card styling defined above — only the page-level
   intro and empty-state need their own rules.
   Spec: .kiro/specs/ministry-ops-and-testimonies/ */

.testimonies-archive-section { padding: 3rem 0 5rem; }
.testimonies-archive-section__intro {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--muted, #666);
  line-height: 1.7;
  font-size: 1rem;
}
.testimonies-archive-section__intro a {
  color: var(--green, #2C5F2E);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.testimonies-archive-section__intro a:hover {
  text-decoration-thickness: 2px;
}

.testimonies-archive-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--muted, #666);
  font-style: italic;
  line-height: 1.7;
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto;
}
.testimonies-archive-empty a {
  color: var(--green, #2C5F2E);
  font-weight: 600;
  font-style: normal;
}

/* "Read every testimony →" link below the news.html grid. The
   renderer toggles this container's `hidden` attribute based on
   whether there are more entries than the news-page cap. */
.testimonies-archive-link {
  text-align: center;
  margin: 1.5rem 0 2rem;
}
.testimonies-archive-link[hidden] { display: none; }

/* Hero on the archive page — keep it short and warm, matching the
   .hero--testimonies pattern from news.html. Uses one of our existing
   ministry backgrounds. */
.hero--testimonies-archive {
  background-image: url('../images/backgrounds/bible-in-background.jpg');
  background-position: center 30%;
}


/* ============================================================
   Prayer Request Intake — cards + modal (community.html)
   Spec: .kiro/specs/prayer-request-intake/  (design §5.2–5.5)
   ============================================================ */

.prayer-intake-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (min-width: 760px) {
  .prayer-intake-row {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.prayer-intake-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-top: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.prayer-intake-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}
.prayer-intake-card--thanksgiving {
  border-top-color: var(--gold);
}
.prayer-intake-card__icon {
  font-size: 2rem;
  line-height: 1;
}
.prayer-intake-card__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--green);
  margin: 0;
}
.prayer-intake-card--thanksgiving .prayer-intake-card__title {
  color: #b78146;
}
.prayer-intake-card__subtitle {
  margin: 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
}
.prayer-intake-card__reassure {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
}
.prayer-intake-card__cta {
  appearance: none;
  border: 2px solid var(--green);
  background: var(--green);
  color: #fff;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: 0.4rem;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.prayer-intake-card__cta:hover,
.prayer-intake-card__cta:focus-visible {
  background: #3a7d3c;
  border-color: #3a7d3c;
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 6px 16px rgba(44, 95, 46, 0.35);
}
.prayer-intake-card--thanksgiving .prayer-intake-card__cta {
  background: var(--gold);
  border-color: var(--gold);
}
.prayer-intake-card--thanksgiving .prayer-intake-card__cta:hover,
.prayer-intake-card--thanksgiving .prayer-intake-card__cta:focus-visible {
  background: #b78146;
  border-color: #b78146;
  box-shadow: 0 6px 16px rgba(212, 165, 116, 0.45);
}

/* ── Modal ──────────────────────────────────────────────────── */
.prayer-intake-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.prayer-intake-modal[hidden] { display: none; }
.prayer-intake-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(4px);
}
.prayer-intake-modal__dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
.prayer-intake-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
.prayer-intake-modal__close:hover,
.prayer-intake-modal__close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
  outline: none;
}
.prayer-intake-modal__dialog h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4rem;
  color: var(--green);
  margin: 0 0 1.1rem;
  padding-right: 2rem;
}
body.prayer-intake-modal-open {
  overflow: hidden;
}

/* ── Form fields ────────────────────────────────────────────── */
.prayer-intake-form__kind {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.9rem 0.7rem;
  margin: 0 0 1rem;
}
.prayer-intake-form__kind legend {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.4rem;
}
.prayer-intake-form__kind label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.prayer-intake-form__field {
  display: block;
  margin: 0 0 1rem;
}
.prayer-intake-form__field > span {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.35rem;
}
.prayer-intake-form__field em {
  font-style: italic;
  color: var(--muted);
  font-weight: 400;
}
.prayer-intake-form__field input[type="text"],
.prayer-intake-form__field input[type="email"],
.prayer-intake-form__field textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.prayer-intake-form__field input:focus,
.prayer-intake-form__field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(44, 95, 46, 0.18);
}
.prayer-intake-form__field textarea {
  resize: vertical;
  min-height: 8rem;
}
.prayer-intake-form__counter {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
.prayer-intake-form__counter--warn { color: #b88227; font-weight: 600; }
.prayer-intake-form__counter--over { color: var(--red); font-weight: 700; }

.prayer-intake-form__anon {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 0.6rem;
  align-items: start;
  margin: 0 0 1rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.prayer-intake-form__anon input[type="checkbox"] {
  margin-top: 0.2rem;
}
.prayer-intake-form__anon span {
  font-weight: 600;
}
.prayer-intake-form__anon small {
  grid-column: 2;
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Honeypot — hidden from view AND from screen readers; legitimate browsers
   leave it blank. Bots that fill every field will trip the trap. */
.prayer-intake-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.prayer-intake-form__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  margin-top: 0.5rem;
}
.prayer-intake-form__actions button[type="submit"] {
  appearance: none;
  border: 0;
  background: linear-gradient(135deg, var(--green) 0%, #3a7d3c 100%);
  color: #fff;
  font-weight: 700;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(44, 95, 46, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.prayer-intake-form__actions button[type="submit"]:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(44, 95, 46, 0.45);
}
.prayer-intake-form__actions button[type="submit"][disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.prayer-intake-form__error {
  margin: 0;
  padding: 0.7rem 0.95rem;
  background: #fdecea;
  border: 1px solid #f5c2c0;
  color: #842029;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.prayer-intake-form__error[hidden] { display: none; }

.prayer-intake-form__success p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}


/* ──────────────────────────────────────────────────────────────
   Going Deeper Today — companion-streams row on community.html
   Quieter visual weight than the NT-walk weekly strip card above
   it. R2.10 + R11.1–11.5: smaller pills, lighter background, no
   today badge, mobile flex-wrap fallback. Heading copy is locked
   in JS to "🌿 Going deeper today".
   ────────────────────────────────────────────────────────────── */

.going-deeper {
  padding: 1.25rem 0 0;
  margin: 1.25rem auto 0;
  max-width: 920px;
  border-top: 1px solid rgba(44, 95, 46, 0.10);
}

.going-deeper__heading {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
  margin: 0 0 0.85rem;
  text-align: center;
}

.going-deeper__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.going-deeper__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: rgba(212, 165, 116, 0.08);
  border: 1px solid rgba(212, 165, 116, 0.25);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

a.going-deeper__pill:hover {
  background: rgba(212, 165, 116, 0.16);
  border-color: rgba(212, 165, 116, 0.45);
  transform: translateY(-1px);
}

.going-deeper__pill-label {
  color: var(--muted);
  font-weight: 500;
}

.going-deeper__pill-listen {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--green);
  color: white;
  font-size: 0.78rem;
  font-weight: 600;
}

@media (max-width: 540px) {
  .going-deeper__pill { font-size: 0.9rem; padding: 0.45rem 0.8rem; }
  .going-deeper__heading { letter-spacing: 0.14em; }
}


/* Brand-new-reader handoff under the Going Deeper row on community.html.
   Soft, optional, single sentence. Tone-matched to the row above. */
.newcomer-callout {
  margin: 1.25rem auto 0;
  padding: 0.85rem 1rem;
  max-width: 920px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
}
.newcomer-callout a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  font-style: normal;
}
.newcomer-callout a:hover { color: var(--gold); }


/* ──────────────────────────────────────────────────────────────
   Who is Jesus? video — Billy Graham sermon embedded as a
   "compelling first answer" between the dark hero and the
   gospel-narrative section. Calm cream backdrop bridges the two.
   ────────────────────────────────────────────────────────────── */

.who-is-jesus-video {
  background: #fdf3e3;
  padding: 4rem 1.5rem 4.5rem;
  border-bottom: 1px solid rgba(44, 95, 46, 0.08);
}
.who-is-jesus-video__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.who-is-jesus-video__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 400;
  color: var(--green);
  margin: 0 0 0.85rem;
  line-height: 1.3;
}
.who-is-jesus-video__caption {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 1.75rem;
  font-style: italic;
  line-height: 1.55;
}
.who-is-jesus-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0d0d10;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(44, 95, 46, 0.12);
}
.who-is-jesus-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Click-through card variant — used when the YouTube iframe is blocked
   by the anti-bot gate. Looks like a video player; clicks open YouTube. */
.who-is-jesus-video__card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0d0d10;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(44, 95, 46, 0.12);
  transition: transform 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
}
.who-is-jesus-video__card:hover,
.who-is-jesus-video__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.22);
}
.who-is-jesus-video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.who-is-jesus-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
  opacity: 0.92;
  transition: opacity 200ms ease, transform 200ms ease;
}
.who-is-jesus-video__card:hover .who-is-jesus-video__play,
.who-is-jesus-video__card:focus-visible .who-is-jesus-video__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}
.who-is-jesus-video__hint {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 540px) {
  .who-is-jesus-video {
    padding: 3rem 1rem 3.5rem;
  }
  .who-is-jesus-video__title {
    font-size: 1.35rem;
  }
}


/* ============================================================
   Your Walk reading tracker — panel + email modal + share modal
   Spec: .kiro/specs/your-walk-tracker/  (design §6.2)
   Visual posture: present-but-quiet. Reuses --green / --gold /
   --cream tokens. Never louder than the Bible-plan strip below it.
   ============================================================ */

.your-walk-section {
  padding: 2.5rem 0 1rem;
}

/* Narrow container so the panel does not visually compete with
   the wider Bible-plan grid below it (Requirement 2.2). */
.container.container--narrow {
  max-width: 760px;
}

.your-walk {
  background: var(--cream, #fdf3e3);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 1.4rem 1.5rem 1.25rem;
  box-shadow: 0 2px 10px rgba(31, 38, 135, 0.04);
}
.your-walk[hidden] { display: none; }

.your-walk__inner {
  position: relative;
}

.your-walk__title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green, #2C5F2E);
}

.your-walk__lede {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--muted, #555);
  line-height: 1.55;
}

.your-walk__streak {
  margin: 0 0 0.25rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--green, #2C5F2E);
  line-height: 1.3;
}

.your-walk__totals {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--muted, #555);
}

.your-walk__cta {
  appearance: none;
  background: var(--green, #2C5F2E);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0.65rem 1.25rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.your-walk__cta:hover:not([disabled]),
.your-walk__cta:focus-visible:not([disabled]) {
  background: #3a7d3c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(44, 95, 46, 0.30);
  outline: none;
}
.your-walk__cta[disabled] {
  opacity: 0.55;
  cursor: default;
}

.your-walk__settings {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: 0;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--muted, #777);
  cursor: pointer;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
}
.your-walk__settings:hover,
.your-walk__settings:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text, #2b2b2b);
  outline: none;
}

.your-walk__revoke-confirm {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border-left: 3px solid var(--gold, #d4a574);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text, #2b2b2b);
}

/* ── Celebration card (rendered inside the panel) ─────────────
   Small, warm, brief. No confetti. No sound. Auto-collapses
   after 8 seconds via the .your-walk__celebration--collapsed
   class (toggled by your-walk.js). */
.your-walk__celebration {
  margin-top: 1.1rem;
  padding: 0.95rem 1.1rem;
  background: #fff;
  border-left: 4px solid var(--gold, #d4a574);
  border-radius: 6px;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}
.your-walk__celebration--collapsed {
  opacity: 0.55;
}
.your-walk__celebration-headline {
  margin: 0 0 0.2rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green, #2C5F2E);
}
.your-walk__celebration-desc {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  color: var(--text, #2b2b2b);
  line-height: 1.55;
}
.your-walk__celebration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.your-walk__celebration-share,
.your-walk__celebration-dismiss {
  appearance: none;
  border: 1px solid rgba(44, 95, 46, 0.25);
  background: transparent;
  color: var(--green, #2C5F2E);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.2s ease;
}
.your-walk__celebration-share:hover,
.your-walk__celebration-share:focus-visible {
  background: rgba(44, 95, 46, 0.06);
  border-color: var(--green, #2C5F2E);
  outline: none;
}
.your-walk__celebration-dismiss {
  color: var(--muted, #666);
  border-color: rgba(0, 0, 0, 0.10);
}
.your-walk__celebration-dismiss:hover,
.your-walk__celebration-dismiss:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  outline: none;
}

/* ── Modal (email + share — same styling, mirrors the
   .prayer-intake-modal / .donate-modal pattern) ──────────────── */
.your-walk-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.your-walk-modal[hidden] { display: none; }
.your-walk-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(4px);
}
.your-walk-modal__dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  max-width: 540px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
.your-walk-modal__close {
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  background: transparent;
  border: 0;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--muted, #666);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
.your-walk-modal__close:hover,
.your-walk-modal__close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text, #2b2b2b);
  outline: none;
}
.your-walk-modal__dialog h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  color: var(--green, #2C5F2E);
  margin: 0 0 1rem;
  padding-right: 2rem;
}
body.your-walk-modal-open {
  overflow: hidden;
}

/* ── Form fields ────────────────────────────────────────────── */
.your-walk-form__field {
  display: block;
  margin: 0 0 0.95rem;
}
.your-walk-form__field > span {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #2b2b2b);
  margin: 0 0 0.35rem;
}
.your-walk-form__field input[type="email"],
.your-walk-form__field input[type="text"],
.your-walk-form__field textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--border, #e8e4de);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text, #2b2b2b);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.your-walk-form__field input:focus,
.your-walk-form__field textarea:focus {
  outline: none;
  border-color: var(--green, #2C5F2E);
  box-shadow: 0 0 0 3px rgba(44, 95, 46, 0.18);
}
.your-walk-form__field textarea {
  resize: vertical;
  min-height: 7rem;
}
.your-walk-form__lede {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--muted, #555);
  line-height: 1.55;
}
.your-walk-form__counter {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  color: var(--muted, #666);
  margin-top: 0.25rem;
}

/* Honeypot — visually hidden AND aria-hidden in markup. */
.your-walk-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.your-walk-form__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  margin-top: 0.4rem;
}
.your-walk-form__actions button[type="submit"] {
  appearance: none;
  border: 0;
  background: linear-gradient(135deg, var(--green, #2C5F2E) 0%, #3a7d3c 100%);
  color: #fff;
  font-weight: 700;
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(44, 95, 46, 0.30);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.your-walk-form__actions button[type="submit"]:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(44, 95, 46, 0.40);
}
.your-walk-form__actions button[type="submit"][disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.your-walk-form__error {
  margin: 0;
  padding: 0.7rem 0.95rem;
  background: #fdecea;
  border: 1px solid #f5c2c0;
  color: #842029;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.your-walk-form__error[hidden] { display: none; }


/* ============================================================
   Ministry Outreach — overflow / "See more" expansion
   ============================================================ */
.outreach-overflow-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.outreach-overflow__toggle {
  min-width: 220px;
}
.outreach-overflow__testimonies-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.15s;
}
.outreach-overflow__testimonies-link:hover { opacity: 0.72; }

.outreach-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.85rem;
}
.outreach-card__gallery-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.15s, color 0.15s;
}
.outreach-card__gallery-link:hover {
  gap: 0.45rem;
  color: #1d3f1f;
}

/* ============================================================
   Ministry Highlights — gallery CTA tile + subheading link
   ============================================================ */
.highlights-gallery-link {
  display: inline-block;
  margin-left: 0.5rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-size: 0.95rem;
  transition: opacity 0.15s;
}
.highlights-gallery-link:hover { opacity: 0.72; }

.highlight-tile--gallery-cta {
  background: linear-gradient(145deg, rgba(44,95,46,0.08) 0%, rgba(212,165,116,0.08) 100%);
  border: 2px solid rgba(44,95,46,0.22);
}
.highlight-gallery-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.65rem;
  padding: 2rem 1.5rem;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.highlight-gallery-cta__icon {
  font-size: 2.5rem;
}
.highlight-gallery-cta__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green);
  margin: 0;
}
.highlight-gallery-cta__desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  max-width: 180px;
}
.highlight-gallery-cta__action {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--green);
  margin-top: 0.5rem;
}

/* ============================================================
   Ministry Stories (testimonies.html) — section wrapper
   ============================================================ */
.ministry-stories-section { padding: 4rem 0; }
.outreach-stories-empty {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 2rem 0;
}

/* ============================================================
   Ministry Gallery grid (testimonies.html)
   ============================================================ */
.ministry-gallery-section { padding: 4rem 0 5rem; }

.ministry-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}
.gallery-loading,
.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 2rem 0;
}
.gallery-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: var(--border);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  padding: 0;
}
.gallery-thumb:hover,
.gallery-thumb:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  outline: 3px solid var(--green);
  outline-offset: 2px;
  z-index: 1;
}
.gallery-thumb__group {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.3rem 0.5rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.62));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.15s;
}
.gallery-thumb:hover .gallery-thumb__group,
.gallery-thumb:focus-visible .gallery-thumb__group {
  opacity: 1;
}
@media (max-width: 600px) {
  .ministry-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.35rem;
  }
}

/* ============================================================
   Lightbox viewer
   ============================================================ */
.ministry-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(6px);
}
.lightbox__shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  grid-template-rows: 1fr auto;
  gap: 0.75rem;
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  width: 100%;
  align-items: center;
}
.lightbox__stage {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 80vh;
}
.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  display: block;
}
.lightbox__prev,
.lightbox__next {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  align-self: center;
}
.lightbox__prev { grid-column: 1; grid-row: 1; }
.lightbox__next { grid-column: 3; grid-row: 1; }
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255,255,255,0.25); }
.lightbox__prev:disabled,
.lightbox__next:disabled { opacity: 0.25; cursor: default; }

.lightbox__meta {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.lightbox__counter {
  font-size: 0.78rem;
  opacity: 0.6;
  margin: 0;
}
.lightbox__group {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0;
}
.lightbox__caption {
  font-size: 0.9rem;
  font-style: italic;
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
}

.lightbox__close {
  position: absolute;
  top: -3rem;
  right: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}
.lightbox__close:hover { background: rgba(255,255,255,0.28); }

@media (max-width: 600px) {
  .lightbox__shell {
    grid-template-columns: 36px 1fr 36px;
    max-height: 95vh;
  }
  .lightbox__img { max-height: 70vh; }
  .lightbox__prev,
  .lightbox__next {
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
  }
  .lightbox__close { top: -2.5rem; }
}


/* ============================================================
   Bible Counter — milestone card (news.html) + inline (store.html)
   ============================================================ */
.bible-counter {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto 2.5rem;
  padding: 1.75rem 2rem;
  border-radius: 16px;
  border-left: 4px solid var(--green, #2C5F2E);
}
.bible-counter__icon {
  font-size: 2.8rem;
  flex-shrink: 0;
  line-height: 1;
}
.bible-counter__body {
  flex: 1;
  min-width: 0;
}
.bible-counter__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green, #2C5F2E);
  margin: 0 0 0.2rem;
}
.bible-counter__number {
  line-height: 1;
  margin: 0 0 0.25rem;
}
.bible-counter__num {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--text, #2b2b2b);
  font-variant-numeric: tabular-nums;
}
.bible-counter__goal {
  font-size: 0.88rem;
  color: var(--muted, #666);
  margin: 0 0 0.85rem;
}
.bible-counter__bar-wrap {
  height: 8px;
  background: var(--border, #e8e4de);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.bible-counter__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green, #2C5F2E), #5a9e5c);
  border-radius: 99px;
  transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.bible-counter__pct {
  font-size: 0.78rem;
  color: var(--muted, #666);
  margin: 0;
}

/* Inline variant (store.html) */
.bible-counter-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.97rem;
  color: var(--muted, #666);
}
.bible-counter-inline__icon {
  font-size: 1.1rem;
}
.bible-counter-inline__num {
  color: var(--green, #2C5F2E);
  font-weight: 700;
}

@media (max-width: 600px) {
  .bible-counter {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
  }
}

/* Bible counter — store page celebration card */
.bible-counter-store {
  margin-top: 1.5rem;
  padding: 2rem 2.25rem;
  border-radius: 16px;
  border-left: 5px solid var(--green, #2C5F2E);
  background: linear-gradient(135deg, rgba(44,95,46,0.06) 0%, rgba(212,165,116,0.06) 100%);
  text-align: center;
}
.bible-counter-store__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.bible-counter-store__emoji {
  font-size: 3rem;
  flex-shrink: 0;
  line-height: 1;
}
.bible-counter-store__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green, #2C5F2E);
  margin: 0 0 0.2rem;
}
.bible-counter-store__number {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  color: var(--green, #2C5F2E);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 0 0 0.3rem;
}
.bible-counter-store__sub {
  font-size: 0.95rem;
  color: var(--text, #2b2b2b);
  margin: 0;
  line-height: 1.5;
}
.bible-counter-store__call {
  font-size: 1rem;
  color: var(--muted, #666);
  line-height: 1.7;
  margin: 0;
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .bible-counter-store {
    padding: 1.5rem 1rem;
  }
  .bible-counter-store__top {
    flex-direction: column;
    gap: 0.5rem;
  }
}