/*
Visor de foto: la imagen grande sobre la propia página, sin navegar (Andi, 07-09).
Colores, tiempos y curvas salen de tokens.css; el fondo lo pone `.a-oscuro`, que ya es del sitio.
*/

.a-visor {
	position: fixed;
	inset: 0;
	/* Por encima de la cabecera (300) y de la foto flotante de museo (200); por debajo del cursor
	   propio (9000) y del velo de transición (9500), que tienen que seguir pintando encima. */
	z-index: 400;
	display: grid;
	/* `minmax(0, 1fr)`: con el `auto` implícito la fila crece hasta el alto intrínseco del archivo
	   y la imagen se sale de la ventana en vez de encogerse. */
	grid-template-rows: auto minmax(0, 1fr);
	gap: var(--s-1);
	padding: var(--margen);
	opacity: 0;
	visibility: hidden;
	/* `visibility` con retardo en vez de `display`: el elemento vive siempre maquetado, así que no
	   hay que forzar reflow entre mostrar y animar (trampa 6 del proyecto). */
	transition: opacity var(--ms-normal) var(--curva-salida), visibility 0s linear var(--ms-normal);
}
.a-visor--abierto {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--ms-normal) var(--curva-salida), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	.a-visor,
	.a-visor--abierto { transition: none; }
}

/* Sin `aspect-ratio` y con `contain`: la caja la fija el archivo, así que la obra NO se recorta
   (regla 4 del proyecto). Ni `mix-blend-mode`, que devolvería su negativo. */
.a-visor__imagen {
	place-self: center;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* El reset del tema padre pinta TODO `button` de rosa con borde y le devuelve el fondo al pasar por
   encima: hay que reponer también `:hover` y `:focus`, o ganan por especificidad. */
.a-visor__cerrar,
.a-visor__cerrar:hover,
.a-visor__cerrar:focus {
	justify-self: end;
	/* Por encima de la foto: ampliada con los dedos la tapa, y sin escape en táctil sería el único cierre. */
	position: relative;
	z-index: 1;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

/* La foto que abre el visor no es un enlace: la señal de que se puede pulsar la da el cursor propio
   por `data-cursor`, y en táctil el propio dedo. Nada de `:hover` sobre la imagen (regla 4). */