/* =================================================================
   archive-stories.css — Archive de Historias (Figma 17-Stories-Desktop, node 2915:8973).
   Solo se encola en is_post_type_archive('stories') (inc/enqueue.php), junto con home-stories.css
   (trae .story-card base: noise/blur/hover/swap de CTA — NO se duplica acá, solo overrides de
   tamaño/posición). Breakpoint estándar 80rem (§12), pero esta vista es de mood OSCURO completo
   (a diferencia de Projects/Resources/News, que son claros) — colores propios, no los tokens
   --dia-color-text-primary/--dia-btn-gray-gradient de siempre (esos asumen fondo claro).
   ================================================================= */

@layer views {

	/* ---- Hero oscuro ----
	   Fondo real entregado por el diseñador (assets/img/story-hero-bg.webp, 2026-07-13), inyectado
	   vía --story-hero-bg (inline en archive-stories.php, mismo criterio que --hero-home-bg en
	   home-hero.css — evita rutas relativas frágiles en el propio CSS) + scrim oscuro encima para
	   legibilidad del título/slider. Ya NO es el placeholder de gradientes/grano de la primera
	   iteración. */
	.story-hero {
		position: relative;
		overflow: clip;
		background: #10151a var(--story-hero-bg) center center/cover no-repeat;
		color: var(--dia-color-text-inverse, #fff);
	}
	/* Scrim MÍNIMO, solo arriba (legibilidad del título/desc sobre la foto) — CORREGIDO 2026-07-13:
	   un intento anterior recoloreaba el resto de la foto con un degradado azul inventado a mano,
	   pisando el diseño real que YA trae la imagen (story-hero-bg.webp mide 1440×837, el mismo
	   tamaño exacto del frame "background" de Figma — es un asset ya terminado, con su propio
	   degradado/tono resuelto por el diseñador, no una foto plana que necesite retoque de color
	   acá). Este scrim se desvanece a transparent bien arriba (35%) para no tocar el resto de la
	   imagen — el azul/negro que se vea de ahí para abajo es el de la FOTO real, no CSS. */
	.story-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .15) 20%, transparent 35%);
		z-index: 0;
	}
	.story-hero__inner {
		position: relative;
		z-index: 1;
		max-width: var(--container);
		margin-inline: auto;
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
		padding-block: 4rem 2.5rem;
		text-align: center;
	}
	.story-hero .story-hero__title {
		color: var(--dia-color-text-inverse, #fff);
	}
	/* #A3A3A3 (spec literal del Inspect de Figma) — NO el mismo blanco que el título, a propósito. */
	.story-hero .story-hero__desc {
		color: #a3a3a3;
	}
	.story-hero__title { margin-inline: auto; }
	.story-hero__desc { max-width: 36.5rem; margin-inline: auto; }

	/* ---- Franja a TODO el ancho (PoC v3), solo layout — ver story-archive-slider.js.
	   .story-archive-stage envuelve el max-width real; .story-archive-wheel-zone lo amplía a
	   100vw para centrar la card en pantallas anchas. El mousewheel/touch de Swiper YA NO
	   escucha acá (bug real reportado 2026-07-24: atrapaba el scroll de página aunque el
	   cursor no estuviera sobre la foto) — ahora el target es `.story-archive-viewport`. */
	.story-archive-wheel-zone {
		position: relative;
		z-index: 1;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		display: flex;
		justify-content: center;
		/* Prácticamente sin aire — pedido explícito del usuario (2026-07-13): el borde inferior
		   (blureado) de la card "peek" debe casi TOCAR .story-results, no dejar un lienzo grande
		   como el intento anterior (6rem, pensado para un degradado CSS que ya no existe — ver
		   .story-hero::before arriba, corregido para no recolorear la foto). */
		padding-bottom: .5rem;
		/* El gutter vive ACÁ (contenedor 100vw), no en .story-archive-stage — bug real reportado
		   2026-07-13: con padding-inline en .story-archive-stage (que ya tiene max-width:790px fijo),
		   el padding se restaba DE ESE ANCHO fijo, dejando la card activa a ~527px en vez de 790px
		   reales aunque la pantalla tuviera de sobra. Acá el padding no reduce el ancho del stage:
		   en pantallas anchas (790px + 2×gutter cabe de sobra) el `justify-content:center` lo
		   centra sin tocarlo; en pantallas angostas SÍ da el margen de aire necesario, porque recién
		   ahí `width:100%` de .story-archive-stage se calcula contra el espacio ya descontado. */
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	/* max-width: 790 (card) + 24 (gap de .story-archive-stage-row) + 10 (ancho de .story-archive-vdots)
	   = 824 — bug real reportado 2026-07-13: con max-width:790px acá (el TOTAL de la fila, card+gap+
	   puntos), el flex:1 de .story-archive-viewport se quedaba con 790 MENOS lo que gap+puntos ya
	   consumían (756px reales, 95.7% del target) en vez de los 790px completos que pide el Figma
	   para la card en sí. */
	.story-archive-stage {
		width: 100%;
		/* 1071 = 824 × 1.3 — pedido explícito 2026-07-15, +30% del tamaño del slider. El resto de la
		   pieza (aspect-ratio de .story-archive-viewport/.story-card, mask-image %, gap/alto de
		   puntos calculados en JS vía clientWidth) escala solo, proporcional a este único valor — ver
		   story-archive-slider.js. */
		max-width: 1071px;
	}
	.story-archive-stage-row {
		display: flex;
		align-items: stretch;
		gap: 1.5rem;
	}
	.story-archive-stage-row .story-archive-viewport { flex: 1; min-width: 0; }

	/* Alto SIEMPRE derivado del ancho real (790:628 — 494 de card activa, Figma "Article Card"
	   2917:10249, + 90 de peek + 44 de gap entre activa/peek, pedido explícito del usuario
	   2026-07-13 — NO 20px como la PoC original) — escala solo, sin media queries. El valor de 44
	   también vive en story-archive-slider.js (proportionalGap()), TIENE que coincidir. */
	.story-archive-viewport {
		position: relative;
		aspect-ratio: 790 / 628;
		overflow: hidden;
		border-radius: 16px;
		/* border:1px solid transparent (gotchas §12.52, 2026-07-15 — bug real reportado con captura:
		   "de la imagen 2 en adelante, la última línea horizontal de la img activa se ve sin blur"):
		   este es el ancestro overflow:hidden+border-radius, y contiene (anidado, vía swiper-wrapper)
		   un descendiente con `filter:blur()` real — la slide "peek" (.story-archive-slide:not(
		   .swiper-slide-active) más abajo). Desde la 2da imagen, Swiper ya trasladó el track
		   (translate3d), promoviendo esa slide blureada a su propia capa GPU — Chromium calcula el
		   clip del overflow/mask de ESTE elemento y los bounds de esa capa por separado, y a veces
		   redondean a una grilla de sub-píxel distinta, dejando una línea sin difuminar justo en el
		   límite. Declarar un border acá (aunque sea transparente) fuerza al navegador a tratar el
		   border-box como caja real, eliminando el desajuste — mismo mecanismo ya confirmado en este
		   codebase (.news-main-article, news.css). Sin mover nada del layout (box-sizing:border-box
		   global). */
		border: 1px solid transparent;
		/* mask-image (no solo overflow:hidden) — pedido explícito del usuario 2026-07-13, comparando
		   contra el Figma con zoom: el borde inferior de la card "peek" ahí se desvanece con un fade
		   suave hacia el fondo, no un corte recto — overflow:hidden solo (como estaba) cortaba la
		   foto/blur en una línea horizontal dura. El mask desvanece el ÚLTIMO 12% del viewport
		   (~75px del alto real) a transparent, dejando ver lo que hay DETRÁS (el propio fondo/foto
		   de .story-hero) en vez de un borde recto — mismo efecto visual que la referencia. */
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
	}
	.story-archive-single { width: 100%; height: 100%; }
	.story-archive-single .story-card {
		height: 100%;
		aspect-ratio: 790 / 494;
		overflow: hidden; /* ver nota de .story-archive-slide .story-card sobre por qué acá también */
	}

	/* !important: swiper-bundle.min.css (CDN, sin @layer) trae `.swiper{overflow:hidden}`, que le
	   gana a cualquier regla en capa sin importar especificidad (gotchas.md §12.1) — el propio
	   viewport de arriba ya recorta, este swiper interno debe quedar sin recorte propio para que
	   la card "peek" pueda asomar debajo de la activa. */
	.story-archive-swiper { height: 100%; overflow: visible !important; }

	.story-archive-slide {
		/* height:auto !important: swiper-bundle.min.css trae `.swiper-slide{height:100%}` con
		   selector más específico que le gana sin esto (mismo gotcha de arriba). */
		height: auto !important;
		width: 100% !important;
		margin-inline: auto;
		transition: filter .4s ease, opacity .4s ease;
		cursor: pointer;
	}
	.story-archive-slide:not(.swiper-slide-active) {
		filter: blur(10px);
		opacity: .55;
	}
	.story-archive-slide.swiper-slide-active { cursor: default; }

	/* Achicado de la card "peek" vía transform (no width) — Swiper usa el alto real de cada slide
	   para calcular el translate del track; animar `width` en un elemento cuyo alto depende de
	   aspect-ratio deja el cálculo a medio camino (corte/salto visible). transform:scale() es
	   solo compositor, Swiper nunca ve un tamaño de layout distinto. */
	.story-archive-slide .story-card {
		height: auto;
		aspect-ratio: 790 / 494; /* Figma "Article Card" del hero (2917:10249) — NO 585×366 del grid */
		transition: transform .4s ease;
		transform-origin: 50% 0%;
		/* overflow+border-radius EXPLÍCITOS acá (redundantes con .story-card__link, que ya los
		   trae en home-stories.css) — bug real reportado 2026-07-13: con `transition:transform` en
		   ESTE MISMO elemento (arriba), el navegador promueve .story-card a su propia capa
		   compositada, y el recorte redondeado de su hijo .story-card__link (que vive en OTRA
		   capa) se renderizaba a veces sin aplicar — las esquinas se veían cuadradas pese a que el
		   Inspector mostraba el border-radius:12px correcto. Repetir el recorte en la MISMA capa
		   que tiene el transform es el fix — sin esto, el navegador puede no clipear
		   consistentemente entre capas distintas. */
		overflow: hidden;
		border-radius: 12px;
		/* Trade-off consciente: este overflow:hidden recorta el box-shadow de :hover de .story-card
		   (home-stories.css, §12.2 de gotchas.md) — aceptable acá porque el Figma del hero no
		   define un estado hover propio (el efecto real de "activo" ya lo da el blur/scale del
		   slide, no un box-shadow). */
	}
	.story-archive-slide:not(.swiper-slide-active) .story-card {
		transform: scale(.740506); /* 585/790, el mismo ancho "peek" del Figma */
	}

	/* Esquinas INFERIORES seguían cuadradas pese al fix de arriba — causa real, distinta: bug
	   conocido de Chrome/WebKit donde `backdrop-filter` (usado por .story-card__glass, el "frosted
	   glass" del tercio inferior de la card) IGNORA el `overflow:hidden`/`border-radius` de sus
	   ancestros cuando alguno de ellos tiene `transform`/`transition:transform` (como .story-card
	   arriba) — el blur del glass se renderiza hasta el borde recto de su propia caja rectangular,
	   por encima del recorte redondeado, y como el glass cubre justo la mitad de ABAJO (mask-image
	   de .story-card__glass, home-stories.css), el efecto visual es "esquinas de abajo cuadradas,
	   de arriba redondas" — coincide exacto con lo reportado. Fix: repetir el recorte también EN el
	   propio elemento con backdrop-filter (no alcanza con tenerlo en un ancestro). */
	.story-archive-slide .story-card__glass,
	.story-archive-single .story-card__glass {
		overflow: hidden;
		border-radius: 12px;
	}
	/* El hero NO lleva el botón CTA circular (Figma 2917:10249, "Writer and CTA" solo trae Writer)
	   — a diferencia del grid, donde sí aparece (2938:9268). Bug real reportado 2026-07-13: sin
	   esto, el slider mostraba el mismo botón que el grid, que no está en el diseño del hero. */
	.story-archive-slide .story-card__cta,
	.story-archive-single .story-card__cta {
		display: none;
	}

	/* ---- Indicador vertical de puntos (story-archive-slider.js los genera) ---- */
	/* align-self:flex-start + height inline (story-archive-slider.js) en vez del stretch por
	   defecto del row: bug real reportado 2026-07-13 — con align-items:stretch (el default del
	   row) esto medía el alto TOTAL del viewport (790:628, card activa + peek + gap), y
	   justify-content:center centraba contra ESE total, no contra la card activa sola (494 de esos
	   628) — el centro visual de los puntos caía más abajo que el centro real de la card de arriba.
	   El JS ya mide el ancho real del viewport para spaceBetween/slidesOffsetAfter; reusa esa misma
	   medida para fijar la altura de este bloque a la altura real de la card activa. */
	.story-archive-vdots {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		align-self: flex-start;
		gap: .6rem;
		flex-shrink: 0;
		width: 10px;
	}
	.story-archive-vdots .story-archive-dot {
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: rgba(255, 255, 255, .25);
		border: 0;
		padding: 0;
		transition: height .25s, background .25s;
		cursor: pointer;
	}
	.story-archive-vdots .story-archive-dot:hover { background: rgba(255, 255, 255, .5); }
	.story-archive-vdots .story-archive-dot.is-active {
		height: 34px;
		background: #fff;
	}

	/* ---- Grid (Figma: 2 columnas, 585×366, 30px de gap — mismo valor que .project-grid) ---- */
	.story-results {
		position: relative;
		background: #121212;
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
		padding-top: 80px; /* pedido explícito del usuario 2026-07-13 */
	}
	.story-results #results {
		max-width: var(--container);
		margin-inline: auto;
	}
	.story-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
		/* SIN padding-block-end acá (a propósito) — la separación grid↔paginación la da el
		   padding-top de .story-pagination (80px, abajo), NO este elemento. Mismo criterio que
		   .project-grid/.resource-grid: sumar padding acá TAMBIÉN duplicaba el espacio (64+80=144px
		   en vez de 80px, bug real reportado 2026-07-13). :last-child (abajo) es la ÚNICA excepción,
		   para cuando NO hay paginación (1 sola página de resultados). */
	}
	.story-grid:last-child { padding-block-end: 7.5rem; }

	/* Overrides de tamaño sobre .story-card base (home-stories.css) — mayor especificidad
	   (.story-grid .story-card, 2 clases) le gana SIEMPRE a las reglas de home-stories.css (1
	   clase), también dentro de sus media queries — así el grid no hereda el achicado a 480px/
	   300px pensado para el carrusel del home. */
	.story-grid .story-card { width: 100%; height: 366px; }
	.story-grid .story-card__cta { width: 60px; height: 60px; }
	.story-grid .story-card__cta svg { width: 34px; height: 34px; }

	/* ---- Paginación (misma "Pagination-Card" de Projects/Resources/News, tratamiento OSCURO —
	   Figma 3086:12996): fondo/borde invertidos, sin los tokens --dia-btn-gray-* (asumen fondo
	   claro). Mismo algoritmo/markup que .project-pagination (pagination-stories.php). ---- */
	.story-pagination {
		padding-block: 5rem 7.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}
	.story-pagination__numbers,
	.story-pagination__numbers-compact {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.story-pagination__numbers-compact { display: none; }

	.story-page-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		border-radius: var(--dia-radius-sm, 4px);
		border: 1px solid rgba(255, 255, 255, .4);
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-inverse, #fff);
	}
	.story-page-btn--ellipsis { border: 0; color: rgba(255, 255, 255, .5); }

	.story-page-btn:not([aria-current="page"]):not(.story-page-btn--ellipsis):hover,
	.story-page-next:not(:disabled):hover,
	.story-page-prev:not(:disabled):hover {
		border-color: #4b4b4b;
		background: #232323;
	}
	.story-page-btn[aria-current="page"] {
		background: #232323;
		border-color: #4b4b4b;
	}

	.story-page-next,
	.story-page-prev {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 16px 24px;
		border-radius: var(--dia-radius-sm, 4px);
		border: 1px solid rgba(255, 255, 255, .4);
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-inverse, #fff);
	}
	.story-page-next svg,
	.story-page-prev svg { width: 16px; height: 16px; }
	.story-page-prev__icon { display: inline-flex; transform: rotate(180deg); }

	.story-page-next:disabled,
	.story-page-prev:disabled {
		opacity: .35;
		cursor: not-allowed;
	}

	.story-pagination__mobile { display: none; }

	/* ---- Feedback de carga (paginación htmx) ----
	   body.is-loading lo togglea app.js GLOBAL (htmx:beforeRequest/afterRequest, siempre activo,
	   no depende de esta vista) — acá SOLO se agrega la regla de dimmed porque este archive no
	   encola components/filter-bar.css (esa sí trae la de Projects/Resources/Events, pero esta
	   vista no tiene filter-bar). Spinner mismo patrón EXACTO que .resource-spinner
	   (archive-resource.css) — 2 elementos (outer centra, inner gira, ver ese archivo para el
	   porqué) + story-spinner.js reposicionándolo sobre el botón de paginación clickeado. */
	body.is-loading .story-results #results { opacity: .6; transition: opacity .2s; }

	.story-spinner {
		position: fixed;
		top: 0;
		left: 0;
		transform: translate(-50%, -50%);
		width: 20px;
		height: 20px;
		opacity: 0;
		pointer-events: none;
		z-index: 100;
		transition: opacity 0s linear .3s;
	}
	.story-spinner.htmx-request {
		opacity: 1;
		transition-delay: .3s;
	}
	.story-spinner__ring {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2px solid rgba(255, 255, 255, .25);
		border-top-color: #fff;
		animation: story-spinner-spin .7s linear infinite;
	}
	@keyframes story-spinner-spin {
		to { transform: rotate(360deg); }
	}

	/* ---- Estado vacío (sin filtros que resetear, ver no-results-story.php) ---- */
	.story-empty-outer {
		padding: 48px;
		border-radius: 8px;
		background: rgba(255, 255, 255, .04);
		margin-bottom: 7.5rem;
	}
	.story-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 24px;
		padding: 84px;
		border-radius: 16px;
		border: 1px solid rgba(255, 255, 255, .12);
		background: rgba(255, 255, 255, .03);
		text-align: center;
		color: var(--dia-color-text-inverse, #fff);
	}
	.story-empty__icon svg { width: 40px; height: 40px; }
	.story-empty__title {
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 1.25rem;
		margin: 0;
	}
	.story-empty__desc { margin: 0; opacity: .75; max-width: 28rem; }

	@media (width < 80rem) {
		/* min-height (no height): deja crecer la card si el texto necesita más de 406px (título
		   largo, etc.) en vez de recortarlo a un alto fijo — pedido explícito del usuario, aplica
		   desde tablet hasta mobile (todo el rango <80rem). */
		.story-grid .story-card { min-height: 406px; }
	}

	@media (48rem <=width < 64rem) {
		.story-pagination__numbers { display: none; }
		.story-pagination__numbers-compact { display: flex; }
	}

	@media (width < 48rem) {
		/* Mismo criterio que .news-empty en mobile (news.css): el wrapper tenue (.story-empty-outer)
		   solo resta espacio sin aportar nada visible en una pantalla angosta — se aplana a "sin caja". */
		.story-empty {
			padding: 48px 24px;
		}

		.story-empty-outer {
			padding: 0;
			border-radius: 0;
			background: none;
		}

		.story-hero__inner { padding-block: 2.5rem 2rem; }
		.story-archive-wheel-zone { padding-bottom: 2.5rem; }
		.story-archive-stage-row { gap: .75rem; }

		/* 80px -> 3rem (48px): mismo criterio que .story-pagination unas líneas abajo en este mismo
		   breakpoint (5rem/7.5rem desktop -> 3rem/4rem mobile) y que Projects/Resources/News, que
		   también reducen sus paddings equivalentes en mobile — pedido explícito del usuario
		   2026-07-14, sin ajustar en la sesión del 2026-07-13. */
		.story-results { padding-top: 3rem; }

		.story-grid { grid-template-columns: 1fr; }
		.story-grid:last-child { padding-block-end: 3rem; }
		/* SOLO en mobile el CTA circular baja a medir lo mismo que el avatar (40x40, ícono 22.67px)
		   — pedido explícito del diseñador 2026-07-22, mismo criterio ya aplicado en el carrusel del
		   home (home-stories.css). Tablet/desktop se quedan en 60x60 tal cual estaban: `.story-grid
		   .story-card__cta` (arriba, sin media query) es más específico que el `.story-card__cta`
		   suelto de home-stories.css y por eso hacía falta repetir el mismo selector compuesto acá
		   para poder pisarlo. Afecta 2 lugares que reusan .story-grid: el archive de Historias y
		   "Más historias" del single (related-stories.php, related-stories__grid también lleva la
		   clase .story-grid). */
		.story-grid .story-card__cta { width: 40px; height: 40px; }
		.story-grid .story-card__cta svg { width: 22.67px; height: 22.67px; }

		.story-pagination { padding-block: 3rem 4rem; }
		.story-pagination__numbers { display: none; }
		.story-pagination__numbers-compact { display: none; }
		.story-page-prev--desktop,
		.story-page-next--desktop { display: none; }

		.story-pagination__mobile {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16px;
			width: 100%;
		}
		.story-pagination__mobile-status {
			font-family: var(--font-sans);
			font-weight: 700;
			font-size: 13px;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: var(--dia-color-text-inverse, #fff);
			flex: 1;
			text-align: center;
		}
	}
}