/* =================================================================
   home-news.css — Sección "Lo Último en Interamérica" (Figma 2176:1224).
   Carrusel de las últimas News. Solo en is_front_page() (inc/enqueue.php).
   Breakpoint estándar 80rem (§12).
   ================================================================= */

@layer views {
	.home-news {
		padding-block: clamp(3rem, 6vw, 5.625rem); /* py-90 del Inspect */
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	.home-news__inner {
		max-width: var(--container);
		margin-inline: auto;
	}

	/* ---- Cabecera (eyebrow + flechas) ---- */
	.home-news__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-m);
		margin-bottom: var(--space-m);
	}
	/* Tipografía (DIA DS/Label/Featured section) generalizada a .label-featured-section, base.css
	   — la clase BEM se mantiene en el HTML por si necesita layout propio a futuro, pero ya no
	   lleva estilos acá. */
	.home-news__nav { display: flex; gap: .5rem; flex-shrink: 0; }
	.home-news__nav-btn {
		display: flex; align-items: center; justify-content: center;
		width: 54px; height: 54px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		border-radius: 4px;
		background: transparent;
		cursor: pointer;
		/* El ícono (dia_icon('chevron-right')) usa stroke="currentColor" — sin un color propio acá,
		   un <button> hereda el color por defecto que le dé el navegador, que en algunos Android
		   (Chrome/WebView) resuelve a un azul de sistema en vez de negro. Bug real reportado con
		   captura (mobile). */
		color: var(--dia-color-text-primary, #121212);
	}
	/* Mismos 3 estados que .home-stories__nav-btn (home-stories.css) — mismo criterio. Disabled:
	   spec exacta de David — borde propio #CACACA (no el #232323 de la regla base) + opacity:.7. */
	.home-news__nav-btn.swiper-button-disabled {
		border-radius: 4px;
		border: 1px solid #cacaca;
		opacity: .7;
		cursor: default;
	}
	.home-news__nav-btn:not(.swiper-button-disabled):hover {
		border: 1px solid #cdd6e1;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}
	.home-news__nav-icon { display: block; width: 16px; height: 16px; }
	.home-news__nav-icon svg { display: block; width: 100%; height: 100%; }
	.home-news__nav-icon--prev { transform: rotate(180deg); }

	/* ---- Slider ---- */
	.home-news__swiper { width: 100%; }
	.home-news__swiper .swiper-slide { height: auto; } /* alto auto → Swiper iguala todas a la más alta */

	/* ---- Card base ---- */
	/* min-height fijo (= alto de la destacada en el mock) en AMBOS tipos: el stretch de Swiper
	   (swiper-wrapper es flex, align-items:stretch por default) ya iguala las cards de una misma
	   fila, pero fijar el mínimo aquí evita que una card "flat" con poco texto se vea hundida o
	   que el cálculo de Swiper titubee en el primer paint. line-clamp en título/excerpt (abajo)
	   evita que un texto largo desborde ese alto. */
	.news-card {
		position: relative; /* ancla el stretched-link de .news-card__title-link::after */
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 490px;
		border-radius: 12px;
		overflow: hidden;
		text-decoration: none;
		color: inherit;
	}
	.news-card__tag {
		display: inline-flex; align-items: center; gap: 8px;
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
	.news-card__tag svg { width: 16px; height: 16px; flex-shrink: 0; }
	/* El tag de categoría es un link PROPIO, distinto del que abre el artículo — necesita
	   position+z-index para no quedar tapado por el link/stretched-link que cubre el resto de
	   la card (mismo patrón que .res-card__circle en home-resources.css, que escapa del
	   stretched-link de la misma manera). El de "clock" (tiempo de lectura) se queda como
	   <span>, nunca es un link. */
	a.news-card__tag {
		position: relative; z-index: 1;
		text-decoration: none;
		color: inherit;
	}

	/* Link que abre el artículo en --flat: envuelve el título (span) y se ESTIRA sobre toda la
	   card vía ::after (mismo patrón que .res-card__title a::after en home-resources.css), así
	   que "click en la imagen" también navega sin que la imagen tenga que ser su propio <a>.
	   NO se usa en --featured (ver .news-card__link más abajo) — ahí .news-card__featured-content
	   es TAMBIÉN position:relative (para su propio z-index sobre el fondo), así que el ::after
	   de un link anidado adentro se estira contra ESE contenedor chico, no contra la card entera
	   — bug real encontrado en vivo, ver §12.36 de gotchas.md. */
	.news-card__title-link {
		color: inherit;
		text-decoration: none;
	}
	.news-card__title-link::after {
		content: '';
		position: absolute;
		inset: 0;
	}

	/* ---- Card destacada (imagen de fondo + glass) ---- */
	.news-card--featured {
		position: relative;
		min-height: 490px;
		padding: 32px;
		justify-content: flex-end;
		color: var(--dia-color-text-inverse, #fdfdfd);
	}
	/* Link invisible que cubre TODA la card (imagen+título+CTA) — hijo DIRECTO de
	   .news-card--featured (no anidado en .news-card__featured-content, ver §12.36) para que
	   position:absolute;inset:0 resuelva contra la card completa. */
	.news-card__link {
		position: absolute; inset: 0; z-index: 2;
	}
	.news-card__bg {
		position: absolute; inset: 0;
		width: 100%; height: 100%;
		object-fit: cover;
		z-index: 0;
		/* Mismo timing "con peso" que .story-card__img (home-stories.css) — crece al hover de
		   CUALQUIER parte de la card (título, tag, botón), no solo al pasar sobre la imagen misma:
		   título y foto llevan al mismo link, así que ambos deben dar el mismo feedback. */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
	}
	.news-card--featured:hover .news-card__bg { transform: scale(1.06); }
	/* Scrim superior (pedido explícito del diseñador, 2026-07-06): sin esto, el tag de categoría
	   arriba-izquierda (.news-card__tag--over) solo tenía un drop-shadow para legibilidad — insuficiente
	   contra fotos claras/con detalle arriba (bug real reportado con captura). Mismo criterio que
	   .news-card__glass (abajo) pero sin blur/grano, solo el degradado — un ::before nuevo en vez de
	   tocar .news-card__bg directo: ese es un <img>, un `background` ahí quedaría DETRÁS del bitmap
	   real de la imagen (no se vería). object-fit:cover no afecta a un ::before, así que no hace
	   falta position:absolute;inset:0 con cuidado extra — el overflow:hidden + border-radius ya
	   heredados de .news-card (clase base) recortan este pseudo-elemento solos, sin CSS adicional.
	   z-index:1 (mismo nivel que .news-card__glass): pisan zonas opuestas de la card (arriba vs.
	   abajo) así que el orden entre ambos no importa en la práctica. rgba(18,18,18) es
	   --dia-color-text-primary (#121212) en rgb — se usa la variable para no hardcodear un color
	   que ya existe en el tema. SOLO en .news-card--featured (NO en .news-main-article, que tiene
	   su propia card destacada del archive de News): ahí el tag de categoría no queda arriba de la
	   foto, va abajo cerca del título — no tiene este problema, confirmado con el usuario. */
	.news-card--featured::before {
		content: '';
		position: absolute; inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(180deg, color-mix(in srgb, var(--dia-color-text-primary, #121212) 50%, transparent) 0%, transparent 50.1%);
	}
	/* El tag de categoría tiene su propio hover, para no confundirse con "esto también abre el
	   artículo" — el resto de la card (imagen/título) responde igual sin importar qué parte
	   de la fila se está pasando. Selector "a.news-card__tag" (no ".news-card__tag" a secas):
	   el tag de "clock" (tiempo de lectura) comparte la misma clase pero es un <span> sin link,
	   no debe heredar este hover. */
	.news-card--featured a.news-card__tag:hover {
		opacity: .72;
		text-decoration: underline;
	}
	/* Glass = blur + grano en la mitad inferior (mismo patrón que story/projects). */
	.news-card__glass {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 73%; /* ~358/490 del mock */
		z-index: 1;
		pointer-events: none;
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);
		-webkit-mask-image: linear-gradient(to top, #000 35%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(to top, #000 35%, rgba(0, 0, 0, 0) 100%);
	}
	.news-card__glass::after {
		content: '';
		position: absolute; inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 358' preserveAspectRatio='none'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' result='a'/%3E%3CfeComponentTransfer in='a'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='380' height='358' fill='black' opacity='0.14' filter='url(%23grain)'/%3E%3C/svg%3E");
		background-size: 100% 100%;
	}
	.news-card__tag--over { color: var(--dia-color-text-inverse, #fdfdfd); }
	/* Categoría arriba-izquierda, sobre la imagen. */
	.news-card--featured > .news-card__tag--over {
		position: absolute; top: 32px; left: 32px; z-index: 3; /* encima de .news-card__link (2): mantiene su propio destino clickeable */
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
	}
	.news-card__featured-content {
		position: relative; z-index: 2;
		/* Nada adentro (título, tag de "clock", botón CTA) es su propio link ya — todo es
		   decorativo, así que deja pasar el click al .news-card__link que cubre toda la card. */
		pointer-events: none;
		display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
	}
	.news-card__featured-title { /* H4 — Noto Sans Bold (SemiCondensed descartado, ver enqueue) */
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: var(--dia-color-text-inverse, #fdfdfd);
		text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
		/* Mismo criterio que los títulos flat: un título larguísimo no debe inflar el alto de la
		   card destacada por encima de las demás. */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	/* CTA circular "Glass" dorado (mismo tratamiento que la card de Proyectos, con base oscura
	   translúcida + frost para legibilidad sobre cualquier imagen). */
	.news-card__cta {
		margin-top: 4px;
		display: inline-flex; align-items: center; justify-content: center;
		width: 60px; height: 60px;
		border: 1px solid rgba(255, 255, 255, .55);
		border-radius: 50%;
		overflow: hidden; /* recorta el par de íconos del swap (ver abajo) */
		position: relative; /* contiene a los íconos position:absolute del swap */
		color: #fff;
		text-decoration: none;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		background:
			linear-gradient(153deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .22) 100%),
			linear-gradient(153deg, rgba(253, 181, 0, 0) 8%, rgba(253, 181, 0, .24) 100%);
		box-shadow:
			0 33px 9px 0 rgba(0, 0, 0, .01),
			0 21px 8px 0 rgba(0, 0, 0, .10),
			0 12px 7px 0 rgba(0, 0, 0, .35),
			0 5px 5px 0 rgba(0, 0, 0, .60),
			0 1px 3px 0 rgba(0, 0, 0, .69);
	}
	.news-card__cta svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }

	/* Swap de dos íconos en hover, mismo patrón que .res-card__circle / .home-projects__card-cta.
	   JS (home-news.js) togglea .is-active en el hover de .news-card. */
	.news-card__cta-icon {
		position: absolute; inset: 0;
		display: flex; align-items: center; justify-content: center;
		transition: transform .35s cubic-bezier(.4, 0, .2, 1);
	}
	.news-card__cta-icon--a { transform: translate(0, 0); }
	.news-card__cta-icon--b { transform: translate(-140%, 140%); }
	.news-card__cta.is-active .news-card__cta-icon--a { transform: translate(140%, -140%); }
	.news-card__cta.is-active .news-card__cta-icon--b { transform: translate(0, 0); }

	/* ---- Card flat (imagen arriba + texto) ---- */
	.news-card--flat {
		background: #fdfdfd;
		border: 1px solid #d0d1d3;
	}
	/* aspect-ratio:16/10 (antes height:238px fijo) — pedido explícito 2026-07-06: un alto en PX no
	   escala con el ancho real de la card, que cambia según cuántas columnas entren por breakpoint
	   (grid de 3/2 columnas en news.css, carrusel en home) — 238px solo daba 16:10 en el ancho
	   puntual para el que se calculó (~380px), se veía más recortada o más aplastada en cualquier
	   otro ancho (bug real reportado con captura a 1024px, pero afecta cualquier resolución). Con
	   aspect-ratio, el alto sigue al ancho automáticamente y la proporción se mantiene siempre.
	   Excepto las cards "verticales" (texto superpuesto sobre la imagen a toda la card, distinto
	   componente): esas no usan .news-card__media, se tratan aparte. */
	.news-card__media {
		display: block;
		aspect-ratio: 16 / 10;
		background: #e4e4e7;
		overflow: hidden;
		flex-shrink: 0;
	}
	.news-card__media img {
		width: 100%; height: 100%; object-fit: cover; display: block;
		/* Mismo timing que .news-card__bg (card destacada) y .story-card__img — crece al hover de
		   cualquier parte de la card, no solo de la imagen (ver .news-card--flat:hover abajo). */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
	}
	.news-card--flat:hover .news-card__media img { transform: scale(1.06); }
	.news-card__body {
		display: flex; flex-direction: column;
		gap: 12px;
		padding: 24px;
		flex: 1;
	}
	.news-card--flat .news-card__tag,
	.news-card__meta { color: #777; }
	.news-card--flat a.news-card__tag:hover {
		color: #3e8391;
		text-decoration: underline;
	}
	.news-card__meta {
		margin-top: auto; /* siempre pegado al fondo de la card, sin importar cuánto texto haya arriba */
		display: inline-flex; align-items: center; gap: 8px; /* ícono de libro abierto + texto — mismo patrón que .news-card__tag, unificado 2026-07-06 */
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
	.news-card__meta svg { width: 16px; height: 16px; flex-shrink: 0; }
	.news-card__title { /* H3 News — Noto Serif Condensed SemiBold 20/28 */
		margin: 0;
		font-family: var(--font-serif);
		font-stretch: 75%;
		font-weight: 600;
		font-size: 20px;
		line-height: 28px;
		color: var(--dia-color-text-primary, #121212);
		/* Recorta a 2 líneas: títulos largos no deben empujar el alto de la card. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		transition: color .2s ease;
	}
	.news-card--flat:hover .news-card__title { color: #767778; }
	.news-card__excerpt {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		color: var(--dia-color-text-primary, #121212);
		/* Recorta a 3 líneas: mismo criterio que el título, alto consistente entre cards. */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* ---- Dots de paginación (Figma 2510:2310, Pagination-Slider) ----
	   Círculos uniformes de 12px, SIN la píldora que crece — eso era un tratamiento anterior
	   que no corresponde a este diseño. Colores literales del Inspect: DIA DS/Primitive/
	   neutral/50 (#E5E5E5) inactivo, DIA DS/Primitive/blue/100 (#CDD6E1) activo. */
	.home-news__dots {
		display: flex; justify-content: center; align-items: center;
		gap: 8px;
		margin-top: var(--space-l);
	}
	/* !important necesario: swiper-bundle.min.css (CDN) define sus propios estilos de
	   .swiper-pagination-bullet/-active SIN @layer, y por spec eso le gana a cualquier regla en
	   @layer (este archivo) sin importar especificidad — mismo gotcha de §12.1/§12.22 ya
	   documentado para hero-news/home-stories. Sin esto seguía mostrando el azul/tamaño default
	   de Swiper en vez de nuestros colores. */
	.home-news__dots .swiper-pagination-bullet {
		width: 12px !important; height: 12px !important;
		border-radius: 50% !important;
		background: #e5e5e5 !important;
		opacity: 1 !important;
		cursor: pointer;
		transition: background-color .15s;
	}
	.home-news__dots .swiper-pagination-bullet-active {
		background: #cdd6e1 !important;
	}

	/* 64rem, no el estándar 80rem del sitio (§12.5) — a propósito: es solo una red de seguridad de
	   wrap para el eyebrow contra las flechas de nav, no un cambio de layout estructural (no hay
	   grid/columnas que dependan de este corte, es el único breakpoint de esta cabecera). Con el
	   contenido real ("LATEST IN INTER-AMERICA" y equivalentes) nunca se nota si el wrap hace falta
	   antes de 1280px, porque el eyebrow nunca llega a colisionar con las flechas — confirmado
	   visualmente 2026-07-13 en newdia.nett.mx a 1014px, sin problema. */
	@media (width < 64rem) {
		.home-news__head { flex-wrap: wrap; }
		.news-card__featured-title { font-size: 22px; line-height: 28px; }
	}

	/* Mobile real (Figma 2510:2300): título y flechas SIEMPRE en la misma fila, nunca se apilan
	   -- el shrink de .label-featured-section (base.css, mismo breakpoint) es justo lo que hace
	   que el eyebrow quepa junto a los botones (a 24px/7px de tracking desbordaba, forzando el
	   wrap que mandaba las flechas a una fila aparte). */
	@media (width < 48rem) {
		.home-news__head { flex-wrap: nowrap; }
	}
}