/*
 * Últimas Research (WP-01D2-B) — biblioteca editorial de Research, inmediatamente después de
 * Technology. Composición asimétrica ~60/40: Featured (Datos Macro II, con Visual Evidence) a la
 * izquierda, 3 entradas secondary puramente editoriales (tipografía/metadata/separadores, sin
 * cajas ni imágenes) a la derecha -- evita cuatro cards idénticas y evita saturar la sección con
 * imágenes que no aportan jerarquía.
 * Superficie --smq-gray-50 (misma superficie "papel" de Magnitudes) para crear ritmo: Technology
 * navy -> Latest Research gris claro editorial -> (futuro) Membership -- sin sucesión monótona de
 * blancos (Pillars ya es blanco).
 * Reutiliza el Visual Evidence System de WP-01D1 (.smq-evidence/.smq-evidence-frame/
 * .smq-evidence-label/.smq-evidence-media, definidos en pillars.css) sin crear un segundo sistema;
 * la única extensión es el modificador .smq-evidence--research-latest de aspect-ratio, propio de
 * este archivo, que no toca ninguna regla existente de pillars.css.
 * Fixture V5 (SMQ-R-2026-060/058/042/009) -- estructura de datos pensada para integración dinámica
 * futura desde smq-core (research_id/title/excerpt/area/technology/content_type/
 * publication_date/visual_asset), sin bypass ni API nueva.
 */
.smq-latest-research {
	width: 100%;
	background: var(--smq-gray-50);
	color: var(--smq-navy-950);
	/* WP-01D2-R1: padding inferior reducido (space-8 -> space-6); el superior se conserva porque
	   la transición navy(Technology) -> gris claro ya funciona como pausa editorial. */
	padding: var(--smq-space-7) 0 var(--smq-space-6);
}
.smq-latest-research-inner {
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
}

/* WP-01D2-R1: el CTA global vive ahora DENTRO del bloque de header (bajo el intro), no como
   hermano flex distante -- deja de leerse como un elemento aislado a la derecha. */
.smq-latest-research-head {
	max-width: 640px;
	margin-bottom: var(--smq-space-6);
}
.smq-section-heading {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	line-height: 1.2;
	color: var(--smq-navy-950);
	margin: 0 0 var(--smq-space-2);
}
.smq-latest-research-intro {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--smq-gray-600);
	margin: 0;
	max-width: 56ch;
}
/* CTA global -- mismo lenguaje visual que los CTAs discretos de Pillars (T005 solo en Hero). */
.smq-latest-research-global-cta {
	margin: var(--smq-space-3) 0 0;
}
.smq-latest-research-global-cta a {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--smq-navy-950);
	text-decoration: none;
	border-bottom: 1px solid var(--smq-gray-200);
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.smq-latest-research-global-cta a:hover,
.smq-latest-research-global-cta a:focus-visible {
	color: var(--smq-blue-interactive-strong);
	border-color: var(--smq-blue-interactive-strong);
}

/* WP-01D2-R1: align-items:stretch (en vez de start) hace que la columna secondary pueda repartir
   sus 3 entradas en la misma altura que fija la Featured (la más alta), sin height/position
   arbitrarios -- ver .smq-research-list más abajo. */
.smq-latest-research-row {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--smq-space-7);
	align-items: stretch;
}

/* ---- Featured ---- */
.smq-research-entry--featured {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-3);
}
/* Micro-identificador editorial (índice de catálogo + ID SMQ real, solo Featured) -- discreto,
   mono, más apagado que el meta principal para no competir con área/fecha/título. */
.smq-research-index {
	font-family: var(--smq-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-gray-400);
	margin: 0;
}
.smq-research-meta {
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-gray-600);
	margin: 0;
}
.smq-research-entry--featured .smq-research-meta .smq-research-area {
	color: var(--smq-blue-brand);
}
.smq-research-title {
	font-family: var(--smq-font-display);
	font-weight: 700;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-research-entry--featured .smq-research-title {
	font-size: clamp(1.4rem, 2vw, 1.85rem);
	line-height: 1.2;
}
.smq-research-excerpt {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--smq-gray-600);
	margin: 0;
	max-width: 58ch;
}
.smq-research-cta a {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--smq-navy-950);
	text-decoration: none;
	border-bottom: 1px solid var(--smq-gray-200);
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.smq-research-cta a:hover,
.smq-research-cta a:focus-visible {
	color: var(--smq-blue-interactive-strong);
	border-color: var(--smq-blue-interactive-strong);
}

/* Extensión mínima del Visual Evidence System (WP-01D1): mismo componente, nuevo modificador de
   proporción -- WP-01D2-R1 corrige la causa principal del exceso de altura: SMQVIS-000842 es una
   tabla en formato retrato (0.81); forzarla a una ventana panorámica 16:9 (crop no destructivo vía
   object-fit:cover, sin tocar el archivo original) reduce drásticamente la altura de toda la
   sección. object-position:top conserva la barra de herramientas de AmiBroker + la cabecera de la
   tabla (Date/UNRATE/CPI/Fed Funds/10Y-2Y) + las primeras filas -- FRED, datos macro e integración
   con AmiBroker siguen siendo legibles sin mostrar la tabla completa (no hace falta: la evidencia
   funciona aquí como pieza editorial, no como documentación técnica completa). */
.smq-evidence--research-latest .smq-evidence-frame {
	aspect-ratio: 16 / 9;
	width: 100%;
}
.smq-evidence--research-latest .smq-evidence-media {
	object-position: top;
}
/* SG-02 ya presente por herencia del propio .smq-evidence-frame (WP-01D1) -- es el único Signature
   Geometry de la sección; no se añade un segundo detalle en el encabezado para mantener el tono
   sobrio "technical editorial" pedido. */

/* ---- Secondary (puramente editorial: sin cajas, sin imágenes) ----
   WP-01D2-R1: con la columna estirada a la altura de la Featured (ver .smq-latest-research-row),
   las 3 entradas se reparten con flex + space-between -- llenan esa altura de forma editorial
   (más aire entre entradas), sin fixed height ni position:absolute. */
.smq-research-list {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
}
.smq-research-entry--secondary {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
	padding: var(--smq-space-4) 0;
	border-top: 1px solid var(--smq-gray-200);
}
.smq-research-list .smq-research-entry--secondary:first-child {
	padding-top: 0;
	border-top: none;
}
.smq-research-entry--secondary .smq-research-title {
	font-size: 1.05rem;
	line-height: 1.3;
}
.smq-research-entry--secondary .smq-research-excerpt {
	font-size: 0.92rem;
	max-width: 46ch;
}

/* Baseline responsive (WEB-014): 375 / 768 / 1440px */
@media (max-width: 768px) {
	.smq-latest-research {
		padding: var(--smq-space-6) 0 var(--smq-space-5);
	}
	.smq-latest-research-inner {
		width: calc(100% - 32px);
	}
	.smq-latest-research-row {
		grid-template-columns: 1fr;
		gap: var(--smq-space-6);
		align-items: initial;
	}
	/* Columna única: la lista secondary ya no necesita estirarse a la altura de la Featured. */
	.smq-research-list {
		height: auto;
		justify-content: flex-start;
	}
}
@media (max-width: 375px) {
	/* 16:9 deja muy pocas filas legibles en un frame estrecho -- 4:3 conserva más contexto de la
	   tabla sin volver al recorte casi nulo (y a la altura excesiva) del formato retrato original. */
	.smq-evidence--research-latest .smq-evidence-frame {
		aspect-ratio: 4 / 3;
	}
}