/* ============================================================
   CHURCH STARTER — COMPONENTS
   ============================================================ */

/* ---------------------------------------------- HEADER */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,247,242,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 76px;
}
.brand-lockup { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand-lockup img { height: 42px; width: auto; }
.brand-lockup .brand-text {
  font-family: var(--ui); font-weight: 800; color: var(--ink);
  font-size: 1.05rem; line-height: 1; letter-spacing: -.02em;
}
.brand-lockup .brand-text span {
  display: block; font-size: .62rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a {
  font-family: var(--ui); font-weight: 600; font-size: .94rem;
  color: var(--ink-2); text-decoration: none;
  padding: .55rem .8rem; border-radius: var(--radius);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--cream); }
.nav a[aria-current="page"] { color: var(--gold-deep); }

.header-cta { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.header-cta .btn { padding: .78em 1.35em; font-size: .92rem; }

.nav-toggle { display: none; }

@media (max-width: 1000px) {
  .nav, .header-cta .btn-outline { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: 2px solid var(--line); border-radius: var(--radius);
    padding: .6rem .9rem; font-family: var(--ui); font-weight: 700; font-size: .9rem;
    color: var(--ink); cursor: pointer;
  }
  .nav-toggle:hover { border-color: var(--ink); }
}

/* mobile drawer */
.mobile-nav {
  display: none; border-top: 1px solid var(--line);
  background: var(--paper); padding: var(--sp-3) 0 var(--sp-5);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; font-family: var(--ui); font-weight: 600; font-size: 1.05rem;
  color: var(--ink-2); text-decoration: none;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { width: 100%; margin-top: var(--sp-4); }

/* ---------------------------------------------- HERO */
.hero {
  position: relative; background: var(--ink); color: var(--white);
  overflow: hidden; isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(192,138,46,.30) 0%, transparent 58%),
    radial-gradient(100% 80% at 8% 92%, rgba(58,107,138,.28) 0%, transparent 60%),
    linear-gradient(160deg, #1B2738 0%, #16202E 46%, #101825 100%);
}
/* faint seal watermark — the mark as texture, not decoration.
   Grace's mark is the cross and flame alone, which is tall rather than square,
   so the aspect ratio is pinned to the artwork. The wordmark is deliberately
   not in this file: bled off the right edge it clipped mid-word, which reads
   as a broken image rather than as texture. */
.hero::after {
  content: ""; position: absolute; z-index: -1;
  right: 5%; top: 50%; transform: translateY(-50%);
  width: min(22vw, 210px); aspect-ratio: 214 / 560;
  background: url('../img/mark-wash.png') center/contain no-repeat;
  opacity: .06; pointer-events: none;
}
.hero-inner { padding-block: clamp(4.5rem, 12vw, 9rem); position: relative; }
.hero h1 {
  font-size: var(--step-6); color: var(--white); line-height: .96;
  letter-spacing: -.035em; max-width: 15ch;
}
.hero h1 .line-2 { color: var(--gold-light); display: block; }
.hero .lede { max-width: 46ch; margin-top: var(--sp-4); color: #C2CCDA; }
.hero .cluster { margin-top: var(--sp-6); }

/* service strip riding the bottom of the hero */
.service-strip {
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
}
.service-strip .wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4); padding-block: var(--sp-5);
}
.service-strip .item { display: flex; gap: var(--sp-3); align-items: baseline; }
.service-strip .time {
  font-family: var(--ui); font-weight: 800; font-size: var(--step-2);
  color: var(--gold-light); line-height: 1; letter-spacing: -.03em;
}
.service-strip .label {
  font-family: var(--ui); font-weight: 700; font-size: .95rem; color: var(--white);
  display: block; letter-spacing: -.01em;
}
.service-strip .sub { font-size: .88rem; color: #93A2B6; font-family: var(--ui); }

/* ---------------------------------------------- SECTION HEADS */
.section-head { max-width: 60ch; margin-bottom: var(--sp-6); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--step-4); }
.section-head p { margin-top: var(--sp-3); font-size: var(--step-1); color: var(--ink-3); }
:is(.bg-ink, .on-dark) .section-head p { color: #A9B6C7; }

/* ---------------------------------------------- CARDS */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-light); }
.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card p { color: var(--ink-3); font-size: .97rem; }
.card .card-more {
  margin-top: auto; padding-top: var(--sp-4);
  font-family: var(--ui); font-weight: 700; font-size: .9rem; color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: .4em;
}
a.card:hover .card-more .arrow { transform: translateX(4px); }
.card-more .arrow { transition: transform .2s var(--ease); display: inline-block; }

/* ministry cards get a colour spine */
.card-ministry { border-top: 4px solid var(--accent, var(--gold)); }
.card-ministry .tag {
  font-family: var(--ui); font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent, var(--gold-deep)); margin-bottom: var(--sp-2);
}

/* ---------------------------------------------- STEPS (plan a visit) */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--ui); font-weight: 800; font-size: 1.05rem;
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--gold-wash); color: var(--gold-deep); border: 2px solid var(--gold-light);
}
:is(.bg-ink, .on-dark) .step::before { background: rgba(229,184,92,.14); border-color: rgba(229,184,92,.45); color: var(--gold-light); }
.step h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.step p { color: var(--ink-3); }
:is(.bg-ink, .on-dark) .step p { color: #A9B6C7; }

/* ---------------------------------------------- SPLIT */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.split-wide { grid-template-columns: 1.15fr .85fr; } }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }

/* ---------------------------------------------- STAT ROW */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-5); }
.stat .num {
  font-family: var(--ui); font-weight: 800; font-size: var(--step-4);
  color: var(--gold); line-height: 1; letter-spacing: -.03em;
}
.stat .cap {
  font-family: var(--ui); font-weight: 600; font-size: .9rem; color: var(--ink-3);
  margin-top: var(--sp-2); line-height: 1.4;
}
:is(.bg-ink, .on-dark) .stat .cap { color: #93A2B6; }
:is(.bg-ink, .on-dark) .stat .num { color: var(--gold-light); }

/* ---------------------------------------------- CTA BAND */
.cta-band { background: var(--gold-wash); border-block: 1px solid var(--line); }
.cta-band .inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding-block: clamp(2.5rem, 5vw, 4rem);
}
.cta-band h2 { font-size: var(--step-3); max-width: 20ch; }
.cta-band p { color: var(--ink-3); margin-top: var(--sp-2); max-width: 46ch; }

/* ---------------------------------------------- FOOTER */
.site-footer { background: var(--ink); color: #93A2B6; padding-block: var(--sp-8) var(--sp-5); }
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-brand img { height: 60px; width: auto; margin-bottom: var(--sp-3); }
.footer-brand p { font-size: .95rem; max-width: 30ch; }
.site-footer h4 {
  font-family: var(--ui); font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--sp-3);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: .6rem; }
.site-footer a { color: #B7C2D2; text-decoration: none; font-family: var(--ui); font-size: .95rem; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  font-size: .85rem; font-family: var(--ui);
}
.social { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.social a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.social a:hover { background: var(--gold); border-color: var(--gold); }
.social a:hover svg { fill: var(--ink); }
.social svg { width: 18px; height: 18px; fill: #B7C2D2; transition: fill .18s var(--ease); }

/* ---------------------------------------------- FAQ (details/summary)
   Native disclosure, no JS. Keyboard accessible for free. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  font-family: var(--ui); font-weight: 700; font-size: var(--step-1);
  color: var(--ink); padding: var(--sp-4) 3rem var(--sp-4) 0;
  position: relative; transition: color .15s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-deep); }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details p { padding: 0 3rem var(--sp-5) 0; color: var(--ink-3); max-width: 68ch; }

/* ---------------------------------------------- HEADER, SMALL SCREENS
   At 375px the lockup + CTA + Menu do not fit on one line: the CTA pushed
   the Menu button off the viewport entirely. Below 560px the header keeps
   only the mark and the Menu toggle; "Plan Your Visit" lives in the drawer,
   which is where a thumb is already headed. */
@media (max-width: 560px) {
  .header-inner { min-height: 64px; }
  .header-cta .btn-primary { display: none; }
  .brand-lockup img { height: 36px; width: auto; }
  .brand-lockup .brand-text { font-size: .98rem; }
  .brand-lockup .brand-text span { font-size: .56rem; letter-spacing: .1em; }
}

/* very narrow (older/smaller phones): drop the wordmark, keep the seal */
@media (max-width: 360px) {
  .brand-lockup .brand-text span { display: none; }
}

/* ============================================================
   WORDPRESS ADDITIONS
   Everything below exists because WordPress emits markup the static
   prototype did not (menu lists, editor blocks, embeds).
   ============================================================ */

/* ---------------------------------------------- NAV LISTS */
.nav-list, .mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: var(--sp-1); }
.nav-list a {
  font-family: var(--ui); font-weight: 600; font-size: .94rem;
  color: var(--ink-2); text-decoration: none;
  padding: .55rem .8rem; border-radius: var(--radius); display: block;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav-list a:hover { color: var(--ink); background: var(--cream); }
.nav-list .current-menu-item > a { color: var(--gold-deep); }

.mobile-nav-list a {
  display: block; font-family: var(--ui); font-weight: 600; font-size: 1.05rem;
  color: var(--ink-2); text-decoration: none;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.mobile-nav-list .current-menu-item > a { color: var(--gold-deep); }

/* ---------------------------------------------- PAGE HERO
   Shorter than the homepage hero — an interior page should not spend
   a full screen before the content starts. */
.page-hero .hero-inner { padding-block: clamp(3rem, 7vw, 5.5rem); }
.page-hero h1 { font-size: var(--step-5); max-width: 20ch; }

/* the service-time unit ("am") sits smaller against the numeral */
.service-strip .time .unit { font-size: .5em; }

/* ---------------------------------------------- EMBED FRAME
   Third-party embeds (Subsplash, Google Calendar) carry their own styling.
   This frame gives them a consistent edge so they read as part of the page
   rather than as something pasted on top of it. */
.embed-frame {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.embed-frame iframe { display: block; width: 100%; border: 0; }

/* ---------------------------------------------- PROSE (block editor output)
   Staff write in the block editor; these rules make ordinary paragraphs,
   headings and lists land in the type system without them choosing anything. */
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--step-3); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--step-2); margin-top: var(--sp-6); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.prose blockquote {
  border-left: 4px solid var(--gold); padding-left: var(--sp-4);
  font-size: var(--step-1); font-style: italic; color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: .95rem; }
.prose table th, .prose table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.prose table th { font-weight: 700; color: var(--ink); }
.prose figure { margin: 0; }

/* wide content must scroll inside itself, never the page */
.prose table { display: block; overflow-x: auto; }

/* The core Details block powers the FAQ — same look as the prototype,
   with no plugin and no custom block. */
.prose details {
  border-bottom: 1px solid var(--line); margin-top: 0;
}
.prose details:first-of-type { border-top: 1px solid var(--line); }
.prose details summary {
  list-style: none; cursor: pointer;
  font-family: var(--ui); font-weight: 700; font-size: var(--step-1);
  color: var(--ink); padding: var(--sp-4) 3rem var(--sp-4) 0;
  position: relative; transition: color .15s var(--ease);
}
.prose details summary::-webkit-details-marker { display: none; }
.prose details summary:hover { color: var(--gold-deep); }
.prose details summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.prose details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.prose details > *:not(summary) { padding: 0 3rem var(--sp-4) 0; color: var(--ink-3); }

/* ---------------------------------------------- VERSE CARD */
.verse-card { background: var(--gold-wash); border-color: var(--gold-light); }
.verse-card .verse {
  font-family: var(--body); font-size: var(--step-2); line-height: 1.45;
  color: var(--ink); font-style: italic;
}
.verse-card .verse-ref {
  font-family: var(--ui); font-weight: 700; font-size: .9rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-deep); margin-top: var(--sp-4);
}

/* ---------------------------------------------- STAFF */
.staff-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.staff-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.staff-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-photo-empty {
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--cream), var(--gold-wash));
}
.staff-photo-empty span {
  font-family: var(--ui); font-weight: 800; font-size: 4rem;
  color: var(--gold); opacity: .55;
}
.staff-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.staff-body h2 { font-size: var(--step-1); }
.staff-role {
  font-family: var(--ui); font-weight: 700; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-deep);
}
.staff-bio { color: var(--ink-3); font-size: .97rem; }
.staff-contact { font-family: var(--ui); font-size: .92rem; font-weight: 600; margin-top: auto; padding-top: var(--sp-3); }

/* ---------------------------------------------- WP CORE ODDS AND ENDS */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.alignwide, .alignfull { max-width: 100%; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 700; line-height: 1;
  padding: 1.05em 1.9em; border-radius: var(--radius);
  background: var(--gold); color: var(--white); text-decoration: none;
}
.wp-block-button__link:hover { background: var(--gold-light); }

/* ---------------------------------------------- SOURCE LINK / NOTE
   Used when a content provider refuses to be embedded (Church Center sends
   X-Frame-Options: SAMEORIGIN) or has not been connected yet. A clear route
   onward beats a broken iframe. */
.source-link {
  background: var(--gold-wash); border: 1px solid var(--gold-light);
  border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center; display: grid; gap: var(--sp-4); justify-items: center;
}
.source-link p { color: var(--ink-2); max-width: 46ch; margin: 0; }

.embed-note {
  margin-top: var(--sp-4); color: var(--ink-3);
  font-family: var(--ui); font-size: .95rem; text-align: center;
}

/* ============================================================
   DROPDOWN SUB-MENUS
   Hover alone is not enough: it excludes touch and keyboard users. Each
   parent item also gets a caret button (added in site.js) that toggles
   .is-open, so the menu works with a mouse, a thumb, or the Tab key.
   ============================================================ */

/* ---------------------------------------------- DESKTOP */
.nav-list li { position: relative; }
.nav-list .menu-item-has-children > a { padding-right: .3rem; }

.nav-list .sub-menu {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 200;
  min-width: 230px; margin: 0; padding: .4rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu,
.nav-list li.is-open > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-list .sub-menu a {
  white-space: nowrap; padding: .6rem .8rem; border-radius: var(--radius);
  font-size: .92rem;
}
.nav-list .sub-menu a:hover { background: var(--cream); }

/* the caret button, sitting alongside the parent link */
.submenu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  padding: .4rem .35rem; margin-left: -.25rem; border-radius: var(--radius);
  color: var(--ink-muted);
}
.submenu-toggle:hover { color: var(--ink); background: var(--cream); }
.submenu-toggle span {
  display: block; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s var(--ease);
}
.nav-list li.is-open > .submenu-toggle span,
.mobile-nav-list li.is-open > .submenu-toggle span {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* parent items sit inline with their caret */
.nav-list .menu-item-has-children,
.mobile-nav-list .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
.nav-list .menu-item-has-children > .sub-menu { flex-basis: 100%; }

/* ---------------------------------------------- MOBILE
   No hover on a phone, so sub-menus stay collapsed until the caret is
   tapped, then push the list down rather than floating over it. */
.mobile-nav-list .menu-item-has-children > a { flex: 1; border-bottom: 0; }
.mobile-nav-list .menu-item-has-children { border-bottom: 1px solid var(--line); }

.mobile-nav-list .sub-menu {
  flex-basis: 100%; list-style: none; margin: 0;
  padding: 0 0 .5rem 1rem;
  display: none;
}
.mobile-nav-list li.is-open > .sub-menu { display: block; }
.mobile-nav-list .sub-menu a {
  font-size: .98rem; padding: .65rem 0; border-bottom: 0;
  color: var(--ink-3);
}
.mobile-nav-list .submenu-toggle { padding: .85rem .6rem; }

/* Touch devices get no hover-open at all — the caret is the only way in,
   which avoids a tap opening a menu and following the link at once. */
@media (hover: none) {
  .nav-list li:hover > .sub-menu { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .nav-list li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ============================================================
   SERMONS
   Thumbnail facades rather than live iframes: fifteen embedded YouTube
   players would cost several megabytes before anyone pressed play. The
   real player is swapped in on click (see site.js).
   ============================================================ */

.sermon-player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--ink);
  cursor: pointer;
}
.sermon-player img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease), opacity .2s var(--ease);
}
.sermon-player:hover img { transform: scale(1.03); opacity: .85; }
.sermon-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sermon-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(22,32,46,.05), rgba(22,32,46,.45));
  border: 0; cursor: pointer; padding: 0;
}
.sermon-play-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gold); display: grid; place-items: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.sermon-play-icon::after {
  content: ""; display: block;
  border-left: 18px solid var(--ink);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  margin-left: 5px;
}
.sermon-player:hover .sermon-play-icon { transform: scale(1.08); background: var(--gold-light); }
.sermon-play:focus-visible { outline: 3px solid var(--gold-light); outline-offset: -6px; }

/* ---------------------------------------------- most recent */
.sermon-latest { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .sermon-latest { grid-template-columns: 1.4fr 1fr; } }
.sermon-latest .sermon-player { box-shadow: var(--shadow-lg); }
.sermon-latest-meta h2 { font-size: var(--step-3); margin-top: var(--sp-1); }

.sermon-sub {
  font-family: var(--ui); font-size: .9rem; font-weight: 600;
  color: var(--ink-muted); margin-top: var(--sp-2);
}

/* ---------------------------------------------- grid */
.sermon-grid-head {
  font-size: var(--step-2); margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.sermon-grid {
  display: grid; gap: var(--sp-5); margin-top: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.sermon-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.sermon-card .sermon-play-icon { width: 52px; height: 52px; }
.sermon-card .sermon-play-icon::after {
  border-left-width: 15px; border-top-width: 9px; border-bottom-width: 9px;
}
.sermon-card-body h3 { font-size: var(--step-0); line-height: 1.35; font-weight: 700; }

.sermon-archive { margin-top: clamp(2.5rem, 6vw, 4rem); text-align: center; }