/* =============================================================================
   componentes/lightbox.css — Lightbox (Fancybox v4)  (componentes/_lightbox.php)
   -----------------------------------------------------------------------------
   Aprovechar la pantalla: vídeos y fotos tan grandes como quepan.
   ============================================================================= */

/* VÍDEOS. Fancybox fija la caja en 960x540 px:
     .fancybox__carousel .fancybox__slide.has-video .fancybox__content{width:960px;height:540px}
   En un monitor de 27" eso deja el vídeo en el centro rodeado de negro. Aquí se pide la caja
   16:9 MÁS GRANDE QUE QUEPA: se aspira a 1920 y los max-width/max-height que ya trae Fancybox
   la recortan; con aspect-ratio y height:auto, al recortar por alto el navegador recalcula el
   ancho y la proporción se mantiene (nada de bandas negras dentro del reproductor).
   No se fuerza pantalla completa a propósito: sigue siendo una ventana, con su botón por si
   alguien la quiere.

   ⚠ TODOS los selectores de este bloque llevan `.fancybox__container` delante Y NO SE PUEDE
   QUITAR. La hoja de Fancybox se carga desde el CDN al FINAL del <body> (la trae
   componentes/_lightbox.php), o sea DESPUÉS de este fichero: a igualdad de especificidad gana
   la suya por ir la última, y estas reglas no hacían absolutamente nada. Con el ancestro
   delante suman una clase más y ganan, sin depender del orden de carga.
   Comprobado: sin él, el vídeo salía exactamente a 960px, su valor por defecto. */
.fancybox__container .fancybox__carousel .fancybox__slide.has-video .fancybox__content,
.fancybox__container .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content,
.fancybox__container .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content {
    width:1920px; height:auto; aspect-ratio:16/9;
}

/* EL VISOR APROVECHA TODA LA PANTALLA.
   De serie, cada diapositiva reserva 64px arriba/abajo y 100px a los lados (para que las
   flechas no pisen el contenido), y con la tira de miniaturas abajo lo que queda para la foto
   es bastante menos de lo que parece. Se recorta ese marco y, para que siga sin haber solapes,
   las flechas se pegan al borde: ocupan de 8 a 56px, justo dentro del hueco que se deja.
   Solo se toca ESCRITORIO: en móvil Fancybox ya deja 8px a los lados y las flechas están
   pegadas al borde, así que no hay nada que recuperar. */
@media all and (min-width:1024px) {
    .fancybox__container .fancybox__slide { padding:56px 64px 16px; }
    .fancybox__container .fancybox__carousel .fancybox__nav .carousel__button.is-prev { left:8px; }
    .fancybox__container .fancybox__carousel .fancybox__nav .carousel__button.is-next { right:8px; }
}

/* FOTOS: que llenen el hueco disponible.
   Fancybox limita la imagen a su TAMAÑO REAL (max-width/max-height), así que una foto se
   quedaba pequeña en el centro de un monitor grande por mucho marco que se le quitara. Con
   width/height al 100% y object-fit:contain crece hasta llenar el hueco sin deformarse.
   OJO AL PRECIO: esto AMPLÍA por encima del original y una foto pequeña se ve blanda. Las de
   /comun/imagenes/tiendas/ son de 600x400 medidas, así que en un monitor grande el estirón es
   de más del doble. La solución de verdad para esas es subirlas más grandes; quitar estas dos
   reglas devuelve el comportamiento de "no ampliar nunca más allá del original". */
.fancybox__container .fancybox__slide.has-image .fancybox__content { width:100%; height:100%; }
.fancybox__container .has-image[data-image-fit=contain] .fancybox__image {
    width:100%; height:100%; object-fit:contain;
}