@charset "utf-8";
/* VIDEO LIBRARY - proposta més vistosa (sense canviar HTML/JS) */

/* Wrapper general (abans estava display:none) */
#container,.container{width:100%;max-width:980px;margin:0 auto;height:auto;display:block;clear:both;padding:12px 10px;} /* ← perquè es vegi */

/* Grup */
.grupyoutube{max-width:980px;margin:0 auto;padding:10px 0 30px;}
.centrat{margin:0 auto;padding:10px 0 20px;}

/* Si tens un títol abans, pots donar-li aire (opcional) */
/* .grupyoutube h3{margin:0 0 10px;font-size:18px;} */

/* Carrusel/llista: targetes més “premium” */
div.videos-cont div#container div.slick-slider{height:auto;}

/* Targeta vídeo */
.video{position:relative;margin:0 10px;max-width:220px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#ffffff, #f5f7fb);box-shadow:0 8px 18px rgba(0,0,0,.10);transform:translateZ(0);transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;}

/* Imatge */
.video img{display:block;width:100%;height:140px;object-fit:cover;border-radius:0;filter:saturate(1.05) contrast(1.03);} /* més presència */ /* la targeta ja retalla */

/* L’enllaç a l’iframe: assegura que omple la targeta */
.video a.mfp-iframe{display:block;border-radius:16px;}

/* Capa play + efecte */
.video span{display:block;position:absolute;inset:0;border-radius:16px;cursor:pointer;opacity:1;background:radial-gradient(circle at 50% 52%, rgba(0,0,0,.35) 0 40%, rgba(0,0,0,.08) 55%, rgba(0,0,0,0) 70%),url(https://www.instop.es/images/icons/yt.svg) no-repeat;background-size:auto, 44px;background-position:center, center;transition:background .18s ease, opacity .18s ease;} /* overlay suau + icona */

/* Hover “més viu” */
.video:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.16);}
.video:hover img{filter:saturate(1.15) contrast(1.08);}
.video:hover span{background:radial-gradient(circle at 50% 52%, rgba(214,0,0,.40) 0 42%, rgba(0,0,0,.08) 58%, rgba(0,0,0,0) 72%),url(https://www.instop.es/images/icons/yt.svg) no-repeat;background-size:auto, 48px;background-position:center, center;}

/* Focus accessible */
.video a.mfp-iframe:focus-visible{outline:3px solid rgba(214,0,0,.55);outline-offset:3px;border-radius:16px;}

/* Miniatures globals si encara les uses */
img.carousel-image{max-height:140px;}

/* ---- Magnific Popup (es manté) ---- */
.mfp-with-fade .mfp-content,.mfp-with-fade .mfp-arrow, .mfp-with-fade.mfp-bg{opacity:0;-webkit-backface-visibility:hidden;transition:opacity .3s ease-out;}
.mfp-with-fade.mfp-ready .mfp-content,.mfp-with-fade.mfp-ready .mfp-arrow{opacity:1;}
.mfp-with-fade.mfp-ready.mfp-bg{opacity:.85;}
.mfp-with-fade.mfp-removing .mfp-content,.mfp-with-fade.mfp-removing .mfp-arrow, .mfp-with-fade.mfp-removing.mfp-bg{opacity:0;}

/* Responsive: targetes més còmodes */
@media (max-width:768px){#container,.container{padding:10px 6px;}.video{max-width:260px;margin:0 8px;border-radius:14px;}.video img{height:150px;}.video span{border-radius:14px;background-size:auto, 46px;}}
@media (max-width:480px){.video{max-width:85vw;margin:0 6px;}.video img{height:170px;}}