/* =========================================================================
   Video guide — real YouTube videos: thumbnails, rows and the lightbox.
   Loaded on top of page-video.css.
   ========================================================================= */

/* Thumbnails inside the existing cards */
.featured-card.has-thumb,.vcard.has-thumb{background:#1C110C}
.featured-card .thumb,.vcard .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.featured-card:hover .thumb,.vcard:hover .thumb{transform:scale(1.04)}
.featured-card.has-thumb::after,.vcard.has-thumb::after{z-index:1}
.featured-card:focus-visible,.vcard:focus-visible,.video-row:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

/* By-category rows with a thumbnail */
.video-row{grid-template-columns:120px 1.4fr 80px 48px}
.video-row .row-thumb{position:relative;display:block;width:120px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--oat)}
.video-row .row-thumb img{width:100%;height:100%;object-fit:cover}
.video-row .row-dot{position:absolute;left:8px;top:8px;width:10px;height:10px;border-radius:999px;box-shadow:0 0 0 1.5px rgba(241,232,220,.85)}
.video-row:hover .plus{background:var(--ground);color:var(--cream)!important;border-color:var(--ground)!important}
.video-row .plus{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.chapter.sec-cream .rows{border-top-color:var(--hairline)}
.chapter.sec-cream .row-item{border-bottom-color:var(--hairline)}
.chapter.sec-cream .row-item:hover{background:rgba(42,26,20,0.04)}
@media (max-width:720px){
  .video-row{grid-template-columns:88px 1fr;gap:14px}
  .video-row .row-thumb{width:88px}
  .video-row .time{grid-column:2/3;text-align:left}
  .video-row .sub{grid-column:auto}
}

/* Lightbox */
.vmodal[hidden]{display:none!important}
.vmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.vmodal-backdrop{position:absolute;inset:0;background:rgba(18,11,8,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:vfade .25s ease}
.vmodal-box{position:relative;width:min(1100px,100%);animation:vrise .35s cubic-bezier(.2,.8,.2,1)}
.vmodal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;color:var(--cream)}
.vmodal-title{font-family:var(--display);text-transform:uppercase;letter-spacing:-0.005em;font-size:clamp(15px,1.8vw,20px);line-height:1.1}
.vmodal-close{flex:none;width:42px;height:42px;border-radius:999px;border:1px solid rgba(241,232,220,.35);display:flex;align-items:center;justify-content:center;color:var(--cream);transition:background-color .25s ease}
.vmodal-close:hover{background:rgba(241,232,220,.1)}
.vmodal-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--mid);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vmodal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
body.vmodal-open{overflow:hidden}
@keyframes vfade{from{opacity:0}to{opacity:1}}
@keyframes vrise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .vmodal-backdrop,.vmodal-box{animation:none} }

/* Only the 480x360 fallback carries baked-in letterbox bars; the 1280x720
   thumbnail is already 16:9 and must not be blown up. */
.vcard .thumb.yt-lb{transform:scale(1.34)}
.vcard:hover .thumb.yt-lb{transform:scale(1.4)}
.featured-card .thumb,.vcard .thumb,.video-row .row-thumb img{image-rendering:auto}