/* ==========================================================================
   VIDEO · reproductor de portada
   Archivos relacionados: js/video.js (comportamiento). Usa las variables de
   color de gallery.css (--accent, --accent-hover, --caption-color).

   Estructura de clases (la crea video.js):
     .vid          contenedor
       .vid__stage   marco con proporción fija (--ratio, por defecto 16/9)
         .vid__video   el vídeo
         .vid__ctl     botones inferiores derechos: sonido y pantalla completa
         .vid__play    botón de play grande (solo si el navegador bloquea el inicio)
         .vid__toast   aviso de autoría (clic derecho)
       .vid__caption título bajo el vídeo
   ========================================================================== */

.vid{margin:0 auto;max-width:1280px}
.vid__stage{position:relative;width:100%;aspect-ratio:var(--ratio,16/9);max-height:var(--max-h,var(--stage-max-h));background:#000;overflow:hidden}
.vid__video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;-webkit-user-drag:none}

/* Pantalla completa: el vídeo se ve entero, sobre fondo negro. */
.vid__stage:fullscreen{max-height:none;aspect-ratio:auto}
.vid__stage:fullscreen .vid__video{object-fit:contain}
.vid__stage:-webkit-full-screen{max-height:none;aspect-ratio:auto}
.vid__stage:-webkit-full-screen .vid__video{object-fit:contain}

/* Botones: iconos naranja sobre una caja oscura, igual que el contador de la galería. */
.vid__ctl{position:absolute;right:6px;bottom:16px;z-index:2;display:flex;gap:2px;background:var(--count-bg)}
.vid__btn{appearance:none;border:0;background:none;padding:6px;color:var(--icon);cursor:pointer;line-height:0;transition:color .15s ease}
.vid__btn:hover,.vid__btn:focus-visible{color:var(--accent-hover)}
.vid__btn:focus-visible{outline:2px solid var(--icon);outline-offset:-2px}
.vid__btn svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square;stroke-linejoin:miter}

/* Play grande centrado: oculto salvo que el inicio automático falle (.is-on). */
.vid__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;display:none;
           width:84px;height:84px;border-radius:50%;background:var(--count-bg)}
.vid__play.is-on{display:block}
.vid__play svg{width:40px;height:40px;margin:auto;fill:currentColor;stroke:none}

.vid__caption{margin:10px 0 0;color:var(--caption-color);font:var(--fs-caption)/1.4 var(--font);letter-spacing:var(--ls-caption)}
.vid__toast{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;
            padding:10px 16px;border-radius:3px;font:14px/1.3 var(--font);opacity:0;pointer-events:none;transition:opacity .25s}
.vid__toast.is-on{opacity:1}

/* Modo ficha (controls:true): el vídeo se ve entero, sin recortes, sobre fondo negro. */
.vid--film .vid__video{object-fit:contain;cursor:default}
.vid--film .vid__stage{max-height:none}