/*
 * La galería.
 *
 * Rejilla de columnas de ancho igual y alto libre: cada foto conserva su
 * proporción y la fila se estira a la más alta. No es un mosaico de albañilería
 * —las columnas no se desfasan— porque un mosaico de verdad necesita JavaScript
 * midiendo alturas, y en una galería paginada eso hay que rehacerlo en cada
 * página. Con `grid` no hace falta nada, y en un móvil la caída a una columna
 * sale sola.
 *
 * El número de columnas lo escribe PHP en un token del propio bloque, no en una
 * clase: así se puede elegir por galería sin que el tema tenga que traer una
 * clase por cada número posible.
 *
 * @package OwariTema
 */

.owari-galeria {
	display: grid;
	grid-template-columns: repeat(var(--owari-galeria-columnas, 3), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30, 1rem);
}

/*
 * El bloque de MDB que abre la imagen grande es el contenedor entero, así que
 * cada figura tiene que decir que se puede pulsar; si no, el cursor no cambia y
 * nada invita a hacerlo.
 */
.owari-galeria__pieza {
	position: relative;
	margin: 0;
	cursor: zoom-in;
	box-shadow: var(--wp--preset--shadow--nivel-2);
	border-radius: var(--mdb-border-radius);
	overflow: hidden;
	background-color: var(--mdb-tertiary-bg);
}

/*
 * `aspect-ratio` y `object-fit` juntos: sin ellos, una foto apaisada y una
 * vertical en la misma fila dejan un hueco debajo de la corta. Recortar por el
 * centro es lo que hace cualquier galería y lo que la gente espera.
 */
.owari-galeria__pieza img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.owari-galeria__pieza:hover img,
.owari-galeria__pieza:focus-within img {
	transform: scale(1.04);
}



/*
 * En móvil, dos columnas y no una.
 *
 * Una sola columna convierte una galería de veinte fotos en un desplazamiento
 * interminable; con dos se ve el conjunto, que es de lo que va una galería.
 */
@media (max-width: 781px) {
	.owari-galeria {
		grid-template-columns: repeat(min(2, var(--owari-galeria-columnas, 3)), minmax(0, 1fr));
	}
}

/* El paginador reutiliza el del tema; aquí solo se centra y se le da aire. */
.owari-galeria__paginas {
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
	justify-content: center;
}

.owari-galeria-vacia {
	color: var(--mdb-secondary-color);
	font-style: italic;
}

/*
 * Las imágenes que no son de esta página.
 *
 * Van en el mismo contenedor para que el lightbox las cuente y se pueda seguir
 * avanzando más allá del final de la página, pero no se pintan ni se descargan:
 * no llevan `src`. El atributo `hidden` ya las esconde por sí solo —esto es el
 * cinturón por si alguna hoja de terceros se pone a repartir `display`—.
 */
.owari-galeria img[hidden] {
	display: none;
}

/*
 * Al llegar por un enlace de página, que la galería quede a la vista.
 *
 * El ancla lleva el navegador al borde exacto del bloque, y con la cabecera
 * pegajosa puesta eso deja la primera fila justo debajo del menú, tapada. El
 * margen de desplazamiento le reserva el hueco; sin cabecera fija basta con un
 * respiro para que no quede pegada al canto de la pantalla.
 */
.owari-galeria-ancla {
	scroll-margin-top: 1.5rem;
}

body:has(.owari-menu-pos--fijo) .owari-galeria-ancla {
	scroll-margin-top: 6rem;
}

/*
 * El nombre de la foto, encima de ella.
 *
 * Va sobre un degradado que se oscurece hacia abajo, no sobre una banda opaca:
 * la banda corta la imagen en dos y se lleva un trozo de la foto; el degradado
 * apoya el texto donde hace falta y deja ver el resto. Es la misma idea que la
 * `mask` de MDB, hecha sobre la propia figura para no envolver nada.
 *
 * Con relleno generoso arriba: el degradado necesita recorrido para llegar a
 * transparente sin que se vea el corte.
 *
 * `pointer-events: none` porque la figura entera abre el lightbox: el nombre no
 * puede ser un agujero donde el clic no hace nada.
 */
.owari-galeria__nombre {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 2.75rem 1rem 0.9rem;
	color: #fff;
	font-weight: 500;
	line-height: 1.3;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

/*
 * O debajo, para quien prefiera la foto sin nada encima.
 *
 * Ahí el nombre es un pie de foto de los de toda la vida: gris, pequeño y fuera
 * de la imagen.
 */
/*
 * Con el nombre debajo, la figura tiene que crecer para hacerle sitio.
 *
 * La imagen lleva `height: 100%` para llenar la figura cuando el nombre va
 * encima —flotando, sin ocupar—. Puesto debajo eso se vuelve en contra: la
 * imagen se queda con toda la altura, el nombre cae fuera del recuadro y el
 * `overflow: hidden` que redondea las esquinas se lo lleva por delante. Se
 * veia como si el estilo no hiciera nada.
 *
 * En columna, la imagen toma su altura de la proporcion y el nombre la suya,
 * y la figura mide lo que suman los dos.
 */
.is-style-owari-nombre-debajo .owari-galeria__pieza {
	display: flex;
	flex-direction: column;
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/*
 * La tarjeta pasa a ser la FOTO, no la figura.
 *
 * Con el nombre encima, el recuadro redondeado envuelve a los dos y el
 * conjunto es la tarjeta. Debajo no: el nombre va fuera, como el pie de una
 * foto enmarcada, asi que el redondeo y el relieve tienen que viajar de la
 * figura a la imagen. Si se quedan en la figura, el nombre acaba dentro del
 * recuadro y parece una franja pegada a la foto.
 */
.is-style-owari-nombre-debajo .owari-galeria__pieza img {
	height: auto;
	border-radius: var(--mdb-border-radius);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

.is-style-owari-nombre-debajo .owari-galeria__nombre {
	position: static;
	padding: 0.6rem 0.15rem 0;
	color: var(--mdb-secondary-color);
	font-size: var(--wp--preset--font-size--pequeno, 0.875rem);
	font-weight: 400;
	background-image: none;
}

/*
 * O sin nombre ninguno, cuando las fotos hablan solas.
 *
 * `display: none` y no borrarlo del marcado: el nombre sigue estando para
 * quien navega con lector de pantalla si algun dia hace falta, y cambiar de
 * estilo no obliga a volver a pintar la galeria.
 */
.is-style-owari-sin-nombre .owari-galeria__nombre {
	display: none;
}