/**
 * Zenth Toolkit — zenth-news-slider: mecánica del carrusel de noticias.
 *
 * Solo layout/estructura (fila flex, desplazamiento por transform, estados
 * de flechas, reset de lista/botones). Sin colores de marca ni tipografías
 * ni medidas de página (paddings/radios del mockup): esos viven en el
 * bloque gestionado del tema (seeds/style-header.css, bloque "INICIO" u
 * otro bloque de página que reutilice este widget), anidados bajo la
 * clase de la sección.
 *
 * Geometría: "--zenth-nslider-per" fija cuántas tarjetas caben en la
 * caja visible (.zenth-nslider__viewport) — 3 en escritorio (valor base,
 * sin media query), 2 en tablet, 1 en móvil. Cada tarjeta mide
 * "(100% del viewport − huecos) / per" de ancho, así que "per" tarjetas
 * llenan exactamente el viewport sin recorte parcial. assets/js/zenth-nslider.js
 * LEE el valor computado de esta variable (no lo duplica) para saber
 * cuántas tarjetas están visibles a la vez, y mide en píxeles reales la
 * distancia entre dos tarjetas contiguas para desplazar el track con
 * transform: translateX() — no hace falta que JS conozca "per" en píxeles,
 * solo en cardinalidad.
 */

.zenth-nslider {
	--zenth-nslider-per: 3;
	--zenth-nslider-gap: 22px;
	position: relative;
}

.zenth-nslider__viewport {
	overflow: hidden;
	/* El swipe horizontal (assets/js/zenth-nslider.js, Pointer Events) no
	   debe robarle el scroll vertical de la página a un gesto táctil: solo
	   se captura el eje X, el navegador maneja Y de forma nativa. */
	touch-action: pan-y;
}

/* Reset robusto de lista (ver MANUAL-DE-TRABAJO.md §4/§6): compuesto con
   la clase raíz para ganarle por especificidad a cualquier "ul{…}" o
   ".algo ul{…}" del reset.css de Hello Elementor o de los estilos de
   lista del tema, sin recurrir a !important. */
.zenth-nslider .zenth-nslider__track {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var( --zenth-nslider-gap, 22px );
	transform: translateX( 0 );
	transition: transform 0.4s ease;
	will-change: transform;
}

.zenth-nslider__item {
	flex: 0 0 calc( ( 100% - ( var( --zenth-nslider-per, 3 ) - 1 ) * var( --zenth-nslider-gap, 22px ) ) / var( --zenth-nslider-per, 3 ) );
	min-width: 0;
}

/* Solo las tarjetas visibles son interactivas/legibles; el resto queda
   fuera del flujo de interacción mientras dura el desplazamiento
   (assets/js/zenth-nslider.js además pone tabindex="-1" en el enlace real
   de las tarjetas ocultas: un elemento aria-hidden no debe contener
   foco). */
.zenth-nslider__item[aria-hidden='true'] {
	pointer-events: none;
}

.zenth-nslider__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.zenth-nslider__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 384 / 188;
	text-decoration: none;
	color: inherit;
}

.zenth-nslider__media--empty {
	display: block;
}

.zenth-nslider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zenth-nslider__title {
	margin: 0;
}

/* Reset robusto de enlace, compuesto con la clase raíz por el mismo
   motivo que el de la lista más arriba: el título es un <a> normal, no un
   botón, pero hereda subrayado/color de enlace del tema si no se
   neutraliza aquí (la piel de la página decide color/tipografía). */
.zenth-nslider .zenth-nslider__title a {
	text-decoration: none;
	color: inherit;
}

.zenth-nslider__date {
	display: block;
}

.zenth-nslider__nav {
	display: flex;
	align-items: center;
	justify-content: center;
}

.zenth-nslider [hidden] {
	display: none;
}

/* Reset robusto de botón, compuesto con la clase raíz (ver
   MANUAL-DE-TRABAJO.md §4/§6, punto del reset.css de Hello Elementor):
   una sola clase de un solo nivel no siempre gana por especificidad. */
.zenth-nslider .zenth-nslider__prev,
.zenth-nslider .zenth-nslider__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.zenth-nslider__prev svg,
.zenth-nslider__next svg {
	flex: 0 0 auto;
}

/* Foco visible (spec: accesibilidad mínima §0 de specs/donantes/SPEC.md):
   currentColor para que la piel de cada página decida el color real sin
   que este archivo declare ninguno. */
.zenth-nslider__prev:focus-visible,
.zenth-nslider__next:focus-visible,
.zenth-nslider__title a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.zenth-nslider__empty {
	margin: 0;
}

/* Rótulo (extensión Ola 2, specs/_ola2/ARQUITECTURA.md §3 fila 2): solo
   mecánica aquí -- posición (arriba a la derecha de la región), color y
   tipografía son piel de página (bloque gestionado de style-header.css,
   anidado bajo la clase de la sección que reutilice este widget). */
.zenth-nslider__rotulo {
	margin: 0;
}

/* Salto directo, sin animación, para quien pide menos movimiento (mismo
   criterio que zenth-area-carousel.css). */
@media ( prefers-reduced-motion: reduce ) {
	.zenth-nslider .zenth-nslider__track {
		transition: none;
	}
}

/* Los tres valores de "--zenth-nslider-per" viven SOLO aquí: cualquier
   otro archivo (PHP o JS) los lee, nunca los repite. */
@media ( max-width: 1024px ) {
	.zenth-nslider {
		--zenth-nslider-per: 2;
	}
}

@media ( max-width: 767px ) {
	.zenth-nslider {
		--zenth-nslider-per: 1;
	}
}