/* NBTI Hub, the latest sermon and Bible study block. Design O.
   Scoped under .nbtivid so nothing here can reach the theme. */

.nbtivid{
  --nv-navy:#161D33;
  --nv-gold:#C9A24B;
  --nv-cream:#F6F0E2;
  background:var(--nv-navy);
  color:#fff;
  font-family:Lato,system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:26px 20px 28px;
  /* The shortcode usually sits inside a padded theme container. This pulls the
     band back out to the full window. 100vw counts the scrollbar on desktop
     Windows, which would push the page sideways, so the script overwrites
     --nv-vw with the real content width and 100vw is only the fallback. */
  --nv-vw:100vw;
  width:var(--nv-vw);
  max-width:var(--nv-vw);
  margin:0 calc(50% - (var(--nv-vw) / 2));
  overflow-x:hidden;
}
/* The band itself needs this as much as its children do: the width below is
   set in pixels by script, and without border-box the band's own side
   padding sits outside that width and pushes the page sideways. */
.nbtivid,.nbtivid *{box-sizing:border-box}
.nbtivid-in{max-width:1160px;margin:0 auto}

.nbtivid-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin:0 0 18px}
.nbtivid-head h2{font-family:"Playfair Display",Georgia,serif;font-weight:600;
  font-size:clamp(21px,2.6vw,27px);margin:0;color:#fff}
.nbtivid-all{font:700 10.5px/1 Lato,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nv-gold);text-decoration:none;border-bottom:1px solid var(--nv-gold);padding-bottom:4px}

.nbtivid-rows{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.nbtivid-rows{grid-template-columns:1fr 1fr;gap:26px}}

.nbtivid-row{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center}
@media(min-width:420px){.nbtivid-row{grid-template-columns:200px 1fr;gap:16px}}
@media(min-width:760px){.nbtivid-row{grid-template-columns:240px 1fr}}

/* The thumbnail is a button, not a link: pressing it swaps the player in on
   this page. A link would send the visitor to YouTube, which is the one thing
   this block must not do. */
.nbtivid-th{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;
  border-radius:6px;overflow:hidden;background:#0e1424;cursor:pointer}
.nbtivid-th img{display:block;width:100%;height:100%;object-fit:cover}
.nbtivid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.nbtivid-play::after{content:"";border-left:14px solid var(--nv-navy);
  border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.nbtivid-th:hover .nbtivid-play{background:#fff;box-shadow:0 0 0 4px rgba(201,162,75,.55),0 6px 18px rgba(0,0,0,.4)}
.nbtivid-th:focus-visible{outline:2px solid var(--nv-gold);outline-offset:3px}

.nbtivid-th iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.nbtivid-lab{font:900 10.5px/1 Lato,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nv-gold)}
.nbtivid-txt h3{font-family:"Playfair Display",Georgia,serif;font-weight:600;
  font-size:clamp(17px,2vw,20px);margin:8px 0 4px;color:#fff;line-height:1.2}
.nbtivid-when{font:700 10px/1.4 Lato,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#98a2b8}

@media(prefers-reduced-motion:reduce){.nbtivid *{transition:none !important}}