/* =============================================================================
   componentes/video-youtube.css — Vídeo de YouTube como miniatura  (componentes/_video-youtube.php)
   -----------------------------------------------------------------------------
   La imagen del vídeo llenando su caja .ratio y un botón de play encima, al estilo del de
   YouTube. Al pulsar, ui.js la cambia por el iframe.
   ============================================================================= */

.ss-video { display:block; overflow:hidden; background:#000; }

/* hqdefault.jpg es 4:3 con franjas negras arriba y abajo: cover las recorta en la caja 16:9. */
.ss-video img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }

.ss-video-play { position:absolute; inset:0; margin:auto; width:68px; height:48px; border-radius:14px;
                 display:flex; align-items:center; justify-content:center;
                 background:rgba(0,0,0,.7); color:#fff; font-size:1.35rem;
                 transition:background-color .2s ease, transform .2s ease; }

.ss-video:hover img,
.ss-video:focus-visible img { transform:scale(1.03); }
.ss-video:hover .ss-video-play,
.ss-video:focus-visible .ss-video-play { background:var(--ss-first-color); transform:scale(1.08); }

@media (prefers-reduced-motion: reduce) {
    .ss-video img, .ss-video-play { transition:none; }
    .ss-video:hover img, .ss-video:focus-visible img { transform:none; }
}