/* ==========================================================================
   Video page — Figma "10. Build Video" (Blog Video Desktop / Mobile Layout)
   Builds on css/style.css (shared tokens, nav, buttons, feature rows, FAQ,
   CTA, footer). This file only adds the page-specific pieces.
   ========================================================================== */

/* ---------- Hero (centered, warm background) ---------- */
.vhero{
  position:relative;
  background:#000 url('../assets/img/hero-bg.jpg') no-repeat top center;
  background-size:cover;
  overflow:hidden;
}
.vhero-inner{
  max-width:1048px;
  margin-inline:auto;
  padding:64px clamp(20px,5vw,40px) 110px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* Heading scales with the viewport so the forced two-line break
   ("Watch Bible Video Stories" / "and Understand Scripture") fits on
   every non-mobile breakpoint without a third line. */
.vhero .display{font-size:clamp(44px,5.8vw,63px);line-height:1.1;margin-bottom:40px;}
.vhero .display em{font-size:clamp(50px,6.6vw,72px);}
.vhero .lead{margin-bottom:40px;max-width:1008px;}
.store-badge img{height:56px;width:auto;display:block;}

/* Forced hero line break — desktop only. Tablet and mobile wrap naturally. */
.br-desktop{display:none;}
@media (min-width:1025px){ .br-desktop{display:inline;} }

/* ---------- Video grid strip + caption ---------- */
.video-strip{background:#000;overflow:hidden;}
.video-strip-track{
  width:max-content;
  position:relative;left:50%;
  transform:translateX(-50%);
}
.video-strip-track img{height:200px;width:auto;max-width:none;display:block;}
.video-strip .container{padding-top:50px;}
.video-strip .lead{max-width:980px;margin-inline:auto;}

/* ---------- Feature rows: visuals bleed to the viewport edge here ---------- */
.vpage .feature-visual.right{right:0;}
.vpage .feature-row{margin-block:25px;}
.vpage .feature-row:first-of-type{margin-top:60px;}

@media (min-width:1100px) and (max-width:1280px){
  .vpage .feature-copy{max-width:480px;}
}

/* ==========================================================================
   MOBILE (Figma "Faithe - Blog Video Mobile Layout", 375px)
   ========================================================================== */
@media (max-width:760px){
  .vhero{
    background:#000 url('../assets/img/vm-hero-bg.jpg') no-repeat top center;
    background-size:100% auto;
  }
  .vhero-inner{padding:40px 20px 40px;max-width:100%;}
  .vhero .display{font-size:36px;line-height:44px;margin-bottom:32px;}
  .vhero .display em{font-size:42px;}
  .vhero .lead{margin-bottom:32px;}
  .store-badge img{height:48px;}

  .video-strip-track img{height:150px;}
  .video-strip .container{text-align:center;padding:40px 0;}
  .video-strip .lead.center-text{text-align:center;}

  .vpage .feature-row{margin-block:0;padding-inline:0;}
  .vpage .feature-row:first-of-type{margin-top:0;}
  .vpage .feature-copy{padding-inline:20px;}
  .vpage .feature-visual img{width:100%;display:block;}
}