/* =================================================================
   single-story.css — Detalle de Story (single-stories.php, Figma 18-Stories-Details-Desktop,
   node-id=2954-10067, archivo BdUd1g6K6cuVm4036Z5p6p). Se apoya en single-news.css
   (.post-page/.post__col/.post__title/.post__avatar/.post__author-row/.post__hero/.post-content/
   .post__share/.post__footer) y en home-stories.css + archive-stories.css (.story-card/.story-grid,
   para "Más historias") — ambas encoladas junto con este archivo (ver inc/enqueue.php). Acá solo
   vive lo propio de esta vista: descripción bajo el título (the_excerpt(), campo nativo de
   WordPress — sin ACF propio, el cliente lo llena directo en el editor), la fila de autor sin
   borde bajo el título/descripción, el radio de la imagen destacada (12px, no 6px) y "Más
   historias" (fondo oscuro).
   Breakpoint estándar 80rem (§12).
   ================================================================= */

@layer views {

	/* ---- Título + descripción + autor, medidas exactas del Figma (Author section, nodo
	   2954:10086): 16px entre título/descripción, 24px entre descripción/autor, 32px entre el
	   bloque completo y la fila de metadatos (.post__author-row, reusada abajo). .post__title
	   reusa el margin-bottom:32px por defecto de single-news.css — se pisa acá a 16px, el valor
	   real de este Figma (title/desc mucho más pegados que en News). ---- */
	.story__header { margin-bottom: 32px; }
	.story__header .post__title { margin-bottom: 16px; }

	.story__desc {
		margin: 0 0 24px;
		font-family: var(--font-sans);
		font-weight: 300;
		font-size: 22px;
		line-height: 32px;
		color: var(--dia-color-text-primary, #121212);
	}

	.story__writer { display: flex; align-items: flex-start; gap: 16px; }
	.story__writer-name {
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-secondary, #767778);
	}

	/* ---- Fila de metadatos (tiempo de lectura + compartir) — reusa .post__author-row de
	   single-news.css tal cual (border-top + flex + justify-between + padding-block:16px), el
	   contenido es distinto (post-tag + .post__share, no autor/fecha) pero el tratamiento visual
	   es el mismo componente. Solo se reusa la CLASE en el PHP, sin selector propio acá. ---- */

	/* .post__hero reusado (aspect-ratio 1200/750 + overflow), 2 ajustes propios: radio 12px (no
	   6px de News, Figma "Article Card" 2954:10102) y SIN el offset de 8px que News aplica arriba
	   (pensado para descontar el padding-bottom de su propio .post__author-row) — en este Figma la
	   imagen toca el borde inferior de la fila de metadatos sin aire (376px = fin exacto de
	   "author info", inicio exacto de "Article Card", medido en el frame). */
	.story__hero {
		border-radius: 12px;
		margin-top: 0;
	}
	/* --img-focal (inline style, single-stories.php) — mismo patrón que .story-card__img
	   (home-stories.css): punto focal editable vía el picker de ACF (stories_focal_point). */
	.story__hero img { object-position: var(--img-focal); }

	/* ---- Cuerpo del artículo (the_content(), .post-content.modern-content reusado tal cual —
	   coincide 1:1 con "Subheading and body"/"Image and caption" del Figma: h2 24px/32/-.5px +
	   p 20px/32 + img redondeada + figcaption con separador). Solo el espacio ANTES del bloque es
	   propio de esta vista (48px desktop/~30px mobile, sin actions bar entre hero y contenido a
	   diferencia de News) — mismo valor fluido que .post-page padding-top (single-news.css). ---- */
	/* padding-bottom: 80px desktop, fluido hacia abajo en tablet/mobile — mismo clamp/criterio ya
	   usado en este archivo para .related-stories (línea de abajo) y en el resto del sitio para
	   este tipo de "aire" antes de la siguiente sección (pedido explícito 2026-07-14: falta espacio
	   entre el cierre del artículo/.post__footer y "Más historias"). */
	.story__body { margin-top: clamp(1.875rem, 1.5rem + 1vw, 3rem); }
	.post__footer { padding-bottom: clamp(3rem, 6vw, 5rem); }

	/* ---- "Más historias" (Figma nodo 2954:10302) — fondo oscuro, 2 cards fijas vía .story-grid
	   (archive-stories.css) reusado tal cual, sin el padding-block-end propio de ese contexto
	   (pensado para "última fila antes de la paginación" del archive, no aplica acá). ---- */
	.related-stories {
		background: var(--dia-color-bg-dark, #121212);
		padding-block: clamp(3rem, 6vw, 5rem);
		padding-inline: clamp(var(--space-m), 8vw, 7.5rem);
	}
	@media (width >= 80rem) {
		.related-stories { padding-inline: 0; }
	}
	.related-stories__title.label-featured-section {
		color: var(--dia-color-text-inverse, #fff);
		margin-bottom: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
	}
	/* :last-child (no la regla base sola) — bug real reportado: .story-grid:last-child
	   (archive-stories.css, 7.5rem/3rem según breakpoint) es un selector compuesto MÁS específico
	   que un simple .related-stories__grid, así que ganaba pese a que este archivo se encola
	   después (la especificidad manda antes que el orden de carga). Ese padding-block-end está
	   pensado para "última fila antes de la paginación" del archive — acá .related-stories__grid
	   SÍ es el último hijo de .post-page__inner, así que :last-child calzaba igual y sumaba 120px/
	   48px de más al padding-block de 80px fluido que ya pone .related-stories (arriba), doblando
	   el aire contra el footer. Mismo valor 0 en ambos breakpoints: el espacio real lo sigue dando
	   SOLO .related-stories (padding-block, con su propio clamp responsive). */
	.related-stories__grid:last-child { padding-block-end: 0; }

	@media (width < 48rem) {
		.post__col { max-width: 100%; }
		.story__writer { flex-wrap: wrap; }
		.related-stories__grid { grid-template-columns: 1fr; }
		.related-stories__grid:last-child { padding-block-end: 0; }
	}
}