/* =================================================================
   Jesus Life Spring Evangelism Church (JLSE)
   Revolut-Grade Editorial Design System Stylesheet
   Strict Mobile-First Architecture (100% Zero-Breakout Guarantee)
   High-Contrast Two-Mode Canvas (#000000 / #ffffff)
   ================================================================== */

@import url('variables.css');

/* -----------------------------------------------------------------
   1. ROOT CAUSE ELIMINATION & ZERO-BREAKOUT CONSTRAINTS
   ----------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body-md);
  line-height: 1.5;
  color: var(--on-dark);
  background-color: var(--canvas-dark);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, iframe {
  max-width: 100% !important;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

button, input, select, textarea {
  font: inherit;
  font-size: 16px !important; /* Prevents auto-zoom on mobile iOS Safari */
  color: inherit;
  background: none;
  border: none;
  box-sizing: border-box;
}

button {
  cursor: pointer;
  user-select: none;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* -----------------------------------------------------------------
   2. TYPOGRAPHY PRIMITIVES & FLUID CLAMPS
   ----------------------------------------------------------------- */
.display-xxl {
  font-family: var(--font-display);
  font-size: var(--font-size-display-xxl);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: var(--letter-spacing-display-xxl);
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--font-size-display-xl);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-display-xl);
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--font-size-display-lg);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-display-lg);
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--font-size-display-md);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-display-md);
}

.heading-lg {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-lg);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-heading-lg);
}

.heading-md {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-md);
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 0;
}

.heading-sm {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  font-weight: 400;
  line-height: 1.56;
  letter-spacing: -0.09px;
}

.body-md {
  font-family: var(--font-body);
  font-size: var(--font-size-body-md);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-ui);
}

.body-md-bold {
  font-family: var(--font-body);
  font-size: var(--font-size-body-md);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-ui-bold);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--font-size-body-sm);
  font-weight: 400;
  line-height: 1.45;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: 400;
  line-height: 1.4;
}

/* -----------------------------------------------------------------
   3. TWO-MODE CANVAS BANDS & LAYOUT ARCHITECTURE
   ----------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 24px);
  padding-right: clamp(16px, 4vw, 24px);
  box-sizing: border-box;
}

.container-narrow {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.band-dark {
  background-color: var(--canvas-dark);
  color: var(--on-dark);
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
  position: relative;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.band-light {
  background-color: var(--canvas-light);
  color: var(--ink);
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
  position: relative;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.band-hero {
  padding-top: calc(var(--header-height) + clamp(24px, 4vw, 48px));
  padding-bottom: clamp(48px, 8vw, 96px);
  overflow-x: hidden;
}

.section-header {
  margin-bottom: clamp(28px, 4vw, 52px);
  width: 100%;
}

.section-header.text-center {
  text-align: center;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 14px;
  background-color: var(--surface-soft);
  color: var(--ink);
  border-radius: var(--rounded-full);
  font-size: var(--font-size-caption);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-ui);
  text-transform: uppercase;
  margin-bottom: var(--spacing-md);
  max-width: 100%;
}

.band-dark .section-tag {
  background-color: var(--surface-elevated);
  color: var(--on-dark-mute);
  border: 1px solid var(--hairline-dark);
}

.section-tag-featured {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
  border: none !important;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-lg);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-display-lg);
  margin-bottom: var(--spacing-md);
  word-wrap: break-word;
}

.band-dark .section-title {
  color: var(--on-dark);
}

.band-light .section-title {
  color: var(--ink);
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  line-height: 1.56;
  max-width: 680px;
}

.band-dark .section-subtitle {
  color: var(--on-dark-mute);
}

.band-light .section-subtitle {
  color: var(--mute);
}

.section-header.text-center .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------------------------------------
   4. BUTTON & INTERACTIVE TOUCH PRIMITIVES (MIN 48px HEIGHT)
   ----------------------------------------------------------------- */
.btn,
.button-primary,
.button-dark,
.button-soft,
.button-outline-light,
.button-outline-dark,
.button-pill-sm,
.btn-pay-tier,
.btn-pay-now,
.btn-pay-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: 48px;
  height: auto;
  padding: 12px 24px;
  border-radius: var(--rounded-full);
  font-family: var(--font-body);
  font-size: var(--font-size-body-md);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-ui);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:active,
.button-primary:active,
.button-dark:active {
  transform: scale(0.98);
}

/* button-primary: Pure White Pill CTA on Dark */
.button-primary,
.btn-primary,
.btn-gold {
  background-color: var(--canvas-light);
  color: var(--canvas-dark);
  border: none;
}

.button-primary:hover,
.btn-primary:hover,
.btn-gold:hover {
  background-color: #f0f0f3;
  color: var(--canvas-dark);
}

.button-primary:active,
.btn-primary:active {
  background-color: var(--faint);
}

/* button-dark: Dark CTA on Light Canvas */
.button-dark,
.btn-dark {
  background-color: var(--canvas-dark);
  color: var(--on-dark);
  border: none;
}

.button-dark:hover,
.btn-dark:hover {
  background-color: #1a1a1c;
  color: var(--on-dark);
}

/* button-soft: Soft Off-White CTA */
.button-soft,
.btn-soft {
  background-color: var(--surface-soft);
  color: var(--ink);
  border: none;
}

.button-soft:hover,
.btn-soft:hover {
  background-color: #eaeaea;
}

/* button-outline-light: Outlined CTA on Light Canvas */
.button-outline-light,
.btn-outline-light {
  background-color: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
}

.button-outline-light:hover,
.btn-outline-light:hover {
  background-color: var(--surface-soft);
}

/* button-outline-dark: Outlined CTA on Dark Canvas */
.button-outline-dark,
.btn-outline-dark,
.btn-outline {
  background-color: transparent;
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.button-outline-dark:hover,
.btn-outline-dark:hover,
.btn-outline:hover {
  border-color: var(--on-dark);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
}

.button-pill-sm,
.btn-sm {
  min-height: 48px;
  padding: 10px 20px;
  font-size: var(--font-size-body-sm);
  font-weight: 600;
}

.btn-large {
  min-height: 52px;
  padding: 14px 32px;
  font-size: 16px;
}

.btn-block {
  width: 100% !important;
  display: flex !important;
}

.btn-live {
  background-color: var(--accent-danger);
  color: #ffffff;
  border: none;
}

.btn-live:hover {
  background-color: #cc1f2e;
  color: #ffffff;
}

/* -----------------------------------------------------------------
   5. STICKY DARK HEADER & FROSTED GLASS MOBILE DRAWER
   ----------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--header-height);
  background-color: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  text-decoration: none;
  flex-shrink: 0;
}

.brand-emblem-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--rounded-full);
  overflow: hidden;
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-emblem-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-title-wrap {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--on-dark);
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.brand-subtitle {
  font-size: 10px;
  font-weight: 500;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  color: var(--on-dark-mute);
  letter-spacing: var(--letter-spacing-ui);
  padding: 8px 0;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--on-dark);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--on-dark);
  border-radius: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Accessible Hamburger Button (Strict 48px Target) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
  border-radius: var(--rounded-full);
  background-color: transparent;
  z-index: 1002;
  cursor: pointer;
  border: none;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--on-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Frosted Glass Mobile Drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth);
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100%;
  height: 100dvh;
  background: rgba(10, 15, 29, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid var(--hairline-dark);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1002;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.mobile-drawer.open {
  transform: translateX(0);
}

.drawer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 12px 16px;
  min-height: 48px;
  border-radius: var(--rounded-md);
  color: var(--on-dark-mute);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-ui);
  box-sizing: border-box;
  width: 100%;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.drawer-link:hover,
.drawer-link.active {
  background-color: var(--surface-elevated);
  color: var(--on-dark);
}

.drawer-footer {
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--divider-soft);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: 24px;
  width: 100%;
}

/* -----------------------------------------------------------------
   6. HERO SECTION (EDITORIAL STORYTELLING & 3D STAGE)
   ----------------------------------------------------------------- */
.hero-stage-wrap {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 80px);
  overflow: hidden;
  width: 100%;
}

.hero-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px 16px;
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--rounded-full);
  color: var(--on-dark-mute);
  font-size: var(--font-size-caption);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: var(--spacing-lg);
  max-width: 100%;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-xxl);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: var(--letter-spacing-display-xxl);
  color: var(--on-dark);
  margin-bottom: var(--spacing-lg);
  word-wrap: break-word;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--on-dark-mute);
  max-width: 560px;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 40px);
  width: 100%;
}

.hero-contact-strip {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--hairline-dark);
  color: var(--stone);
  font-size: var(--font-size-body-sm);
  flex-wrap: wrap;
  width: 100%;
}

.hero-contact-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.hero-contact-item a:hover {
  color: var(--on-dark);
}

/* 3D Visual Stage (Overflow-Contained) */
.hero-3d-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: clamp(260px, 35vw, 400px);
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-3d-scene {
  position: relative;
  width: 240px;
  height: 240px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-emblem-3d-card {
  width: 200px;
  height: 200px;
  border-radius: 36px;
  background: linear-gradient(145deg, #1f2228, #0e1012);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transform: translateZ(24px);
  position: relative;
}

.hero-emblem-3d-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
}

.hero-ambient-ring {
  position: absolute;
  width: 260px;
  height: 260px;
  max-width: 80vw;
  max-height: 80vw;
  border-radius: var(--rounded-full);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  animation: rotateAmbientRing 30s linear infinite;
  pointer-events: none;
}

@keyframes rotateAmbientRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.floating-logo-shadow {
  position: absolute;
  bottom: 15px;
  width: 140px;
  height: 18px;
  border-radius: var(--rounded-full);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
  transform: translateZ(-20px);
}

/* -----------------------------------------------------------------
   7. EDITORIAL ABOUT SECTION (WHITE CATALOGUE BAND)
   ----------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  width: 100%;
}

.scripture-quote-box {
  padding: var(--spacing-xl);
  background-color: var(--surface-soft);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--rounded-md) var(--rounded-md) 0;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  width: 100%;
}

.scripture-quote-text {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: var(--spacing-xs);
}

.scripture-quote-ref {
  font-size: var(--font-size-body-sm);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: var(--letter-spacing-ui);
}

.campus-photo-card {
  background-color: var(--surface-card);
  border: 1px solid var(--hairline-light);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  width: 100%;
}

.campus-photo-wrap {
  position: relative;
  height: 280px;
  overflow: hidden;
  background-color: #000;
  width: 100%;
}

.campus-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform var(--transition-smooth);
}

.campus-photo-card:hover .campus-photo-wrap img {
  transform: scale(1.03);
}

.campus-photo-body {
  padding: var(--spacing-xl);
  width: 100%;
}

/* -----------------------------------------------------------------
   8. SERVICE SCHEDULE PORTRAIT CARDS & CALENDAR DROPDOWN
   ----------------------------------------------------------------- */
.portrait-cards-grid,
.schedule-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  width: 100%;
}

.portrait-service-card,
.plan-card {
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--rounded-lg);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.portrait-service-card:hover,
.plan-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

/* Featured Service Card (Cobalt Violet #494fdf Inversion) */
.portrait-service-card.featured-tier,
.plan-card-featured {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: var(--primary-bright) !important;
}

.portrait-service-card.featured-tier .meta-row,
.plan-card-featured .plan-meta-row {
  color: rgba(255, 255, 255, 0.9);
}

.portrait-service-card.featured-tier .card-time-badge,
.plan-card-featured .time-pill {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: none;
}

.portrait-service-card.featured-tier .btn-outline {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

.portrait-service-card.featured-tier .btn-outline:hover {
  background-color: #ffffff;
  color: var(--primary);
  border-color: #ffffff;
}

.card-time-badge,
.time-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--rounded-full);
  font-size: var(--font-size-caption);
  font-weight: 600;
  letter-spacing: 0.2px;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--on-dark-mute);
  margin-bottom: var(--spacing-md);
  max-width: 100%;
}

.card-title-group {
  margin-bottom: var(--spacing-md);
  width: 100%;
}

.portrait-service-title,
.card-service-title {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-md);
  font-weight: 500;
  line-height: 1.25;
  color: var(--on-dark);
  margin-bottom: var(--spacing-xs);
  word-wrap: break-word;
}

.portrait-service-card.featured-tier .portrait-service-title {
  color: var(--on-primary);
}

.portrait-service-desc,
.card-service-desc {
  font-size: var(--font-size-body-sm);
  color: var(--on-dark-mute);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.portrait-service-card.featured-tier .portrait-service-desc {
  color: rgba(255, 255, 255, 0.9);
}

.portrait-meta-stack,
.plan-meta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--divider-soft);
  margin-bottom: var(--spacing-lg);
  width: 100%;
}

.meta-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-body-sm);
  color: var(--on-dark-mute);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-ui);
  flex-wrap: wrap;
  width: 100%;
}

.meta-icon {
  flex-shrink: 0;
}

.venue-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--rounded-full);
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-ui);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--hairline-dark);
  color: var(--on-dark);
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

.venue-badge .pin-svg {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.portrait-service-card.featured-tier .venue-badge {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.portrait-card-actions,
.card-actions-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  width: 100%;
}

/* Calendar Dropdown UI */
.calendar-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.calendar-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  max-width: 100%;
  background-color: #1a1c1e;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--rounded-md);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 50;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.calendar-menu.show {
  display: flex;
}

.calendar-item-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 14px;
  min-height: 48px;
  border-radius: var(--rounded-sm);
  font-size: var(--font-size-body-sm);
  color: var(--on-dark);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  transition: background-color var(--transition-fast);
}

.calendar-item-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* -----------------------------------------------------------------
   9. MEDIA & SERMONS SECTION (CINEMA CARD & ARCHIVE)
   ----------------------------------------------------------------- */
.filter-pills-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  overflow-x: auto;
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
}

.filter-pills-bar::-webkit-scrollbar {
  display: none;
}

.filter-pill {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--rounded-full);
  background-color: var(--surface-soft);
  color: var(--ink);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-ui);
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.filter-pill:hover {
  background-color: #e5e5e8;
}

.filter-pill.active {
  background-color: var(--canvas-dark);
  color: var(--on-dark);
}

.sermon-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  width: 100%;
}

.sermon-card {
  background-color: var(--surface-card);
  border: 1px solid var(--hairline-light);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.sermon-card:hover {
  border-color: #c9c9cd;
  transform: translateY(-2px);
}

.sermon-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #000;
  overflow: hidden;
  width: 100%;
}

.sermon-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sermon-thumb-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.sermon-card:hover .sermon-thumb-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.sermon-play-circle {
  width: 52px;
  height: 52px;
  border-radius: var(--rounded-full);
  background-color: var(--canvas-light);
  color: var(--canvas-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding-left: 2px;
  transition: transform var(--transition-fast);
}

.sermon-card:hover .sermon-play-circle {
  transform: scale(1.08);
}

.cinema-duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--rounded-sm);
}

.sermon-info-body {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  width: 100%;
}

/* Featured Cinema Card */
.cinema-feature-card {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  width: 100%;
}

.cinema-media-side {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 280px;
  background-image: url('https://img.youtube.com/vi/4JG3s7PHNow/maxresdefault.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cinema-media-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.cinema-content-side {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* -----------------------------------------------------------------
   9B. HERO LIVE BROADCAST & YOUTUBE STREAM ARCHITECTURE
   ----------------------------------------------------------------- */
.hero-live-broadcast-stage {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
}

.video-container,
.church-broadcast-stage,
.church-broadcast-container,
.church-video-container,
.jlse-player-box,
.church-player-wrapper,
.video-player-container,
.live-player-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: #000000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  margin-bottom: var(--spacing-lg);
  transition: box-shadow var(--transition-normal);
}

.video-container:hover,
.church-broadcast-stage:hover,
.church-broadcast-container:hover,
.church-video-container:hover,
.jlse-player-box:hover,
.church-player-wrapper:hover,
.video-player-container:hover,
.live-player-container:hover {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(6, 182, 212, 0.35);
}

.jlse-player-box {
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

.video-responsive-stage {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000000;
  overflow: hidden;
}

.video-container,
.church-broadcast-stage,
.church-broadcast-container,
.church-video-container,
.video-player-container,
.live-player-container {
  aspect-ratio: 16 / 9;
}

.video-container iframe,
.church-broadcast-stage iframe,
#church-live-player,
.church-broadcast-container iframe,
#church-video-player,
.church-video-container iframe,
#jlse-live-stream-player,
.jlse-player-box iframe,
#jlse-main-player,
.video-responsive-stage iframe,
#main-church-player,
.video-player-container iframe,
.live-player-container iframe,
.live-player-frame,
#church-live-frame,
#church-live-frame-home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
  box-sizing: border-box;
}

.cinema-media-side .video-container,
.cinema-media-side .church-broadcast-stage,
.cinema-media-side .church-broadcast-container,
.cinema-media-side .church-video-container,
.cinema-media-side .jlse-player-box,
.cinema-media-side .church-player-wrapper,
.cinema-media-side .video-responsive-stage,
.cinema-media-side .video-player-container,
.cinema-media-side .live-player-container {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Automated Live/Replay Status Indicator Pill */
.live-status-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  user-select: none;
}

.live-status-pill.is-live {
  background: rgba(220, 38, 38, 0.35) !important;
  border-color: rgba(239, 68, 68, 0.75) !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.45) !important;
  color: #FEE2E2 !important;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #06B6D4;
  display: inline-block;
  flex-shrink: 0;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.status-dot.is-live {
  background-color: #EF4444 !important;
  box-shadow: 0 0 10px #EF4444;
  animation: liveDotPulse 1.6s infinite ease-in-out;
}

@keyframes liveDotPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.75);
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Pulsating Live Status Badge in Living Water Cyan (#06B6D4) */
.badge-live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--rounded-full);
  background-color: rgba(6, 182, 212, 0.14);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #06B6D4;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.2);
}

.live-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #06B6D4;
  position: relative;
  display: inline-block;
}

.live-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background-color: #06B6D4;
  opacity: 0.7;
  animation: pulseLive 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseLive {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.live-broadcast-card {
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--rounded-lg);
  padding: clamp(20px, 4vw, 32px);
  margin-top: -8px;
  margin-bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.live-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.live-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--font-size-body-sm);
  color: var(--on-dark-mute);
}

.live-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.live-note-box {
  background-color: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #06B6D4;
  padding: 12px 16px;
  border-radius: 0 var(--rounded-sm) var(--rounded-sm) 0;
  font-size: 13px;
  color: var(--on-dark-mute);
  line-height: 1.5;
}

.live-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* YouTube Channel Brand Banner */
.yt-channel-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%), var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--rounded-md);
  padding: 16px 20px;
  margin-bottom: var(--spacing-xl);
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.yt-channel-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.yt-channel-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  border: 2px solid #FF0000;
  overflow: hidden;
  background-color: #000;
}

.yt-channel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-channel-title {
  font-weight: 600;
  color: var(--on-dark);
  font-size: 15px;
  margin-bottom: 2px;
}

.yt-channel-subtext {
  font-size: 12px;
  color: var(--stone);
}

.button-youtube {
  background-color: #FF0000;
  color: #ffffff !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 48px;
  border-radius: var(--rounded-full);
  transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 4px 14px rgba(255, 0, 0, 0.3);
}

.button-youtube:hover {
  background-color: #e60000;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.45);
}

/* Feed Skeleton Loader */
.youtube-feed-skeleton {
  background: linear-gradient(90deg, #f0f0f2 25%, #e4e4e7 50%, #f0f0f2 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: var(--rounded-md);
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -----------------------------------------------------------------
   10. PRAYER CENTER & FORM CONTROLS
   ----------------------------------------------------------------- */
.prayer-container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  width: 100%;
}

.form-group {
  margin-bottom: var(--spacing-lg);
  width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  width: 100%;
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-ui);
  margin-bottom: var(--spacing-xs);
  color: var(--on-dark);
}

.band-light .form-label {
  color: var(--ink);
}

.text-input,
.form-control {
  width: 100%;
  height: 56px;
  min-height: 56px;
  padding: 14px 16px;
  background-color: var(--surface-elevated);
  color: var(--on-dark);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--rounded-md);
  font-size: 16px !important;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.band-light .text-input,
.band-light .form-control {
  background-color: var(--canvas-light);
  color: var(--ink);
  border: 1px solid var(--hairline-light);
}

textarea.form-control {
  height: auto;
  min-height: 130px;
  padding: 14px 16px;
  resize: vertical;
}

.form-control:focus {
  border-color: var(--on-dark);
}

.band-light .form-control:focus {
  border-color: var(--ink);
}

.category-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  width: 100%;
}

.category-pill-btn {
  padding: 10px 18px;
  min-height: 48px;
  border-radius: var(--rounded-full);
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  color: var(--on-dark-mute);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.category-pill-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.category-pill-btn.active {
  background-color: var(--canvas-light);
  color: var(--canvas-dark);
  border-color: var(--canvas-light);
  font-weight: 600;
}

.privacy-toggle-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
  width: 100%;
}

.privacy-toggle-card {
  padding: 14px;
  min-height: 48px;
  border-radius: var(--rounded-md);
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  color: var(--on-dark-mute);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.privacy-toggle-card.active {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--on-dark);
  color: var(--on-dark);
  font-weight: 600;
}

/* -----------------------------------------------------------------
   11. GIVING SUITE & CHECKOUT MODAL
   ----------------------------------------------------------------- */
.giving-tiers-grid {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-xl);
  width: 100%;
}

.giving-tiers-grid .giving-tier-card {
  width: 100%;
  max-width: 520px;
}

.giving-tier-card {
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--rounded-lg);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 460px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.giving-tier-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-3px);
}

/* Spotlighted Monthly Give Card (Cobalt Violet #494fdf) */
.giving-tier-card.featured-cobalt {
  background-color: var(--primary) !important;
  border-color: var(--primary-bright) !important;
  color: #ffffff !important;
}

.giving-tier-card.featured-cobalt .tier-badge {
  background-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.giving-tier-card.featured-cobalt .tier-amount {
  color: #ffffff;
}

.giving-tier-card.featured-cobalt .tier-period {
  color: rgba(255, 255, 255, 0.85);
}

.giving-tier-card.featured-cobalt .tier-desc {
  color: rgba(255, 255, 255, 0.9);
}

.giving-tier-card.featured-cobalt .tier-features li {
  color: #ffffff;
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 12px;
  border-radius: var(--rounded-full);
  font-size: var(--font-size-caption);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--on-dark-mute);
  margin-bottom: var(--spacing-md);
  max-width: 100%;
}

.tier-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  width: 100%;
}

.tier-amount {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}

.tier-period {
  font-size: var(--font-size-body-sm);
  color: var(--stone);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-ui);
}

.tier-title {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-md);
  font-weight: 500;
  line-height: 1.25;
  color: var(--on-dark);
  margin-bottom: 8px;
}

.giving-tier-card.featured-cobalt .tier-title {
  color: #ffffff;
}

.tier-desc {
  font-size: var(--font-size-body-sm);
  color: var(--on-dark-mute);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.tier-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--divider-soft);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-body-sm);
  color: var(--on-dark-mute);
  width: 100%;
}

.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}

.toggle-pills-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xs);
  background-color: #0e1012;
  padding: 4px;
  border-radius: var(--rounded-full);
  border: 1px solid var(--hairline-dark);
  max-width: 320px;
  width: 100%;
  box-sizing: border-box;
}

.toggle-pill-btn {
  min-height: 40px;
  border-radius: var(--rounded-full);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  color: var(--on-dark-mute);
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.toggle-pill-btn.active {
  background-color: var(--canvas-light);
  color: var(--canvas-dark);
}

.giving-amounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  width: 100%;
}

.giving-chip-btn {
  min-height: 48px;
  height: 48px;
  border-radius: var(--rounded-md);
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  color: var(--on-dark);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.giving-chip-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.giving-chip-btn.active {
  background-color: var(--canvas-light);
  color: var(--canvas-dark);
  border-color: var(--canvas-light);
}

/* Payment & Checkout Modal */
.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px);
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.payment-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.payment-modal-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  background-color: #121417;
  border: 1px solid var(--hairline-dark);
  border-radius: 24px;
  padding: clamp(20px, 5vw, 32px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85);
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.payment-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--rounded-full);
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  color: var(--on-dark);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.payment-modal-close:hover {
  background-color: var(--canvas-light);
  color: var(--canvas-dark);
}

/* Plan a Visit Modal & Dialog */
.visit-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px);
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.visit-modal.active {
  display: flex;
}

.visit-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.visit-modal-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 540px;
  background-color: #121417;
  border: 1px solid var(--hairline-dark);
  border-radius: 24px;
  padding: clamp(20px, 5vw, 36px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85);
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.visit-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--rounded-full);
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  color: var(--on-dark);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.visit-modal-close:hover {
  background-color: var(--canvas-light);
  color: var(--canvas-dark);
}

/* Plan a Visit Form Styling & iOS Safari Auto-Zoom Safeguards */
.visit-form .form-group {
  margin-bottom: 18px;
}

.visit-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.visit-form .form-control,
.visit-form input,
.visit-form select,
.visit-form textarea {
  font-size: 16px !important; /* Prevents iOS Safari auto-zoom */
}

.visit-modal .form-control {
  background-color: #1a1d21;
  color: #ffffff;
  border: 1px solid var(--hairline-dark);
}

.visit-modal .form-control:focus {
  border-color: #ffffff;
}

.visit-modal .form-label {
  color: var(--on-dark);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.visit-form button[type="submit"] {
  transition: all var(--transition-fast);
  cursor: pointer;
}

.visit-form button[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.visit-form button[type="submit"]:active {
  filter: brightness(0.95);
  transform: translateY(1px);
}

.payment-summary-tile {
  background-color: #0c0d0f;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--rounded-md);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  width: 100%;
}

.payment-method-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.payment-method-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-height: 48px;
  border-radius: var(--rounded-sm);
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  color: var(--on-dark-mute);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  transition: all var(--transition-fast);
}

.payment-method-option:hover,
.payment-method-option.active {
  border-color: var(--on-dark);
  color: var(--on-dark);
  background-color: rgba(255, 255, 255, 0.08);
}

.payment-method-option input {
  accent-color: var(--primary-bright);
}

.payment-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--primary-bright);
  border-radius: 50%;
  animation: spinPayment 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spinPayment {
  to { transform: rotate(360deg); }
}

.payment-receipt-box {
  background-color: #0c0d0f;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--rounded-md);
  padding: 16px;
  margin-bottom: 20px;
  text-align: left;
  width: 100%;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--on-dark-mute);
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  gap: 12px;
  width: 100%;
}

.receipt-row:last-child {
  border-bottom: none;
}

/* -----------------------------------------------------------------
   12. CONTACT & MAP WRAPPER
   ----------------------------------------------------------------- */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  width: 100%;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  width: 100%;
}

.contact-map-container {
  width: 100%;
  height: 280px;
  border-radius: var(--rounded-md);
  overflow: hidden;
  border: 1px solid var(--hairline-dark);
  margin-bottom: var(--spacing-lg);
}

.contact-map-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* -----------------------------------------------------------------
   13. GLOBAL EDITORIAL FOOTER
   ----------------------------------------------------------------- */
.site-footer {
  background-color: var(--canvas-dark);
  color: var(--on-dark-mute);
  padding-top: var(--spacing-block);
  padding-bottom: var(--spacing-xxl);
  border-top: 1px solid var(--divider-soft);
  width: 100%;
  box-sizing: border-box;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  gap: clamp(32px, 4vw, 56px);
  margin-bottom: var(--spacing-block);
  width: 100%;
}

.footer-heading {
  font-family: var(--font-body);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  color: var(--on-dark);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: var(--spacing-lg);
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.footer-link {
  font-size: var(--font-size-body-sm);
  color: var(--stone);
  transition: color var(--transition-fast);
  padding: 4px 0;
  display: inline-block;
}

.footer-link:hover {
  color: var(--on-dark);
}

.footer-bottom-bar {
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--divider-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-caption);
  color: var(--ash);
  flex-wrap: wrap;
  gap: var(--spacing-md);
  width: 100%;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.social-icon-circle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--rounded-full);
  background-color: var(--surface-elevated);
  border: 1px solid var(--hairline-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark-mute);
  transition: all var(--transition-fast);
}

.social-icon-circle:hover {
  background-color: var(--canvas-light);
  color: var(--canvas-dark);
  border-color: var(--canvas-light);
}

/* -----------------------------------------------------------------
   14. MODAL & AUDIO DRAWER
   ----------------------------------------------------------------- */
.video-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.video-modal.active {
  display: flex;
}

.video-modal-container {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background-color: #000000;
  border-radius: var(--rounded-md);
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.video-modal-container iframe,
#modalIframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
}

.video-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: var(--rounded-full);
  background-color: rgba(10, 15, 29, 0.92);
  color: var(--on-dark);
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  z-index: 2005;
  transition: all var(--transition-fast);
}

.video-modal-close:hover,
.video-modal-close:focus {
  background-color: #ffffff;
  color: #000000;
  transform: scale(1.08);
  outline: none;
}

.toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: rgba(18, 20, 24, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--on-dark);
  padding: 16px 22px;
  border-radius: var(--rounded-md);
  display: none;
  align-items: center;
  gap: 12px;
  z-index: 3000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(37, 211, 102, 0.3);
  max-width: min(480px, calc(100vw - 32px));
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: toastNotificationPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-notification.show {
  display: flex;
}

@keyframes toastNotificationPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-notification .toast-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.toast-notification .toast-message {
  flex-grow: 1;
  color: #ffffff;
}

/* Button Loading & Form Interactive States */
.button-primary.is-loading {
  opacity: 0.85;
  cursor: wait !important;
  pointer-events: none;
  filter: brightness(0.95);
}

.form-control.input-error {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* =================================================================
   15. STRICT RESPONSIVE BREAKPOINT SYSTEM
   ================================================================= */

/* Tablet / Laptop (< 1024px) */
@media (max-width: 1023px) {
  .nav-menu {
    display: none !important;
  }

  .hamburger {
    display: flex !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 36px;
  }

  .hero-content {
    align-items: center !important;
    text-align: center !important;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-row {
    justify-content: center;
  }

  .hero-contact-strip {
    justify-content: center;
  }

  .about-grid,
  .cinema-feature-card,
  .prayer-container,
  .contact-wrapper {
    grid-template-columns: 1fr !important;
  }

  .portrait-cards-grid,
  .schedule-page-grid,
  .sermon-cards-grid,
  .contact-info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile Devices (< 768px) */
@media (max-width: 768px) {
  /* Mobile Menu Link & Button Styling */
  .nav-menu .nav-link,
  .nav-menu .prayer-btn,
  .nav-menu .btn-prayer {
    display: block !important;
    width: 100% !important;
    max-width: 260px !important;
    margin: 8px auto !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    height: auto !important;
    min-height: 44px !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* Drawer Mobile Navigation CTA Button */
  .drawer-prayer-btn,
  .drawer-footer .drawer-prayer-btn,
  .drawer-footer .prayer-btn,
  .drawer-footer .button-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 260px !important;
    margin: 8px auto !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    height: auto !important;
    min-height: 44px !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* Header Actions Compact CTA on Mobile Top Navigation Bar */
  .header-actions .button-primary,
  .header-actions .button-pill-sm,
  .header-actions .nav-prayer-btn,
  .header-actions .prayer-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 140px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin: 0 !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Responsive 16:9 Media Side Container on Mobile */
  .cinema-media-side {
    min-height: auto !important;
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
  }

  /* Fluid Typography */
  .hero-title,
  .display-xxl,
  .display-xl {
    font-size: clamp(1.85rem, 7vw, 2.75rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
  }

  .section-title,
  .display-lg {
    font-size: clamp(1.6rem, 5.5vw, 2.4rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
  }

  .body-lg,
  .body-md,
  .hero-subtitle,
  .section-subtitle {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Universal Single-Column Portrait Enforcements */
  .portrait-cards-grid,
  .schedule-page-grid,
  .sermon-cards-grid,
  .contact-info-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 20px !important;
  }

  .portrait-service-card,
  .plan-card {
    min-height: auto;
    padding: 20px !important;
    width: 100% !important;
  }

  /* Full-Width Mobile Action Buttons (Min 48px Height) */
  .hero-cta-row {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hero-cta-row .btn,
  .hero-cta-row .button-primary,
  .hero-cta-row .button-outline-dark,
  .hero-cta-row .button-outline-light,
  .hero-cta-row a,
  .hero-cta-row button {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .hero-contact-strip {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .portrait-card-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .portrait-card-actions .calendar-dropdown-wrap,
  .portrait-card-actions .calendar-toggle-btn,
  .portrait-card-actions a,
  .portrait-card-actions button {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .calendar-menu {
    width: 100% !important;
    min-width: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: static !important;
    margin-top: 8px !important;
  }

  .btn-pay-tier,
  .btn-pay-now,
  .btn-pay-custom,
  .visit-form button[type="submit"],
  #submitVisitBtn,
  #modalSubmitVisitBtn {
    width: 100% !important;
    min-height: 48px !important;
  }

  .form-row,
  .privacy-toggle-wrap,
  .visit-form .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Live Stream Player & YouTube Actions Mobile Ergonomics */
  .live-actions-bar {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .live-actions-bar a,
  .live-actions-bar button {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .video-container,
  .church-broadcast-stage,
  .church-broadcast-container,
  .church-video-container,
  .jlse-player-box,
  .church-player-wrapper,
  .video-player-container,
  .live-player-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
  }

  .live-status-pill {
    top: 10px !important;
    left: 10px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  .yt-channel-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .yt-channel-banner .button-youtube,
  .yt-channel-banner .button-primary,
  .yt-channel-banner a {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .category-pills-wrap {
    flex-direction: column !important;
  }

  .category-pill-btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .prayer-form .form-row,
  .visit-form .form-row {
    grid-template-columns: 1fr !important;
  }

  .prayer-form button[type="submit"],
  .visit-form button[type="submit"],
  .visit-modal-card button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
  }

  .privacy-toggle-wrap {
    grid-template-columns: 1fr !important;
  }

  .giving-amounts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .toggle-pills-wrap {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 3D Scene Containment */
  .hero-3d-stage {
    height: 220px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-3d-scene {
    width: 180px !important;
    height: 180px !important;
  }

  .hero-emblem-3d-card {
    width: 160px !important;
    height: 160px !important;
    border-radius: 28px !important;
    padding: 20px !important;
  }

  .hero-ambient-ring {
    width: 200px !important;
    height: 200px !important;
  }

  .floating-logo-shadow {
    width: 120px !important;
  }
}

/* Small Phones (< 425px down to 320px) */
@media (max-width: 425px) {
  .header-actions .button-primary,
  .header-actions .button-pill-sm,
  .header-actions .nav-prayer-btn,
  .header-actions .prayer-btn {
    max-width: 125px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    min-height: 34px !important;
    height: 34px !important;
  }

  .giving-amounts-grid {
    grid-template-columns: 1fr !important;
  }

  .payment-modal-card {
    padding: 16px !important;
    border-radius: var(--rounded-lg) !important;
  }

  .payment-summary-tile {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .brand-name {
    font-size: 14px !important;
  }

  .brand-subtitle {
    font-size: 9px !important;
  }

  .toast-notification {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
  }
}