/**
 * Zenth Toolkit — zenth-news-grid: mecánica de la rejilla paginada de
 * noticias.
 *
 * Solo layout/estructura (rejilla CSS Grid, cabecera, paginación, resets
 * robustos frente al reset.css de Hello Elementor). Sin colores de marca
 * ni tipografías ni medidas de página: esos viven en el bloque gestionado
 * del tema (seeds/style-header.css), anidados bajo la clase de la sección
 * que use este widget.
 *
 * Las tarjetas reutilizan las clases de zenth-news-slider
 * (.zenth-nslider__card/__media/__img/__title/__date, ver
 * assets/css/zenth-news-slider.css): como esas clases NO van todas
 * ancladas a ".zenth-nslider" en ese archivo, la piel de la tarjeta se
 * hereda gratis aquí sin duplicar layout. Solo el reset del enlace del
 * título SÍ va anclado a la raíz allí (".zenth-nslider
 * .zenth-nslider__title a"), así que se repite aquí anclado a
 * ".zenth-ngrid" por el mismo motivo de especificidad (ver
 * MANUAL-DE-TRABAJO.md §4/§6).
 */

.zenth-ngrid {
	--zenth-ngrid-cols: 3;
	--zenth-ngrid-gap: 22px;
}

/* Cabecera: pills a un lado y otro, eyebrow/título/lead apilados debajo.
   Estructura únicamente — el tamaño/color/tipografía de cada pieza vive
   en el bloque de página que reutilice ".arr-sphead__*". */
.zenth-ngrid__head {
	display: flex;
	flex-direction: column;
}

.zenth-ngrid__pills {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.zenth-ngrid__pill {
	display: inline-flex;
	align-items: center;
}

/* Reset robusto de enlace para la píldora derecha (es un <a> cuando no
   estamos en el propio archivo de esa categoría; ver
   Zenth_News_Grid_Widget::render() — "actual" la imprime como <span>
   sin necesitar este reset, pero conviene que ambas variantes hereden el
   mismo tratamiento tipográfico de la piel). Compuesto con la raíz por
   especificidad, mismo criterio que el resto de resets de este archivo. */
.zenth-ngrid .zenth-ngrid__pill--der {
	text-decoration: none;
	color: inherit;
}

.zenth-ngrid__eyebrow,
.zenth-ngrid__title,
.zenth-ngrid__lead {
	margin: 0;
}

/* La descripción de categoría (wpautop) puede traer varios <p>: sin
   margen propio salvo el que ya le dé wpautop entre párrafos, para no
   duplicar espaciados con la piel de página. */
.zenth-ngrid__lead p {
	margin: 0;
}

.zenth-ngrid__lead p + p {
	margin-top: 1em;
}

/* Rejilla: "--zenth-ngrid-cols" (control "columnas", 2–4) manda en
   escritorio; tablet/móvil fuerzan su propio nº de columnas sin importar
   el ajuste de escritorio, mismo criterio de breakpoints fijos que
   "--zenth-nslider-per" en zenth-news-slider.css. */
.zenth-ngrid__grid {
	display: grid;
	grid-template-columns: repeat( var( --zenth-ngrid-cols, 3 ), minmax( 0, 1fr ) );
	gap: var( --zenth-ngrid-gap, 22px );
	list-style: none;
	margin: 0;
	padding: 0;
}

.zenth-ngrid__item {
	display: flex;
	min-width: 0;
}

/* Reset robusto del enlace del título de cada tarjeta: mismo selector que
   ".zenth-nslider .zenth-nslider__title a" en zenth-news-slider.css, pero
   anclado a ".zenth-ngrid" — aquí las tarjetas no viven dentro de
   ".zenth-nslider", así que ese reset del slider no llega por su cuenta. */
.zenth-ngrid .zenth-nslider__title a {
	text-decoration: none;
	color: inherit;
}

.zenth-ngrid__empty {
	margin: 0;
}

@media ( max-width: 1024px ) {
	.zenth-ngrid__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.zenth-ngrid__grid {
		grid-template-columns: repeat( 1, minmax( 0, 1fr ) );
	}
}

/* Paginación. */
.zenth-ngrid__pag ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 6px;
}

.zenth-ngrid__pag-item {
	display: flex;
}

/* Reset robusto de los enlaces/spans que imprime paginate_links()
   (clases propias del core: "page-numbers", "current", "dots", "prev",
   "next") — compuesto con la raíz del widget por el mismo motivo de
   especificidad que el resto de resets de este archivo. */
.zenth-ngrid .zenth-ngrid__pag .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	font: inherit;
}

.zenth-ngrid .zenth-ngrid__pag a.page-numbers {
	cursor: pointer;
}

.zenth-ngrid .zenth-ngrid__pag .page-numbers.dots {
	cursor: default;
}

.zenth-ngrid__pag .prev.page-numbers svg,
.zenth-ngrid__pag .next.page-numbers svg {
	flex: 0 0 auto;
}

/* Texto solo para lectores de pantalla (acompaña al SVG de las flechas
   "anterior"/"siguiente" de la paginación): Hello Elementor no garantiza
   esta clase, así que el widget la define aquí, igual que el resto de
   mecánica "solo mía" de este archivo. */
.zenth-ngrid .screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

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