/**
 * Portada: layout y superficies.
 *
 * Reglas de DESIGN-SYSTEM.md: todos los valores via tokens de Fase 3
 * (--ee-* / --wp--preset--*). Solo constantes de layout: breakpoints
 * en em y bordes de 1px hairline.
 */

/* --- Contenedor y secciones --- */

.ee-main {
	padding-block: var(--ee-space-5);
}


.home .site-content .ast-container,
body.ee-front-page #content > .ast-container {
	display: block;
	width: 100%;
	max-width: var(--ee-layout-content);
	margin-inline: auto;
	padding-inline: 0;
}

/* V16.1: contenedor estándar — caja única contenida en el ancho de
 * chrome.css (space-5): home.css carga después en la cadena
 * tokens → chrome → contextual, así que este valor gana en TODAS las
 * vistas donde home.css se enqueuea; chrome.css sigue cubriendo solo 404.*/
.ee-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ee-layout-content);
	margin-inline: auto;
	padding-inline: var(--ee-space-4);
}

.ee-section + .ee-section {
	margin-top: var(--ee-space-6);
}

/* V16.3: ritmo vertical homogéneo */
.ee-modules + .ee-section {
	margin-top: var(--ee-space-6);
}

/* V13: neutraliza el `ol,ul{margin:0 0 1.5em 3em}` de Astra sobre los
 * contenedores de post/grid de Bloque A (Home y archivos). Generaba un
 * padding-left de 3em sobrante en la paginación y en Home. Los márgenes
 * vertical/izquierdo los controla el gap del contenedor, no el `ul`. */
.wp-block-post-template,
.wp-block-query-pagination {
	margin: 0;
}

/* Fase V16.2: delimitación de paneles — los fondos de superficie viven
 * 100% DENTRO de la caja de lectura (--ee-layout-content vía .ee-container,
 * V16.1): se elimina el bleed negativo que V15 usaba para las franjas.
 * El panel pasa a ser una tarjeta contenida: fondo surface, radio y
 * padding interno tomados de la MISMA escala de espaciado --ee-*:
 * radius = escalón base space-2 (un radio mayor sobre franjas anchas
 * abombaba las esquinas), padding-inline = space-5 desktop / space-4 en
 * vista angosta (bloque <=64em). Cobertura (ee-module) comparte tratamiento. */
.ee-section--panel,
.ee-section--media,
.ee-section--grid,
.ee-section--hero {
	padding-block: var(--ee-space-5);
	padding-inline: var(--ee-space-5);
	background: var(--ee-color-surface);
	border-radius: var(--ee-space-2);
}


.ee-breaking-section {
	padding-block: var(--ee-space-5);
	padding-inline: var(--ee-space-5);
}

/* --- Cabecera de seccion (componente compartido) --- */

.ee-section-head {
	display: flex;
	align-items: center;
	gap: var(--ee-space-4);
	margin-bottom: var(--ee-space-4);
}

.ee-section-head__title {
	margin: 0;
	white-space: nowrap;
	color: var(--ee-color-text);
	font-size: var(--ee-font-h2);
	font-weight: var(--ee-font-weight-h2);
}

.ee-section-head__rule {
	flex: 1;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--ee-color-border);
	opacity: 1;
}

/* --- Ultima hora --- */

.ee-breaking {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--ee-space-1);
	/* V.7.5.2 — padding anulado: la separación borde→contenido la aporta
	 * exclusivamente el wrapper .ee-breaking-section (4px mínimo).
	 * Antes B15.2/V.7.5.2 dejaban aquí padding-inline/block space-1 que
	 * se sumaba al panel (28px desktop duplicado). Ahora padding:0
	 * evita duplicado; el gap space-1 entre cards se mantiene. */
	padding: 0;
}

.ee-breaking .wp-block-post {
	margin: 0;
	background: transparent;
}

/* V.7.10.3 — Override scoped para ítems de Última hora sin pelear con token global.
 * Global: chrome.css:547 .ast-separate-container .ast-article-post
 * { padding: var(--ee-card-padding) !important; } (0,2,0 !important, 1.5em ≈24px)
 * pensado para tarjetas con imagen (grilla principal, relacionadas, autor,
 * multimedia). Última hora usa ee-card--sm text-only (sin thumb) y necesita
 * padding mínimo. Solución: mismo !important pero scoped a .ee-breaking
 * (0,3,0 !important + orden posterior home.css > chrome.css), por lo que
 * solo Última hora baja a var(--ee-space-2) 8px; el resto mantiene
 * var(--ee-card-padding) 1.5em. Token en escala existente V16.2, sin px nuevo. */
.ee-breaking .ast-separate-container .ast-article-post,
.ee-breaking .wp-block-post,
#ee-home .ee-breaking .wp-block-post {
	padding: var(--ee-space-2) !important;
}

/* --- Hero / Destacadas --- */

.ee-hero {
	gap: var(--ee-space-6);
}

.ee-hero .wp-block-column {
	flex-basis: auto;
}

.ee-section--hero .wp-block-column:first-child .wp-block-post,
.ee-section--hero .wp-block-column:last-child .wp-block-post {
	margin: 0;
	background: transparent;
}

.ee-section--hero .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
	gap: var(--ee-space-6);
}

/* B15.3: sin border-bottom entre cards del hero lateral — la separación
 * la maneja exclusivamente el gap del contenedor (tokens de espaciado). */

/* --- Cards --- */

.ee-card {
	margin: 0;
	min-width: 0;
}

/* --- Tamaño de tarjeta (3 variantes unificadas) ---
 * Cada tamaño define thumb, tipografía del título y layout del body.
 * La anatomía interna es la misma: cat → title → excerpt → meta.
 *Modificadores: --lg (featured), --md (standard), --sm (compact). */

/* Lg: lead de hero — imagen full-width, título grande, bajada. */
.ee-card--lg .ee-card__title {
	font-size: var(--ee-font-headline);
	font-weight: var(--ee-font-weight-h2);
	line-height: var(--ee-line-height-h2);
}

/* Md: grilla, multimedia, hero-side — título h3, bajada 3 líneas. */
.ee-card--md .ee-card__title {
	font-size: var(--ee-font-h3);
	line-height: var(--ee-line-height-h3);
}

.ee-card--md.ee-card--side .ee-card__thumb {
	aspect-ratio: 4 / 3;
	flex: 0 0 33.333%;
	max-width: 33.333%;
}

/* Sm: última hora, opinión — sin imagen, título compacto. */
.ee-card--sm .ee-card__title {
	font-size: var(--ee-font-label);
	font-weight: 500;
	line-height: var(--ee-line-height-label);
}

/* Media: wrapper con la imagen + badge de formato superpuesto.
 * Si el post no tiene featured image, el filtro render_block lo elimina. */
.ee-card__thumb {
	position: relative;
	overflow: hidden;
	background: var(--ee-color-surface);
	border: 1px solid var(--ee-color-border);
	aspect-ratio: 16 / 9;
}

.ee-card__thumb .wp-block-post-featured-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

.ee-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* V.7.7 — Tile fallback de marca DEPRECADO (reversión V2).
 * Antes: notas sin featured image caían a este bloque orgánico
 * (mismo aspect-ratio 16/9) en vez de caja vacía. Generado por
 * inc/home-patterns.php:217 astra_child_hide_empty_card_thumbs()
 * (render_block sobre .ee-card__thumb sin <img>).
 * V.7.7.2 decide quitar fallback completamente: sin has_post_thumbnail()
 * no se renderiza .ee-card__thumb ni tile; .ee-card__body arranca
 * directo. Reglas quedan como código muerto hasta limpieza posterior.
 * Afecta lg/md (con thumb); sm ya sin thumb (home-patterns.php:101). */
.ee-card__thumb--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ee-space-2);
	color: var(--ee-color-text-muted);
}

.ee-card__fallback-mark {
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
	background: var(--ee-color-brand-primary);
}

.ee-card__fallback-name {
	font-family: var(--ee-font-heading);
	font-size: var(--ee-font-label);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Badge de formato (video/galeria/audio): chip de marca sobre la imagen.
 * Fondo = preset brand-primary (fijo en ambos modos) + texto superficie
 * (blanco): 5.10:1 AA por regla de CTA de DESIGN-SYSTEM.
 * Tambien se pinta sobre el tile fallback (--fallback) para notas con
 * formato pero sin featured image. */
.ee-card__format {
	position: absolute;
	left: var(--ee-space-3);
	bottom: var(--ee-space-3);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: var(--ee-space-1) var(--ee-space-2);
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	font-weight: 500;
	line-height: var(--ee-line-height-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--ee-radius-sm);
}

/* Icono de play: solo la variante video (triangulo currentColor). */
.ee-card__format--video::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-left: 0.55em solid currentColor;
	border-top: 0.34em solid transparent;
	border-bottom: 0.34em solid transparent;
}

.ee-card__format a {
	color: var(--wp--preset--color--surface);
}

/* Card horizontal (lateral de hero, entradas de multimedia). */
.ee-card--side {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--ee-space-4);
}

.ee-card--side .ee-card__body {
	flex: 1;
	min-width: 0;
}

.ee-card__body {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ee-space-2);
	padding-top: var(--ee-space-2);
}

.ee-card__cat {
	margin: 0;
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	font-weight: 500;
	line-height: var(--ee-line-height-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ee-color-text-muted);
}

.ee-card__cat a,
.ee-card__cat .wp-block-post-terms__separator {
	color: var(--ee-color-text-muted);
}

.ee-card__cat a:hover {
	color: var(--ee-color-link);
}

.ee-card__title {
	margin: 0;
	color: var(--ee-color-text);
}

.ee-card__title a {
	color: var(--ee-color-text);
}

.ee-card__title a:where(:not(.wp-element-button)) {
	color: var(--ee-color-text);
}

.ee-card__title a:hover {
	color: var(--ee-color-link);
}

.ee-card__excerpt {
	margin: 0;
	color: var(--ee-color-text-muted);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-body);
	line-height: var(--ee-line-height-body);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ee-card--lg .ee-card__excerpt {
	font-size: var(--ee-font-lead);
	line-height: var(--ee-line-height-lead);
	-webkit-line-clamp: 3;
}

.ee-card--md .ee-card__excerpt {
	-webkit-line-clamp: 3;
}

.ee-card--sm .ee-card__excerpt {
	display: none;
}

.ee-card__meta {
	margin: 0;
	color: var(--ee-color-text-muted);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-metadata);
	line-height: var(--ee-line-height-metadata);
}

/* B15.3: autor en la anatomía homogénea de card — mismo estilo de metadato
 * que la fecha; el link al archivo de autor hereda muted y pasa a link en hover. */
.ee-card__author a {
	color: var(--ee-color-text-muted);
}

.ee-card__author a:hover {
	color: var(--ee-color-link);
}

/* --- Grilla principal --- */

.ee-grid--main {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ee-space-5) var(--ee-space-4);
}

.ee-grid--main .wp-block-post {
	margin: 0;
	background: transparent;
}

.ee-grid--main .wp-block-post:first-child {
	grid-column: span 2;
}

.ee-grid--main .wp-block-post:first-child .ee-card__title {
	font-size: var(--ee-font-h2);
	line-height: var(--ee-line-height-h2);
}

/* Edge-case: grilla incompleta (1-2 notas marcadas) sin huecos.
   1 nota → ocupa toda la fila; 2 notas → 2+1 sin hueco. */
.ee-grid--main:has(> :only-child) {
	grid-template-columns: 1fr;
}
.ee-grid--main:has(> :only-child) .wp-block-post:first-child {
	grid-column: 1 / -1;
}
.ee-grid--main:has(> :nth-child(2):last-child) .wp-block-post:first-child {
	grid-column: span 2;
}

/* Grilla de archive: sin nota amplia, titulos uniformes. */
.ee-grid--archive .wp-block-post:first-child {
	grid-column: auto;
}

.ee-grid--archive .wp-block-post:first-child .ee-card__title {
	font-size: var(--ee-font-h3);
	line-height: var(--ee-line-height-h3);
}

/* --- Portada dos columnas: grilla + ads (B17.5) ---
 * El wrapper lleva .ee-module-grid--4col en el HTML (mismo patrón que
 * Multimedia: 4 tracks iguales, gap space-6, mismo responsive). La grilla
 * ocupa 3 tracks y los ads 1: con el MISMO gap adentro y afuera, las 4
 * columnas miden exactamente igual. Sin avisos no hay wrapper (rama else
 * en front-page.php) y la grilla sale full-width idéntica a hoy. */
.ee-home__layout {
	/* B17.5 rev2: vive DENTRO de la sección "En portada" (debajo de su
	 * header), cuyo panel ya aporta padding: sin margen propio. */
	margin-block: 0;
}

.ee-home__main {
	grid-column: span 3;
	min-width: 0;
}

/* Columnas parejas: mismo gap que el grid exterior (ver cálculo arriba). */
.ee-home__main .ee-grid--main {
	gap: var(--ee-space-6);
}

/* Sin nota amplia en esta zona: 3 noticias parejas (precedente
 * .ee-grid--archive). */
.ee-home__main .ee-grid--main .wp-block-post:first-child {
	grid-column: auto;
}

.ee-home__main .ee-grid--main .wp-block-post:first-child .ee-card__title {
	font-size: var(--ee-font-h3);
	line-height: var(--ee-line-height-h3);
}

.ee-home__ads {
	grid-column: span 1;
	position: -webkit-sticky; /* Safari legacy */
	position: sticky;
	top: var(--ee-header-height, var(--ee-space-6));
	z-index: 10;
	min-width: 0;
}

/* El ritmo vertical lo da el layout, no el bloque. */
#ee-home .ee-home__ads .ee-ad-block {
	margin-block: 0;
}

/* --- Modulos secundarios --- */

.ee-modules {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* V.7.4: 4 cols iguales — 3 para Multimedia, 1 para Opinión (Facu 2026-08-29).
	 * V16.2.1: align-items flex-start fija ambas al top sin stretch. */
	align-items: flex-start;
	gap: var(--ee-space-6);
	margin-top: var(--ee-space-6);
}

/* V.7.4: Multimedia occupies full grid width since Opinión moved to hero section.
 * On mobile (64em<) the grid is 1fr so Multimedia fills the row. */
.ee-modules .ee-section--media {
	grid-column: span 4;
}

.ee-modules > .wp-block-group {
	margin-top: 0;
}

/* B15.4 + V16.2.1: alineación y simetría de las dos columnas del módulo
 * inferior.
 * 1) La regla global `.ee-section + .ee-section` (margen superior ee-6)
 *    filtraba dentro de .ee-modules y desalineaba la 2ª columna; se
 *    neutraliza con especificidad de hijo directo.
 * 2) Ambas columnas comparten tratamiento SIN caja (filosofía B15.4,
 *    completada en V16.2.1 tras la era contenida de V16.2): sin fondo, sin
 *    padding y sin radio. Antes Multimedia conservaba padding-block space-5
 *    + inline + radius heredados del bloque base mientras Opinión estaba
 *    pelada → cabeceras desalineadas exactamente un token vertical.
 * 3) Con align-items: flex-start en el contenedor y padding idéntico 0,
 *    ambas cabeceras arrancan en la misma coordenada Y sin depender de la
 *    altura relativa de las columnas; el apilado responsive (≤64em,
 *    grid-template-columns: 1fr) no cambia. */
.ee-modules > .ee-section {
	margin-top: 0;
}

.ee-modules .ee-section--media {
	padding-block: 0;
	padding-inline: 0;
	background: transparent;
	border-radius: 0;
}

/* Lista vertical de entradas (Opinion / Multimedia): lead + hairline. */
.ee-module-list {
	display: flex;
	flex-direction: column;
	gap: var(--ee-space-4);
}

/* Neutraliza WP is-layout-flow (margin por ítem) — gap del contenedor es la única fuente, escala con N */
.ee-module-list.is-layout-flow > * {
	margin-block-start: 0;
	margin-left: 0;
}

/* B15.3: sin border-bottom entre items de listas (Opinión/Multimedia) —
 * separación exclusivamente por gap del contenedor, sin hairlines. */
.ee-module-list .wp-block-post {
	margin: 0;
	min-width: 0;
	background: transparent;
}

/* Opinion: firma destacada + lista de titulares, sin imagenes. */
.ee-module-list .wp-block-post:first-child .ee-card--sm .ee-card__title {
	font-size: var(--ee-font-h3);
	line-height: var(--ee-line-height-h3);
}

.ee-module-list .wp-block-post:not(:first-child) .ee-card--sm .ee-card__title {
	font-size: var(--ee-font-lead);
	font-weight: 500;
	line-height: var(--ee-line-height-lead);
}

/* Multimedia: la primera entrada apila (imagen 16:9), el resto filas. */
.ee-module-list .wp-block-post:first-child .ee-card--md {
	flex-direction: column;
}

.ee-module-list .wp-block-post:first-child .ee-card--md .ee-card__thumb {
	flex: none;
	max-width: 100%;
	aspect-ratio: 16 / 9;
}

.ee-module-list .wp-block-post:not(:first-child) .ee-card--md .ee-card__title {
	font-size: var(--ee-font-body);
	font-weight: 500;
	line-height: var(--ee-line-height-body);
}

/* Fix V10: color títulos Opinión/Multimedia — mismo patrón V0, cierra hueco list */
.ee-module-list .ee-card__title,
.ee-module-list .ee-card__title a,
.ee-module-list .ee-card__title a:where(:not(.wp-element-button)) {
	color: var(--ee-color-text);
}

.ee-module-list .ee-card__title a:hover {
	color: var(--ee-color-link);
}

/* Grilla de 4 columnas (Coberturas especiales). */
.ee-module-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ee-space-5) var(--ee-space-4);
}

/* V.7.9.1.2 — Modificador Multimedia: 2 columnas en desktop (>64em) sin romper
 * En portada (ee-grid--main 3 cols) ni Cobertura (ee-module-grid 3 cols).
 * BEM-lite --media mantiene gap/scroll mobile heredados de .ee-module-grid base,
 * solo sobreescribe grid-template-columns (DRY, no duplicar bloque). */
.ee-module-grid--media {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* V.7.9.1.3 — Modificador Opinión: 2 columnas desktop sin romper grilla de 4.
 * Análogo a .ee-module-grid--media para Multimedia. */
.ee-module-grid--opinion {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* V.7.3 — Modificador Multimedia: 4 columnas desktop, 2 columnas ≤64em,
 * scroll-x ≤37.5em igual patrón que Coberturas. Reutiliza .ee-module-grid
 * base; no es un contenedor nuevo. */
.ee-module-grid--4col {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: flex-start;
	gap: var(--ee-space-6);
}
@media (max-width: 64em) {
	.ee-module-grid--4col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ee-section--panel,
	.ee-section--media,
	.ee-section--grid,
	.ee-section--hero {
		padding-block: var(--ee-space-2);
		padding-inline: var(--ee-space-2);
		background: var(--ee-color-surface);
		border-radius: var(--ee-space-2);
}
	.ast-separate-container .ast-article-post, 
	.ast-separate-container .ast-article-single, 
	.ast-separate-container .comments-title, 
	.ast-separate-container .ast-archive-description {
		padding-block: var(--ee-space-2);
		padding-inline: var(--ee-space-2);
}
}
@media (max-width: 37.5em) {
	.ee-module-grid--4col {
		display: grid;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		gap: var(--ee-space-4);
		scroll-padding-inline: var(--ee-space-4);
		scrollbar-width: none;
	}
	.ee-module-grid--4col::-webkit-scrollbar {
		display: none;
	}
	.ee-module-grid--4col .wp-block-post {
		flex: 0 0 78%;
		min-width: 220px;
		scroll-snap-align: start;
	}
}

/* Edge-case: coberturas con 1-2 notas — sin huecos. */
.ee-module-grid:has(> :only-child) {
	grid-template-columns: 1fr;
}

.ee-module-grid .wp-block-post {
	margin: 0;
	min-width: 0;
	background: transparent;
}

.ee-module-grid .ee-card__thumb {
	aspect-ratio: 4 / 3;
}

/* --- Archive / Categoria --- */

.ee-archive__head {
	margin-bottom: var(--ee-space-5);
}

.ee-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ee-space-2);
	margin-bottom: var(--ee-space-3);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	line-height: var(--ee-line-height-label);
}

.ee-breadcrumb__link {
	color: var(--ee-color-text-muted);
}

.ee-breadcrumb__link:hover {
	color: var(--ee-color-link);
}

.ee-breadcrumb__sep {
	color: var(--ee-color-text-muted);
}

.ee-breadcrumb__current {
	color: var(--ee-color-text);
	font-weight: 500;
}

.ee-archive__title {
	margin: 0;
	color: var(--ee-color-text);
}

.ee-archive__desc {
	margin: var(--ee-space-3) 0 0;
	max-width: var(--ee-content-width);
	color: var(--ee-color-text-muted);
	font-size: var(--ee-font-lead);
	line-height: var(--ee-line-height-lead);
}

/* Navegacion de subsecciones: chips de categoria. */
.ee-archive-nav {
	margin-bottom: var(--ee-space-5);
}

.ee-archive-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ee-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ee-archive-nav__link {
	display: inline-block;
	padding: var(--ee-space-2) var(--ee-space-3);
	background: var(--ee-color-surface);
	border: 1px solid var(--ee-color-border);
	color: var(--ee-color-text);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	font-weight: 500;
	line-height: var(--ee-line-height-label);
	text-decoration: none;
	border-radius: var(--ee-radius-pill);
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ee-archive-nav__link:hover {
	color: var(--ee-color-link);
	border-color: var(--ee-color-link);
	text-decoration: none;
}

.ee-archive-nav__link--active,
.ee-archive-nav__link--active:hover {
	background: var(--wp--preset--color--brand-primary);
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface);
	cursor: default;
}

/* Paginacion nativa (query-pagination): chips accesibles. */
.ee-archive .wp-block-query-pagination {
	gap: var(--ee-space-3);
	margin-top: var(--ee-space-6);
}

.ee-archive .wp-block-query-pagination > * {
	margin: 0;
}

.ee-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	padding: var(--ee-space-2) var(--ee-space-3);
	background: var(--ee-color-surface);
	border: 1px solid var(--ee-color-border);
	color: var(--ee-color-text);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	line-height: var(--ee-line-height-label);
	text-decoration: none;
	border-radius: var(--ee-radius-pill);
}

.ee-archive .page-numbers:hover {
	color: var(--ee-color-link);
	border-color: var(--ee-color-link);
}

.ee-archive .page-numbers.current {
	background: var(--wp--preset--color--brand-primary);
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface);
}

.ee-archive .wp-block-query-pagination-next,
.ee-archive .wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	padding: var(--ee-space-2) var(--ee-space-3);
	background: var(--ee-color-surface);
	border: 1px solid var(--ee-color-border);
	color: var(--ee-color-text);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	font-weight: 500;
	line-height: var(--ee-line-height-label);
	border-radius: var(--ee-radius-pill);
}

.ee-archive .wp-block-query-pagination-next:hover,
.ee-archive .wp-block-query-pagination-previous:hover {
	color: var(--ee-color-link);
	border-color: var(--ee-color-link);
}

.ee-archive__empty {
	margin: 0;
	color: var(--ee-color-text-muted);
	font-size: var(--ee-font-lead);
	line-height: var(--ee-line-height-lead);
}

/* --- Perfil de autor --- */

.ee-author__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: var(--ee-space-6);
}

.ee-author__avatar {
	margin-bottom: var(--ee-space-4);
}

.ee-author__avatar img {
	display: block;
	width: var(--ee-space-8);
	height: var(--ee-space-8);
	border-radius: var(--ee-radius-full);
	object-fit: cover;
	background: var(--ee-color-surface);
	border: 1px solid var(--ee-color-border);
}

.ee-author__name {
	margin: 0;
	font-family: var(--ee-font-heading);
	font-size: var(--ee-font-h1);
	font-weight: var(--ee-font-weight-h1);
	line-height: var(--ee-line-height-h1);
}

.ee-author__bio {
	margin: var(--ee-space-3) auto 0;
	max-width: var(--ee-content-width);
	color: var(--ee-color-text-muted);
	font-size: var(--ee-font-lead);
	line-height: var(--ee-line-height-lead);
}

/* Redes: chips, mismo sistema visual que la subnav de seccion. */
.ee-author__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ee-space-2);
	margin: var(--ee-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.ee-author__links-link {
	display: inline-block;
	padding: var(--ee-space-2) var(--ee-space-3);
	background: var(--ee-color-surface);
	border: 1px solid var(--ee-color-border);
	color: var(--ee-color-text);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	font-weight: 500;
	line-height: var(--ee-line-height-label);
	border-radius: var(--ee-radius-pill);
}

.ee-author__links-link:hover {
	color: var(--ee-color-link);
	border-color: var(--ee-color-link);
}

/* Cabeza de grilla: misma regla y titulo que los modulos del home. */

@media (max-width: 37.5em) {
	.ee-author__avatar img {
		width: var(--ee-space-7);
		height: var(--ee-space-7);
	}

	.ee-author__head {
		margin-bottom: var(--ee-space-6);
	}
}

/* --- Lo mas popular (ranking editorial) --- */

.ee-popular__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--ee-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ee-popular__item {
	display: flex;
	flex-direction: column;
	gap: var(--ee-space-2);
}

.ee-popular__rank {
	font-family: var(--ee-font-heading);
	font-size: var(--ee-font-h2);
	font-weight: var(--ee-font-weight-h2);
	line-height: var(--ee-line-height-h2);
	color: var(--ee-color-text-muted);
}

.ee-popular__cat {
	color: var(--ee-color-text-muted);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-metadata);
	font-weight: 500;
	line-height: var(--ee-line-height-metadata);
}

.ee-popular__title {
	margin: 0;
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	font-weight: 500;
	line-height: var(--ee-line-height-label);
}

.ee-popular__title a {
	color: var(--ee-color-text);
}

.ee-popular__title a:hover {
	color: var(--ee-color-link);
}

@media (max-width: 64em) {
	.ee-popular__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 37.5em) {
	.ee-popular__list {
		grid-template-columns: 1fr;
	}
}

/* --- Tablet (<=1024px) --- */

@media screen and (max-width: 64em) {
	/* V16.1: sangría lateral de vista angosta — estrictamente token de
	 * gutter (space-4, mismo valor que desktop para continuidad). */
	.ee-container {
		padding-inline: var(--ee-space-2);
	}

	/* V16.2: paneles contenidos — el padding interno baja un escalón del
	 * token (space-4) en tablet/mobile; sin bleeds, el fondo queda dentro
	 * de la caja de lectura en todo el rango. */
	.ee-section--panel,
	.ee-section--media,
	.ee-section--grid {
		padding-inline: var(--ee-space-2);
	}

	/* V.7.5.2 tablet: mantener ÚLTIMA HORA en mínimo aunque el panel
	 * baje a space-4. Sin este override, el @media 64em anterior
	 * (mismo 0,1,0 sobre .ee-section--panel) pisaría el space-1 base
	 * de .ee-breaking-section y volvería a 16px duplicados en tablet. */
	.ee-breaking-section {
		padding-block: var(--ee-space-1);
		padding-inline: var(--ee-space-1);
	}

	.ee-hero {
		gap: var(--ee-space-7);
	}

	.ee-grid--main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* B17.5: en tablet/mobile cada bloque ocupa la fila completa
	 * (2 tracks de --4col) y los ads quedan en flujo (igual que en nota). */
	.ee-home__main,
	.ee-home__ads {
		grid-column: span 2;
	}

	.ee-home__ads {
		position: static;
	}

	.ee-breaking {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ee-module-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ee-modules {
		grid-template-columns: 1fr;
	}

	.ee-modules .ee-section--media{
		grid-column: span 1;

	}

	.ee-section--hero .wp-block-column:first-child {
		width: 100% !important;
	}

	.ee-section--hero .wp-block-column:last-child {
		width: 100% !important;
		margin-top: var(--ee-space-6);
	}

.ee-section--hero .wp-block-column:last-child {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ee-space-5);
}

	.ee-section--hero .wp-block-column:last-child .ee-card {
		flex-direction: column;
	}

	.ee-section--hero .wp-block-column:last-child .ee-card__thumb {
		flex: none;
		max-width: 100%;
		aspect-ratio: 16 / 9;
	}
}

/* --- Mobile (<=600px) --- */

@media screen and (max-width: 37.5em) {
	.ee-main {
		padding-block: var(--ee-space-4);
	}

	/* .ee-container padding mobile vive en chrome.css (V9.3). */

	/* V16.3 + mobile-compact: separación space-3 (mitad de escala) en
	 * mobile — aire suficiente entre paneles sin el gasto de space-6. */
	.ee-section + .ee-section,
	.ee-modules,
	.ee-modules + .ee-section {
		margin-top: var(--ee-space-3);
	}

	/* V.7.9.2.2 — regla faltante: .ee-modules 1fr explícito en 37.5em.
	 * Existe en @64em (936) y cubre 425px por cascada, pero is-layout-flex
	 * de Gutenberg (front-page.php:49 flex nowrap) compite a 425px y muestra
	 * fila en screenshot 425px. Regla explícita en mobile garantiza apilado
	 * Multimedia arriba / Opinión abajo (orden DOM B15.4). */
	.ee-modules {
		display: grid;
		grid-template-columns: 1fr;
	}

	/* Franja de ultima hora: scroll horizontal (estilo elDiario).
	 * V.7.5.2 mobile: padding anulado — el wrapper .ee-breaking-section
	 * (space-1) ya aporta el gutter lateral mínimo; el grid no duplica.
	 * scroll-padding-inline se mantiene en el contenedor scrolleable
	 * para que el primer snap no quede pegado al borde del panel. */
	.ee-breaking {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		scroll-padding-inline: var(--ee-space-1);
	}

	.ee-breaking .wp-block-post {
		flex: 0 0 78%;
		min-width: 220px; /* Constante de layout: ancho minimo del item scrolleable. */
		scroll-snap-align: start;
	}

	/* Coberturas: mismas reglas de scroll horizontal.
	 * V.7.5: fix pegado a bordes y snap impreciso — scroll-padding deja aire
	 * al borde para que el primer snap no quede pegado; gap tokeniza
	 * separación entre cards consistente con Última hora; scrollbar oculto. */
	.ee-module-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--ee-space-3);
		gap: var(--ee-space-4);
		scroll-padding-inline: var(--ee-space-4);
		scrollbar-width: none;
	}

	.ee-module-grid.ee-module-grid--opinion {
		display: grid;
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.ee-module-grid::-webkit-scrollbar {
		display: none;
	}

	.ee-module-grid .wp-block-post {
		flex: 0 0 78%;
		min-width: 220px; /* Constante de layout: ancho minimo del item scrolleable. */
		scroll-snap-align: start;
	}

	/* V.7.9.2.2 — Opinión mobile home: scroll horizontal, no lista vertical.
	 * V.6.4 lista vertical aplicaba a categorías/archive, no a home donde
	 * 1 columna estrecha (343px) con 3 cards text-only ocupaba alto excesivo.
	 * Reusa mecanismo V.6.2 de .ee-module-grid (gap/snap/padding) para
	 * consistencia carruseles. Scoped a .ee-modules para no tocar otras listas. */
	.ee-modules .ee-module-list {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--ee-space-3);
		gap: var(--ee-space-4);
		scroll-padding-inline: var(--ee-space-4);
		scrollbar-width: none;
	}

	.ee-modules .ee-module-list::-webkit-scrollbar {
		display: none;
	}

	.ee-modules .ee-module-list .wp-block-post {
		flex: 0 0 78%;
		min-width: 220px;
		scroll-snap-align: start;
	}

	/* Navegación de subsecciones: scroll horizontal */
	.ee-archive-nav {
		margin-inline: calc(var(--ee-space-4) * -1);
		padding-inline: var(--ee-space-4);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ee-archive-nav::-webkit-scrollbar {
		display: none;
	}

	.ee-archive-nav__list {
		flex-wrap: nowrap;
		padding-bottom: var(--ee-space-2);
	}

	.ee-archive-nav__item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* Cards horizontales (hero lateral + multimedia): se apilan. */
	.ee-card--md {
		flex-direction: column;
		margin-bottom: var(--space-2);
	}
	.ee-module-grid.ee-module-grid--4col .ee-card--md, .ee-home--cobertura .ee-card--md {
		min-width: 80%;
	}

	.ee-card--md .ee-card__thumb {
		flex: none;
		max-width: 100%;
		aspect-ratio: 16 / 9;
	}

	/* V.7.3 ajuste: img a ancho completo de su contenedor, no 100vw.
	 * Se revierte bleed a viewport (margin -2*space-4 / width +4*space-4)
	 * que generaba overflow. Ahora thumb ocupa 100% del ancho útil de la
	 * card dentro de .ee-section--hero (respeta gutter de .ee-container +
	 * padding de sección), sin romper layout. */
	.ee-section--hero .ee-card--lg .ee-card__thumb,
	.ee-section--hero .ee-card--side.ee-card--md .ee-card__thumb {
		margin-inline: 0;
		width: 100%;
		max-width: 100%;
		/*border-left: 1px solid var(--ee-color-border);
		border-right: 1px solid var(--ee-color-border);*/
	}

	/* V.7.8 (c) — gap hero-side mobile supera padding interno card (8+8=16)
	 * para jerarquía clara: space-5 (24) → space-6 (32) entre cards apiladas. */
.ee-section--hero .wp-block-column:last-child {
		gap: var(--ee-space-6);
	}

/* V.7.8 (d) — card body compacto mobile: space-2 (8) → space-1 (4) */
	.ee-card__body {
		gap: var(--ee-space-1);
		padding-top: var(--ee-space-1);
	}

	.ee-section--hero .wp-block-column:last-child,
	.ee-grid--main {
		grid-template-columns: 1fr;
	}

	.ee-grid--main .wp-block-post:first-child {
		grid-column: auto;
	}
}

/* --- Desktop XL (≥1280px) --- */

@media screen and (min-width: 80em) {
	.ee-breaking {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.ee-breaking ul li.ast-separate-container .ast-article-post {
		padding: var(--ee-space-1);
	} 

	.ee-popular__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}