/* carrusel amb scroll horitzontal i targetes 9:16 */
.cv-video-carousel{position:relative; overflow:hidden; padding:8px}
.cv-video-carousel .slides{
  display:grid; grid-auto-flow:column; gap:16px;
  grid-auto-columns: calc(100% / 3);     /* 3 targetes per vista en desktop */
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
}
.cv-video-carousel .slide{ scroll-snap-align:start; position:relative; aspect-ratio:9/16;
  border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.cv-video-carousel .cover{width:100%; height:100%; background-size:cover; background-position:center; display:grid; place-items:center; position:relative}
.cv-video-carousel .play{
  width:64px; height:64px; border-radius:999px; border:none; background:rgba(255,255,255,.9); cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="25,18 48,32 25,46" fill="black"/></svg>') center/45% no-repeat;
}
.cv-video-carousel .caption{
  position:absolute; left:10px; bottom:10px; right:10px;
  font-size:14px; font-weight:600; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6);
}

/* responsive */
@media (max-width: 1024px){ .cv-video-carousel .slides{ grid-auto-columns:50%; } } /* 2 per vista */
@media (max-width: 767px){ .cv-video-carousel .slides{ grid-auto-columns:100%; } } /* 1 per vista */

/* Lightbox */
.cv-lightbox[hidden]{ display:none !important; }
.cv-lightbox{ position:fixed; inset:0; z-index:9999; }
.cv-lightbox-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); }
.cv-lightbox-dialog{
  position:absolute; inset:5%; background:#000; border-radius:12px; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr;
}
.cv-lightbox .cv-close{
  position:absolute; top:10px; right:14px; z-index:2; width:36px; height:36px;
  border:none; border-radius:999px; background:rgba(255,255,255,.9); cursor:pointer; font-size:22px; line-height:1;
}
.cv-lightbox .cv-video-wrap{ width:100%; height:100%; }
@media (min-width: 1025px){ .cv-lightbox-dialog{ inset:10% 12%; } }