/* =================================================================
   home-stories.css — Sección "Historias" del home (Figma 2176:1300).
   Solo se encola en is_front_page() (inc/enqueue.php). Breakpoint estándar 80rem (§12).
   ================================================================= */

@layer views {
	.home-stories {
		padding-block: var(--space-xl);
		background: #edf2f6;
		/* Replica EXACTO el gutter efectivo de .hero-home__inner (padding-inline del .hero-home
		   + max-width:1200/margin:auto del inner): matemáticamente esos dos pasos combinados
		   equivalen a max(padding, (anchoDisponible - 1200px)/2) — confirmado: en pantallas
		   angostas gana el padding fijo, en pantallas más anchas que 1200px+2×padding gana el
		   término de centrado y el padding "se cancela" (por eso Hero se ve con MÁS gutter en
		   monitores anchos, no es un bug de Hero). Una sola fórmula acá, sin nesting, para que
		   ambas secciones midan IDÉNTICO sin importar el viewport — ver §12.16 de la
		   arquitectura para el porqué de NO mezclar max-width+margin:auto+padding en un mismo
		   elemento (eso fue el bug original de esta sección). */
		--gutter: max(clamp(var(--space-m), 8vw, 7.5rem), calc((100% - var(--container)) / 2));
	}

	.home-stories__head {
		padding-inline: var(--gutter);
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-m);
		margin-bottom: var(--space-l);
	}

	.home-stories__heading { display: flex; flex-direction: column; gap: .75rem; }

	/* Tipografía (DIA DS/Label/Featured section — NO confundir con .label-eyebrow, la escala chica
	   de los tags del Hero) generalizada a .label-featured-section, base.css (2026-07-13, mismo
	   criterio ya usado en home-news/home-resources/related-news). */

	/* Specs literales del Inspect de Figma (DIA DS/Heading Sections/H1 Serif) — NO reusar
	   .heading-display (esa es Regular/600 a otra escala, pensada para el título de card). */
	.home-stories__title {
		font-family: var(--font-serif);
		font-stretch: 75%; /* eje wdth de la variable "Condensed", ver --font-serif en base.css */
		font-weight: 400; /* Regular */
		font-size: clamp(2rem, 1.4rem + 3vw, 60px);
		line-height: 1.167; /* 70/60 */
		letter-spacing: -1px;
		margin: 0;
		max-width: 631px;
		color: var(--dia-color-text-primary, #121212);
	}

	/* margin-bottom compensa el descender + leading extra del título serif (line-height 1.167):
	   align-items:flex-end del padre alinea con el borde inferior de la CAJA de línea del texto,
	   no con la baseline visual de las letras, así que sin esto los botones quedan más abajo que
	   donde realmente "pisa" el texto. Valor a ojo — confirmar/ajustar viendo newdia.nett.mx. */
	.home-stories__nav { display: flex; gap: .5rem; flex-shrink: 0; margin-bottom: 0.75rem; }
	.home-stories__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;
		/* mismo bug que .home-news__nav-btn (home-news.css): sin color propio, currentColor del
		   ícono cae al default del navegador para <button> — azul de sistema en algunos Android. */
		color: var(--dia-color-text-primary, #121212);
	}
	/* Disabled: spec exacta de David — borde propio #CACACA (no el #232323 de la regla base) +
	   opacity:.7 (no .35). */
	.home-stories__nav-btn[disabled] {
		border-radius: 4px;
		border: 1px solid #cacaca;
		opacity: .7;
		cursor: default;
	}
	/* Hover: antes sin borde (transparent); pedido explícito, ahora borde propio #CDD6E1 encima
	   del fondo con gradient sutil + sombra de 3 capas. No aplica sobre disabled (no hay hover
	   real ahí). */
	.home-stories__nav-btn:not([disabled]):hover {
		border: 1px solid #cdd6e1;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}
	.home-stories__nav-icon { display: block; width: 16px; height: 16px; }
	/* dia_icon('chevron-right') trae width/height="30" como atributos HTML del <svg> — sin esto
	   el ícono real mide 30px dentro de un wrapper de 16px (desborda/se ve descentrado), porque
	   los atributos HTML del propio <svg> ganan sobre el tamaño del wrapper si no se fuerzan acá. */
	.home-stories__nav-icon svg { display: block; width: 100%; height: 100%; }
	.home-stories__nav-icon--prev { transform: rotate(180deg); }

	/* Sangra a la derecha a propósito (overflow visible del viewport, no del contenedor):
	   gutter izquierdo igual al resto de la portada, sin gutter derecho, para que el carrusel
	   se vea cortado por el borde de pantalla — mismo criterio visual que el mock de Figma. */
	.home-stories__viewport {
		padding-inline-start: var(--gutter);
		overflow: hidden;
		/* El overflow:hidden de acá (necesario para la sangría a la derecha, ver nota de abajo)
		   también recorta el box-shadow de hover de .story-card por su borde INFERIOR (el blur
		   del box-shadow se sale ~56px hacia abajo del propio .story-card en la capa más ancha).
		   Se agranda la caja recortable hacia abajo con padding, compensado con margin negativo
		   del mismo tamaño para no mover el layout (el padding extra no empuja nada, el margen
		   negativo lo "absorbe" de vuelta) — mismo criterio que la sangría horizontal de arriba. */
		padding-block-end: 4rem;
		margin-block-end: -4rem;
	}

	/* !important necesario: swiper-bundle.min.css (CDN) declara `.swiper{overflow:hidden}` sin
	   @layer, y por spec gana sobre cualquier regla con @layer sin importar especificidad (mismo
	   gotcha de hero-news, ver gotchas.md §12.1). Sin esto el propio
	   swiper recortaba las slides que centeredSlides necesita asomar a los lados de la activa —
	   el recorte real para la sangría a la derecha lo da .home-stories__viewport (arriba), este
	   swiper interno debe quedar sin recorte propio. */
	.home-stories__swiper { overflow: visible !important; }

	/* Ancho fijo del Figma — con slidesPerView:'auto' Swiper NO fuerza un ancho propio vía JS,
	   pero su CSS por default (CDN, swiper-bundle, SIN @layer) sí trae ".swiper-slide{width:
	   100%}" — eso le gana a esta regla aunque esté en @layer, sin importar especificidad (regla
	   de la spec: layered SIEMPRE pierde contra CSS sin layer). Mismo gotcha ya documentado en
	   gotchas.md §12.1 para hero-news.php. !important es el fix correcto acá,
	   peleando contra una librería externa, no contra el cascade interno del tema. */
	.home-stories__slide {
		width: 380px !important;
		flex-shrink: 0;
	}

	/* Tarjetas que NO son la activa (la activa la marca home-stories-slider.js con .is-active —
	   NO la clase nativa .swiper-slide-active, porque el centrado/translate lo manejamos a mano)
	   se atenúan un poco — mismo patrón que .hero-news .swiper-slide:not(.swiper-slide-active)::after
	   en home-hero.css, overlay propio en vez de opacity en el contenedor para no afectar el
	   box-shadow/glass-effect de la card. */
	.home-stories__slide:not(.is-active) {
		position: relative;
	}
	.home-stories__slide:not(.is-active)::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: 12px; /* igual al .story-card */
		background: rgba(0, 0, 0, .35);
		opacity: 1;
		transition: opacity .25s ease;
		pointer-events: none;
	}
	/* Hover en una card NO activa: se aclara igual que la activa (mismo overlay a opacity 0),
	   sin tocar .is-active ni el estado real del slider — puramente visual. */
	.home-stories__slide:not(.is-active):hover::after {
		opacity: 0;
	}

	.home-stories__single { width: 380px; max-width: 100%; }

	/* ---- Story Card (parts/cards/card-story.php, Figma 2367:1193/2338:1754) ----
	   Bespoke a propósito: full-bleed image + texto encima, no comparte nada con .card de
	   base.css (ese sistema es imagen-arriba + body-abajo, este es imagen de fondo completa). */
	.story-card {
		position: relative;
		width: 100%;
		height: 620px;
		border-radius: 12px; /* SIN overflow:hidden acá (ver nota de hover abajo) — border-radius
		   solo no necesita overflow para redondear cómo sigue el box-shadow la forma de la caja;
		   sin esto el box-shadow se proyectaba en una caja de esquinas cuadradas mientras el
		   contenido (la foto) se veía redondeado por .story-card__link, dando un halo/artefacto
		   visible justo en las esquinas. */
		isolation: isolate; /* el gradiente y el texto quedan en su propio stacking context */
		transition: box-shadow .3s ease;
	}
	/* Misma sombra "glass" de 5 capas de .res-card--featured (home-resources.css, Inspect Figma
	   2329:889), reusada acá como hover. El border-radius+overflow:hidden vive en .story-card__link
	   (abajo), NO acá: §12.2 de la arquitectura — overflow:hidden y box-shadow en el MISMO elemento
	   hacen que el propio overflow recorte la sombra que debería sobresalir (se veía cortada justo
	   al ras del borde inferior). Mismo fix que hero-news (§12.22): separar quién recorta el
	   contenido (el wrapper interno) de quién muestra la sombra (el contenedor externo, sin
	   overflow). */
	.story-card:hover {
		box-shadow:
			0 44px 12px 0 rgba(0, 0, 0, 0),
			0 28px 11px 0 rgba(0, 0, 0, .02),
			0 16px 9px 0 rgba(0, 0, 0, .05),
			0 7px 7px 0 rgba(0, 0, 0, .09),
			0 2px 4px 0 rgba(0, 0, 0, .1);
	}
	.story-card__link {
		position: relative; /* contiene a los hijos position:absolute (img/gradiente/glass) — si no,
		   resuelven su containing block contra .story-card (el ancestro de arriba) y se saltan
		   este overflow:hidden por completo, aunque estén dentro del DOM de este elemento */
		display: block;
		height: 100%;
		color: inherit;
		text-decoration: none;
		border-radius: 12px;
		overflow: hidden; /* recorta foto/gradiente/glass — ver nota de overflow en .story-card arriba */
	}
	.story-card__img {
		position: absolute; inset: 0;
		width: 100%; height: 100%;
		/* Parallax/fricción al hover: easing lento con peso (no lineal), la foto "respira" un
		   poco detrás del marco de la card. Solo zoom por ahora — blur/grano queda pendiente
		   de validar con David (ver POC). */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
		object-fit: cover;
		object-position: var(--img-focal);
	}
	.story-card__link:hover .story-card__img {
		transform: scale(1.06);
	}
	/* Gradiente de legibilidad. En Figma este nodo ("Noise effect", 2338:1794) ocupa solo los
	   516px inferiores (83% de 620) y va a opacity:0.3 -- por eso el fondo abajo en Figma se ve
	   teal MEDIO, no negro. Calibrado contra el render real de Figma: el píxel más oscuro abajo
	   es ~rgb(31,62,66), no negro. Aplicar el gradiente a opacity completa (intento previo) lo
	   dejaba mucho más oscuro que el diseño. */
	.story-card__gradient {
		position: absolute; left: 0; right: 0; bottom: 0; height: 83%;
		opacity: .3;
		background: linear-gradient(180deg,
			rgba(0, 0, 0, .05) 0%,
			rgba(0, 0, 0, .15) 35%,
			rgba(0, 0, 0, .75) 65%,
			rgba(0, 0, 0, .92) 100%);
	}

	/* "Glass effect" del Figma (nodo 2338:1781). CLAVE -- son DOS cosas distintas, y la primera
	   nos costó varias sesiones encontrarla:
	   1. backdrop-filter:blur() = el "frosted glass" real: desenfoca la FOTO que está detrás de
	      la mitad inferior de la card. Esto es un efecto de COMPOSICIÓN (Background Blur en
	      Figma) que NO se exporta al SVG -- por eso el SVG que Figma daba solo traía el glow+
	      grano, y por eso los intentos de "blur" con filter:blur() sobre formas en primer plano
	      nunca se vieron como el diseño: estábamos desenfocando una capa encima en vez de la foto
	      de atrás. La máscara (linear-gradient) limita el frost a la zona inferior y lo desvanece
	      hacia arriba. mask-image en el ELEMENTO (no en pseudo-elementos) sí es confiable.
	   2. El SVG (::after) = el tinte cian sutil (ellipse #00BEFD muy plana + blur, opacity baja)
	      + grano (feTurbulence baseFrequency 2, umbral discrete). Lleva su propia máscara de fade
	      HORNEADA dentro del SVG (linearGradient interno) -- así el ::after no depende de un
	      mask-image de CSS (que sí falló en pseudo-elementos en pruebas). viewBox 380x620 +
	      preserveAspectRatio:none + background-size:100% 100% lo estira bien también en mobile. */
	.story-card__glass {
		position: absolute; inset: 0;
		pointer-events: none;
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);
		-webkit-mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 65%);
		mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 65%);
	}
	/* La elipse cian + feGaussianBlur(80) (versión anterior) era la causa real del "parchado"
	   reportado — un blur SVG tan grande se rasteriza en bloques en vez de liso (bug real,
	   confirmado por el usuario comparando contra .home-projects__card-glass/.news-card__glass,
	   que SOLO tienen grano plano vía background-image y nunca mostraron el problema). Se saca la
	   elipse y la máscara interna (ya no hacen falta sin ella) — queda SOLO grano, mismo patrón que
	   esas otras 2 cards. El fade hacia arriba lo sigue dando el mask-image de CSS en
	   .story-card__glass (el elemento padre), que no dependía de la máscara interna del SVG. */
	.story-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%;
	}

	.story-card__tag {
		position: absolute; top: 32px; left: 32px;
		display: flex; align-items: center; gap: 8px;
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
	}
	.story-card__flag { width: 24px; height: 14px; object-fit: cover; display: block; }
	.story-card__country {
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-inverse, #fff);
	}

	.story-card__content {
		position: absolute; inset-inline: 32px; bottom: 32px;
		display: flex; flex-direction: column; gap: 4px;
	}
	.story-card__title {
		font-family: var(--font-serif);
		font-stretch: 75%;
		font-weight: 300; /* Light, spec literal del Inspect (DIA DS/Heading News/H1 Stories) */
		font-size: 34px;
		line-height: 38px;
		letter-spacing: -.5px;
		margin: 0;
		color: #fdfdfd;
		text-shadow: 0 3px 7px rgba(0, 0, 0, .98), 0 13px 13px rgba(0, 0, 0, .85), 0 30px 18px rgba(0, 0, 0, .5);
	}

	.story-card__footer {
		display: flex; align-items: center; justify-content: space-between;
		margin-top: 4px;
	}
	.story-card__writer { display: flex; align-items: center; gap: 16px; min-width: 0; }
	.story-card__avatar {
		flex-shrink: 0;
		width: 40px; height: 40px;
		border-radius: 50%;
		object-fit: cover;
	}
	.story-card__avatar--fallback {
		display: flex; align-items: center; justify-content: center;
		background: var(--dia-color-border-strong, #232323);
		color: #fff;
		font-family: var(--font-sans);
		font-weight: 600;
		text-transform: uppercase;
	}
	.story-card__byline {
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 11px;
		line-height: 18px;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: #fdfdfd;
	}

	.story-card__cta {
		flex-shrink: 0;
		/* margin-inline-start:auto (no solo justify-content:space-between del padre): blindaje para
		   cuando NO hay autor (stories_autor vacío) — .story-card__footer entonces tiene un solo
		   hijo (este botón), y space-between sin un segundo elemento lo deja pegado a la IZQUIERDA
		   en vez de a la derecha (bug real reportado 2026-07-13 en archive-stories.php). El margen
		   auto absorbe el espacio libre él solo, dejando el botón a la derecha con o sin
		   .story-card__writer presente — no cambia nada cuando SÍ hay 2 hijos (mismo resultado que
		   space-between en ese caso). */
		margin-inline-start: auto;
		display: flex; align-items: center; justify-content: center;
		width: 60px; height: 60px;
		border-radius: 50%;
		overflow: hidden; /* recorta el par de íconos del swap (ver abajo) */
		position: relative; /* contiene a los íconos position:absolute del swap */
		border: 1px solid rgba(255, 255, 255, .3);
		background: rgba(0, 0, 0, 0);
		/* 5 capas completas del Inspect de Figma (nodo 2367:429) -- antes solo tenía las 2
		   últimas, faltaban las 3 capas superiores que dan el halo de sombra más amplio y tenue
		   alrededor del botón. */
		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);
		color: #fff;
	}
	.story-card__cta svg { width: 34px; height: 34px; }

	/* Swap de dos íconos en hover, mismo patrón que .res-card__circle (home-resources.css) /
	   .home-projects__card-cta / .news-card__cta. Como toda la card YA es un <a>
	   (.story-card__link), el hover se ata directo ahí vía CSS puro, sin JS. */
	.story-card__cta-icon {
		position: absolute; inset: 0;
		display: flex; align-items: center; justify-content: center;
		transition: transform .35s cubic-bezier(.4, 0, .2, 1);
	}
	.story-card__cta-icon--a { transform: translate(0, 0); }
	.story-card__cta-icon--b { transform: translate(-140%, 140%); }
	.story-card__link:hover .story-card__cta-icon--a { transform: translate(140%, -140%); }
	.story-card__link:hover .story-card__cta-icon--b { transform: translate(0, 0); }

	@media (width < 80rem) {
		.home-stories__head { flex-direction: column; align-items: flex-start; }
		.home-stories__slide { width: 300px !important; }
		.home-stories__single { width: 300px; }
		.story-card { height: 480px; }
		.story-card__title { font-size: 26px; line-height: 30px; }

		/* El diseñador movió el botón CTA debajo del bloque autor+lugar (antes iba al lado,
		   ver .story-card__footer sin media query) y lo redujo a 40x40 (igual que
		   .story-card__avatar) — a partir de este mismo breakpoint (<80rem), no solo en móvil. */
		.story-card__footer {
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;
		}
		.story-card__cta { width: 40px; height: 40px; }
		.story-card__cta svg { width: 22px; height: 22px; }
	}

	@media (width < 48rem) {
		.home-stories { padding-block: 40px; }
		/* Shrink del eyebrow ya lo aporta .label-featured-section (base.css) en este mismo
		   breakpoint. */
		.home-stories__title {
			font-size: 34px;
			font-weight: 600;
			line-height: 44px;
		}
		.story-card__title {
			text-shadow:
				0 83px 23px rgba(0, 0, 0, .02),
				0 53px 21px rgba(0, 0, 0, .15),
				0 30px 18px rgba(0, 0, 0, .50),
				0 13px 13px rgba(0, 0, 0, .85),
				0 3px 7px rgba(0, 0, 0, .98);
		}
	}

}