/* ============================================================
   sermons.css  —  Sermons "coming soon" placeholder page
   Single page stylesheet (no section partials). Uses the shared
   theme tokens; self-contained button so it depends on nothing
   in base.css beyond the tokens, header, and footer.
   ============================================================ */

.sermons-hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  padding: clamp(2.5rem, 7vh, 6rem) 0;
  background:
    radial-gradient(ellipse 68% 52% at 50% 0%, rgba(196, 80, 42, 0.07), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(122, 31, 43, 0.06), transparent 72%),
    var(--bg);
}

.sermons-hero__inner {
  max-width: 600px; margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

/* ── Signature: open-book emblem with a soft glow ───────── */
.sermons-emblem {
  width: clamp(74px, 12vw, 104px); height: auto; margin: 0 auto 1.9rem;
  color: var(--maroon); position: relative;
}
.sermons-emblem svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.sermons-emblem::before {
  content: ""; position: absolute; inset: -34%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 80, 42, 0.16), transparent 66%);
}

/* ── Heading ─────────────────────────────────────────────── */
.sermons-title {
  font-family: var(--font-display); font-weight: 400; line-height: 1.04;
  font-size: clamp(2.9rem, 8vw, 5rem); color: var(--brown-deep); letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0; margin-bottom: 1.35rem;
}
.sermons-kicker {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1.15rem;
}
.sermons-title em {
  font-style: italic; color: var(--maroon);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.sermons-lead {
  font-family: var(--font-body); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  line-height: 1.8; color: var(--ink-soft); max-width: 500px; margin: 0 auto;
}

/* ── Scripture anchor ────────────────────────────────────── */
.sermons-verse {
  position: relative; margin: clamp(2.5rem, 6vw, 3.5rem) auto 0; max-width: 520px;
  padding-top: clamp(2rem, 5vw, 2.75rem);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); line-height: 1.5; color: var(--brown-deep);
  font-variation-settings: "opsz" 40, "SOFT" 100;
}
/* small ornament line + dot above the verse */
.sermons-verse::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--orange-red-soft), transparent);
}
.sermons-verse::after {
  content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange-red);
  box-shadow: 0 0 0 4px var(--bg);
}
.sermons-verse cite {
  display: block; font-style: normal; font-family: var(--font-body); font-weight: 600;
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--maroon); margin-top: 1.1rem;
}

/* ── Calls to action ─────────────────────────────────────── */
.sermons-ctas {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: flex; gap: 1.25rem 1.75rem; justify-content: center; align-items: center; flex-wrap: wrap;
}
.sermons-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.9rem 1.7rem; border-radius: var(--radius); text-decoration: none; cursor: pointer;
  background: var(--maroon); color: var(--on-dark); border: 1px solid var(--maroon);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sermons-btn:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(122, 31, 43, 0.45); }
.sermons-btn__arrow { transition: transform .3s var(--ease); display: inline-block; }
.sermons-btn:hover .sermons-btn__arrow { transform: translateX(4px); }
.sermons-link {
  font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--orange-red-soft); padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.sermons-link:hover { color: var(--maroon); border-color: var(--maroon); }
.sermons-btn:focus-visible, .sermons-link:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; border-radius: 2px; }

/* ── Orchestrated page-load reveal ───────────────────────── */
@keyframes sermonsRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sermons-anim { opacity: 0; animation: sermonsRise 0.9s var(--ease) forwards; }
.sermons-anim--1 { animation-delay: 0.05s; }
.sermons-anim--2 { animation-delay: 0.18s; }
.sermons-anim--3 { animation-delay: 0.31s; }
.sermons-anim--4 { animation-delay: 0.44s; }
.sermons-anim--5 { animation-delay: 0.57s; }

@media (prefers-reduced-motion: reduce) {
  .sermons-anim { opacity: 1; animation: none; }
}