/**
 * Bloque uts/inv-galeria — «La investigación en acción».
 *
 * Visor de una foto a la vez (2:1 en escritorio, 4:3 en el teléfono) con el
 * pie sobre una banda verde oscuro al 88 % (blanco encima: 11:1 aunque la foto
 * sea blanca). Flechas blancas de 48 px a los lados, contador en la esquina y
 * miniaturas debajo.
 *
 * @package uts
 */

.uts-inv-galeria {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

.uts-inv-galeria__cejilla {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--gris);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.uts-inv-galeria .uts-inv-galeria__titulo {
	margin: 0;
}

/* --------------------------------------------------------------------------
   El visor
   -------------------------------------------------------------------------- */

.uts-inv-galeria__escenario {
	position: relative;
}

.uts-inv-galeria__visor {
	/* Sin esto, como hijo de una columna flex, se estira al ancho de todas
	   sus tarjetas y desborda la página. */
	min-width: 0;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	border-radius: var(--wp--custom--radio--base);
	background: var(--wp--preset--color--verde-oscuro);
}

/* Con JavaScript manda el carrusel: sin barra. Sin él, la barra se queda. */
.uts-inv-galeria.es-carrusel .uts-inv-galeria__visor {
	scrollbar-width: none;
}

.uts-inv-galeria.es-carrusel .uts-inv-galeria__visor::-webkit-scrollbar {
	display: none;
}

.uts-inv-galeria__visor:focus-visible {
	outline: 3px solid var(--wp--preset--color--verde-escudo);
	outline-offset: 3px;
}

.uts-inv-galeria__diapositiva {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.uts-inv-galeria__figura {
	position: relative;
	margin: 0;
}

.uts-inv-galeria__marco {
	position: relative;
	overflow: hidden;
	/* 2:1 y no 16:9: a 1.152 px de ancho, 16:9 no cabía en la pantalla con la cabecera. */
	aspect-ratio: 2 / 1;
	background: var(--wp--preset--color--verde-oscuro);
}

/*
 * La foto va ENTERA («contain»): con «cover» el marco 2:1 cortaba las cabezas
 * de las fotos verticales y de grupo. El hueco lo llena la misma foto detrás,
 * ampliada, desenfocada y oscurecida.
 */
.uts-inv-galeria__fondo {
	position: absolute;
	inset: -32px;
	width: calc( 100% + 64px );
	max-width: none;
	height: calc( 100% + 64px );
	object-fit: cover;
	filter: blur( 24px ) brightness( 0.7 ) saturate( 1.1 );
}

.uts-inv-galeria__foto {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.uts-inv-galeria__pie {
	position: absolute;
	z-index: 2;
	inset: auto 0 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	padding-right: 120px;
	background: var(--wp--custom--investigacion--galeria-pie);
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Flechas y contador
   -------------------------------------------------------------------------- */

.uts-inv-galeria .uts-inv-galeria__flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--verde-oscuro);
	/* Anillo oscuro: la flecha blanca se separa de una foto clara (SC 1.4.11). */
	box-shadow: 0 0 0 2px var(--wp--preset--color--verde-oscuro);
	transform: translateY( -50% );
	cursor: pointer;
	transition: background-color var(--wp--custom--transicion--base), color var(--wp--custom--transicion--base);
}

.uts-inv-galeria .uts-inv-galeria__flecha[hidden] {
	display: none;
}

.uts-inv-galeria .uts-inv-galeria__flecha.es-anterior {
	left: var(--wp--preset--spacing--50);
}

.uts-inv-galeria .uts-inv-galeria__flecha.es-siguiente {
	right: var(--wp--preset--spacing--50);
}

.uts-inv-galeria .uts-inv-galeria__flecha:hover:not( :disabled ),
.uts-inv-galeria .uts-inv-galeria__flecha:active:not( :disabled ) {
	background: var(--wp--preset--color--verde-limon);
}

.uts-inv-galeria .uts-inv-galeria__flecha:focus-visible {
	outline: 3px solid var(--wp--preset--color--blanco);
	outline-offset: 2px;
}

.uts-inv-galeria .uts-inv-galeria__flecha:disabled {
	opacity: 0;
	pointer-events: none;
}

.uts-inv-galeria__contador {
	position: absolute;
	right: var(--wp--preset--spacing--50);
	bottom: var(--wp--preset--spacing--50);
	z-index: 2;
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radio--pastilla);
	background: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.uts-inv-galeria__contador[hidden] {
	display: none;
}

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

.uts-inv-galeria__miniaturas {
	/* Contiene los .screen-reader-text (posición absoluta) de las tarjetas: si
	   no, los de las del final empujan el ancho de la página. */
	position: relative;
	/* Sin esto, como hijo de una columna flex, se estira al ancho de todas
	   sus tarjetas y desborda la página. */
	min-width: 0;
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 4px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.uts-inv-galeria__miniaturas[hidden] {
	display: none;
}

.uts-inv-galeria__miniaturas li {
	flex: none;
	margin: 0;
}

.uts-inv-galeria .uts-inv-galeria__miniatura {
	display: block;
	width: 96px;
	height: 64px;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--wp--custom--radio--chico);
	background: none;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity var(--wp--custom--transicion--base);
}

.uts-inv-galeria__miniatura img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.uts-inv-galeria .uts-inv-galeria__miniatura:hover,
.uts-inv-galeria .uts-inv-galeria__miniatura:active {
	opacity: 1;
}

.uts-inv-galeria .uts-inv-galeria__miniatura[aria-current="true"] {
	opacity: 1;
	box-shadow: 0 0 0 3px var(--wp--preset--color--verde-escudo);
}

@media ( prefers-reduced-motion: reduce ) {

	.uts-inv-galeria .uts-inv-galeria__flecha,
	.uts-inv-galeria .uts-inv-galeria__miniatura {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media ( max-width: 640px ) {

	.uts-inv-galeria__marco {
		aspect-ratio: 4 / 3;
	}

	/* En el teléfono el pie va debajo de la foto: encima tapaba media imagen. */
	.uts-inv-galeria__figura {
		display: flex;
		flex-direction: column;
	}

	.uts-inv-galeria__pie {
		position: static;
		flex: 1;
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		background: var(--wp--preset--color--verde-oscuro);
	}

	.uts-inv-galeria .uts-inv-galeria__flecha {
		top: calc( ( 100vw - 48px ) * 0.375 );
		width: 40px;
		height: 40px;
	}

	.uts-inv-galeria .uts-inv-galeria__flecha.es-anterior {
		left: var(--wp--preset--spacing--30);
	}

	.uts-inv-galeria .uts-inv-galeria__flecha.es-siguiente {
		right: var(--wp--preset--spacing--30);
	}

	.uts-inv-galeria__contador {
		top: var(--wp--preset--spacing--30);
		bottom: auto;
		right: var(--wp--preset--spacing--30);
	}

	.uts-inv-galeria .uts-inv-galeria__miniatura {
		width: 72px;
		height: 48px;
	}
}