/* ============================================================
   VIDEOS PAGE — extends site-base.css
   ============================================================ */

/* active nav state (shared chrome + bo-hero + responsive now in site-base.css) */

/* page-specific bo-hero overrides */
.bo-hero h1{text-wrap:balance}
.bo-actions{margin-top:2.2rem}

/* ---- category filter tabs (mirrors blog .cat-pills look) ---- */
.vid-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-bottom:clamp(2rem,4vw,2.8rem)}
.vid-tab{
  display:inline-block;padding:.55rem 1.15rem;border-radius:999px;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;line-height:1;
  background:#fff;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.vid-tab:hover{color:var(--teal-dark);border-color:var(--line-gold);transform:translateY(-2px)}
.vid-tab.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.vid-tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---- video facade grid (click-to-load, no eager iframes) ---- */
.vids{padding:clamp(4rem,8vw,6.5rem) 0;background:var(--paper)}
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.yt-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.yt-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:var(--line-gold)}
.yt-thumb{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border:0;padding:0;cursor:pointer;background:#06222F;overflow:hidden;
}
.yt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.yt-card:hover .yt-thumb img{transform:scale(1.05)}
.yt-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(5,30,42,0) 55%, rgba(5,30,42,.5) 100%);
}
.yt-thumb.playing::after{display:none}
.yt-play{
  position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--navy);
  display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.45);
  transition:transform .3s ease;
}
.yt-thumb:hover .yt-play,.yt-thumb:focus-visible .yt-play{transform:translate(-50%,-50%) scale(1.12)}
.yt-thumb:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.yt-play svg{width:20px;height:20px;margin-left:3px}
.yt-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.yt-card h3{font-size:.98rem;font-weight:700;line-height:1.45;padding:1rem 1.2rem 1.2rem;flex:1}
@media (max-width:1080px){.vid-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.vid-grid{grid-template-columns:1fr}}