:root {
  --color-primary: #234a3c;
  --color-primary-strong: #18362c;
  --color-accent: #c79343;
  --color-ink: #24312d;
  --color-muted: #66716d;
  --color-surface: #ffffff;
  --color-soft: #f4f5f1;
  --color-dark: #1e2a26;
  --color-border: #dfe4df;
  --radius: 18px;
  --shadow: 0 16px 45px rgba(26, 47, 39, .10);
  --shell: 1180px;
  --text-width: 760px;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-surface);
  font: 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-strong);
}

.shell {
  width: min(calc(100% - 40px), var(--shell));
  margin-inline: auto;
}

.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;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 9999;
  padding: 10px 14px;
  background: #fff;
  border-radius: 8px;
}

.skip-link:focus {
  top: 12px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  backdrop-filter: blur(12px);
}

.header-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 750;
  line-height: 1.15;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  font-size: 12px;
  letter-spacing: .05em;
}

.brand-text {
  max-width: 230px;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item {
  position: relative;
}

.nav-item>a {
  display: block;
  padding: 13px 11px;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 650;
  font-size: 15px;
  border-radius: 8px;
}

.nav-item>a:hover {
  background: var(--color-soft);
}

.nav-submenu {
  display: none;
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  width: 220px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.nav-item:hover .nav-submenu,
.nav-item:focus-within .nav-submenu {
  display: grid;
}

.nav-submenu a {
  padding: 9px 10px;
  text-decoration: none;
  color: var(--color-ink);
  border-radius: 7px;
}

.nav-submenu a:hover {
  background: var(--color-soft);
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  padding: 9px;
}

.nav-toggle span:not(.sr-only) {
  display: block;
  height: 2px;
  background: var(--color-ink);
  margin: 5px 0;
}

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e9eee8, #f7f4ec);
}

.hero.has-image {
  color: #fff;
  background-image: linear-gradient(rgba(12, 27, 22, var(--hero-overlay)), rgba(12, 27, 22, var(--hero-overlay))), var(--hero-image);
  background-size: cover;
  background-position: center;
}

.hero-inner {
  min-height: clamp(430px, 62vw, 650px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: 80px;
}

.hero-align-center .hero-inner {
  align-items: center;
  text-align: center;
}

.hero h1 {
  max-width: 820px;
  margin: 0;
  font: 700 clamp(44px, 7vw, 78px)/1.02 var(--font-heading);
  letter-spacing: -.035em;
}

.hero-lead {
  max-width: 720px;
  margin: 22px 0 0;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.5;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.hero.has-image .eyebrow {
  color: #f4d59e;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 750;
  border: 2px solid var(--color-primary);
}

.button:hover {
  background: var(--color-primary-strong);
  color: #fff;
  border-color: var(--color-primary-strong);
}

.button-secondary {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(255, 255, 255, .94);
  color: var(--color-primary);
}

.button-secondary:hover {
  background: #fff;
  color: var(--color-primary-strong);
  border-color: #fff;
}

.site-section {
  padding-block: 72px;
}

.section-space-compact {
  padding-block: 40px;
}

.section-space-normal {
  padding-block: 72px;
}

.section-space-spacious {
  padding-block: 105px;
}

.section-bg-default {
  background: var(--color-surface);
}

.section-bg-light {
  background: var(--color-soft);
}

.section-bg-dark {
  background: var(--color-dark);
  color: #fff;
}

.section-bg-accent {
  background: #f3eadb;
}

.section-width-standard .prose {
  max-width: var(--text-width);
}

.section-width-wide .prose {
  max-width: 960px;
}

.prose h1,
.prose h2,
.prose h3 {
  color: inherit;
  font-family: var(--font-heading);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.prose h1 {
  font-size: clamp(40px, 5vw, 62px);
}

.prose h2 {
  margin: 0 0 22px;
  font-size: clamp(34px, 4vw, 48px);
}

.prose h3 {
  font-size: 26px;
}

.prose p {
  margin: 0 0 1.1em;
}

.centered {
  margin-inline: auto;
  text-align: center;
}

.section-heading {
  margin-bottom: 32px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 78px);
  align-items: center;
}

.split-image-right .split-media {
  order: 2;
}

.split-media img,
.image-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.image-placeholder {
  display: grid;
  place-items: center;
  background: #dde4df;
  color: var(--color-muted);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.info-card {
  padding: 28px;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 25px rgba(26, 47, 39, .05);
}

.info-card h3 {
  margin: 8px 0 8px;
  font: 700 25px/1.2 var(--font-heading);
}

.info-card p {
  margin: 0;
  color: var(--color-muted);
}

.card-icon {
  font-size: 28px;
}

.callout {
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 54px);
  border-radius: calc(var(--radius) + 6px);
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.callout .button {
  background: #fff;
  border-color: #fff;
  color: var(--color-primary);
}

.spacer-small {
  height: 24px;
}

.spacer-medium {
  height: 48px;
}

.spacer-large {
  height: 86px;
}

.site-footer {
  padding-block: 45px;
  background: #17231f;
  color: rgba(255, 255, 255, .78);
}

.site-footer a {
  color: #fff;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.footer-grid p {
  margin: 5px 0;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: block;
  }

  .primary-nav {
    display: none;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    padding: 12px 20px 24px;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 20px 30px rgba(0, 0, 0, .08);
    align-items: stretch;
  }

  .primary-nav.is-open {
    display: grid;
  }

  .nav-item>a {
    padding: 11px 5px;
  }

  .nav-submenu {
    position: static;
    display: grid;
    width: auto;
    padding: 0 0 8px 16px;
    box-shadow: none;
    border: 0;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .split-image-right .split-media {
    order: 0;
  }

  .card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .brand-text {
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .shell {
    width: min(calc(100% - 28px), var(--shell));
  }

  .hero-inner {
    min-height: 500px;
    padding-block: 58px;
  }

  .site-section {
    padding-block: 52px;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    display: grid;
  }
}

/* CMS draft preview */
.draft-preview-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 8px 14px;
  background: #fff3cd;
  border-bottom: 1px solid #e7c75c;
  color: #5f4b00;
  text-align: center;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
}

.is-draft-preview .site-header {
  top: 35px;
}

/* ===== Image + Gallery sections — Website Editor v0.3 ===== */
.single-image-figure {
  margin: 0 auto;
  max-width: 980px;
}

.single-image-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.single-image-landscape img {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.single-image-square {
  max-width: 760px;
}

.single-image-square img {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.single-image-figure figcaption,
.gallery-grid-item figcaption,
.gallery-slide figcaption {
  margin-top: 10px;
  color: var(--color-muted);
  font-size: .92rem;
  line-height: 1.45;
}

.section-bg-dark .single-image-figure figcaption,
.section-bg-dark .gallery-grid-item figcaption,
.section-bg-dark .gallery-slide figcaption {
  color: rgba(255, 255, 255, .76);
}

.image-zoom-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: inherit;
}

.image-zoom-button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr));
  gap: 18px;
}

.gallery-grid-item {
  margin: 0;
  min-width: 0;
}

.gallery-grid-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  box-shadow: 0 8px 25px rgba(26, 47, 39, .08);
}

.gallery-carousel {
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
  padding-bottom: 34px;
}

.gallery-carousel-viewport {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #e9eeea;
}

.gallery-carousel-track {
  display: flex;
  transition: transform .42s ease;
  will-change: transform;
}

.gallery-slide {
  flex: 0 0 100%;
  margin: 0;
  min-width: 0;
}

.gallery-slide img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.gallery-slide figcaption {
  padding: 0 14px 12px;
  background: #fff;
  margin-top: 0;
  padding-top: 10px;
}

.section-bg-dark .gallery-slide figcaption {
  background: #24312d;
}

.gallery-arrow {
  position: absolute;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(20, 30, 26, .72);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

.gallery-arrow:hover {
  background: rgba(20, 30, 26, .9);
}

.gallery-prev {
  left: 14px;
}

.gallery-next {
  right: 14px;
}

.gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.gallery-dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: #b8bfbb;
  cursor: pointer;
}

.gallery-dots button.is-active {
  background: var(--color-primary);
  transform: scale(1.25);
}

.gallery-empty {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--color-muted);
}

.site-image-dialog {
  width: min(94vw, 1200px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #111;
  color: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

.site-image-dialog::backdrop {
  background: rgba(0, 0, 0, .78);
}

.image-dialog-body {
  padding: 16px;
}

.image-dialog-body img {
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  object-fit: contain;
}

.image-dialog-caption {
  margin: 12px 8px 2px;
  text-align: center;
  color: rgba(255, 255, 255, .86);
}

.image-dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 860px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-slide img {
    aspect-ratio: 4/3;
  }

  .gallery-arrow {
    width: 40px;
    height: 40px;
    font-size: 29px;
  }

  .gallery-prev {
    left: 8px;
  }

  .gallery-next {
    right: 8px;
  }
}

/* ===== Navigation, global branding, footer and Church Information — v0.4 ===== */
.brand-logo {
  display: block;
  width: auto;
  max-width: 260px;
  max-height: 58px;
  object-fit: contain;
}

.nav-label {
  display: block;
  padding: 13px 11px;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-weight: 650;
  font-size: 15px;
  border-radius: 8px;
  cursor: pointer;
}

.nav-label:hover,
.nav-label:focus-visible {
  background: var(--color-soft);
  outline: none;
}

.nav-caret {
  margin-left: .3rem;
  font-size: .75em;
}

.nav-item.submenu-open .nav-submenu {
  display: grid;
}

.nav-submenu-label {
  padding: 9px 10px;
  font-weight: 750;
  color: var(--color-muted);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff !important;
  text-decoration: none;
  font-weight: 750;
  font-size: 14px;
}

.header-cta:hover {
  background: var(--color-primary-strong);
}

.footer-layout {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(28px, 5vw, 64px);
}

.footer-brand strong {
  display: block;
  color: #fff;
  font: 700 1.2rem/1.25 var(--font-heading);
}

.footer-brand p,
.footer-column p {
  margin: .5rem 0;
}

.footer-column h2 {
  margin: 0 0 .75rem;
  color: #fff;
  font: 700 1rem/1.25 var(--font-heading);
}

.footer-links,
.footer-socials {
  display: grid;
  gap: .45rem;
}

.footer-links a,
.footer-socials a {
  text-decoration: none;
}

.footer-links a:hover,
.footer-socials a:hover {
  text-decoration: underline;
}

.footer-sub-link {
  padding-left: .75rem;
  opacity: .9;
}

.footer-sub-label {
  padding-left: .75rem;
  font-size: .9rem;
  opacity: .75;
}

.footer-service {
  color: #fff;
}

.footer-bottom {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .9rem;
}

.church-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.church-info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 25px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 25px rgba(26, 47, 39, .05);
}

.church-info-icon {
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1;
}

.church-info-card h3 {
  margin: 0 0 5px;
  font: 700 1.12rem/1.2 var(--font-heading);
}

.church-info-card p {
  margin: 0;
  color: var(--color-muted);
}

.church-info-card a {
  font-weight: 650;
  text-decoration: none;
}

.church-info-card a:hover {
  text-decoration: underline;
}

.section-bg-dark .church-info-card {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .15);
}

.section-bg-dark .church-info-card p {
  color: rgba(255, 255, 255, .78);
}

.section-bg-accent .church-info-card {
  background: rgba(255, 255, 255, .78);
}

@media (max-width: 980px) {
  .footer-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .church-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .brand-logo {
    max-height: 52px;
    max-width: 220px;
  }

  .nav-label {
    width: 100%;
    text-align: left;
    padding: 11px 5px;
  }

  .header-cta {
    margin: 8px 0 0;
    justify-content: center;
  }

  .nav-item.label-parent .nav-submenu {
    display: none;
  }

  .nav-item.label-parent.submenu-open .nav-submenu {
    display: grid;
  }
}

@media (max-width: 560px) {

  .footer-layout,
  .church-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   LSCC v0.6 DESIGN SYSTEM
   Presets intentionally share one visual language; staff choose composition,
   not arbitrary one-off colors/fonts.
   ====================================================================== */

/* Page-level rhythm */
.page-design-warm main {
  background: linear-gradient(180deg, #fff 0, #fbfaf7 100%)
}

.page-design-warm .site-section.section-bg-default:nth-of-type(even) {
  background: rgba(247, 244, 237, .38)
}

.page-design-warm .info-card,
.page-design-warm .feature-card,
.page-design-warm .church-info-card {
  border-radius: calc(var(--radius) + 5px)
}

.page-design-editorial .shell {
  --editorial-reading: 780px
}

.page-design-editorial .section-heading {
  max-width: 760px
}

.page-design-editorial .prose {
  line-height: 1.78
}

.page-design-editorial h1,
.page-design-editorial h2 {
  letter-spacing: -.025em
}

.page-design-photo_forward .section-width-wide .shell {
  max-width: min(1420px, calc(100% - 36px))
}

.page-design-photo_forward .split-media img,
.page-design-photo_forward .gallery-grid-item img {
  min-height: 300px
}

/* Hero presets */
.hero {
  position: relative;
  overflow: hidden
}

.hero-preset-simple_header,
.hero-preset-editorial_header,
.hero-preset-minimal_title {
  background: none !important;
  color: var(--color-ink);
  min-height: 0;
  padding: clamp(58px, 8vw, 112px) 0
}

.hero-preset-simple_header::before,
.hero-preset-editorial_header::before,
.hero-preset-minimal_title::before {
  display: none !important
}

.hero-preset-simple_header .hero-inner,
.hero-preset-editorial_header .hero-inner,
.hero-preset-minimal_title .hero-inner {
  padding-block: 0
}

.hero-preset-simple_header h1 {
  max-width: 900px;
  font-size: clamp(2.45rem, 5vw, 4.9rem)
}

.hero-preset-editorial_header {
  padding-top: clamp(72px, 10vw, 145px);
  padding-bottom: clamp(55px, 8vw, 105px);
  border-bottom: 1px solid var(--color-border)
}

.hero-preset-editorial_header .hero-inner {
  max-width: 900px;
  margin-left: max(0px, calc((100% - var(--shell))/2))
}

.hero-preset-editorial_header h1 {
  font-size: clamp(3rem, 7vw, 6.4rem);
  line-height: .96;
  max-width: 880px
}

.hero-preset-editorial_header .hero-lead {
  max-width: 720px;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--color-muted)
}

.hero-preset-minimal_title {
  padding-block: 42px;
  border-bottom: 1px solid var(--color-border)
}

.hero-preset-minimal_title h1 {
  font-size: clamp(2.15rem, 4vw, 3.65rem)
}

.hero-preset-centered_photo .hero-inner {
  text-align: center;
  max-width: 930px;
  margin-inline: auto
}

.hero-preset-centered_photo .button-row {
  justify-content: center
}

.hero-preset-centered_photo h1 {
  font-size: clamp(3rem, 7vw, 6rem)
}

.hero-preset-split_hero {
  background: var(--color-soft) !important;
  color: var(--color-ink);
  min-height: 0;
  padding: 0
}

.hero-preset-split_hero::before {
  display: none !important
}

.hero-preset-split_hero .hero-inner {
  width: min(100%, var(--shell));
  min-height: 560px;
  padding: clamp(70px, 8vw, 120px) min(6vw, 76px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  position: relative;
  padding-right: 52%
}

.hero-preset-split_hero.has-image {
  background-image: linear-gradient(90deg, var(--color-soft) 0 48%, transparent 48%), var(--hero-image) !important;
  background-position: left center, right center !important;
  background-size: 100% 100%, 52% 100% !important;
  background-repeat: no-repeat !important
}

.hero-preset-split_hero .hero-lead {
  color: var(--color-muted)
}

/* Rich-text presets */
.section-preset-clean_reading .prose {
  max-width: 850px
}

.section-preset-editorial_intro .prose {
  max-width: 900px
}

.section-preset-editorial_intro h2 {
  font-size: clamp(2.2rem, 4.2vw, 4.15rem);
  line-height: 1.05;
  margin-bottom: .5em
}

.section-preset-editorial_intro .prose>p:first-of-type {
  font-size: clamp(1.13rem, 1.7vw, 1.38rem);
  line-height: 1.72;
  color: #45534d
}

.section-preset-soft_panel>.shell {
  background: #f4f6f4;
  border: 1px solid rgba(35, 74, 60, .08);
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(28px, 5vw, 64px)
}

.section-preset-accent_band {
  background: var(--color-primary) !important;
  color: #fff
}

.section-preset-accent_band .prose,
.section-preset-accent_band h2,
.section-preset-accent_band p,
.section-preset-accent_band a {
  color: #fff
}

.section-preset-centered_statement .prose {
  max-width: 930px;
  text-align: center;
  margin-inline: auto
}

.section-preset-centered_statement h2 {
  font-size: clamp(2.15rem, 4vw, 4rem)
}

.section-preset-centered_statement p {
  font-size: clamp(1.08rem, 1.7vw, 1.32rem)
}

.section-preset-two_column .prose {
  max-width: 1080px
}

.section-preset-two_column .prose>p,
.section-preset-two_column .prose>ul,
.section-preset-two_column .prose>ol {
  column-count: 2;
  column-gap: clamp(34px, 6vw, 80px)
}

/* Image + text composition */
.section-preset-photo_feature .split {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr)
}

.section-preset-photo_feature .split-image-right {
  grid-template-columns: minmax(300px, .75fr) minmax(0, 1.35fr)
}

.section-preset-story_feature .split {
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.25fr)
}

.section-preset-story_feature .split-image-right {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .8fr)
}

.section-preset-photo_feature .split-media img,
.section-preset-story_feature .split-media img,
.section-preset-alternating_story .split-media img {
  height: 100%;
  min-height: 420px;
  object-fit: cover
}

.section-preset-overlap_card .split {
  position: relative;
  display: block;
  min-height: 520px
}

.section-preset-overlap_card .split-media {
  width: 72%
}

.section-preset-overlap_card .split-media img {
  width: 100%;
  min-height: 520px;
  object-fit: cover
}

.section-preset-overlap_card .split-content {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(50%, 620px);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 20px 55px rgba(26, 47, 39, .16);
  padding: clamp(28px, 4vw, 58px)
}

.section-preset-overlap_card .split-image-right .split-media {
  margin-left: auto
}

.section-preset-overlap_card .split-image-right .split-content {
  right: auto;
  left: 0
}

.section-preset-full_bleed_split {
  padding-inline: 0
}

.section-preset-full_bleed_split>.shell {
  max-width: none;
  padding: 0
}

.section-preset-full_bleed_split .split {
  gap: 0;
  align-items: stretch
}

.section-preset-full_bleed_split .split-media img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  border-radius: 0
}

.section-preset-full_bleed_split .split-content {
  padding: clamp(42px, 7vw, 105px);
  align-self: center
}

.section-preset-alternating_story .split {
  gap: clamp(38px, 7vw, 96px)
}

.section-preset-alternating_story .split-content {
  align-self: center
}

/* Standalone images */
.section-preset-framed_photo .single-image-figure {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow)
}

.section-preset-framed_photo .single-image-figure img {
  box-shadow: none
}

.section-preset-full_width_photo>.shell {
  max-width: min(1480px, calc(100% - 28px))
}

.section-preset-full_width_photo .single-image-figure {
  max-width: none
}

/* Card families */
.section-preset-soft_tiles .info-card,
.section-preset-soft_tiles .feature-card {
  background: #f4f6f4;
  border-color: transparent;
  box-shadow: none
}

.section-preset-icon_cards .card-icon,
.section-preset-icon_grid .feature-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(35, 74, 60, .09);
  font-size: 1.65rem;
  margin-bottom: 16px
}

.section-preset-borderless_row .card-grid,
.section-preset-borderless_row .feature-card-grid,
.section-preset-borderless_row .church-info-grid {
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border)
}

.section-preset-borderless_row .info-card,
.section-preset-borderless_row .feature-card,
.section-preset-borderless_row .church-info-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-right: 1px solid var(--color-border)
}

.section-preset-borderless_row .info-card:last-child,
.section-preset-borderless_row .feature-card:last-child,
.section-preset-borderless_row .church-info-card:last-child {
  border-right: 0
}

.section-preset-accent_cards .info-card,
.section-preset-accent_cards .feature-card,
.section-preset-accent_cards .church-info-card {
  border-top: 5px solid var(--color-accent);
  box-shadow: 0 10px 28px rgba(26, 47, 39, .07)
}

.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.feature-card {
  padding: clamp(24px, 3vw, 36px);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 25px rgba(26, 47, 39, .05)
}

.feature-card h3 {
  margin: .1em 0 .5em;
  font: 700 1.22rem/1.2 var(--font-heading)
}

.feature-card p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.65
}

.feature-card-icon {
  font-size: 2rem;
  margin-bottom: 14px
}

.feature-card-link {
  display: inline-flex;
  margin-top: 18px;
  font-weight: 750;
  text-decoration: none
}

/* Callouts */
.section-preset-simple_cta .callout {
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: none;
  text-align: center
}

.section-preset-accent_band.callout-wrap {
  background: var(--color-accent) !important
}

.section-preset-accent_band .callout {
  background: transparent;
  box-shadow: none;
  text-align: center;
  color: #1f2c27
}

.section-preset-accent_band .callout h2 {
  color: #1f2c27
}

.section-preset-dark_feature.callout-wrap {
  background: #1f3029 !important
}

.section-preset-dark_feature .callout {
  background: transparent;
  box-shadow: none;
  color: #fff;
  text-align: center
}

.section-preset-dark_feature .callout h2,
.section-preset-dark_feature .callout p {
  color: #fff
}

.section-preset-centered_invitation .callout {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(38px, 6vw, 78px);
  border-radius: calc(var(--radius) + 10px)
}

/* FAQ */
.faq-list {
  max-width: 980px;
  margin-inline: auto
}

.faq-item {
  border-bottom: 1px solid var(--color-border)
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 22px 4px;
  font: 700 1.12rem/1.35 var(--font-heading)
}

.faq-item summary::-webkit-details-marker {
  display: none
}

.faq-plus {
  font: 400 1.8rem/1 var(--font-body);
  transition: transform .18s ease;
  color: var(--color-primary)
}

.faq-item[open] .faq-plus {
  transform: rotate(45deg)
}

.faq-answer {
  padding: 0 4px 24px;
  max-width: 820px
}

.section-preset-cards .faq-list {
  display: grid;
  gap: 12px
}

.section-preset-cards .faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding-inline: 18px;
  background: #fff
}

.section-preset-soft_panel>.shell {
  background: #f4f6f4;
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(28px, 5vw, 64px)
}

/* Quotes */
.quote-block {
  max-width: 950px;
  margin: 0 auto;
  text-align: center
}

.quote-block blockquote {
  margin: 0;
  font: 600 clamp(1.75rem, 4vw, 3.8rem)/1.18 var(--font-heading);
  letter-spacing: -.02em
}

.quote-block figcaption {
  margin-top: 20px;
  color: var(--color-muted);
  font-weight: 700
}

.quote-eyebrow {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .76rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 18px
}

.section-preset-scripture .quote-block {
  max-width: 830px
}

.section-preset-scripture .quote-block blockquote {
  font-style: italic;
  font-size: clamp(1.55rem, 3.2vw, 2.9rem)
}

.section-preset-accent_quote {
  background: var(--color-primary) !important;
  color: #fff
}

.section-preset-accent_quote .quote-block figcaption,
.section-preset-accent_quote .quote-eyebrow {
  color: rgba(255, 255, 255, .82)
}

.section-preset-editorial_quote .quote-block {
  text-align: left;
  border-left: 6px solid var(--color-accent);
  padding-left: clamp(24px, 5vw, 58px);
  margin-left: 0
}

.section-preset-editorial_quote .quote-block blockquote {
  font-size: clamp(1.65rem, 3vw, 3rem)
}

/* Galleries */
.section-preset-photo_strip .gallery-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px
}

.section-preset-photo_strip .gallery-grid-item {
  flex: 0 0 min(33vw, 390px);
  scroll-snap-align: start
}

.section-preset-photo_strip .gallery-grid-item img {
  aspect-ratio: 4/3
}

.section-preset-featured_grid .gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense
}

.section-preset-featured_grid .gallery-grid-item:first-child {
  grid-column: span 2;
  grid-row: span 2
}

.section-preset-featured_grid .gallery-grid-item:first-child img {
  height: 100%;
  aspect-ratio: auto
}

/* Embeds */
.embed-frame {
  overflow: hidden;
  border-radius: var(--radius);
  background: #111;
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border)
}

.embed-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0
}

.embed-aspect-video {
  aspect-ratio: 16/9
}

.embed-aspect-wide {
  aspect-ratio: 2/1
}

.embed-aspect-square {
  aspect-ratio: 1/1;
  max-width: 820px;
  margin-inline: auto
}

.embed-aspect-calendar {
  height: min(78vh, 820px)
}

.section-preset-full_width>.shell {
  max-width: min(1500px, calc(100% - 28px))
}

.section-preset-full_width .embed-frame {
  border-radius: calc(var(--radius) / 2)
}

.section-preset-soft_panel>.shell {
  background: #f4f6f4;
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(28px, 5vw, 64px)
}

@media(max-width:900px) {
  .hero-preset-split_hero .hero-inner {
    padding-right: 40px;
    min-height: 0;
    padding-block: 65px;
    background: rgba(244, 247, 245, .92)
  }

  .hero-preset-split_hero.has-image {
    background-image: linear-gradient(rgba(244, 247, 245, .88), rgba(244, 247, 245, .92)), var(--hero-image) !important;
    background-size: cover !important;
    background-position: center !important
  }

  .section-preset-overlap_card .split {
    min-height: 0
  }

  .section-preset-overlap_card .split-media {
    width: 100%
  }

  .section-preset-overlap_card .split-media img {
    min-height: 340px
  }

  .section-preset-overlap_card .split-content {
    position: relative;
    transform: none;
    top: auto;
    left: auto !important;
    right: auto !important;
    width: calc(100% - 28px);
    margin: -55px auto 0
  }

  .section-preset-full_bleed_split .split-content {
    padding: 38px 26px
  }

  .feature-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .section-preset-two_column .prose>p,
  .section-preset-two_column .prose>ul,
  .section-preset-two_column .prose>ol {
    column-count: 1
  }
}

@media(max-width:620px) {
  .feature-card-grid {
    grid-template-columns: 1fr
  }

  .section-preset-borderless_row .card-grid,
  .section-preset-borderless_row .feature-card-grid,
  .section-preset-borderless_row .church-info-grid {
    border: 0
  }

  .section-preset-borderless_row .info-card,
  .section-preset-borderless_row .feature-card,
  .section-preset-borderless_row .church-info-card {
    border-right: 0;
    border-bottom: 1px solid var(--color-border)
  }

  .section-preset-photo_strip .gallery-grid-item {
    flex-basis: 82vw
  }

  .section-preset-featured_grid .gallery-grid {
    grid-template-columns: 1fr
  }

  .section-preset-featured_grid .gallery-grid-item:first-child {
    grid-column: auto;
    grid-row: auto
  }
}

/* ===== Functional content + public-safe dynamic data — v0.7 ===== */

/* People / leadership */
.people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px)
}

.person-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 9px 30px rgba(26, 47, 39, .06)
}

.person-photo {
  aspect-ratio: 4/3;
  background: #edf1ee;
  overflow: hidden
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.person-body {
  padding: clamp(20px, 3vw, 30px)
}

.person-body h3 {
  margin: 0;
  font: 700 1.32rem/1.18 var(--font-heading)
}

.person-role {
  margin: .35rem 0 .8rem;
  color: var(--color-primary);
  font-weight: 750
}

.person-body p {
  margin: .65rem 0 0;
  color: var(--color-muted);
  line-height: 1.65
}

.person-email {
  display: inline-flex;
  margin-top: 1rem;
  font-weight: 750;
  text-decoration: none
}

.person-email:hover {
  text-decoration: underline
}

.section-preset-leadership_profiles .people-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 44px)
}

.section-preset-leadership_profiles .person-card {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(0, 1.2fr);
  align-items: stretch
}

.section-preset-leadership_profiles .person-photo {
  aspect-ratio: auto;
  min-height: 280px
}

.section-preset-simple_directory .people-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-border)
}

.section-preset-simple_directory .person-card {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  padding: 20px 0;
  background: transparent
}

.section-preset-simple_directory .person-photo {
  width: 84px;
  height: 84px;
  aspect-ratio: 1;
  border-radius: 999px
}

.section-preset-simple_directory .person-body {
  padding: 2px 0
}

/* Native public forms. Submissions are sent to the private office receiver. */
.public-form-shell {
  max-width: 860px;
  margin-inline: auto
}

.public-form-copy {
  margin-bottom: 1.35rem
}

.public-form-copy h2 {
  margin: 0 0 .45rem;
  font-size: clamp(1.85rem, 3.6vw, 3rem)
}

.public-form-copy p {
  margin: 0;
  color: var(--color-muted);
  font-size: 1.05rem;
  line-height: 1.7
}

.public-site-form {
  display: grid;
  gap: 1.15rem
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px
}

.form-grid label,
.public-site-form label {
  font-weight: 700
}

.form-grid label>span {
  display: block;
  margin-bottom: .4rem
}

.form-grid input,
.form-grid textarea {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #cbd5cf;
  border-radius: calc(var(--radius) * .55);
  padding: .82rem .9rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease
}

.form-grid textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55
}

.form-grid input:focus,
.form-grid textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(35, 74, 60, .12)
}

.form-field-full {
  grid-column: 1/-1
}

.form-optional {
  font-weight: 500;
  color: var(--color-muted);
  font-size: .86rem
}

.form-help {
  margin: 0;
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.55
}

.form-success,
.form-error,
.form-preview-note {
  padding: 1rem 1.1rem;
  border-radius: calc(var(--radius) * .65);
  margin: 0 0 1.25rem;
  border: 1px solid transparent
}

.form-success {
  background: #edf8f0;
  border-color: #b9dfc1;
  color: #245c31
}

.form-error {
  background: #fff1f1;
  border-color: #efc4c4;
  color: #8b2525
}

.form-preview-note {
  background: #eef5fb;
  border-color: #c7dcef;
  color: #254f72
}

.website-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important
}

.prayer-sharing {
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * .65);
  padding: 1rem 1.1rem;
  margin: 0;
  display: grid;
  gap: .7rem
}

.prayer-sharing legend {
  padding: 0 .4rem;
  font-weight: 800
}

.prayer-sharing label,
.form-checkline {
  display: flex;
  gap: .65rem;
  align-items: center;
  font-weight: 600
}

.prayer-sharing input[type="checkbox"],
.form-checkline input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--color-primary)
}

.prayer-sharing input[type="checkbox"]:disabled {
  opacity: 1
}

.prayer-sharing label.form-checkline {
  cursor: pointer
}

.public-site-form .button,
.public-site-form .site-button {
  justify-self: start;
  cursor: pointer;
  font: 750 .98rem/1 var(--font-body)
}

.section-preset-form_card .public-form-shell {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(26px, 5vw, 58px);
  box-shadow: 0 16px 45px rgba(26, 47, 39, .08)
}

.section-preset-minimal_form .public-form-shell {
  max-width: 760px
}

.section-preset-accent_form {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong)) !important;
  color: #fff
}

.section-preset-accent_form .public-form-copy p,
.section-preset-accent_form .form-help,
.section-preset-accent_form .form-optional {
  color: rgba(255, 255, 255, .78)
}

.section-preset-accent_form .public-form-copy h2 {
  color: #fff
}

.section-preset-accent_form .prayer-sharing {
  border-color: rgba(255, 255, 255, .28)
}

.section-preset-accent_form .site-button {
  background: #fff;
  color: var(--color-primary)
}

/* Public event mirror */
.dynamic-empty {
  padding: 1.25rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  text-align: center;
  background: rgba(255, 255, 255, .55)
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px
}

.event-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 9px 28px rgba(26, 47, 39, .06)
}

.event-image {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #edf1ee
}

.event-body {
  display: flex;
  gap: 16px;
  padding: 22px
}

.event-date {
  flex: 0 0 54px;
  text-align: center;
  border-right: 1px solid var(--color-border);
  padding-right: 15px;
  display: flex;
  flex-direction: column;
  line-height: 1.05
}

.event-date strong {
  font: 800 1.05rem/1 var(--font-heading);
  color: var(--color-primary);
  text-transform: uppercase
}

.event-date span {
  font-size: .8rem;
  color: var(--color-muted);
  margin-top: .35rem
}

.event-content {
  min-width: 0
}

.event-content h3 {
  margin: 0 0 .45rem;
  font: 700 1.24rem/1.25 var(--font-heading)
}

.event-meta,
.event-location {
  font-size: .9rem;
  color: var(--color-muted);
  line-height: 1.45
}

.event-location {
  margin-top: .25rem;
  font-weight: 650
}

.event-description {
  margin-top: .85rem;
  font-size: .94rem;
  line-height: 1.6
}

.event-description p:last-child {
  margin-bottom: 0
}

.section-preset-event_list .event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border)
}

.section-preset-event_list .event-card {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 22px 0
}

.section-preset-event_list .event-image {
  height: 100%;
  min-height: 150px;
  border-radius: calc(var(--radius) * .6)
}

.section-preset-event_list .event-body {
  align-items: flex-start
}

.section-preset-featured_events .event-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.section-preset-featured_events .event-card:first-child {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(0, .9fr)
}

.section-preset-featured_events .event-card:first-child .event-image {
  height: 100%;
  aspect-ratio: auto;
  min-height: 360px
}

/* Public missionary mirror */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px
}

.mission-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 9px 30px rgba(26, 47, 39, .06)
}

.mission-photo {
  aspect-ratio: 4/3;
  background: #edf1ee;
  overflow: hidden
}

.mission-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.mission-body {
  padding: clamp(21px, 3vw, 30px)
}

.mission-body h3 {
  margin: 0;
  font: 700 1.3rem/1.22 var(--font-heading)
}

.mission-org {
  margin: .28rem 0 .7rem;
  color: var(--color-primary);
  font-weight: 750
}

.mission-location,
.mission-role {
  color: var(--color-muted);
  font-size: .92rem;
  line-height: 1.5
}

.mission-role {
  font-weight: 650
}

.mission-bio {
  margin-top: .9rem;
  font-size: .95rem;
  line-height: 1.62
}

.section-preset-mission_directory .mission-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-border)
}

.section-preset-mission_directory .mission-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  padding: 20px 0;
  background: transparent
}

.section-preset-mission_directory .mission-photo {
  width: 104px;
  height: 104px;
  aspect-ratio: 1;
  border-radius: 999px
}

.section-preset-mission_directory .mission-body {
  padding: 3px 0
}

.section-preset-mission_profiles .mission-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px
}

.section-preset-mission_profiles .mission-card {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(0, 1.2fr)
}

.section-preset-mission_profiles .mission-photo {
  aspect-ratio: auto;
  min-height: 300px
}

/* Embed fallback link */
.embed-source-link {
  margin: .75rem 0 0;
  text-align: right;
  font-size: .9rem
}

.embed-source-link a {
  font-weight: 700
}

@media(max-width:980px) {

  .people-grid,
  .event-grid,
  .mission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .section-preset-featured_events .event-card:first-child {
    grid-template-columns: 1fr
  }

  .section-preset-featured_events .event-card:first-child .event-image {
    aspect-ratio: 16/9;
    min-height: 0
  }

  .section-preset-leadership_profiles .person-card,
  .section-preset-mission_profiles .mission-card {
    grid-template-columns: 1fr
  }

  .section-preset-leadership_profiles .person-photo,
  .section-preset-mission_profiles .mission-photo {
    aspect-ratio: 16/10;
    min-height: 0
  }
}

@media(max-width:650px) {

  .people-grid,
  .event-grid,
  .mission-grid,
  .section-preset-featured_events .event-grid,
  .section-preset-mission_profiles .mission-grid,
  .section-preset-leadership_profiles .people-grid {
    grid-template-columns: 1fr
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .form-field-full {
    grid-column: auto
  }

  .section-preset-event_list .event-card {
    grid-template-columns: 1fr
  }

  .section-preset-event_list .event-image {
    aspect-ratio: 16/9;
    height: auto
  }

  .section-preset-simple_directory .people-grid,
  .section-preset-mission_directory .mission-grid {
    grid-template-columns: 1fr
  }

  .section-preset-simple_directory .person-card {
    grid-template-columns: 82px minmax(0, 1fr)
  }

  .section-preset-mission_directory .mission-card {
    grid-template-columns: 94px minmax(0, 1fr)
  }

  .section-preset-simple_directory .person-photo {
    width: 68px;
    height: 68px
  }

  .section-preset-mission_directory .mission-photo {
    width: 78px;
    height: 78px
  }
}

/* ===== Flexible Columns + Content Blocks — v0.8 ===== */
.content-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start
}

.columns-layout-40_60 .content-columns {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr)
}

.columns-layout-60_40 .content-columns {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr)
}

.columns-layout-33_67 .content-columns {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr)
}

.columns-layout-67_33 .content-columns {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr)
}

.columns-gap-small .content-columns {
  gap: clamp(18px, 2.4vw, 30px)
}

.columns-gap-wide .content-columns {
  gap: clamp(42px, 7vw, 92px)
}

.columns-valign-center .content-columns {
  align-items: center
}

.columns-valign-stretch .content-columns {
  align-items: stretch
}

.content-column {
  min-width: 0
}

.column-panel-soft,
.column-panel-bordered,
.column-panel-accent,
.column-panel-dark {
  padding: clamp(24px, 3.2vw, 42px);
  border-radius: calc(var(--radius) + 4px)
}

.column-panel-soft {
  background: #f4f6f4
}

.column-panel-bordered {
  border: 1px solid var(--color-border);
  background: #fff
}

.column-panel-accent {
  background: color-mix(in srgb, var(--color-accent) 55%, #fff)
}

.column-panel-dark {
  background: #21342c;
  color: #fff
}

.column-panel-dark h2,
.column-panel-dark h3,
.column-panel-dark p,
.column-panel-dark strong,
.column-panel-dark span,
.column-panel-dark figcaption {
  color: inherit
}

.column-panel-dark a:not(.content-button) {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .45)
}

.section-preset-soft_columns {
  background: #f7f8f7 !important
}

.section-preset-soft_columns .content-column {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(24px, 3vw, 40px)
}

.section-preset-split_panel .content-columns {
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  background: #fff
}

.section-preset-split_panel .content-column {
  padding: clamp(28px, 4vw, 54px)
}

.section-preset-split_panel .content-column+.content-column {
  border-left: 1px solid var(--color-border);
  background: #f5f7f5
}

.column-block+.column-block {
  margin-top: clamp(24px, 3.2vw, 38px)
}

.column-block+.column-block.column-block-space-tight {
  margin-top: clamp(8px, 1vw, 14px)
}

.column-block+.column-block.column-block-space-roomy {
  margin-top: clamp(38px, 5vw, 64px)
}

.column-block-text.prose {
  max-width: none
}

.column-block-text h2,
.column-block-church-info h2,
.column-block-embed h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.5rem);
  margin-bottom: .55em
}

.column-text-center {
  text-align: center
}

.column-text-right {
  text-align: right
}

.column-block-image {
  margin: 0
}

.column-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius)
}

.column-image-landscape img {
  aspect-ratio: 16/10;
  object-fit: cover
}

.column-image-square img {
  aspect-ratio: 1;
  object-fit: cover
}

.column-block-image figcaption {
  margin-top: .55rem;
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.45
}

.content-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center
}

.content-button-align-center {
  justify-content: center
}

.content-button-align-right {
  justify-content: flex-end
}

.content-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 760;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease
}

.content-button:hover {
  transform: translateY(-1px)
}

.content-button-primary {
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: #fff
}

.content-button-primary:hover {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
  color: #fff
}

.content-button-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary)
}

.content-button-outline:hover {
  background: var(--color-primary);
  color: #fff
}

.content-button-text {
  background: transparent;
  border: 2px solid transparent;
  color: var(--color-primary);
  padding-inline: .3rem;
  text-decoration: underline;
  text-underline-offset: .2em
}

.content-button-small {
  min-height: 38px;
  padding: 7px 15px;
  font-size: .9rem
}

.content-button-normal {
  min-height: 46px;
  padding: 10px 20px;
  font-size: .98rem
}

.content-button-large {
  min-height: 54px;
  padding: 13px 26px;
  font-size: 1.08rem
}

.section-preset-centered_actions .content-button-row {
  justify-content: center
}

.section-preset-action_band>.shell {
  background: #f4f6f4;
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(24px, 4vw, 44px)
}

.section-preset-action_band .content-button-row {
  justify-content: center
}

.column-info-list {
  display: grid;
  gap: .72rem
}

.column-info-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  padding: .8rem 0;
  border-bottom: 1px solid var(--color-border)
}

.column-info-item:last-child {
  border-bottom: 0
}

.column-info-icon {
  font-size: 1.18rem;
  line-height: 1.3
}

.column-info-item strong {
  display: block;
  font-size: .9rem;
  margin-bottom: .12rem
}

.column-info-item a,
.column-info-item span {
  display: block;
  color: var(--color-muted);
  line-height: 1.45
}

.column-info-item a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none
}

.column-info-density-compact h2 {
  margin-bottom: .25em
}

.column-info-density-compact .column-info-list {
  gap: 0
}

.column-info-density-compact .column-info-item {
  padding: .35rem 0;
  gap: .5rem
}

.column-info-density-compact .column-info-icon {
  font-size: 1.08rem
}

.column-info-density-compact .column-info-item strong {
  margin-bottom: .03rem
}

.column-info-action-item {
  align-items: center
}

.column-info-item a.column-info-action {
  display: inline-flex;
  color: #fff;
  line-height: 1.2;
  text-decoration: none
}

.column-block-quote {
  margin: 0;
  padding-left: 1.15rem;
  border-left: 4px solid var(--color-accent)
}

.column-block-quote blockquote {
  margin: 0;
  font: 600 clamp(1.28rem, 2.2vw, 2rem)/1.35 var(--font-heading)
}

.column-block-quote figcaption {
  margin-top: .6rem;
  color: var(--color-muted);
  font-weight: 700
}

.column-block-divider {
  display: block;
  width: 100%
}

.column-divider {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  opacity: 1
}

.column-divider-line {
  border-top: 2px solid var(--color-border)
}

.column-divider-dots {
  border-top: 2px dotted var(--color-border)
}

.divider-space-small {
  padding-block: .25rem
}

.divider-space-normal {
  padding-block: .7rem
}

.divider-space-large {
  padding-block: 1.4rem
}

.column-spacer-small {
  height: 18px
}

.column-spacer-medium {
  height: 36px
}

.column-spacer-large {
  height: 64px
}

.button-group-section.section-space-compact {
  padding-block: 24px
}

@media(max-width:760px) {

  .content-columns,
  .columns-layout-40_60 .content-columns,
  .columns-layout-60_40 .content-columns,
  .columns-layout-33_67 .content-columns,
  .columns-layout-67_33 .content-columns {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .columns-mobile-right_first .content-column-1 {
    order: 2
  }

  .columns-mobile-right_first .content-column-2 {
    order: 1
  }

  .section-preset-split_panel .content-columns {
    border-radius: var(--radius)
  }

  .section-preset-split_panel .content-column+.content-column {
    border-left: 0;
    border-top: 1px solid var(--color-border)
  }

  .column-panel-soft,
  .column-panel-bordered,
  .column-panel-accent,
  .column-panel-dark {
    padding: 24px
  }
}

.column-panel-dark .content-button-outline {
  border-color: #fff;
  color: #fff
}

.column-panel-dark .content-button-outline:hover {
  background: #fff;
  color: #21342c
}

.column-panel-dark .content-button-text {
  color: #fff
}

.column-panel-dark .content-button-primary {
  background: #fff;
  border-color: #fff;
  color: #21342c
}

.column-panel-dark .content-button-primary:hover {
  background: #f2f5f3;
  border-color: #f2f5f3;
  color: #17241f
}

/* v0.8.4 full-section Divider / Line */
.site-divider-section {
  width: 100%;
}

.site-divider-space-compact {
  padding-block: .6rem;
}

.site-divider-space-normal {
  padding-block: 1.25rem;
}

.site-divider-space-roomy {
  padding-block: 2.25rem;
}

.site-divider-wrap {
  margin-inline: auto;
  padding-inline: 1rem;
}

.site-divider-width-short {
  max-width: 420px;
}

.site-divider-width-standard {
  max-width: 920px;
}

.site-divider-width-full {
  max-width: var(--site-content-wide, 1320px);
}

.site-divider-rule {
  margin: 0;
  border: 0;
  border-top-color: rgba(31, 52, 43, .38);
  opacity: 1;
}

.site-divider-style-solid {
  border-top-style: solid;
}

.site-divider-style-dotted {
  border-top-style: dotted;
}

.site-divider-thickness-1 {
  border-top-width: 1px;
}

.site-divider-thickness-2 {
  border-top-width: 2px;
}

.site-divider-thickness-3 {
  border-top-width: 3px;
}

/* ===== Section blocks + text alignment — v0.9 ===== */
.section-text-align-left {
  text-align: left
}

.section-text-align-center {
  text-align: center;
  margin-inline: auto
}

.section-text-align-right {
  text-align: right;
  margin-left: auto
}

.section-text-align-center .content-button-row {
  justify-content: center
}

.section-text-align-right .content-button-row {
  justify-content: flex-end
}

.section-text-align-center ul,
.section-text-align-center ol,
.section-text-align-right ul,
.section-text-align-right ol {
  display: inline-block;
  text-align: left
}

.section-extra-blocks {
  padding-top: 0 !important;
  padding-bottom: 0 !important
}

.section-extra-blocks .section-extra-block-stack {
  width: 100%
}

.section-extra-block-stack.section-extra-after_heading {
  margin: .65rem 0 1.15rem
}

.section-extra-block-stack.section-extra-after_content {
  margin-top: 1.15rem
}

.section-extra-block-stack>.column-block:first-child {
  margin-top: 0
}

.section-extra-block-stack>.column-block+.column-block {
  margin-top: clamp(18px, 2.4vw, 30px)
}

.section-extra-block-stack>.column-block+.column-block.column-block-space-tight {
  margin-top: clamp(7px, .9vw, 12px)
}

.section-extra-block-stack>.column-block+.column-block.column-block-space-roomy {
  margin-top: clamp(32px, 4.5vw, 52px)
}

/* ===== Website Editor v0.10 — image sizing + section typography/colors ===== */
.content-image-width-25 {
  width: 25%;
  max-width: 25%
}

.content-image-width-40 {
  width: 40%;
  max-width: 40%
}

.content-image-width-50 {
  width: 50%;
  max-width: 50%
}

.content-image-width-60 {
  width: 60%;
  max-width: 60%
}

.content-image-width-75 {
  width: 75%;
  max-width: 75%
}

.content-image-width-100 {
  width: 100%;
  max-width: 100%
}

.content-image-align-left {
  margin-left: 0;
  margin-right: auto
}

.content-image-align-center {
  margin-left: auto;
  margin-right: auto
}

.content-image-align-right {
  margin-left: auto;
  margin-right: 0
}

.split-media.content-image-width-25,
.split-media.content-image-width-40,
.split-media.content-image-width-50,
.split-media.content-image-width-60,
.split-media.content-image-width-75,
.split-media.content-image-width-100 {
  justify-self: stretch
}

.column-block-image img {
  width: 100%;
  height: auto
}

.section-style-scope.section-has-custom-bg>.site-section {
  background: var(--section-custom-bg) !important
}

.section-style-scope.section-has-custom-text>.site-section {
  color: var(--section-custom-text) !important
}

.section-style-scope.section-has-custom-text>.site-section .prose,
.section-style-scope.section-has-custom-text>.site-section .section-heading,
.section-style-scope.section-has-custom-text>.site-section p,
.section-style-scope.section-has-custom-text>.site-section li,
.section-style-scope.section-has-custom-text>.site-section figcaption,
.section-style-scope.section-has-custom-text>.site-section blockquote {
  color: inherit
}

.section-style-scope.section-has-custom-heading>.site-section h1,
.section-style-scope.section-has-custom-heading>.site-section h2,
.section-style-scope.section-has-custom-heading>.site-section h3,
.section-style-scope.section-has-custom-heading>.site-section h4,
.section-style-scope.section-has-custom-heading>.site-section h5,
.section-style-scope.section-has-custom-heading>.site-section h6 {
  color: var(--section-custom-heading) !important
}

.section-style-scope.section-has-custom-body-font>.site-section {
  font-family: var(--section-custom-body-font) !important
}

.section-style-scope.section-has-custom-body-font>.site-section .prose,
.section-style-scope.section-has-custom-body-font>.site-section p,
.section-style-scope.section-has-custom-body-font>.site-section li,
.section-style-scope.section-has-custom-body-font>.site-section figcaption,
.section-style-scope.section-has-custom-body-font>.site-section blockquote {
  font-family: inherit
}

.section-style-scope.section-has-custom-heading-font>.site-section h1,
.section-style-scope.section-has-custom-heading-font>.site-section h2,
.section-style-scope.section-has-custom-heading-font>.site-section h3,
.section-style-scope.section-has-custom-heading-font>.site-section h4,
.section-style-scope.section-has-custom-heading-font>.site-section h5,
.section-style-scope.section-has-custom-heading-font>.site-section h6 {
  font-family: var(--section-custom-heading-font) !important
}

@media (max-width:560px) {

  .content-image-width-25,
  .content-image-width-40,
  .content-image-width-50,
  .content-image-width-60,
  .content-image-width-75 {
    min-width: 42%
  }
}


/* ===== Image orientation / fit — v0.10.1 ===== */
.single-image-portrait {
  max-width: 700px
}

.single-image-portrait img,
.column-image-portrait img,
.donate-image-aspect-portrait img {
  aspect-ratio: 4/5
}

.content-image-aspect-landscape img,
.column-image-landscape img,
.donate-image-aspect-landscape img {
  aspect-ratio: 16/10
}

.content-image-aspect-portrait img {
  aspect-ratio: 4/5
}

.content-image-aspect-square img,
.column-image-square img,
.donate-image-aspect-square img {
  aspect-ratio: 1
}

.image-fit-cover img {
  object-fit: cover
}

.image-fit-contain img {
  object-fit: contain;
  background: transparent
}

.content-image-aspect-natural img,
.single-image-natural img,
.column-image-natural img,
.donate-image-aspect-natural img {
  aspect-ratio: auto !important;
  height: auto !important;
  object-fit: contain !important
}

.split-media.image-fit-contain img {
  height: auto;
  min-height: 0
}

.section-preset-photo_feature .split-media.image-fit-contain img,
.section-preset-story_feature .split-media.image-fit-contain img,
.section-preset-alternating_story .split-media.image-fit-contain img,
.section-preset-overlap_card .split-media.image-fit-contain img,
.section-preset-full_bleed_split .split-media.image-fit-contain img {
  height: auto;
  min-height: 0;
  object-fit: contain
}

/* ===== Donate Container block — v0.11 ===== */
.donate-container {
  box-sizing: border-box;
  margin-inline: auto;
  border-radius: calc(var(--radius) + 5px);
  overflow: hidden
}

.donate-width-full {
  width: 100%;
  max-width: none
}

.donate-width-wide {
  width: 100%;
  max-width: 1050px
}

.donate-width-medium {
  width: 100%;
  max-width: 820px
}

.donate-width-narrow {
  width: 100%;
  max-width: 620px
}

.donate-bg-transparent {
  background: transparent
}

.donate-bg-white {
  background: #fff
}

.donate-bg-soft {
  background: #f5f7f5
}

.donate-bg-accent {
  background: color-mix(in srgb, var(--color-accent) 55%, #fff)
}

.donate-bg-dark {
  background: #21342c;
  color: #fff
}

.donate-bg-dark h3,
.donate-bg-dark p,
.donate-bg-dark li,
.donate-bg-dark .prose {
  color: inherit
}

.donate-bg-dark a:not(.donate-button) {
  color: #fff
}

.donate-border-none {
  border: 0
}

.donate-border-light {
  border: 1px solid var(--color-border)
}

.donate-border-accent {
  border: 2px solid var(--color-accent)
}

.donate-border-strong {
  border: 2px solid color-mix(in srgb, var(--color-primary) 65%, #000 10%)
}

.donate-padding-compact {
  padding: clamp(16px, 2vw, 24px)
}

.donate-padding-normal {
  padding: clamp(24px, 3.5vw, 40px)
}

.donate-padding-roomy {
  padding: clamp(34px, 5vw, 60px)
}

.donate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px);
  align-items: center
}

.donate-image-left .donate-layout {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr)
}

.donate-image-right .donate-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr)
}

.donate-image-left .donate-image {
  grid-column: 1
}

.donate-image-left .donate-copy {
  grid-column: 2
}

.donate-image-right .donate-copy {
  grid-column: 1
}

.donate-image-right .donate-image {
  grid-column: 2
}

.donate-image-above .donate-image {
  order: 0
}

.donate-image-above .donate-copy {
  order: 1
}

.donate-image-below .donate-copy {
  order: 0
}

.donate-image-below .donate-image {
  order: 1
}

.donate-image {
  margin: 0;
  min-width: 0
}

.donate-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius)
}

.donate-copy {
  min-width: 0
}

.donate-heading {
  margin: 0 0 .55em;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem)
}

.donate-text.prose {
  max-width: none
}

.donate-text.prose>:last-child {
  margin-bottom: 0
}

.donate-text-center {
  text-align: center
}

.donate-text-right {
  text-align: right
}

.donate-text-center ul,
.donate-text-center ol,
.donate-text-right ul,
.donate-text-right ol {
  display: inline-block;
  text-align: left
}

.donate-action {
  display: flex;
  margin-top: 1.15rem
}

.donate-action-left {
  justify-content: flex-start
}

.donate-action-center {
  justify-content: center
}

.donate-action-right {
  justify-content: flex-end
}

.donate-paypal-form {
  margin: 0
}

.donate-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid transparent;
  font: 800 1rem/1.15 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease
}

.donate-button:hover {
  transform: translateY(-1px);
  filter: brightness(.98)
}

.donate-button-small {
  min-height: 40px;
  padding: 8px 17px;
  font-size: .9rem
}

.donate-button-normal {
  min-height: 48px;
  padding: 11px 24px
}

.donate-button-large {
  min-height: 56px;
  padding: 14px 30px;
  font-size: 1.08rem
}

.donate-button-gold {
  background: #ffc439;
  border-color: #ffc439;
  color: #111
}

.donate-button-blue {
  background: #0070ba;
  border-color: #0070ba;
  color: #fff
}

.donate-button-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff
}

.donate-button-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary)
}

.donate-button-outline:hover {
  background: var(--color-primary);
  color: #fff
}

.donate-button-dark {
  background: #1f2d28;
  border-color: #1f2d28;
  color: #fff
}

.donate-bg-dark .donate-button-outline {
  border-color: #fff;
  color: #fff
}

.donate-bg-dark .donate-button-outline:hover {
  background: #fff;
  color: #21342c
}

.donate-bg-dark .donate-button-dark {
  background: #fff;
  border-color: #fff;
  color: #21342c
}

.donate-missing-config {
  margin-top: 1rem;
  padding: .7rem .85rem;
  border: 1px dashed currentColor;
  border-radius: var(--radius);
  opacity: .72;
  font-size: .9rem
}

@media(max-width:700px) {

  .donate-image-left .donate-layout,
  .donate-image-right .donate-layout {
    grid-template-columns: 1fr
  }

  .donate-image-left .donate-image,
  .donate-image-left .donate-copy,
  .donate-image-right .donate-image,
  .donate-image-right .donate-copy {
    grid-column: auto
  }

  .donate-image-left .donate-image,
  .donate-image-right .donate-image {
    order: 0
  }

  .donate-image-left .donate-copy,
  .donate-image-right .donate-copy {
    order: 1
  }
}

/* ===== v0.11.1 alignment + preview-return refinements ===== */
.public-section-anchor,
.content-block-anchor {
  scroll-margin-top: 120px
}

.split-valign-top {
  align-items: start
}

.split-valign-center {
  align-items: center
}

.split-valign-bottom {
  align-items: end
}

.columns-valign-end .content-columns {
  align-items: end
}

.donate-image-left.donate-valign-top .donate-layout,
.donate-image-right.donate-valign-top .donate-layout {
  align-items: start
}

.donate-image-left.donate-valign-center .donate-layout,
.donate-image-right.donate-valign-center .donate-layout {
  align-items: center
}

.donate-image-left.donate-valign-bottom .donate-layout,
.donate-image-right.donate-valign-bottom .donate-layout {
  align-items: end
}

.donate-padding-compact {
  padding: 10px 12px
}

.donate-padding-compact .donate-layout {
  gap: 10px
}

.donate-padding-compact.donate-image-above .donate-layout,
.donate-padding-compact.donate-image-below .donate-layout {
  gap: 8px
}


/* v0.11.3 — linked images + independent heading/text/caption alignment */
.linked-image {
  display: block;
  color: inherit;
  text-decoration: none
}

.linked-image img {
  display: block;
  max-width: 100%
}

.linked-image:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
  border-radius: .35rem
}

.section-heading-align-left :is(h1, h2, h3, h4, h5, h6, .section-heading) {
  text-align: left
}

.section-heading-align-center :is(h1, h2, h3, h4, h5, h6, .section-heading) {
  text-align: center
}

.section-heading-align-right :is(h1, h2, h3, h4, h5, h6, .section-heading) {
  text-align: right
}

.section-text-align-left :is(.prose, p, .section-intro, .lead, blockquote) {
  text-align: left
}

.section-text-align-center :is(.prose, p, .section-intro, .lead, blockquote) {
  text-align: center
}

.section-text-align-right :is(.prose, p, .section-intro, .lead, blockquote) {
  text-align: right
}

.section-caption-align-left figcaption {
  text-align: left
}

.section-caption-align-center figcaption {
  text-align: center
}

.section-caption-align-right figcaption {
  text-align: right
}

.section-content-block.block-heading-align-left :is(h2, h3, h4, h5, h6) {
  text-align: left
}

.section-content-block.block-heading-align-center :is(h2, h3, h4, h5, h6) {
  text-align: center
}

.section-content-block.block-heading-align-right :is(h2, h3, h4, h5, h6) {
  text-align: right
}

.section-content-block.block-text-align-left :is(.prose, p, blockquote) {
  text-align: left
}

.section-content-block.block-text-align-center :is(.prose, p, blockquote) {
  text-align: center
}

.section-content-block.block-text-align-right :is(.prose, p, blockquote) {
  text-align: right
}

.section-content-block.block-caption-align-left figcaption {
  text-align: left
}

.section-content-block.block-caption-align-center figcaption {
  text-align: center
}

.section-content-block.block-caption-align-right figcaption {
  text-align: right
}

/* ===== Reusable Info Lists / detail rows — v0.12 ===== */
.content-info-list {
  display: grid;
  gap: .55rem;
  margin-top: .85rem;
  text-align: left
}

.content-info-row {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-width: 0
}

.content-info-icon {
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  color: var(--color-primary);
  margin-top: .15rem
}

.content-info-icon svg {
  display: block;
  width: 1.18rem;
  height: 1.18rem
}

.content-info-text {
  min-width: 0;
  line-height: 1.45;
  color: inherit
}

.content-info-text a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .14em
}

.content-info-text a:hover {
  text-decoration-thickness: 2px
}

.content-info-list-separated {
  gap: 0
}

.content-info-list-separated .content-info-row {
  padding: .7rem 0;
  border-top: 1px solid var(--color-border)
}

.content-info-list-separated .content-info-row:first-child {
  border-top: 0;
  padding-top: 0
}

.content-info-list-soft {
  gap: .45rem
}

.content-info-list-soft .content-info-row {
  padding: .62rem .72rem;
  border-radius: 10px;
  background: rgba(35, 74, 60, .055)
}

.section-bg-dark .content-info-icon,
.donate-bg-dark .content-info-icon {
  color: #f0c77e
}

.section-bg-dark .content-info-list-soft .content-info-row,
.donate-bg-dark .content-info-list-soft .content-info-row {
  background: rgba(255, 255, 255, .075)
}

.column-block-info-list>h2 {
  margin-top: 0;
  margin-bottom: .65rem
}

.feature-card-details {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--color-border);
  font-size: .94rem
}

.feature-card-details .content-info-icon {
  color: var(--color-accent)
}

.feature-card-details+.feature-card-link {
  margin-top: 18px
}

/* ===== v0.13 companion block layouts ===== */
.section-companion-layout {
  display: grid;
  gap: clamp(28px, 4vw, 58px);
  align-items: start
}

.section-companion-layout.section-companion-left {
  grid-template-columns: minmax(0, var(--companion-side, 33fr)) minmax(0, var(--companion-main, 67fr))
}

.section-companion-layout.section-companion-right {
  grid-template-columns: minmax(0, var(--companion-main, 67fr)) minmax(0, var(--companion-side, 33fr))
}

.section-companion-layout.section-companion-both {
  grid-template-columns: minmax(0, var(--companion-left, 25fr)) minmax(0, var(--companion-main, 50fr)) minmax(0, var(--companion-right, 25fr))
}

.section-companion-main {
  min-width: 0
}

.section-companion-main>.site-section {
  padding: 0 !important;
  background: transparent !important
}

.section-companion-main>.site-section>.shell {
  width: 100%;
  max-width: none;
  margin-inline: 0
}

.section-companion-side {
  min-width: 0
}

.section-companion-side .section-extra-block-stack {
  display: grid;
  gap: 18px
}

.section-companion-side .section-content-block:first-child {
  margin-top: 0
}

@media (max-width: 900px) {

  .section-companion-layout.section-companion-left,
  .section-companion-layout.section-companion-right,
  .section-companion-layout.section-companion-both {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .section-companion-layout.section-companion-right .section-companion-main {
    order: 1
  }

  .section-companion-layout.section-companion-right .section-companion-side-right {
    order: 2
  }
}

/* ===== v0.13.1 companion sizing + compact feature-card counts ===== */
.feature-card-grid.feature-card-count-1 {
  grid-template-columns: minmax(0, 1fr)
}

.feature-card-grid.feature-card-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media(max-width:700px) {
  .feature-card-grid.feature-card-count-2 {
    grid-template-columns: 1fr
  }
}

/* ===== v0.13.2 rich-text line height + list spacing ===== */
.cms-lh-100 {
  line-height: 1 !important
}

.cms-lh-115 {
  line-height: 1.15 !important
}

.cms-lh-130 {
  line-height: 1.3 !important
}

.cms-lh-150 {
  line-height: 1.5 !important
}

.cms-lh-175 {
  line-height: 1.75 !important
}

.cms-lh-200 {
  line-height: 2 !important
}

ul.cms-list-tight>li+li,
ol.cms-list-tight>li+li {
  margin-top: .15em
}

ul.cms-list-normal>li+li,
ol.cms-list-normal>li+li {
  margin-top: .4em
}

ul.cms-list-relaxed>li+li,
ol.cms-list-relaxed>li+li {
  margin-top: .8em
}

/* ===== v0.14 — image captions + rich-text fonts/colors ===== */
.split-media,
.column-block-image,
.donate-image,
.gallery-grid-item,
.gallery-slide,
.single-image-figure {
  position: relative;
}

.split-media {
  margin: 0;
  min-width: 0;
}

.content-image-caption,
.single-image-figure figcaption,
.column-block-image figcaption,
.donate-image figcaption,
.gallery-grid-item figcaption,
.gallery-slide figcaption {
  display: block;
  margin: .6rem 0 0;
  color: var(--color-muted);
  line-height: 1.4;
}

.caption-position-above>.content-image-caption,
.caption-position-above>figcaption {
  margin: 0 0 .6rem;
}

.caption-position-overlay_top>.content-image-caption,
.caption-position-overlay_bottom>.content-image-caption,
.caption-position-overlay_top>figcaption,
.caption-position-overlay_bottom>figcaption {
  position: absolute;
  z-index: 4;
  left: .75rem;
  right: .75rem;
  margin: 0;
  padding: .5rem .7rem;
  color: #fff;
  background: rgba(18, 29, 25, .76);
  border-radius: 9px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  pointer-events: none;
}

.caption-position-overlay_top>.content-image-caption,
.caption-position-overlay_top>figcaption {
  top: .75rem;
}

.caption-position-overlay_bottom>.content-image-caption,
.caption-position-overlay_bottom>figcaption {
  bottom: .75rem;
}

.caption-font-default {
  font-family: inherit;
}

.caption-font-body {
  font-family: var(--font-body);
}

.caption-font-heading {
  font-family: var(--font-heading);
}

.caption-font-system {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.caption-font-arial {
  font-family: Arial, sans-serif;
}

.caption-font-verdana {
  font-family: Verdana, sans-serif;
}

.caption-font-georgia {
  font-family: Georgia, serif;
}

.caption-font-trebuchet {
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.caption-font-times {
  font-family: "Times New Roman", Times, serif;
}

.caption-size-small {
  font-size: .88rem;
}

.caption-size-normal {
  font-size: 1rem;
}

.caption-size-large {
  font-size: 1.15rem;
}

.section-bg-dark .content-image-caption,
.section-bg-dark .single-image-figure figcaption,
.section-bg-dark .column-block-image figcaption,
.section-bg-dark .donate-image figcaption,
.section-bg-dark .gallery-grid-item figcaption,
.section-bg-dark .gallery-slide figcaption {
  color: rgba(255, 255, 255, .82);
}

.section-bg-dark .caption-position-overlay_top>figcaption,
.section-bg-dark .caption-position-overlay_bottom>figcaption,
.section-bg-dark .caption-position-overlay_top>.content-image-caption,
.section-bg-dark .caption-position-overlay_bottom>.content-image-caption {
  color: #fff;
}

/* Controlled rich-text typography classes used by TinyMCE. */
.cms-font-system {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cms-font-arial {
  font-family: Arial, sans-serif;
}

.cms-font-verdana {
  font-family: Verdana, sans-serif;
}

.cms-font-georgia {
  font-family: Georgia, serif;
}

.cms-font-trebuchet {
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.cms-font-times {
  font-family: "Times New Roman", Times, serif;
}

.cms-color-ink {
  color: var(--color-ink);
}

.cms-color-muted {
  color: var(--color-muted);
}

.cms-color-primary {
  color: var(--color-primary);
}

.cms-color-accent {
  color: var(--color-accent);
}

.cms-color-red {
  color: #a43333;
}

.cms-color-blue {
  color: #245b8a;
}

.cms-color-green {
  color: #2f6b45;
}

.cms-color-purple {
  color: #6a467c;
}

.content-image-caption.caption-size-small {
  font-size: .88rem;
}

.content-image-caption.caption-size-normal {
  font-size: 1rem;
}

.content-image-caption.caption-size-large {
  font-size: 1.15rem;
}

/* ===== v0.15 — modular footer + rich-text sizing/rules + FAQ formatting ===== */
.footer-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
  gap: clamp(28px, 5vw, 64px);
}

.footer-brand {
  min-width: min(100%, 260px)
}

.footer-primary-details {
  display: grid;
  gap: .45rem;
  margin-top: .85rem
}

.footer-primary-details p {
  margin: 0
}

.footer-livestream a {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font-weight: 700;
  text-decoration: none
}

.footer-livestream a:hover {
  text-decoration: underline
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-utility-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .8rem 1rem;
  flex-wrap: wrap;
  font-size: .8rem
}

.footer-utility-links a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none
}

.footer-utility-links a:hover {
  color: #fff;
  text-decoration: underline
}

.footer-utility-links .footer-staff-login {
  opacity: .78;
  font-size: .76rem
}

.footer-copyright {
  white-space: nowrap
}

@media(max-width:700px) {
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column
  }

  .footer-utility-links {
    justify-content: flex-start
  }
}

.cms-size-xs {
  font-size: .78em
}

.cms-size-sm {
  font-size: .9em
}

.cms-size-md {
  font-size: 1em
}

.cms-size-lg {
  font-size: 1.15em
}

.cms-size-xl {
  font-size: 1.35em
}

.cms-size-xxl {
  font-size: 1.6em
}

.prose hr,
.faq-answer hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 1.6rem 0;
}

.faq-answer p {
  margin: .7rem 0
}

.faq-answer p:first-child {
  margin-top: 0
}

.faq-answer p:last-child {
  margin-bottom: 0
}

.faq-answer ul,
.faq-answer ol {
  margin: .8rem 0;
  padding-left: 1.45rem
}

/* ===== Block spacing + standalone headers + custom church info spacing — v0.17 ===== */
/* Content blocks are wrapped in .content-block-anchor for preview/scroll targeting,
   so mirror the direct-sibling spacing rules on the anchored structure as well. */
.content-block-anchor+.content-block-anchor>.column-block {
  margin-top: clamp(24px, 3.2vw, 38px)
}

.content-block-anchor+.content-block-anchor>.column-block.column-block-space-tight {
  margin-top: clamp(8px, 1vw, 14px)
}

.content-block-anchor+.content-block-anchor>.column-block.column-block-space-roomy {
  margin-top: clamp(38px, 5vw, 64px)
}

.column-block+.column-block.column-block-space-custom,
.content-block-anchor+.content-block-anchor>.column-block.column-block-space-custom {
  margin-top: var(--block-space-before, 24px)
}

.section-extra-block-stack>.content-block-anchor:first-child>.column-block {
  margin-top: 0
}

.section-extra-block-stack>.content-block-anchor+.content-block-anchor>.column-block {
  margin-top: clamp(18px, 2.4vw, 30px)
}

.section-extra-block-stack>.content-block-anchor+.content-block-anchor>.column-block.column-block-space-tight {
  margin-top: clamp(7px, .9vw, 12px)
}

.section-extra-block-stack>.content-block-anchor+.content-block-anchor>.column-block.column-block-space-roomy {
  margin-top: clamp(32px, 4.5vw, 52px)
}

.section-extra-block-stack>.content-block-anchor+.content-block-anchor>.column-block.column-block-space-custom {
  margin-top: var(--block-space-before, 24px)
}

.column-block-header {
  min-width: 0
}

.column-block-header .standalone-header {
  margin: 0;
  color: inherit;
  line-height: 1.12;
  letter-spacing: -.02em
}

.standalone-header-font-heading {
  font-family: var(--font-heading)
}

.standalone-header-font-body {
  font-family: var(--font-body)
}

.standalone-header-font-system {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
}

.standalone-header-font-arial {
  font-family: Arial, Helvetica, sans-serif
}

.standalone-header-font-verdana {
  font-family: Verdana, Geneva, sans-serif
}

.standalone-header-font-georgia {
  font-family: Georgia, "Times New Roman", serif
}

.standalone-header-font-trebuchet {
  font-family: "Trebuchet MS", Arial, sans-serif
}

.standalone-header-font-times {
  font-family: "Times New Roman", Times, serif
}

.standalone-header-size-auto:is(h2) {
  font-size: clamp(2rem, 3.6vw, 3rem)
}

.standalone-header-size-auto:is(h3) {
  font-size: clamp(1.5rem, 2.5vw, 2rem)
}

.standalone-header-size-auto:is(h4) {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem)
}

.standalone-header-size-small {
  font-size: clamp(1.2rem, 2vw, 1.55rem)
}

.standalone-header-size-normal {
  font-size: clamp(1.55rem, 2.8vw, 2.5rem)
}

.standalone-header-size-large {
  font-size: clamp(2rem, 3.8vw, 3.35rem)
}

.standalone-header-size-xlarge {
  font-size: clamp(2.55rem, 5vw, 4.5rem)
}

.standalone-header-size-custom {
  font-size: var(--standalone-header-size, 36px)
}

.column-block-church-info .column-info-list {
  padding-left: var(--info-indent, 0)
}

.column-info-density-custom .column-info-list {
  gap: 0
}

.column-info-density-custom .column-info-item {
  padding: var(--info-spacing, 8px) 0;
  gap: .6rem
}

/* ===== Exact block margins + Church Info heading spacing — v0.18 ===== */
/* Anchor wrappers are flow roots so a block's outer margins stay predictable
   instead of collapsing through the preview/scroll-target wrapper. */
.content-block-anchor {
  display: flow-root
}

/* Church Information headings previously inherited the browser's default H2
   top margin, which looked like unexplained padding when the block had a border.
   Top defaults to zero; both top and bottom can be overridden per block. */
.column-block-church-info>h2 {
  margin-top: var(--church-info-heading-margin-top, 0);
  margin-bottom: var(--church-info-heading-margin-bottom, .55em);
}



/* ===== Unified block + element spacing controls — v0.19 ===== */
/* New saves write exact inline margins/padding. Disable the historical automatic
   sibling gap whenever the exact-spacing class is present. */
.column-block+.column-block.column-block-space-exact,
.content-block-anchor+.content-block-anchor>.column-block.column-block-space-exact,
.section-extra-block-stack>.content-block-anchor+.content-block-anchor>.column-block.column-block-space-exact {
  margin-top: 0
}

/* Element wrappers reset the old inherited spacing so their explicit controls are
   predictable. Old snapshots without these wrappers continue using legacy CSS. */
.column-block-text .content-block-heading,
.column-block-info-list .content-block-heading,
.column-block-embed .content-block-heading,
.column-block-church-info .content-block-heading {
  margin: 0
}

.column-block-text .content-block-text-element.prose {
  max-width: none
}

.content-block-text-element.prose>:first-child {
  margin-top: 0
}

.content-block-text-element.prose>:last-child {
  margin-bottom: 0
}

.content-image-element {
  position: relative;
  margin: 0
}

.content-image-element img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius)
}

.content-info-list-element>.content-info-list {
  margin-top: 0
}

.content-embed-intro {
  margin: 0
}

.content-buttons-element {
  min-width: 0
}

.content-spacer-element {
  display: block;
  width: 100%;
  min-height: 0
}

/* Exact element alignment is primarily text alignment; row/list elements also
   honor center/right alignment by moving their row contents horizontally. */
.column-info-list[style*="text-align:center"] .column-info-item,
.content-info-list-element[style*="text-align:center"] .content-info-row {
  justify-content: center
}

.column-info-list[style*="text-align:right"] .column-info-item,
.content-info-list-element[style*="text-align:right"] .content-info-row {
  justify-content: flex-end
}

/* Unified Church Info saves no longer expose the old density/heading-spacing presets. */
.column-block-church-info>.content-block-heading {
  margin: 0
}

/* Donate element spacing is controlled directly when new fields are present. */
.donate-heading[style] {
  margin-top: 0
}

.donate-action[style] {
  margin-top: 0
}


/* Exact spacing owns the gap between blocks in side companion stacks too. */
.section-companion-side .section-extra-block-stack {
  gap: 0
}

/* A divider with auto width shrinks naturally when left/right element margins
   are added instead of overflowing its container at width:100%. */
.column-block-divider.column-block-space-exact .column-divider {
  width: auto
}


/* ===== Church / Service Information line-item controls — v0.20 ===== */
/* These are intentionally content-specific: the list element's own margin/padding
   still controls its relationship to the heading/block, while these controls tune
   the individual service-information rows inside that list. */
.column-block-church-info .column-info-list {
  row-gap: var(--church-info-line-spacing, .72rem);
}

.column-block-church-info .column-info-item {
  padding-left: var(--church-info-indent, 0px);
}

/* ===== Donate image natural fit + exact image spacing — v0.21 ===== */
/* "Show whole image" should size the image element to its intrinsic aspect ratio
   instead of leaving it inside the crop/orientation frame. */
.donate-image.image-fit-contain img {
  aspect-ratio: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Once the unified image margin/padding fields exist, those values own the space
   between the Donate image and the other Donate elements. Older published blocks
   without exact image spacing keep the historical grid gap. */
.donate-image-spacing-exact .donate-layout {
  gap: 0;
}



/* ===== Image link target scopes — Website Editor v0.13 ===== */
.image-link-scope-frame {
  position: relative;
}

.linked-image-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  border-radius: inherit;
  cursor: pointer;
}

.linked-image-frame-overlay:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.linked-image-caption-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .14em;
}

.linked-image-caption-link:hover {
  color: inherit;
  text-decoration-thickness: 2px;
}

/* ===== v0.16 — footer service-time inline label fix =====
   .footer-brand strong is intentionally block-level for the church name.
   Service labels also use <strong>, so keep those inline with their icon. */
.footer-service strong {
  display: inline;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
}

/* ===== YouTube / Livestream media hub — v0.17 ===== */
.youtube-feed-heading {
  max-width: 760px;
  margin: 0 0 1.5rem
}

.youtube-feed-heading h2 {
  margin: 0 0 .45rem
}

.youtube-feed-heading p {
  margin: 0;
  color: var(--color-muted);
  font-size: 1.04rem
}

.section-bg-dark .youtube-feed-heading p {
  color: rgba(255, 255, 255, .78)
}

.youtube-featured {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(26, 47, 39, .09);
}

.youtube-player-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: #0b0b0b
}

.youtube-player-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

.youtube-featured-meta {
  padding: 1rem 1.15rem 1.15rem
}

.youtube-featured-meta h3 {
  margin: .5rem 0 .35rem;
  font-size: clamp(1.15rem, 2.3vw, 1.55rem)
}

.youtube-status-row {
  display: flex;
  align-items: center;
  gap: .55rem .8rem;
  flex-wrap: wrap
}

.youtube-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: var(--color-soft);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase
}

.youtube-status-live {
  background: #b42318;
  color: #fff
}

.youtube-status-upcoming {
  background: var(--color-primary);
  color: #fff
}

.youtube-featured-date {
  color: var(--color-muted);
  font-size: .88rem
}

.youtube-open-link {
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none
}

.youtube-open-link:hover {
  text-decoration: underline
}

.youtube-library-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 .85rem
}

.youtube-library-heading h3 {
  margin: 0;
  font-size: 1.15rem
}

.youtube-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem
}

.youtube-video-card {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: inherit;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * .8);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(26, 47, 39, .04);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.youtube-video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 24px rgba(26, 47, 39, .09)
}

.youtube-video-card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px
}

.youtube-video-card.is-current {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), 0 8px 24px rgba(26, 47, 39, .08)
}

.youtube-video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #111
}

.youtube-video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.youtube-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 9px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: 15px;
  padding-left: 2px
}

.youtube-card-badge {
  position: absolute;
  left: .55rem;
  top: .55rem;
  padding: .22rem .48rem;
  border-radius: 999px;
  background: rgba(25, 42, 34, .9);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em
}

.youtube-card-badge-live {
  background: #b42318
}

.youtube-video-card-body {
  display: block;
  padding: .8rem .85rem .9rem
}

.youtube-video-card-body strong {
  display: block;
  color: var(--color-ink);
  font: 700 .96rem/1.3 var(--font-heading)
}

.youtube-video-card-body span {
  display: block;
  margin-top: .35rem;
  color: var(--color-muted);
  font-size: .8rem
}

.youtube-live-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: .72rem .9rem;
  border: 1px solid rgba(180, 35, 24, .25);
  border-radius: 12px;
  background: #fff1f0;
  color: #7a1b14
}

.youtube-live-alert-button {
  border: 0;
  border-radius: 999px;
  background: #b42318;
  color: #fff;
  font-weight: 750;
  padding: .45rem .8rem;
  cursor: pointer;
  white-space: nowrap
}

.youtube-live-alert-button:hover {
  filter: brightness(.94)
}

.youtube-feed-empty {
  display: grid;
  gap: .25rem;
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .55)
}

.youtube-feed-empty span {
  color: var(--color-muted)
}

.section-bg-dark .youtube-featured,
.section-bg-dark .youtube-video-card {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #fff
}

.section-bg-dark .youtube-video-card-body strong {
  color: #fff
}

.section-bg-dark .youtube-video-card-body span,
.section-bg-dark .youtube-featured-date {
  color: rgba(255, 255, 255, .72)
}

.section-bg-dark .youtube-feed-empty {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2)
}

.section-bg-dark .youtube-feed-empty span {
  color: rgba(255, 255, 255, .72)
}

.section-preset-player_focus .youtube-player-wrap {
  aspect-ratio: 16/8.6
}

.section-preset-player_focus .youtube-featured {
  max-width: 1100px;
  margin-inline: auto
}

.section-preset-compact_library .youtube-video-grid {
  gap: .7rem
}

.section-preset-compact_library .youtube-video-card-body {
  padding: .65rem .7rem .75rem
}

@media(max-width:900px) {
  .youtube-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:580px) {
  .youtube-video-grid {
    grid-template-columns: 1fr
  }

  .youtube-live-alert {
    align-items: flex-start;
    flex-direction: column
  }

  .youtube-live-alert-button {
    width: 100%
  }
}

/* ===== v0.18 — YouTube live-alert hidden-state fix =====
   Author CSS display:flex otherwise overrides the browser's native [hidden]
   rule, making the live alert visible even when no live video is pending. */
.youtube-live-alert[hidden] {
  display: none !important;
}

/* ===== v0.19 — YouTube full archive browser ===== */
.youtube-library-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.7rem 0 .9rem;
}

.youtube-library-heading h3 {
  margin: 0
}

.youtube-library-count {
  display: block;
  margin-top: .22rem;
  color: var(--color-muted);
  font-size: .82rem
}

.youtube-browse-all-button,
.youtube-load-more-button {
  appearance: none;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-weight: 750;
  line-height: 1.2;
  padding: .55rem .85rem;
  cursor: pointer;
}

.youtube-browse-all-button:hover,
.youtube-load-more-button:hover {
  background: var(--color-primary);
  color: #fff
}

.youtube-browse-all-button:focus-visible,
.youtube-load-more-button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px
}

.youtube-load-more-button:disabled {
  opacity: .55;
  cursor: wait
}

.youtube-archive-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.2rem
}

.youtube-archive-loader[hidden],
.youtube-archive-sentinel[hidden] {
  display: none !important
}

.youtube-archive-loading {
  color: var(--color-muted);
  font-size: .86rem
}

.youtube-archive-sentinel {
  height: 2px;
  width: 100%;
  margin-top: 1rem
}

.section-bg-dark .youtube-library-count,
.section-bg-dark .youtube-archive-loading {
  color: rgba(255, 255, 255, .72)
}

.section-bg-dark .youtube-browse-all-button,
.section-bg-dark .youtube-load-more-button {
  border-color: rgba(255, 255, 255, .74);
  color: #fff
}

.section-bg-dark .youtube-browse-all-button:hover,
.section-bg-dark .youtube-load-more-button:hover {
  background: #fff;
  color: var(--color-primary)
}

@media(max-width:580px) {
  .youtube-library-heading {
    align-items: stretch;
    flex-direction: column
  }

  .youtube-browse-all-button {
    width: 100%
  }

  .youtube-archive-loader {
    align-items: stretch;
    flex-direction: column;
    text-align: center
  }

  .youtube-load-more-button {
    width: 100%
  }
}

/* ===== Sunday Watch Experience — v0.23 ===== */
.youtube-player-wrap>[hidden] {
  display: none !important
}

.youtube-player-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #0b0b0b;
  object-fit: contain
}

.youtube-featured.is-preservice {
  border-color: rgba(199, 147, 67, .38)
}

.youtube-status-preservice {
  background: #7b5a22;
  color: #fff
}

.youtube-preservice-countdown {
  display: grid;
  gap: .22rem;
  margin: .75rem 0 .2rem;
  padding: .72rem .85rem;
  border: 1px solid rgba(199, 147, 67, .32);
  border-radius: 12px;
  background: rgba(199, 147, 67, .10)
}

.youtube-preservice-countdown[hidden] {
  display: none !important
}

.youtube-preservice-countdown strong {
  font-size: .96rem
}

.youtube-preservice-countdown span {
  color: var(--color-muted);
  font-size: .84rem
}

.section-bg-dark .youtube-preservice-countdown {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2)
}

.section-bg-dark .youtube-preservice-countdown span {
  color: rgba(255, 255, 255, .72)
}

.youtube-sunday-materials {
  margin-top: 1.55rem;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .62)
}

.youtube-sunday-materials-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem
}

.youtube-sunday-materials-heading h3 {
  margin: .12rem 0 0;
  font-size: 1.12rem
}

.youtube-sunday-materials-heading>span {
  color: var(--color-muted);
  font-size: .86rem;
  text-align: right
}

.youtube-materials-kicker {
  display: block;
  color: var(--color-primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase
}

.youtube-materials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem
}

.youtube-material-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .72rem .78rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease
}

.youtube-material-card:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
  box-shadow: 0 7px 20px rgba(26, 47, 39, .08)
}

.youtube-material-card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px
}

.youtube-material-card>span:last-child {
  min-width: 0
}

.youtube-material-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 .92rem/1.25 var(--font-heading)
}

.youtube-material-card small {
  display: block;
  margin-top: .18rem;
  color: var(--color-muted);
  font-size: .76rem
}

.youtube-material-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--color-soft);
  color: var(--color-primary);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .02em
}

.youtube-material-card-bulletin .youtube-material-icon {
  background: rgba(199, 147, 67, .15);
  color: #75551e;
  font-size: 1.25rem
}

.youtube-material-thumb {
  flex: 0 0 50px;
  width: 50px;
  height: 42px;
  overflow: hidden;
  border-radius: 8px;
  background: #ecefec
}

.youtube-material-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.section-bg-dark .youtube-sunday-materials {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18)
}

.section-bg-dark .youtube-sunday-materials-heading>span,
.section-bg-dark .youtube-material-card small {
  color: rgba(255, 255, 255, .72)
}

.section-bg-dark .youtube-material-card {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #fff
}

.section-bg-dark .youtube-material-card strong {
  color: #fff
}

.section-bg-dark .youtube-materials-kicker {
  color: #f0cf98
}

@media(max-width:900px) {
  .youtube-materials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:620px) {
  .youtube-sunday-materials-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .youtube-sunday-materials-heading>span {
    text-align: left
  }

  .youtube-materials-grid {
    grid-template-columns: 1fr
  }
}

/* ===== Sunday Watch Experience — v0.25 modal bulletin + PDF.js + viewer override ===== */
.youtube-preservice-countdown.is-delayed {
  border-color: rgba(180, 35, 24, .28);
  background: rgba(180, 35, 24, .08)
}

.youtube-preservice-countdown.is-delayed strong {
  color: #8a2018
}

.youtube-preservice-countdown.is-override {
  border-color: rgba(39, 98, 148, .32);
  background: rgba(39, 98, 148, .09)
}

.youtube-preservice-countdown.is-override strong {
  color: #1c5b8d
}

.section-bg-dark .youtube-preservice-countdown.is-delayed {
  border-color: rgba(255, 150, 140, .32);
  background: rgba(180, 35, 24, .18)
}

.section-bg-dark .youtube-preservice-countdown.is-delayed strong {
  color: #ffd6d1
}

.section-bg-dark .youtube-preservice-countdown.is-override {
  border-color: rgba(160, 208, 255, .34);
  background: rgba(39, 98, 148, .20)
}

.section-bg-dark .youtube-preservice-countdown.is-override strong {
  color: #d6ebff
}

.watch-material-collapsed {
  display: flex;
  align-items: center;
  gap: .7rem 1rem;
  flex-wrap: wrap;
  padding: .9rem 0 .1rem
}

.watch-material-open-button {
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font: 750 .95rem/1 var(--font-body);
  padding: .78rem 1.05rem;
  cursor: pointer
}

.watch-material-open-button:hover {
  filter: brightness(.94)
}

.watch-material-open-button:focus-visible,
.watch-material-close:focus-visible,
.watch-material-side-button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px
}

.watch-material-direct-link {
  font-size: .88rem;
  font-weight: 700;
  text-underline-offset: .15em
}

.watch-material-dialog {
  width: min(96vw, 900px);
  max-width: 900px;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28)
}

.watch-material-dialog::backdrop {
  background: rgba(10, 18, 15, .72);
  backdrop-filter: blur(3px)
}

.watch-material-dialog-inner {
  max-height: 94vh;
  overflow: auto;
  padding: 1rem
}

.watch-material-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .25rem .2rem .8rem;
  border-bottom: 1px solid var(--color-border)
}

.watch-material-dialog-header h3 {
  margin: .12rem 0 0
}

.watch-material-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
  font: 400 2rem/1 var(--font-body);
  cursor: pointer
}

.watch-material-viewer {
  display: grid;
  gap: .75rem;
  padding-top: .9rem
}

.watch-material-stage-shell {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  gap: .35rem
}

.watch-material-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: .45rem;
  border: 0;
  background: transparent;
  overflow: hidden
}

.watch-material-stage:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 12px
}

.watch-material-page {
  width: 100%;
  display: grid;
  place-items: center
}

.watch-material-page[hidden] {
  display: none !important
}

.watch-material-sheet {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  gap: .55rem
}

.watch-material-sheet-bulletin {
  width: min(100%, 560px)
}

.watch-material-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(26, 47, 39, .14);
  border-radius: 8px;
  box-shadow: 0 9px 28px rgba(26, 47, 39, .12)
}

.watch-material-canvas-full {
  max-height: min(76vh, 900px);
  width: auto
}

.watch-material-sheet-insert {
  max-width: 760px
}

.watch-material-image {
  display: block;
  max-width: 100%;
  max-height: min(76vh, 900px);
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(26, 47, 39, .10)
}

.watch-material-open {
  font-size: .84rem;
  font-weight: 700;
  text-underline-offset: .14em
}

.watch-material-loading,
.watch-material-render-error {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-muted)
}

.watch-material-side-button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  font: 400 2rem/1 var(--font-body);
  cursor: pointer;
  z-index: 2
}

.watch-material-side-button:hover:not(:disabled) {
  background: var(--color-primary);
  color: #fff
}

.watch-material-side-button:disabled {
  opacity: .25;
  cursor: default
}

.watch-material-side-prev {
  justify-self: start
}

.watch-material-side-next {
  justify-self: end
}

.watch-material-progress {
  display: grid;
  gap: .08rem;
  text-align: center
}

.watch-material-progress strong {
  font: 700 .94rem/1.2 var(--font-heading)
}

.watch-material-progress span {
  color: var(--color-muted);
  font-size: .78rem
}

.watch-material-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1rem;
  flex-wrap: wrap;
  color: var(--color-muted);
  font-size: .8rem;
  border-top: 1px solid var(--color-border);
  padding-top: .65rem
}

.watch-material-footer a {
  font-weight: 700;
  text-underline-offset: .14em
}

@media(max-width:700px) {
  .watch-material-dialog {
    width: 98vw
  }

  .watch-material-dialog-inner {
    padding: .7rem
  }

  .watch-material-stage-shell {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: .1rem
  }

  .watch-material-side-button {
    width: 36px;
    height: 36px;
    font-size: 1.55rem
  }

  .watch-material-stage {
    min-height: 250px;
    padding: .2rem
  }

  .watch-material-footer {
    align-items: flex-start;
    flex-direction: column
  }
}



/* ===== v0.21 — persistent Watch notices + announcement viewer ===== */
.watch-viewer-message {
  display: grid;
  gap: .2rem;
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(39, 98, 148, .32);
  border-radius: 12px;
  background: rgba(39, 98, 148, .09);
}

.watch-viewer-message[hidden] {
  display: none !important
}

.watch-viewer-message strong {
  color: #1c5b8d;
  font-size: .98rem
}

.watch-viewer-message span {
  color: var(--color-text);
  font-size: .9rem
}

.section-bg-dark .watch-viewer-message {
  border-color: rgba(160, 208, 255, .34);
  background: rgba(39, 98, 148, .20)
}

.section-bg-dark .watch-viewer-message strong {
  color: #d6ebff
}

.section-bg-dark .watch-viewer-message span {
  color: rgba(255, 255, 255, .88)
}

.watch-material-open-button[hidden] {
  display: none !important
}

.watch-announcement-modal-body {
  padding-top: .9rem
}

.watch-announcement-modal-body video {
  display: block;
  width: 100%;
  max-height: 78vh;
  background: #000;
  border-radius: 10px;
}
/* ========================================================================
   Church Calendar specialty section
   ======================================================================== */
/* The calendar uses the HTML hidden attribute for month paging, view switching,
   and incremental list expansion. Explicit display rules below (grid/flex) can
   otherwise override the browser's native [hidden] rule. */
.church-calendar-section [hidden] {
  display: none !important;
}

.church-calendar-section {
  color: var(--calendar-ink, var(--color-ink));
}

.church-calendar-section .shell {
  color: inherit;
}

.church-calendar-heading {
  margin-bottom: 22px;
}

.church-calendar-notice {
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--calendar-border, var(--color-border));
  border-radius: 12px;
  background: var(--calendar-soft, var(--color-soft));
}

.church-calendar-notice-error {
  border-color: #d9b8b8;
  background: #fff6f6;
}

.church-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.church-calendar-view-toggle,
.church-calendar-month-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--calendar-border, var(--color-border));
  border-radius: 12px;
  background: var(--calendar-surface, var(--color-surface));
}

.church-calendar-view-button,
.church-calendar-nav-button,
.church-calendar-today-button,
.church-calendar-show-more,
.church-calendar-details-link,
.church-calendar-more-day {
  font: inherit;
}

.church-calendar-view-button,
.church-calendar-nav-button,
.church-calendar-today-button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--calendar-ink, var(--color-ink));
  cursor: pointer;
}

.church-calendar-view-button {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
}

.church-calendar-view-button.is-active {
  background: var(--calendar-primary, var(--color-primary));
  color: #fff;
}

.church-calendar-nav-button {
  width: 38px;
  height: 36px;
  font-size: 25px;
  line-height: 1;
}

.church-calendar-nav-button:disabled {
  opacity: .35;
  cursor: default;
}

.church-calendar-today-button {
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 700;
}

.church-calendar-view-button:hover:not(.is-active),
.church-calendar-nav-button:hover:not(:disabled),
.church-calendar-today-button:hover {
  background: var(--calendar-soft, var(--color-soft));
}

.church-calendar-month-view {
  overflow-x: auto;
  padding-bottom: 4px;
}

.church-calendar-month-title {
  margin: 0 0 12px;
  font: 700 clamp(24px, 3vw, 34px)/1.15 var(--font-heading);
  color: var(--calendar-ink, var(--color-ink));
}

.church-calendar-weekdays,
.church-calendar-month-grid {
  min-width: 760px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.church-calendar-weekdays {
  border: 1px solid var(--calendar-border, var(--color-border));
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--calendar-soft, var(--color-soft));
}

.church-calendar-weekdays span {
  padding: 9px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--calendar-muted, var(--color-muted));
}

.church-calendar-month-grid {
  border-top: 1px solid var(--calendar-border, var(--color-border));
  border-left: 1px solid var(--calendar-border, var(--color-border));
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  background: var(--calendar-surface, var(--color-surface));
}

.church-calendar-day {
  min-height: 128px;
  padding: 8px;
  border-right: 1px solid var(--calendar-border, var(--color-border));
  border-bottom: 1px solid var(--calendar-border, var(--color-border));
  background: var(--calendar-surface, var(--color-surface));
}

.church-calendar-day.is-outside {
  background: var(--calendar-soft, var(--color-soft));
  opacity: .58;
}

.church-calendar-day.is-today {
  background: color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 8%, var(--calendar-surface, var(--color-surface)));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 60%, transparent);
}

.church-calendar-day-number {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--calendar-muted, var(--color-muted));
  font-size: 13px;
  font-weight: 700;
}

.church-calendar-day-number > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.church-calendar-day.is-today .church-calendar-day-number > span {
  background: var(--calendar-primary, var(--color-primary));
  color: #fff;
}

.church-calendar-day-number small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--calendar-primary, var(--color-primary));
}

.church-calendar-day-events {
  display: grid;
  gap: 4px;
}

.church-calendar-chip {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-left: 3px solid var(--calendar-primary, var(--color-primary));
  border-radius: 7px;
  background: color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 7%, var(--calendar-surface, var(--color-surface)));
  color: var(--calendar-ink, var(--color-ink));
  text-align: left;
  cursor: pointer;
  font: 600 11.5px/1.25 var(--font-body);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.church-calendar-chip > * {
  position: relative;
  z-index: 1;
}

.church-calendar-chip:hover,
.church-calendar-chip:focus-visible {
  border-color: color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 30%, var(--calendar-border, var(--color-border)));
  background: color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 12%, var(--calendar-surface, var(--color-surface)));
}

.church-calendar-chip.is-promoted {
  border-left-color: var(--calendar-accent, var(--color-accent));
  background: color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 12%, var(--calendar-surface, var(--color-surface)));
}

.church-calendar-chip.event-style-featured {
  border-color: color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 42%, var(--calendar-border, var(--color-border)));
  border-left-color: var(--calendar-accent, var(--color-accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 24%, transparent);
  background: color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 10%, var(--calendar-surface, var(--color-surface)));
  font-weight: 780;
}

.church-calendar-chip.event-style-playful {
  border-left-color: var(--calendar-accent, var(--color-accent));
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 13%, var(--calendar-surface, var(--color-surface))),
    color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 17%, var(--calendar-surface, var(--color-surface))));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 25%, transparent);
  font-weight: 720;
}

.church-calendar-chip.event-style-playful::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 34px;
  height: 34px;
  right: -7px;
  top: -11px;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle at 28% 28%, var(--calendar-accent, var(--color-accent)) 0 2px, transparent 2.4px),
    radial-gradient(circle at 68% 47%, var(--calendar-primary, var(--color-primary)) 0 1.6px, transparent 2px),
    radial-gradient(circle at 42% 76%, var(--calendar-accent, var(--color-accent)) 0 1.2px, transparent 1.7px);
  animation: churchCalendarSparkle 5.2s ease-in-out infinite;
}

.church-calendar-chip.event-style-celebration {
  border-left-color: var(--calendar-accent, var(--color-accent));
  border-color: color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 34%, var(--calendar-border, var(--color-border)));
  background-color: color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 8%, var(--calendar-surface, var(--color-surface)));
  background-image:
    radial-gradient(circle at 8px 7px, color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 65%, transparent) 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 22px 15px, color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 55%, transparent) 0 1.1px, transparent 1.5px);
  background-size: 30px 22px, 37px 28px;
  font-weight: 730;
  animation: churchCalendarConfettiDrift 8s linear infinite;
}

.church-calendar-chip.event-style-warm_glow {
  border-left-color: var(--calendar-accent, var(--color-accent));
  background: color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 12%, var(--calendar-surface, var(--color-surface)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 20%, transparent),
              0 3px 10px color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 18%, transparent);
  font-weight: 710;
}

.church-calendar-chip.event-style-important {
  border-left-width: 5px;
  border-left-color: var(--calendar-accent, var(--color-accent));
  border-color: color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 38%, var(--calendar-border, var(--color-border)));
  background: color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 10%, var(--calendar-surface, var(--color-surface)));
  font-weight: 800;
}

@keyframes churchCalendarSparkle {
  0%, 68%, 100% { opacity: .35; transform: scale(.88) rotate(0deg); }
  78% { opacity: .8; transform: scale(1.08) rotate(10deg); }
  88% { opacity: .48; transform: scale(.96) rotate(-4deg); }
}

@keyframes churchCalendarConfettiDrift {
  0%, 100% { background-position: 0 0, 0 0; }
  50% { background-position: 7px 2px, -5px 3px; }
}

.church-calendar-chip-time {
  flex: 0 0 auto;
  color: var(--calendar-muted, var(--color-muted));
  font-size: 10px;
  font-weight: 700;
}


.church-calendar-chip-icon,
.church-calendar-list-title-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--calendar-primary, var(--color-primary));
}

.church-calendar-event-icon {
  display: block;
  width: 14px;
  height: 14px;
}

.church-calendar-chip-icon .church-calendar-event-icon {
  width: 13px;
  height: 13px;
}

.church-calendar-chip-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.church-calendar-more-day {
  border: 0;
  padding: 3px 4px;
  background: transparent;
  color: var(--calendar-primary, var(--color-primary));
  text-align: left;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

.church-calendar-list-view {
  display: grid;
  gap: 22px;
}

.church-calendar-list-group {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  scroll-margin-top: 110px;
  transition: background-color .25s ease;
}

.church-calendar-list-group.is-calendar-jump-highlight {
  background: color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 12%, transparent);
  border-radius: 12px;
}

.church-calendar-list-date {
  padding-top: 7px;
  text-align: center;
}

.church-calendar-list-date span,
.church-calendar-list-date strong {
  display: block;
}

.church-calendar-list-date span {
  color: var(--calendar-muted, var(--color-muted));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.church-calendar-list-date strong {
  margin-top: 1px;
  font: 700 18px/1.1 var(--font-heading);
}

.church-calendar-list-items {
  display: grid;
  gap: 9px;
}

.church-calendar-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--calendar-border, var(--color-border));
  border-left: 4px solid var(--calendar-primary, var(--color-primary));
  border-radius: 12px;
  background: var(--calendar-surface, var(--color-surface));
}

.church-calendar-list-item.is-promoted {
  border-left-color: var(--calendar-accent, var(--color-accent));
}

.church-calendar-list-item.event-style-featured {
  border-left-color: var(--calendar-accent, var(--color-accent));
  box-shadow: 0 7px 20px color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 10%, transparent);
}

.church-calendar-list-item.event-style-playful {
  border-left-color: var(--calendar-accent, var(--color-accent));
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 7%, var(--calendar-surface, var(--color-surface))),
    color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 8%, var(--calendar-surface, var(--color-surface))));
}

.church-calendar-list-item.event-style-celebration {
  border-left-color: var(--calendar-accent, var(--color-accent));
  background: color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 7%, var(--calendar-surface, var(--color-surface)));
}

.church-calendar-list-item.event-style-warm_glow {
  border-left-color: var(--calendar-accent, var(--color-accent));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 15%, transparent);
}

.church-calendar-list-item.event-style-important {
  border-left-width: 6px;
  border-left-color: var(--calendar-accent, var(--color-accent));
  border-color: color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 28%, var(--calendar-border, var(--color-border)));
}

.church-calendar-list-image {
  width: 116px;
  height: 100%;
  min-height: 106px;
  object-fit: cover;
}

.church-calendar-list-content {
  min-width: 0;
  padding: 12px 14px;
}

.church-calendar-list-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--calendar-ink, var(--color-ink));
  text-align: left;
  cursor: pointer;
  font: 700 17px/1.25 var(--font-heading);
}

.church-calendar-list-title:hover {
  color: var(--calendar-primary, var(--color-primary));
}


.church-calendar-list-title-icon .church-calendar-event-icon {
  width: 18px;
  height: 18px;
}

.church-calendar-list-meta {
  margin-top: 3px;
  color: var(--calendar-muted, var(--color-muted));
  font-size: 13px;
}

.church-calendar-list-content p {
  margin: 7px 0 0;
  color: var(--calendar-muted, var(--color-muted));
  font-size: 14px;
  line-height: 1.45;
}

.church-calendar-details-link {
  margin-top: 7px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--calendar-primary, var(--color-primary));
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.church-calendar-show-more {
  justify-self: center;
  padding: 9px 14px;
  border: 1px solid var(--calendar-border, var(--color-border));
  border-radius: 9px;
  background: var(--calendar-surface, var(--color-surface));
  color: var(--calendar-primary, var(--color-primary));
  cursor: pointer;
  font-weight: 700;
}

.church-calendar-dialog {
  width: min(760px, calc(100% - 28px));
  max-height: min(88vh, 850px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: auto;
  background: var(--calendar-surface, var(--color-surface));
  color: var(--calendar-ink, var(--color-ink));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .26);
}

.church-calendar-dialog::backdrop {
  background: rgba(17, 27, 23, .62);
  backdrop-filter: blur(2px);
}

.church-calendar-dialog-close {
  position: sticky;
  z-index: 2;
  top: 10px;
  float: right;
  width: 38px;
  height: 38px;
  margin: 10px 10px -48px 0;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #1f2925;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}

.church-calendar-detail-image {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

.church-calendar-detail-body {
  padding: clamp(22px, 4vw, 34px);
}

.church-calendar-detail-badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.church-calendar-detail-badges span {
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--calendar-accent, var(--color-accent)) 16%, var(--calendar-surface, var(--color-surface)));
  color: color-mix(in srgb, var(--calendar-primary, var(--color-primary)) 82%, #000);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.church-calendar-detail-body h3 {
  margin: 0;
  font: 700 clamp(26px, 4vw, 38px)/1.12 var(--font-heading);
}

.church-calendar-detail-when,
.church-calendar-detail-location {
  margin-top: 8px;
  color: var(--calendar-muted, var(--color-muted));
  font-size: 14px;
}

.church-calendar-detail-copy {
  margin-top: 20px;
}

.church-calendar-detail-copy img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: text-bottom;
}

.church-calendar-detail-copy a {
  color: var(--calendar-primary, var(--color-primary));
  font-weight: 650;
}

.church-calendar-detail-added {
  padding-top: 16px;
  border-top: 1px solid var(--calendar-border, var(--color-border));
}

.church-calendar-contact-line {
  margin: 18px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--calendar-accent, var(--color-accent));
  background: var(--calendar-soft, var(--color-soft));
  font-weight: 650;
}

.church-calendar-detail-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.church-calendar-google-link {
  color: var(--calendar-primary, var(--color-primary));
  font-weight: 700;
}

@media (max-width: 760px) {
  .church-calendar-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .church-calendar-view-toggle,
  .church-calendar-month-controls {
    width: 100%;
    justify-content: center;
  }

  .church-calendar-view-button {
    flex: 1 1 0;
  }

  .church-calendar-month-view {
    margin-inline: -20px;
    padding-inline: 20px;
  }

  .church-calendar-month-title {
    position: sticky;
    left: 0;
  }

  .church-calendar-list-group {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
  }

  .church-calendar-list-date strong {
    font-size: 15px;
  }

  .church-calendar-list-image {
    width: 86px;
  }

  .church-calendar-dialog {
    width: calc(100% - 16px);
    max-height: 94vh;
    border-radius: 14px;
  }
}

@media (max-width: 520px) {
  .church-calendar-list-item {
    grid-template-columns: 1fr;
  }

  .church-calendar-list-image {
    width: 100%;
    height: 160px;
  }
}

@media print {
  .church-calendar-toolbar,
  .church-calendar-month-view,
  .church-calendar-dialog,
  .church-calendar-show-more,
  .church-calendar-details-link {
    display: none !important;
  }
  .church-calendar-list-view {
    display: grid !important;
  }
  .church-calendar-list-item[hidden] {
    display: grid !important;
  }
}


@media (prefers-reduced-motion: reduce) {
  .church-calendar-chip.event-style-playful::after,
  .church-calendar-chip.event-style-celebration {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------
   Hero logo/title overlay + rotating background slideshow
   ------------------------------------------------------------------------- */
.hero.has-slideshow {
  background-image: none;
  isolation: isolate;
}

.hero-slides,
.hero-slideshow-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-slides {
  z-index: 0;
  overflow: hidden;
}

.hero-slideshow-shade {
  z-index: 1;
  background: rgba(12, 27, 22, var(--hero-overlay));
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: var(--hero-slide-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity var(--hero-slide-transition, 1s) ease;
  will-change: opacity, transform;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-transition-none .hero-slide {
  transition: none;
}

.hero-transition-slide .hero-slide {
  transform: translateX(5%);
  transition: opacity var(--hero-slide-transition, 1s) ease, transform var(--hero-slide-transition, 1s) ease;
}

.hero-transition-slide .hero-slide.is-active {
  transform: translateX(0);
}

.hero-transition-zoom_fade .hero-slide {
  transform: scale(1.045);
  transition: opacity var(--hero-slide-transition, 1s) ease, transform calc(var(--hero-slide-transition, 1s) + 1.8s) ease;
}

.hero-transition-zoom_fade .hero-slide.is-active {
  transform: scale(1);
}

.hero.has-slideshow .hero-inner {
  position: relative;
  z-index: 2;
}

.hero-logo-mode .hero-inner {
  min-height: clamp(430px, 62vw, 650px);
}

.hero-logo-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hero-title-logo {
  width: var(--hero-logo-width, 45%);
  max-width: 100%;
  height: auto;
  transform: translate(var(--hero-logo-offset-x, 0), var(--hero-logo-offset-y, 0));
}

.hero-logo-horizontal-left .hero-inner,
.hero-logo-horizontal-left .hero-logo-content {
  align-items: flex-start;
  text-align: left;
}

.hero-logo-horizontal-center .hero-inner,
.hero-logo-horizontal-center .hero-logo-content {
  align-items: center;
  text-align: center;
}

.hero-logo-horizontal-right .hero-inner,
.hero-logo-horizontal-right .hero-logo-content {
  align-items: flex-end;
  text-align: right;
}

.hero-logo-horizontal-left .button-row { justify-content: flex-start; }
.hero-logo-horizontal-center .button-row { justify-content: center; }
.hero-logo-horizontal-right .button-row { justify-content: flex-end; }

.hero-logo-vertical-top .hero-inner { justify-content: flex-start; }
.hero-logo-vertical-center .hero-inner { justify-content: center; }
.hero-logo-vertical-bottom .hero-inner { justify-content: flex-end; }

.hero-slide-controls {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-slide-arrow,
.hero-slide-dot {
  border: 0;
  color: #fff;
  background: rgba(12, 27, 22, .56);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  cursor: pointer;
}

.hero-slide-arrow {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
}

.hero-slide-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(12, 27, 22, .38);
}

.hero-slide-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .52);
  box-shadow: none;
}

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

.hero-slide-arrow:focus-visible,
.hero-slide-dot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* The split Hero keeps its rotating photography on the image half. */
.hero-preset-split_hero.has-slideshow .hero-slides,
.hero-preset-split_hero.has-slideshow .hero-slideshow-shade {
  left: 48%;
}

@media (max-width: 900px) {
  .hero-preset-split_hero.has-slideshow .hero-slides,
  .hero-preset-split_hero.has-slideshow .hero-slideshow-shade {
    left: 0;
  }
}

@media (max-width: 640px) {
  .hero-title-logo {
    width: min(var(--hero-logo-width, 70%), 92%);
  }

  .hero-slide-controls {
    bottom: 14px;
    gap: 8px;
  }

  .hero-slide-arrow {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none !important;
  }
}

/* ========================================================================
   CMS Library Catalog section
   ====================================================================== */
.library-catalog-section .section-heading{margin-bottom:24px}.library-section-search{margin-bottom:28px;padding:18px;border:1px solid var(--color-border);border-radius:var(--radius);background:#fff;box-shadow:0 8px 28px rgba(26,47,39,.05)}.library-section-search-main{display:flex;gap:10px}.library-section-search-main input{flex:1;min-width:0;min-height:48px;padding:10px 16px;border:1px solid var(--color-border);border-radius:999px;background:#fff;font:inherit;color:var(--color-ink)}.library-section-search-main button,.library-filter-button{border:0;border-radius:999px;background:var(--color-primary);color:#fff;font:800 14px var(--font-body);padding:0 20px;cursor:pointer}.library-section-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px 16px;margin-top:15px}.library-section-filters label{display:grid;gap:5px;font-size:13px;font-weight:750}.library-section-filters select{min-height:40px;padding:6px 9px;border:1px solid var(--color-border);border-radius:8px;background:#fff;font:inherit}.library-section-check{display:flex!important;grid-template-columns:none!important;flex-direction:row;align-items:center;gap:7px!important;min-height:40px}.library-section-check input{width:17px;height:17px}.library-filter-button{min-height:40px}.library-clear{align-self:center;font-size:13px;font-weight:800}.library-section-results-head{margin:0 0 16px;color:var(--color-muted);font-size:14px}.library-section-results-head strong{color:var(--color-ink);font-size:18px}.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.library-book-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius);background:#fff;box-shadow:0 10px 28px rgba(26,47,39,.055);transition:transform .18s ease,box-shadow .18s ease}.library-book-card:hover{transform:translateY(-3px);box-shadow:0 16px 35px rgba(26,47,39,.10)}.library-card-cover{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:3/4;padding:20px;background:linear-gradient(#edf0ea,#f8f7f2);text-decoration:none}.library-cover-image{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.12))}.library-cover-placeholder{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;border-radius:5px;background:linear-gradient(145deg,var(--color-primary),var(--color-primary-strong));color:#fff;box-shadow:0 8px 15px rgba(0,0,0,.14);font-family:var(--font-heading)}.library-cover-placeholder span{font:800 12px var(--font-body);letter-spacing:.13em;opacity:.8}.library-cover-placeholder strong{font-size:27px}.library-card-body{display:flex;flex:1;flex-direction:column;padding:18px}.library-card-category{align-self:flex-start;color:var(--color-primary);font-size:11px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.library-card-body h3{margin:7px 0 4px;font:700 20px/1.18 var(--font-heading)}.library-card-body h3 a{color:var(--color-ink);text-decoration:none}.library-card-body h3 a:hover{color:var(--color-primary)}.library-subtitle{margin:0 0 6px!important;color:var(--color-muted);font-size:14px;line-height:1.4}.library-author{margin:4px 0 16px!important;color:var(--color-muted);font-size:14px}.library-card-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:15px;border-top:1px solid #edf0ec}.library-availability{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:850}.library-availability.is-available{background:#e6f3e8;color:#285f38}.library-availability.is-out{background:#f3e7e5;color:#8a3b33}.library-details-link{font-size:13px;font-weight:800;text-decoration:none}.library-grid-list{grid-template-columns:1fr}.library-grid-list .library-book-card{display:grid;grid-template-columns:105px minmax(0,1fr);min-height:145px}.library-grid-list .library-card-cover{aspect-ratio:auto;min-height:145px;padding:10px}.library-grid-list .library-card-body{padding:14px 18px}.library-grid-list .library-card-body h3{font-size:19px}.library-grid-list .library-author{margin-bottom:8px!important}.library-section-back{margin-bottom:20px}.library-section-back a{font-weight:800;text-decoration:none}.library-book-detail{display:grid;grid-template-columns:minmax(190px,300px) minmax(0,720px);gap:clamp(30px,5vw,64px);align-items:start}.library-detail-cover{aspect-ratio:3/4;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius);background:linear-gradient(#edf0ea,#fff);box-shadow:var(--shadow)}.library-detail-content{padding-top:4px}.library-detail-content h2{margin:7px 0 8px;font:700 clamp(34px,4vw,52px)/1.05 var(--font-heading);letter-spacing:-.025em}.library-detail-subtitle{margin:0 0 10px;font-size:19px;line-height:1.4;color:var(--color-muted)}.library-detail-author{margin:0 0 20px;font-size:18px;font-weight:650}.library-detail-availability{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}.library-detail-availability>span:last-child{color:var(--color-muted);font-size:14px}.library-description{margin:24px 0;font-size:16px;line-height:1.72}.library-book-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:28px 0;border-top:1px solid var(--color-border)}.library-book-meta div{padding:12px 0;border-bottom:1px solid var(--color-border)}.library-book-meta div:nth-child(odd){padding-right:24px}.library-book-meta dt{color:var(--color-muted);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.library-book-meta dd{margin:3px 0 0;font-weight:650}.library-tags{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0}.library-tags span{padding:5px 9px;border-radius:999px;background:#e9eeea;color:#42504b;font-size:12px}.library-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-top:32px;padding-top:22px;border-top:1px solid var(--color-border);font-size:14px;font-weight:750}.library-pagination a{text-decoration:none}.library-pagination div:last-child{text-align:right}
@media(max-width:1100px){.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:820px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-book-detail{grid-template-columns:minmax(170px,240px) minmax(0,1fr);gap:28px}.library-section-filters{align-items:stretch}.library-section-filters label{min-width:180px;flex:1}}@media(max-width:600px){.library-section-search-main{display:grid}.library-section-search-main button{min-height:46px}.library-section-filters{display:grid;grid-template-columns:1fr}.library-section-filters label{min-width:0}.library-grid{grid-template-columns:1fr 1fr;gap:13px}.library-card-cover{padding:12px}.library-card-body{padding:13px}.library-card-body h3{font-size:17px}.library-card-category{font-size:10px}.library-card-footer{align-items:flex-start;flex-direction:column}.library-book-detail{grid-template-columns:1fr}.library-detail-cover{width:min(250px,75vw);margin:0 auto}.library-book-meta{grid-template-columns:1fr}.library-book-meta div:nth-child(odd){padding-right:0}}@media(max-width:390px){.library-grid{grid-template-columns:1fr}.library-book-card{display:grid;grid-template-columns:110px 1fr}.library-card-cover{aspect-ratio:auto;min-height:165px}.library-grid-list .library-book-card{grid-template-columns:92px 1fr}.library-grid-list .library-card-cover{min-height:130px}}

/* Library: related titles in the same series */
.library-series-more{margin-top:clamp(36px,6vw,68px);padding-top:28px;border-top:1px solid var(--color-border)}
.library-series-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}
.library-series-heading h3{margin:3px 0 0;font:700 clamp(26px,3vw,36px)/1.08 var(--font-heading)}
.library-series-heading>span{color:var(--color-muted);font-size:13px;font-weight:700;text-align:right}
.library-series-kicker{color:var(--color-primary);font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.library-series-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.library-series-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.library-series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-series-heading{align-items:flex-start;flex-direction:column}.library-series-heading>span{text-align:left}}
@media(max-width:390px){.library-series-grid{grid-template-columns:1fr}}


/* Phase 6h: resilient public library cover rendering.
   The actual cover is a CSS background layer; if it fails to load, the
   grey book-icon tile underneath remains visible with no broken-image UI. */
.library-cover-media{
  position:relative;
  isolation:isolate;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:5px;
  background:#f1f3f4;
  color:#8b949e;
  box-shadow:none;
}
.library-cover-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background-image:var(--library-cover-image, none);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.library-cover-fallback-icon{
  position:relative;
  z-index:1;
  width:42%;
  max-width:72px;
  min-width:28px;
  height:auto;
  color:#929aa3;
}
/* Neutralize the old green LSCC Library placeholder if cached markup still appears. */
.library-cover-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  background:#f1f3f4!important;
  color:#929aa3!important;
  box-shadow:none!important;
  font-family:var(--font-body)!important;
  overflow:hidden;
}
.library-cover-placeholder span,.library-cover-placeholder strong{display:none!important}
.library-cover-placeholder::before{
  content:"📖";
  font-size:clamp(28px,4vw,54px);
  filter:grayscale(1);
  opacity:.58;
}
/* library-cover-image is now used on the wrapper as well as older img markup. */
.library-cover-media.library-cover-image{filter:none}

/* ========================================================================
   Phase 6i: media-aware Library catalog placeholders and labels
   ====================================================================== */
.library-cover-fallback-icon{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46%;
  max-width:78px;
  min-width:34px;
  aspect-ratio:1;
  color:#8b949e;
}
.library-cover-fallback-icon svg{display:block;width:100%;height:100%}
.library-cover-type-book .library-cover-fallback-icon{width:50%;max-width:84px}
.library-cover-type-book .library-cover-fallback-icon svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.08))}
.library-cover-type-video .library-cover-fallback-icon{color:#687782}
.library-cover-type-audiobook .library-cover-fallback-icon{color:#687782}
.library-cover-type-audio .library-cover-fallback-icon{color:#687782}
.library-cover-type-periodical .library-cover-fallback-icon{color:#687782}
.library-cover-type-other .library-cover-fallback-icon{color:#7b858d}
.library-media-badge{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  margin:0 0 4px;
  padding:3px 8px;
  border-radius:999px;
  background:#eef1f2;
  color:#56616a;
  font-size:10px;
  font-weight:850;
  letter-spacing:.055em;
  line-height:1.2;
  text-transform:uppercase;
}
.library-detail-content>.library-media-badge{margin-bottom:7px}
.library-media-video{background:#edf0f5;color:#4e5d72}
.library-media-audiobook{background:#f0edf5;color:#655578}
.library-media-audio{background:#edf4f1;color:#49685c}
.library-media-periodical{background:#f4f1e9;color:#71664c}
.library-media-other{background:#f0f1f2;color:#60676d}

/* Featured library section */
.library-full-catalog-link{display:flex;justify-content:center;margin-top:26px}.library-full-catalog-link .button{min-width:170px}


/* Phase 6N: featured library detail modal */
.library-detail-modal{width:min(920px,calc(100% - 32px));max-height:min(86vh,900px);padding:0;border:0;border-radius:20px;background:#fff;color:var(--color-ink);box-shadow:0 28px 80px rgba(0,0,0,.28);overflow:auto}.library-detail-modal::backdrop{background:rgba(15,27,23,.62);backdrop-filter:blur(2px)}.library-detail-modal-close{position:sticky;top:12px;float:right;z-index:5;margin:12px 12px -52px 0;width:42px;height:42px;border:1px solid var(--color-border);border-radius:50%;background:#fff;color:var(--color-ink);font:400 30px/1 var(--font-body);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.12)}.library-detail-modal-panel{padding:34px}.library-modal-detail{display:grid;grid-template-columns:minmax(170px,250px) minmax(0,1fr);gap:34px;align-items:start}.library-modal-cover{aspect-ratio:3/4;padding:18px;border:1px solid var(--color-border);border-radius:var(--radius);background:linear-gradient(#edf0ea,#fff)}.library-modal-content h2{margin:8px 48px 8px 0;font:700 clamp(30px,4vw,46px)/1.06 var(--font-heading);letter-spacing:-.025em}.library-modal-content .library-description{margin-top:20px}.library-modal-content .library-book-meta{margin-top:22px}@media(max-width:680px){.library-detail-modal-panel{padding:22px}.library-modal-detail{grid-template-columns:1fr;gap:22px}.library-modal-cover{width:min(230px,72vw);margin-inline:auto}.library-modal-content h2{margin-right:34px}}


/* Library media placeholder icon sizing — Phase 6T */
.library-cover-placeholder-media svg{display:block;width:72%;height:88%;max-width:150px;max-height:220px}
.library-cover-type-video .library-cover-fallback-icon{width:62%;max-width:108px;color:inherit}
.library-cover-type-video .library-cover-fallback-icon svg{display:block;width:100%;height:100%}


/* Public Library hierarchy and media filters — Phase 6U */
.library-category-links a.is-child{padding-left:calc(14px + (var(--library-category-depth,1) * 16px));font-size:.94em}
.library-category-links a.is-child span::before{content:'↳ ';opacity:.55}


/* Phase 6Y DVD icon sizing */
.library-cover-type-video .library-cover-fallback-icon{width:78%;max-width:132px}
.library-cover-placeholder-media svg{width:78%;height:auto;max-height:88%}