/* =========================================================================
   Galería fotográfica de un evento (2026-10-07)

   Dos piezas: la cuadrícula de la sección `#galeria` de la ficha, y la
   página propia de cada fotografía.

   Va en un archivo aparte y se encola solo en la ficha de un evento.
   `base.css` ya son 93 KB que se sirven en todas las páginas del sitio, y
   esto solo hace falta en una.

   **No hay visor ni modal.** Pulsar una miniatura navega a la página de la
   fotografía, que es una página de verdad: tiene su dirección, su Open Graph
   y su botón de volver atrás. El visor queda para más adelante, y no se
   echa en falta: la experiencia sin él es correcta, no degradada.

   El recorte cuadrado de las miniaturas lo hace `aspect-ratio` con
   `object-fit: cover`, no un tamaño de imagen nuevo de WordPress: registrar
   uno obligaría a regenerar la mediateca entera para una sola sección.
   ========================================================================= */

.apmv-galeria {
	margin: var(--apmv-aire-seccion) 0 var(--apmv-e7);
	padding-top: var(--apmv-e6);
	border-top: var(--apmv-filete) solid var(--apmv-gris-filete);
}

.apmv-galeria__titulo {
	margin: 0 0 var(--apmv-e2);
}

.apmv-galeria__introduccion {
	margin: 0 0 var(--apmv-e4);
	max-width: var(--apmv-medida-texto);
}

.apmv-galeria__introduccion p {
	margin: 0 0 var(--apmv-e3);
}

.apmv-galeria__introduccion p:last-child {
	margin-bottom: 0;
}

.apmv-galeria__lema {
	color: var(--apmv-verde-tinta);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-l);
	line-height: 1.35;
}

.apmv-galeria__cuenta {
	margin: 0 0 var(--apmv-e5);
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-s);
}

.apmv-galeria__cuadricula {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--apmv-e3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.apmv-galeria__item {
	max-width: none;
}

@media (min-width: 48rem) {

	.apmv-galeria__cuadricula {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--apmv-e4);
	}
}

@media (min-width: 75rem) {

	.apmv-galeria__cuadricula {
		grid-template-columns: repeat(4, 1fr);
	}
}

.apmv-galeria__enlace {
	display: block;
	position: relative;
	overflow: hidden;
	border: var(--apmv-filete) solid var(--apmv-gris-filete);
	border-radius: var(--apmv-radio);
	background: var(--apmv-papel-alterno);
	text-decoration: none;
}

.apmv-galeria__imagen {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: opacity var(--apmv-transicion);
}

.apmv-galeria__enlace:hover .apmv-galeria__imagen,
.apmv-galeria__enlace:focus-visible .apmv-galeria__imagen {
	opacity: 0.88;
}

.apmv-galeria__enlace:focus-visible {
	outline: var(--apmv-foco-grosor) solid var(--apmv-foco-color);
	outline-offset: var(--apmv-foco-separacion);
}

.apmv-galeria__retiro,
.apmv-foto__retiro {
	margin: var(--apmv-e5) 0 0;
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-xs);
	max-width: var(--apmv-medida-texto);
}

/* =========================================================================
   Página propia de una fotografía
   ========================================================================= */

.apmv-foto {
	margin: var(--apmv-e6) auto var(--apmv-e8);
	max-width: 60rem;
}

.apmv-foto__procedencia {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--apmv-e2) var(--apmv-e4);
	margin: 0 0 var(--apmv-e4);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-s);
}

.apmv-foto__rotulo {
	color: var(--apmv-gris-lectura);
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
	font-size: var(--apmv-txt-xs);
	font-weight: 600;
}

.apmv-foto__figura {
	margin: 0 0 var(--apmv-e5);
}

.apmv-foto__imagen {
	display: block;
	width: 100%;
	height: auto;
	border: var(--apmv-filete) solid var(--apmv-gris-filete);
	border-radius: var(--apmv-radio);
	background: var(--apmv-papel-alterno);
}

.apmv-foto__pie {
	margin: var(--apmv-e3) 0 0;
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-s);
	line-height: var(--apmv-interlinea-lectura);
	max-width: var(--apmv-medida-texto);
}

.apmv-foto__navegacion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--apmv-e3);
	padding: var(--apmv-e4) 0;
	border-top: var(--apmv-filete) solid var(--apmv-gris-filete);
	border-bottom: var(--apmv-filete) solid var(--apmv-gris-filete);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-s);
}

.apmv-foto__paso,
.apmv-foto__volver {
	font-weight: 600;
}

/*
 * En los extremos de la galería, «Anterior» y «Siguiente» siguen ocupando su
 * sitio pero sin enlace: así la fila no baila al pasar de una fotografía a
 * otra, y nadie pulsa un enlace que no lleva a ninguna parte.
 *
 * El color es `--apmv-gris-lectura`, no el gris del filete: con el gris claro
 * el contraste salía 1.37 sobre blanco y axe lo marcaba, con razón. Un texto
 * que informa de que no hay fotografía anterior tiene que poder leerse; que
 * «parezca desactivado» lo resuelve el peso, no un color ilegible.
 */
.apmv-foto__paso--inerte {
	color: var(--apmv-gris-lectura);
	font-weight: 400;
}

/* =========================================================================
   Compartir
   ========================================================================= */

.apmv-compartir {
	margin: var(--apmv-e6) 0 0;
}

.apmv-compartir__rotulo {
	margin: 0 0 var(--apmv-e3);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-xs);
	font-weight: 600;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--apmv-gris-lectura);
}

.apmv-compartir__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apmv-e3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.apmv-compartir__item {
	max-width: none;
}

.apmv-compartir__enlace,
.apmv-compartir__boton {
	display: inline-flex;
	align-items: center;
	padding: var(--apmv-e2) var(--apmv-e4);
	border: var(--apmv-filete) solid var(--apmv-gris-filete);
	border-radius: var(--apmv-radio-boton);
	background: var(--apmv-blanco);
	color: var(--apmv-verde-tinta);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-s);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--apmv-transicion), border-color var(--apmv-transicion);
}

/*
 * El `display: inline-flex` de arriba empata en especificidad con
 * `[hidden] { display: none }` del navegador y gana, así que sin esto los dos
 * botones nacerían **visibles** aunque el marcado los ponga `hidden` — y sin
 * JavaScript serían botones que no hacen nada. Mismo caso, y misma solución,
 * que `.apmv-boton-copiar[hidden]` en `base.css`.
 */
.apmv-compartir__boton[hidden] {
	display: none;
}

.apmv-compartir__enlace:hover,
.apmv-compartir__boton:hover {
	border-color: var(--apmv-verde);
	background: var(--apmv-verde-velo);
}

.apmv-compartir__nativo {
	margin: var(--apmv-e3) 0 0;
}

.apmv-compartir__boton--nativo {
	border-color: var(--apmv-verde-profundo);
	background: var(--apmv-verde-profundo);
	color: var(--apmv-blanco);
}

.apmv-compartir__boton--nativo:hover {
	border-color: var(--apmv-verde-tinta);
	background: var(--apmv-verde-tinta);
}

.apmv-compartir__estado {
	margin: var(--apmv-e2) 0 0;
	min-height: 1.25em;
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-xs);
}