/* =====================================================================
   MVUKE TV, sermons.php
   Spotlight on the latest message over its own blurred thumbnail,
   then a 16:9 video grid with search, like a streaming library.
===================================================================== */
body.sermons-page{background:#07040d;color:#fff;}
.sermons-page{--pad:clamp(20px,5vw,72px);}
.sermons-page h1,.sermons-page h2{font-family:'Montserrat',sans-serif;font-weight:900;letter-spacing:-.045em;line-height:1.02;}

/* ============================ SPOTLIGHT =========================== */
.sm-hero{position:relative;overflow:hidden;min-height:clamp(520px,82svh,760px);display:flex;align-items:center;padding:calc(var(--mv-nav-h) + 32px) var(--pad) clamp(40px,7vh,72px);background:#05040a;}
.sm-hero-bg{position:absolute;inset:0;}
.sm-hero-bg img{width:100%;height:100%;object-fit:cover;filter:blur(36px) saturate(1.3);transform:scale(1.25);}
.sm-hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,4,13,.9) 0%,rgba(7,4,13,.6) 55%,rgba(7,4,13,.4) 100%),
  linear-gradient(0deg,#07040d 0%,rgba(7,4,13,0) 40%),
  linear-gradient(180deg,rgba(7,4,13,.6) 0%,rgba(7,4,13,0) 24%);}
.sm-hero-grid{position:relative;z-index:1;width:100%;max-width:1480px;margin:0 auto;display:grid;grid-template-columns:1fr minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;}
.sm-hero-copy h1{font-size:clamp(2.1rem,4.8vw,4.4rem);line-height:.98;text-wrap:balance;text-shadow:0 6px 40px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:.06em;}
.sm-hero-copy p{margin-top:18px;max-width:44ch;font-size:1rem;line-height:1.6;color:rgba(248,245,252,.8);}
.sm-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.sm-hero-actions .btn{padding:14px 28px;font-size:.9rem;}
.sm-hero--empty .sm-hero-copy{position:relative;z-index:1;}
.sm-hero--empty{background:radial-gradient(80% 70% at 20% 20%,rgba(124,63,201,.35),#07040d 70%);}

.sm-hero-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--mv-radius-md);overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 100px -30px rgba(0,0,0,.9);transition:transform .45s var(--mv-ease);}
.sm-hero-frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--mv-ease);}
.sm-hero-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 50%);}
.sm-play{position:absolute;z-index:1;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--mv-ink-950);display:flex;align-items:center;justify-content:center;animation:mvSmPulse 2.4s infinite;}
.sm-play svg{width:26px;height:26px;margin-left:3px;}
.sm-play--sm{width:52px;height:52px;opacity:0;transform:scale(.85);animation:none;transition:opacity .3s var(--mv-ease),transform .3s var(--mv-ease);}
.sm-play--sm svg{width:19px;height:19px;}
@keyframes mvSmPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5);}70%{box-shadow:0 0 0 20px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}
@media(hover:hover){
  .sm-hero-frame:hover{transform:scale(1.015);}
  .sm-hero-frame:hover img{transform:scale(1.05);}
}

/* ============================ LIBRARY ============================= */
.sm-library{max-width:1480px;margin:0 auto;padding:clamp(40px,7vh,72px) var(--pad) 0;}
.sm-library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px;}
.sm-library-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);}
.sm-library-head p{margin-top:6px;font-size:.9rem;color:rgba(248,245,252,.6);}

.sm-search{position:relative;display:block;width:min(100%,320px);}
.sm-search svg{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:rgba(248,245,252,.6);pointer-events:none;}
.sm-search input{width:100%;height:46px;padding:0 18px 0 44px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.92rem;font-weight:600;transition:border-color .25s var(--mv-ease),background .25s var(--mv-ease);}
.sm-search input::placeholder{color:rgba(248,245,252,.5);}
.sm-search input:focus{outline:none;border-color:var(--mv-ember-400);background:rgba(255,255,255,.12);}

.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:28px 22px;}
.sm-card{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left;color:#fff;}
.sm-card[hidden]{display:none;}
.sm-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#151120;box-shadow:0 18px 36px -20px rgba(0,0,0,.9);outline:2px solid transparent;outline-offset:2px;transition:transform .4s var(--mv-ease),outline-color .3s var(--mv-ease);}
.sm-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--mv-ease);}
.sm-thumb::after{content:'';position:absolute;inset:0;background:rgba(7,4,13,0);transition:background .3s var(--mv-ease);}
.sm-card-title{font-size:.98rem;font-weight:800;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .25s var(--mv-ease);}
@media(hover:hover){
  .sm-card:hover .sm-thumb{transform:translateY(-4px);outline-color:var(--mv-ember-400);}
  .sm-card:hover .sm-thumb img{transform:scale(1.06);}
  .sm-card:hover .sm-thumb::after{background:rgba(7,4,13,.4);}
  .sm-card:hover .sm-play--sm{opacity:1;transform:scale(1);}
  .sm-card:hover .sm-card-title{color:var(--mv-ember-400);}
}
.sm-card:focus-visible .sm-thumb{outline-color:var(--mv-ember-400);}
.sm-card:focus-visible .sm-play--sm{opacity:1;transform:scale(1);}

.sm-empty{padding:40px 0;text-align:center;color:rgba(248,245,252,.65);font-size:.95rem;}
.sm-empty[hidden]{display:none;}
.sm-more{display:flex;justify-content:center;padding:48px 0 90px;}

/* ============================ VIDEO DIALOG ======================== */
.vmodal{padding:0;border:0;background:transparent;color:#fff;width:calc(100% - 32px);max-width:960px;max-height:none;overflow:visible;}
.vmodal::backdrop{background:rgba(5,3,10,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.vmodal[open] .vmodal-inner{animation:mvVIn .4s var(--mv-ease);}
@keyframes mvVIn{from{opacity:0;transform:translateY(20px) scale(.98);}to{opacity:1;transform:none;}}
.vmodal-inner{position:relative;}
.vmodal-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--mv-radius-md);overflow:hidden;background:#000;box-shadow:0 40px 80px -20px rgba(0,0,0,.7);}
.vmodal-frame iframe{width:100%;height:100%;border:0;}
.vmodal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;}
.vmodal-foot h3{font-size:1.05rem;font-weight:800;max-width:60ch;}
.vmodal-close{position:absolute;top:-54px;right:0;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;transition:background .25s var(--mv-ease),transform .35s var(--mv-ease);}
.vmodal-close svg{width:18px;height:18px;}
.vmodal-close:hover{background:rgba(255,255,255,.24);transform:rotate(90deg);}

/* ============================ RESPONSIVE ========================== */
@media(max-width:900px){
  .sm-hero-grid{grid-template-columns:1fr;}
  .sm-hero{align-items:flex-end;}
  .sm-hero-frame{order:-1;}
}
@media(max-width:760px){
  .sm-hero-copy h1{font-size:clamp(1.8rem,8vw,2.5rem);-webkit-line-clamp:3;}
  .sm-hero-actions .btn{padding:12px 22px;font-size:.84rem;}
  .sm-search{width:100%;}
  .sm-grid{gap:24px 16px;}
  .vmodal-close{top:-50px;}
  .vmodal-foot .btn{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .sm-play{animation:none;}
  .sm-hero-frame,.sm-hero-frame img,.sm-thumb,.sm-thumb img{transition:none;}
  .vmodal[open] .vmodal-inner{animation:none;}
}