/* === VODs Carousel — ALL‑IN‑ONE CSS ===
   - fixes oversized cards (explicit item width)
   - keeps white arrow buttons (text ‹ ›)
   - includes darker scrollbar (WebKit + Firefox)
   - no pseudo elements required
================================================ */
.vods-carousel{ position: relative; }

.vods-carousel .track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 0 10px;
}

/* Scrollbar (dark) */
.vods-carousel .track{ scrollbar-color:#121a16 #0a0f0d; scrollbar-width: thin; }        /* Firefox */
.vods-carousel .track::-webkit-scrollbar{ height:8px }                                   /* WebKit */
.vods-carousel .track::-webkit-scrollbar-track{ background:#0a0f0d }
.vods-carousel .track::-webkit-scrollbar-thumb{
  background:#121a16; border-radius:8px; border:1px solid #0f1512;
}
.vods-carousel .track::-webkit-scrollbar-thumb:hover{ background:#0e1613 }

/* Each card keeps a reasonable width so items don't become full-width */
.vods-carousel .item{
  flex:0 0 auto;
  width:clamp(320px, 52vw, 560px);    /* <= THIS prevents the "giant VOD" issue */
  scroll-snap-align:start;
}

/* Player wrapper */
.vods-carousel .player{
  aspect-ratio:16/9;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--panel-2);
}

/* Round nav buttons with visible white arrows (using the text inside) */
.vods-carousel .nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(11,15,13,.7);
  border:1px solid var(--border);
  width:40px; height:40px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
  color:#fff;             /* white arrows */
  font-size:22px;         /* visible size for the ‹ › */
  line-height:1;
  user-select:none;
}
/* avoid old pseudo-chevrons if present */
.vods-carousel .nav::before{ content:none !important; }

.vods-carousel .nav:hover{ background:rgba(11,15,13,.9); transform:translateY(-50%) scale(1.06); }
.vods-carousel .nav:active{ transform:translateY(-50%) scale(0.98); }

.vods-carousel .nav.prev{ left:-6px }
.vods-carousel .nav.next{ right:-6px }

@media(max-width:700px){
  .vods-carousel .nav{ display:none; }
}