/* ============================================================
   sermons.css
   Sermon page styles — UPCPI
   Depends on: shared.css (resets, CSS vars, body/font base)
   ============================================================ */

/* Hide nav links — only logo + search + MENU on this page */
#header > nav {
  display: none !important;
}

/* Smooth header hide/show — controlled via JS inline styles (matches prayer.js) */
#header {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Legacy class kept for safety — no longer used by sermons.js */
#header.hide {
  transform: translateY(-120%);
  opacity: 0;
}

/* Sermons-page CSS variables not in shared.css */
:root {
  --fire-dim:  rgba(255,90,0,0.10);
  --fire-mid:  rgba(255,90,0,0.25);
  --white-60:  rgba(255,255,255,0.60);
  --white-20:  rgba(255,255,255,0.20);
  --white-10:  rgba(255,255,255,0.10);
  --white-06:  rgba(255,255,255,0.06);
  --white-03:  rgba(255,255,255,0.03);
  --radius:    14px;
}

/* .menu-left intentionally left unstyled here —
   shared.css already defines it as transparent/no-blur,
   matching the behavior on every other page. */

/* .close-menu intentionally left unstyled here —
   shared.css already defines its position/behavior,
   matching index.html exactly. */

/* ── PAGE HEADER / HERO ──
   Signature: a vertical "flame-line" beside the eyebrow label —
   a thin gradient stroke that fades like a flame's edge, echoing
   Acts 2's "tongues of fire" without being literal or decorative.
   Layout is left-aligned and asymmetric (not dead-centered), with
   the ambient glow sourced from the upper-left like a light source
   rather than sitting symmetrically behind the headline. */
.page-header {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--white-10);
  background: #0a0807;
  padding: 110px 7%;
}

.hero-glow-soft {
  position: absolute;
  top: 8%;
  left: -10%;
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(255,90,0,0.16) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* ── Right-side photo ──
   Drop a real photo (worship/congregation, dark and moody works
   best) into the inline background-image url() in the HTML.
   The container is wider than its visible footprint so the left
   fade has real room to dissolve into the page background instead
   of cutting off at a hard edge. */
.hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 38%;
  z-index: 1;
  overflow: hidden;
}

.hero-photo-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-color: #1a0f08; /* shows as a warm dark panel until a photo is added */
  filter: saturate(0.6) brightness(0.55) contrast(1.05);
}

/* Duotone + edge fade, layered on top of the photo itself.
   The left fade is the wide, slow one that does the actual
   blending; the rest are gentle, even vignettes — no diagonal
   gradient, so there's no hot spot pooling in one corner. */
.hero-photo-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #0a0807 0%, rgba(10,8,7,0.85) 14%, rgba(10,8,7,0.4) 28%, rgba(10,8,7,0) 46%),
    linear-gradient(to top, #0a0807 0%, rgba(10,8,7,0) 30%),
    linear-gradient(to bottom, rgba(10,8,7,0.45) 0%, rgba(10,8,7,0) 18%),
    rgba(255,90,0,0.16);
}

@media (max-width: 1000px) {
  .hero-photo {
    display: none;
  }
}

.hero-simple {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 620px;
  width: 100%;
}

/* ── Signature: flame-line + eyebrow ── */
.hero-simple-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.hero-flame-line {
  display: block;
  width: 2px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(to top, var(--fire), rgba(255,90,0,0));
  flex-shrink: 0;
}

.hero-simple-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 160, 90, 0.8);
}

/* Typewriter cursor — blinks steadily next to the verse reference.
   Purely decorative (aria-hidden), animation only, no JS involved. */
.hero-verse-cursor {
  display: inline-block;
  width: 1px;
  height: 0.8em;
  margin-left: 2px;
  margin-bottom: -0.1em;
  background: rgba(255, 160, 90, 0.8);
  animation: hero-cursor-blink 1s step-end infinite;
}

@keyframes hero-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-verse-cursor {
    animation: none;
    opacity: 0;
  }
}

.hero-simple-headline {
  font-size: clamp(2.8rem, 6.4vw, 5.4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 26px;
}

.hero-simple-headline .hl {
  font-style: italic;
  font-weight: 300;
  color: var(--fire);
}

.hero-simple-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(232, 210, 195, 0.5);
  max-width: 460px;
  margin-bottom: 46px;
}

/* ── CTA row ── */
.hero-simple-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 100px;
  background: var(--fire);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255,90,0,0.25);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.hero-cta-primary:hover {
  transform: translateY(-2px);
  background: #ff7a1f;
  box-shadow: 0 12px 28px rgba(255,90,0,0.35);
}

.hero-cta-primary:active {
  transform: translateY(0) scale(0.98);
}

.hero-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  border: 1px solid rgba(255,255,255,0.16);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.hero-cta-ghost:hover {
  border-color: rgba(255,90,0,0.45);
  color: var(--fire);
}

.hero-cta-ghost:active {
  transform: scale(0.98);
}

@media (max-width: 640px) {
  .page-header {
    padding: 130px 6% 90px;
    align-items: flex-start;
  }

  .hero-simple {
    align-items: flex-start;
  }

  .hero-glow-soft {
    width: 520px;
    height: 520px;
    top: 0;
    left: -20%;
  }
}


/* ── FEATURED ── */
.featured {
  padding: 64px 7%;
  border-bottom: 1px solid var(--white-10);
}

.featured-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.featured-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.featured-thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(.25,.46,.45,.94);
}

.featured-media:hover .featured-thumb {
  transform: scale(1.02);
}

.featured-thumb-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 70%, rgba(255,90,0,0.3) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,0.015) 40px,
      rgba(255,255,255,0.015) 41px
    );
}

.featured-overlay-title {
  position: absolute;
  bottom: 28px;
  left: 28px;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -1px;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

.featured-overlay-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--fire);
}

.featured-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(13,13,13,0.7);
  border: 2px solid rgba(255,255,255,0.4);
  color: var(--white);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  backdrop-filter: blur(4px);
  padding-left: 4px;
}

.featured-media:hover .featured-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.featured-play:hover {
  background: var(--fire);
  border-color: var(--fire);
}

.featured-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--fire);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
}

.featured-series-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fire);
  margin-bottom: 16px;
}

.featured-series-tag i {
  font-size: 0.6rem;
}

.featured-title {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.featured-speaker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white-60);
  margin-bottom: 20px;
}

.speaker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fire);
  flex-shrink: 0;
}

.featured-excerpt {
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--white-40);
  margin-bottom: 24px;
  max-width: 440px;
}

.featured-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.meta-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--white-10);
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--white-40);
  letter-spacing: 0.3px;
}

.meta-pill i { font-size: 0.6rem; color: var(--fire); }

.featured-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-watch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 32px;
  border-radius: 10px;
  background: var(--fire);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.btn-watch:hover {
  background: #e84e00;
  transform: translateY(-1px);
}

.btn-share {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--white-20);
  background: transparent;
  color: var(--white-60);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-share:hover {
  border-color: var(--fire);
  color: var(--fire);
  background: var(--fire-dim);
}

/* ── FILTER BAR ── */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 800;
  background: rgba(13,13,13,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--white-10);
}

.filter-bar-inner {
  padding: 14px 7%;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white-40);
  font-size: 0.75rem;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 8px;
  background: var(--white-06);
  border: 1px solid var(--white-10);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.search-input::placeholder { color: var(--white-40); }

.search-input:focus {
  border-color: rgba(255,90,0,0.4);
  background: rgba(255,90,0,0.04);
}

.filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-pill {
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--white-10);
  background: transparent;
  color: var(--white-40);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-pill:hover {
  border-color: var(--white-20);
  color: var(--white);
}

.filter-pill--active {
  background: var(--fire);
  border-color: var(--fire);
  color: var(--white);
}

/* ── SERMON GRID ── */
.sermons-grid-section {
  padding: 56px 7% 80px;
}

.sermons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

/* ── SERMON CARD ── */
.sermon-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white-03);
  border: 1px solid var(--white-10);
  transition: border-color 0.3s, transform 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.sermon-card:hover {
  border-color: rgba(255,90,0,0.3);
  transform: translateY(-4px);
}

.sermon-card--wide {
  grid-column: span 2;
  flex-direction: row;
}

.sermon-card--wide .card-thumb {
  flex: 0 0 55%;
  aspect-ratio: auto;
  min-height: 260px;
}

.sermon-card--wide .card-body {
  flex: 1;
  justify-content: center;
}

.sermon-card.is-hidden {
    display: none;
}

.card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}

.card-overlay-title {
  position: absolute;
  bottom: 16px;
  left: 18px;
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.5px;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

.card-overlay-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--fire);
}

.card-play-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(13,13,13,0.65);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s, transform 0.25s, background 0.2s;
  padding-left: 2px;
}

.sermon-card:hover .card-play-btn {
  opacity: 1;
  transform: scale(1);
}

.card-play-btn:hover {
  background: var(--fire);
  border-color: var(--fire);
}

.card-wide-excerpt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 18px 18px;
  font-size: 0.72rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}

.sermon-card--wide:hover .card-wide-excerpt {
  opacity: 1;
  transform: translateY(0);
}

.card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.card-series {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fire);
}

.card-title {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.3;
  color: var(--white);
}

.card-speaker {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--white-40);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--white-06);
}

.card-duration {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--white-40);
}

.card-verse {
  font-size: 0.62rem;
  font-weight: 600;
  font-style: italic;
  color: var(--white-20);
  padding: 3px 8px;
  border: 1px solid var(--white-10);
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: 80px 0;
  color: var(--white-40);
}

.empty-state i {
  font-size: 2rem;
  color: var(--white-20);
  margin-bottom: 16px;
  display: block;
}

.empty-state p {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.7;
}

/* ── END SERMON ── */
.sermon-library-end{
    margin: 4rem auto 2rem;
    text-align: center;
}

.sermon-library-end::before{
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    margin: 0 auto 1.5rem;
    background: rgba(255,255,255,.12);
}

.sermon-library-end p{
    margin: 0 0 .75rem;
    color: rgba(255,255,255,.55);
    font-size: .95rem;
    font-weight: 400;
}

.sermon-library-end a{
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    color: #ff7b2c;
    text-decoration: none;

    font-size: .9rem;
    font-weight: 600;

    transition: opacity .2s ease;
}

.sermon-library-end a:hover{
    opacity: .8;
}


/* ==========================================
CTA BANNER
========================================== */

.cta-banner{
position: relative;
margin: 2rem auto 0;
overflow: hidden;
}

.cta-banner-glow{
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at center,
rgba(255,90,0,.18),
transparent 65%
);
}

.cta-banner-inner{
position: relative;
z-index: 2;

display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;

padding: 3rem;

border-radius: 28px;

background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);

backdrop-filter: blur(12px);

}

.cta-eyebrow{
color: #ff7b2c;
font-size: .8rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;

margin-bottom: .75rem;

}

.cta-headline{
font-size: clamp(1.8rem, 4vw, 2.8rem);
line-height: 1.1;
margin-bottom: 1rem;
}

.cta-desc{
max-width: 600px;

color: rgba(255,255,255,.7);

line-height: 1.8;

}

.cta-form{
display: flex;
align-items: center;
justify-content: center;
}

.cta-subscribe-btn{
    display:inline-flex;
    align-items:center;
    gap:.75rem;

    padding:1rem 1.75rem;

    border-radius:999px;

    background:rgba(255,90,0,.12);

    border:1px solid rgba(255,90,0,.25);

    color:#ff7b2c;

    text-decoration:none;
    font-weight:700;

    backdrop-filter:blur(12px);

    transition:.3s ease;
}

.cta-subscribe-btn:hover{
    background:#ff5a00;
    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(255,90,0,.25);
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .featured-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

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

  .sermon-card--wide {
    grid-column: span 2;
    flex-direction: column;
  }

  .sermon-card--wide .card-thumb {
    flex: none;
    aspect-ratio: 16 / 9;
    min-height: auto;
  }

  .cta-form{
      width:100%;
  }

  .cta-subscribe-btn{
      width:100%;
  }
}

@media (max-width: 640px) {
  .featured   { padding: 48px 6%; }
  .sermons-grid-section { padding: 40px 6% 60px; }
  .cta-banner { margin: 0 6% 60px; }
  .filter-bar-inner { padding: 12px 6%; }
  .sermons-grid {
    grid-template-columns: 1fr;
  }

  .sermon-card--wide {
    grid-column: span 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sermon-card,
  .featured-thumb,
  .hero-now-playing-dot {
    transition: none !important;
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ── VIDEO MODAL ──
   One reusable modal for every "watch" trigger on the page. Sits
   above the mobile menu / search overlay (z-index 10000). The
   iframe's src is set/cleared entirely by sermons.js — this file
   only handles show/hide and the visual frame around it. */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.video-modal.active {
  opacity: 1;
  visibility: visible;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 3, 0.88);
  backdrop-filter: blur(6px);
}

.video-modal-box {
  position: relative;
  z-index: 1;
  width: min(920px, 92vw);
  transform: scale(0.96) translateY(8px);
  transition: transform 220ms ease;
}

.video-modal.active .video-modal-box {
  transform: scale(1) translateY(0);
}

.video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}

.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.video-modal-close:hover {
  background: var(--fire);
  border-color: var(--fire);
}

@media (max-width: 640px) {
  .video-modal-close {
    top: -42px;
    width: 32px;
    height: 32px;
  }
}