/**
 * Bloque uts/novedades — las últimas noticias en carrusel.
 *
 * Ni un color literal: todo sale de theme.json. La tarjeta (.uts-noticia) y la
 * etiqueta de categoría (.uts-chip) viven en style.css porque las comparten el
 * listado y la ficha. El canal de 1.200 px también lo pone style.css.
 *
 * «--uts-novedades-por-vista» es la única fuente de cuántas tarjetas caben. La
 * lee novedades.js para armar los grupos, así el script nunca repite los cortes
 * de pantalla: si aquí cambia un corte, el carrusel se entera solo. Cero
 * significa «sin carrusel», que es el móvil.
 *
 * @package uts
 */

.uts-novedades {
	--uts-novedades-por-vista: 4;
	--uts-novedades-hueco: var(--wp--preset--spacing--50);

	background: var(--wp--preset--color--papel);
}

.uts-novedades__interior {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	padding-block: var(--wp--custom--novedades--aire);
}

/* --------------------------------------------------------------------------
   La cabecera
   -------------------------------------------------------------------------- */

.uts-novedades__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
}

.uts-novedades__cejilla {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-escudo);
}

.uts-novedades__titulo {
	margin: 0;
	color: var(--wp--preset--color--verde-oscuro);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-2);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.uts-novedades__controles {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.uts-novedades__flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--novedades--control);
	height: var(--wp--custom--novedades--control);
	padding: 0;
	border: 1px solid var(--wp--preset--color--verde-escudo);
	border-radius: var(--wp--custom--radio--pastilla);
	background: transparent;
	color: var(--wp--preset--color--verde-escudo);
	cursor: pointer;
	transition: background-color var(--wp--custom--transicion--base), color var(--wp--custom--transicion--base), opacity var(--wp--custom--transicion--base);
}

.uts-novedades__flecha:hover {
	background: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
}

.uts-novedades__flecha:active {
	background: var(--wp--preset--color--verde-oscuro);
	border-color: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--blanco);
}

/*
 * «aria-disabled» y no «disabled»: un botón desactivado de verdad suelta el
 * foco, y quien llega al final pulsando «siguiente» con el teclado se quedaría
 * con el foco perdido en la página.
 */
.uts-novedades__flecha[aria-disabled="true"],
.uts-novedades__flecha[aria-disabled="true"]:hover,
.uts-novedades__flecha[aria-disabled="true"]:active {
	opacity: 0.45;
	border-color: var(--wp--custom--novedades--trazo);
	background: transparent;
	color: var(--wp--preset--color--apagado);
	cursor: default;
}

.uts-novedades__listar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--wp--custom--novedades--control);
	padding: 0 var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--custom--novedades--trazo);
	border-radius: var(--wp--custom--radio--chico);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--gris);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--wp--custom--transicion--base), color var(--wp--custom--transicion--base), background-color var(--wp--custom--transicion--base);
}

.uts-novedades__listar:hover,
.uts-novedades__listar:focus-visible {
	border-color: var(--wp--preset--color--verde-escudo);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--verde-oscuro);
	text-decoration: none;
}

.uts-novedades__listar:active {
	background: var(--wp--preset--color--arena);
}

/* --------------------------------------------------------------------------
   Las tarjetas · sin JavaScript, una rejilla quieta
   -------------------------------------------------------------------------- */

.uts-novedades__lista {
	position: relative;
	display: grid;
	grid-template-columns: repeat( var(--uts-novedades-por-vista), minmax( 0, 1fr ) );
	gap: var(--uts-novedades-hueco);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-novedades__item {
	display: flex;
	min-width: 0;
	margin: 0;
}

.uts-novedades__item > .uts-noticia {
	flex: 1;
}

/* Sin carrusel se ve un grupo, no la lista entera amontonada. En rejilla no:
   ahí se muestran todas las que pidió el editor. */
.uts-novedades:not( .es-carrusel, .uts-novedades--rejilla ) .uts-novedades__item:nth-child( n + 5 ) {
	display: none;
}

.uts-novedades__sin-noticias {
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--beige);
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--tinta);
}

/* --------------------------------------------------------------------------
   Con JavaScript · el carrusel
   -------------------------------------------------------------------------- */

/*
 * El carrusel es un desplazamiento horizontal nativo con imanes, no una pista
 * movida con «transform». Así el deslizamiento con el dedo, el trackpad y el
 * salto al enfocar una tarjeta con Tab los resuelve el navegador, y el script
 * sólo tiene que llevar la cuenta del grupo visible.
 *
 * Los 4 px de relleno son para el anillo de foco: sin ellos el contenedor lo
 * recorta en las tarjetas de los bordes. El margen negativo los devuelve para
 * que las tarjetas sigan alineadas con la cabecera.
 */
.uts-novedades.es-carrusel .uts-novedades__lista {
	display: flex;
	margin: calc( var(--wp--preset--spacing--20) * -1 );
	padding: var(--wp--preset--spacing--20);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wp--preset--spacing--20);
	scrollbar-width: none;
}

.uts-novedades.es-carrusel .uts-novedades__lista::-webkit-scrollbar {
	display: none;
}

.uts-novedades.es-carrusel .uts-novedades__item {
	flex: 0 0 calc( ( 100% - ( var(--uts-novedades-por-vista) - 1 ) * var(--uts-novedades-hueco) ) / var(--uts-novedades-por-vista) );
	scroll-snap-align: start;
}

.uts-novedades__puntos {
	display: flex;
	justify-content: center;
	margin-block-start: calc( var(--wp--preset--spacing--50) * -1 );
}

/*
 * El punto se ve de 8 × 6 px, como el diseño, pero el botón mide 24 × 24:
 * el mínimo de área táctil (SC 2.5.8). El dibujo va en el «::before».
 */
.uts-novedades__punto {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: width var(--wp--custom--transicion--base);
}

.uts-novedades__punto::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 6px;
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--custom--traza--sutil);
	transform: translate( -50%, -50% );
	transition: width var(--wp--custom--transicion--base), background-color var(--wp--custom--transicion--base);
}

.uts-novedades__punto:hover::before {
	background: var(--wp--preset--color--borde);
}

.uts-novedades__punto[aria-current="true"] {
	width: 36px;
}

.uts-novedades__punto[aria-current="true"]::before {
	width: 28px;
	background: var(--wp--preset--color--verde-escudo);
}

/* --------------------------------------------------------------------------
   Anchos intermedios
   -------------------------------------------------------------------------- */

@media ( max-width: 1100px ) {

	.uts-novedades {
		--uts-novedades-por-vista: 3;
	}

	.uts-novedades:not( .es-carrusel, .uts-novedades--rejilla ) .uts-novedades__item:nth-child( n + 4 ) {
		display: none;
	}
}

@media ( max-width: 900px ) {

	.uts-novedades {
		--uts-novedades-por-vista: 2;
	}

	/* Dos por fila: sin carrusel se ven cuatro, en dos filas. */
	.uts-novedades:not( .es-carrusel, .uts-novedades--rejilla ) .uts-novedades__item:nth-child( 4 ) {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   Móvil · validado a 390 px y a 320 px

   El diseño móvil no tiene carrusel: tres tarjetas apiladas y «Listar todas»
   a lo ancho, debajo. Deslizar tarjetas de lado en un teléfono compite con el
   desplazamiento de la página, y las flechas de 36 px ahí estorban.
   -------------------------------------------------------------------------- */

@media ( max-width: 640px ) {

	.uts-novedades {
		--uts-novedades-por-vista: 0;
		--uts-novedades-hueco: var(--wp--preset--spacing--40);
	}

	.uts-novedades__interior {
		gap: var(--wp--preset--spacing--60);
		padding-block: var(--wp--custom--novedades--aire-movil);
	}

	/*
	 * «display: contents» deshace las dos cajas de la cabecera: sus hijos pasan
	 * a ser hijos directos de la columna, y así «Listar todas» puede bajar al
	 * final con «order» sin duplicar el enlace en el código.
	 */
	.uts-novedades__cabecera,
	.uts-novedades__controles {
		display: contents;
	}

	.uts-novedades__flecha,
	.uts-novedades__puntos {
		display: none;
	}

	.uts-novedades__titulo {
		font-size: var(--wp--preset--font-size--titulo-2);
	}

	.uts-novedades .uts-novedades__lista,
	.uts-novedades.es-carrusel .uts-novedades__lista {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.uts-novedades .uts-novedades__item,
	.uts-novedades.es-carrusel .uts-novedades__item {
		display: flex;
		flex: none;
	}

	.uts-novedades:not( .uts-novedades--rejilla ) .uts-novedades__item:nth-child( n + 4 ),
	.uts-novedades.es-carrusel .uts-novedades__item:nth-child( n + 4 ) {
		display: none;
	}

	.uts-novedades__listar {
		order: 9;
		width: 100%;
		min-height: 44px;
		font-size: var(--wp--preset--font-size--menor);
	}

	.uts-novedades .uts-noticia__foto {
		height: var(--wp--custom--novedades--foto-movil);
	}
}

/* --------------------------------------------------------------------------
   Presentación «rejilla» · el mismo bloque dentro de una página interior

   La portada necesita una franja a todo el ancho con carrusel. Una página
   interior necesita lo contrario: una sección más, del ancho del contenido,
   quieta y con todas las noticias que pidió el editor a la vista. Cambia la
   presentación, no la consulta ni la tarjeta, así que es el mismo bloque con
   otra clase y no un bloque aparte que haya que mantener en paralelo.
   -------------------------------------------------------------------------- */

.uts-novedades--rejilla {
	--uts-novedades-por-vista: 3;

	background: transparent;
	border-radius: var(--wp--custom--radio--base);
}

/*
 * En la portada el interior es quien pone el canal de 1.200 px y sus 24 px de
 * aire lateral (style.css). Dentro de una página ese aire sobra: el ancho lo
 * manda el contenedor de la página y el relleno lo pone el fondo de la
 * sección. Sumados dejaban las tarjetas 48 px más estrechas que el resto del
 * contenido, bien visible a 390 px.
 */
.uts-novedades--rejilla .uts-novedades__interior,
.uts-novedades:not(.alignfull) .uts-novedades__interior {
	max-width: none;
	padding-block: 0;
	padding-inline: 0;
}

.uts-novedades--rejilla .uts-novedades__interior {
	gap: var(--wp--preset--spacing--60);
}

/*
 * Dentro de una página el fondo lo pone la sección (o ninguno): el papel de la
 * franja de portada dejaba un rectángulo de otro color dentro del contenedor.
 */
.uts-novedades:not(.alignfull) {
	background: transparent;
}

/*
 * El carrusel dentro de una página: mismas tres tarjetas por vista que la
 * rejilla, porque el ancho ya no es el de la pantalla sino el del contenedor,
 * y con cuatro las tarjetas se estrechaban más que las de las secciones
 * vecinas. El desplazamiento, las flechas y los puntos siguen igual.
 */
.uts-novedades:not(.alignfull, .uts-novedades--rejilla) {
	--uts-novedades-por-vista: 3;
}

.uts-novedades:not(.alignfull, .uts-novedades--rejilla) .uts-novedades__interior {
	gap: var(--wp--preset--spacing--60);
}

/*
 * El fondo lo elige el editor para que la sección encaje con las vecinas. Va
 * con doble clase para ganarle a la regla de arriba, que deja el bloque sin el
 * papel de la portada cuando está dentro de una página.
 */
.uts-novedades.uts-novedades--fondo-arena,
.uts-novedades.uts-novedades--fondo-beige,
.uts-novedades.uts-novedades--fondo-blanco {
	padding: var(--wp--preset--spacing--70);
	border-radius: var(--wp--custom--radio--base);
}

.uts-novedades.uts-novedades--fondo-arena {
	background: var(--wp--preset--color--arena);
}

.uts-novedades.uts-novedades--fondo-beige {
	background: var(--wp--preset--color--beige);
}

.uts-novedades.uts-novedades--fondo-blanco {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
}

/* El botón de «ver todas» va debajo, alineado a la izquierda como los demás. */
.uts-novedades--rejilla .uts-novedades__cabecera {
	display: block;
}

.uts-novedades--rejilla .uts-novedades__controles {
	display: none;
}

.uts-novedades--rejilla .uts-novedades__pie {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

.uts-novedades--rejilla .uts-novedades__pie .uts-novedades__listar {
	min-height: 44px;
	border-color: var(--wp--preset--color--verde-escudo);
	background: var(--wp--preset--color--verde-escudo);
	border-radius: var(--wp--custom--radio--base);
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--menor);
}

.uts-novedades--rejilla .uts-novedades__pie .uts-novedades__listar:hover,
.uts-novedades--rejilla .uts-novedades__pie .uts-novedades__listar:focus-visible {
	background: var(--wp--preset--color--verde-oscuro);
	border-color: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--blanco);
}

.uts-novedades--rejilla .uts-novedades__pie .uts-novedades__listar:active {
	background: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--verde-limon);
}

@media ( max-width: 600px ) {

	.uts-novedades.uts-novedades--fondo-arena,
	.uts-novedades.uts-novedades--fondo-beige,
	.uts-novedades.uts-novedades--fondo-blanco {
		padding: var(--wp--preset--spacing--50);
	}
}