/*
 * Galería de la ficha.
 *
 * Miniaturas al costado en escritorio y debajo en móvil. La lupa se activa con
 * el puntero y sólo cuando el archivo tiene resolución para acercar; el toque
 * abre la vista ampliada, que es lo que sirve en un teléfono.
 */

.pipol-galeria {
	display: grid;
	gap: 12px;
}

/* ---------- Miniaturas ---------- */

.pipol-galeria__miniaturas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
	order: 2;
}

.pipol-galeria__miniaturas::-webkit-scrollbar {
	display: none;
}

.pipol-galeria__miniatura {
	width: 68px;
	height: 68px;
	flex-shrink: 0;
	padding: 6px;
	border: 0;
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1.5px transparent;
	transition: box-shadow .18s;
}

.pipol-galeria__miniatura img {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	mix-blend-mode: multiply;
}

.pipol-galeria__miniatura.esta-activa {
	box-shadow: inset 0 0 0 1.5px var(--pipol-tinta);
}

/* ---------- Escenario ---------- */

.pipol-galeria__escenario {
	position: relative;
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-lg);
	overflow: hidden;
	order: 1;
}

.pipol-galeria__vista {
	margin: 0;
	display: none;
	position: relative;
	aspect-ratio: 1;
}

.pipol-galeria__vista.esta-activa {
	display: block;
}

/*
 * «scale-down» y no «contain».
 *
 * Los dos respetan la proporción, pero «contain» agranda hasta llenar el
 * hueco: una foto de 250 px se pintaba a 631 y se veía deshecha. «scale-down»
 * achica cuando sobra y nunca agranda, así que cada archivo se muestra a lo
 * sumo en su tamaño real y el resto del escenario queda del color de la caja,
 * que es lo que la foto ya trae de fondo.
 *
 * El contrapeso es que una foto chica se ve chica. Eso no es un defecto del
 * CSS: es el archivo. La medida recomendada de carga está en el instructivo
 * del importador.
 */
.pipol-galeria__imagen {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	mix-blend-mode: multiply;
	cursor: zoom-in;
}

/*
 * La lupa es una capa con la imagen original a escala, posicionada donde está
 * el puntero. Sólo se pinta cuando el tema le puso la clase, que depende de que
 * el archivo tenga resolución suficiente.
 */
.pipol-galeria.tiene-lupa .pipol-galeria__vista.esta-acercada::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--pipol-lupa-imagen);
	background-repeat: no-repeat;
	background-size: 210%;
	background-position: var(--pipol-lupa-x, 50%) var(--pipol-lupa-y, 50%);
	background-color: var(--pipol-fondo-suave);
	pointer-events: none;
}

.pipol-galeria__ampliar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: var(--pipol-pastilla);
	background: var(--pipol-papel);
	color: var(--pipol-tinta);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(11, 11, 11, .12);
	transition: background .18s, color .18s;
}

.pipol-galeria__ampliar:hover {
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
}

.pipol-galeria__aviso {
	order: 3;
	margin: 0;
	font-size: 11.5px;
	color: var(--pipol-gris-tenue);
}

.pipol-galeria--vacia {
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-lg);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Vista ampliada ---------- */

.pipol-visor {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(11, 11, 11, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 16px;
}

.pipol-visor[hidden] {
	display: none;
}

.pipol-visor__lienzo {
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pipol-visor__lienzo img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: zoom-in;
	transition: transform .25s ease;
	background: var(--pipol-papel);
	border-radius: var(--pipol-radio);
}

.pipol-visor__lienzo img.esta-acercada {
	transform: scale(2.4);
	cursor: zoom-out;
}

.pipol-visor__cerrar,
.pipol-visor__flecha {
	position: absolute;
	border: 0;
	background: rgba(255, 255, 255, .1);
	color: var(--pipol-papel);
	width: 46px;
	height: 46px;
	border-radius: var(--pipol-pastilla);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s;
}

.pipol-visor__cerrar:hover,
.pipol-visor__flecha:hover {
	background: rgba(255, 255, 255, .22);
}

.pipol-visor__cerrar {
	top: 16px;
	right: 16px;
}

.pipol-visor__flecha--previa {
	left: 12px;
}

.pipol-visor__flecha--siguiente {
	right: 12px;
}

.pipol-visor__contador {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	color: rgba(255, 255, 255, .7);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

/* ---------- Escritorio ---------- */

@media (min-width: 861px) {

	/*
	 * La columna de miniaturas sólo existe si el producto tiene más de una
	 * foto. Sin esta condición, un producto con una sola imagen dejaba el
	 * escenario metido en la columna de 84 px.
	 */
	.pipol-galeria--con-rail {
		grid-template-columns: 84px 1fr;
		gap: 14px;
		align-items: start;
	}

	.pipol-galeria__rail {
		order: 1;
	}

	.pipol-galeria__miniaturas {
		flex-direction: column;
		overflow-x: visible;
		overflow-y: auto;
		max-height: 560px;
	}

	.pipol-galeria__miniatura {
		width: 84px;
		height: 84px;
	}

	.pipol-galeria__escenario {
		order: 2;
	}

	.pipol-galeria__aviso {
		grid-column: 1 / -1;
		order: 3;
	}

	.pipol-visor {
		padding: 72px;
	}

	.pipol-visor__cerrar {
		top: 24px;
		right: 24px;
	}

	.pipol-visor__flecha--previa {
		left: 24px;
	}

	.pipol-visor__flecha--siguiente {
		right: 24px;
	}
}