/* Video cards: Haseef's YouTube videos on the pages they match (2026-10-17).
   Click to play: the thumbnail is ours and YouTube's player only loads after a tap (js/video.js),
   so a page with a video costs no third party requests until someone wants to watch.
   Placed by geo-seo-claude/scripts/bb_videos.py. */
.bbv{margin:32px 0 36px;display:grid;grid-template-columns:minmax(0,250px) 1fr;gap:28px;align-items:center;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-card);padding:18px}
.bbv-stage{position:relative;aspect-ratio:9/16;border-radius:var(--r-sm);overflow:hidden;background:#000}
.bbv.bbv-wide{grid-template-columns:1fr;gap:18px}
.bbv-wide .bbv-stage{aspect-ratio:16/9}
.bbv-play{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:#000;cursor:pointer;display:block}
.bbv-play img{width:100%;height:100%;object-fit:cover;transition:transform var(--t),opacity var(--t)}
.bbv-play:hover img{transform:scale(1.03);opacity:.88}
.bbv-btn{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:var(--blue);
  display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,156,198,.75);transition:transform .15s ease}
.bbv-play:hover .bbv-btn,.bbv-play:focus-visible .bbv-btn{transform:scale(1.08)}
.bbv-btn svg{width:22px;height:22px;margin-left:3px;fill:#04121a}
.bbv-len{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.74);color:#fff;font:700 12px/1 var(--body);
  padding:6px 8px;border-radius:6px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.bbv iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bbv figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.bbv-k{font:700 12px/1 var(--body);text-transform:uppercase;letter-spacing:.16em;color:var(--blue)}
.bbv-t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.3vw,26px);line-height:1.05;
  color:var(--text);text-wrap:balance}
.bbv .bbv-d{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.bbv .bbv-yt{font-size:14px;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.bbv-band{padding:clamp(36px,6vw,64px) 0}
.bbv-band .bbv{max-width:820px;margin:0 auto}
@media (max-width:640px){
  .bbv{grid-template-columns:1fr;gap:16px;padding:14px}
  .bbv-stage{width:100%;max-width:300px;margin:0 auto}
  .bbv-wide .bbv-stage{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .bbv-play img,.bbv-btn{transition:none}
  .bbv-play:hover img{transform:none}
}