/* =================================================================
   single-perspective.css — Detalle de Perspective (single-perspective.php, Figma
   16-Perspectives-Details-Desktop node-id=2915-8143). Se apoya en single-news.css (.post-page/
   .post__col/.post__title/.post__author-row/.post__hero/.post-content/.post__share/.post__footer),
   encolado junto con este archivo (ver inc/enqueue.php). Acá vive lo propio: header en 2 columnas
   (autor con departamento+bio a la izquierda, separado por un divisor vertical, título+descripción
   a la derecha — a diferencia de Stories, que apila autor bajo el título) y "Descubre más".
   Breakpoint estándar 80rem (§12).
   ================================================================= */

@layer views {

	/* ---- Header en 2 columnas (Figma "Author section" nodo 2915:8164) — reemplaza el post__col
	   angosto de single-news/single-story: vive directo en .post-page__inner (1200px), no en
	   .post__col (790px), porque necesita ancho completo para la columna de autor + divisor +
	   título. ---- */
	.perspective__header {
		display: flex;
		align-items: stretch;
		gap: 64px;
		margin-bottom: 32px;
	}

	.perspective__author {
		display: flex;
		flex-direction: column;
		gap: 24px;
		flex-shrink: 0;
		width: 17.375rem; /* 278px */
	}
	.perspective__author-divider { width: 1px; flex-shrink: 0; background: #e5e5e5; }

	.perspective__writer { display: flex; align-items: flex-start; gap: 16px; }
	.perspective__writer-avatar {
		width: 56px;
		height: 56px;
		border-radius: 64px; /* spec literal del diseñador (mismo que .perspective-wide-writer__avatar,
			archive-perspective.css) — a este tamaño sigue dando círculo completo igual que el 50% de antes. */
		object-fit: cover;
		flex-shrink: 0;
	}
	/* Sin foto de autor: mismo gradiente de 2 capas que .perspective-wide-writer__avatar--initial
	   (archive-perspective.css) y .perspective-card__avatar--initial (más abajo en este archivo) —
	   antes sólido --dia-color-brand-primary. */
	.perspective__writer-avatar--initial {
		display: flex;
		align-items: center;
		justify-content: center;
		background:
			linear-gradient(311deg, rgba(45, 84, 128, .7) 14.44%, rgba(75, 137, 152, 0) 61.53%),
			linear-gradient(49deg, #5a94a0 50%, #83abb6 69.4%, #a1bbc6 83.46%);
		color: #fff;
		text-align: center;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
		line-height: 20px;
		letter-spacing: 1px;
	}
	.perspective__writer-info { display: flex; flex-direction: column; gap: 4px; }
	.perspective__writer-name {
		font-family: var(--font-sans);
		font-stretch: 75%;
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: var(--dia-color-text-primary, #121212);
	}
	.perspective__writer-department {
		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);
	}
	.perspective__writer-bio {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: var(--dia-color-text-secondary, #767778);
	}

	.perspective__title-block {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 49.375rem; /* 790px, mismo ancho que .post__col */
	}
	.perspective__header .post__title { margin-bottom: 16px; }
	.perspective__desc {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 300;
		font-size: 22px;
		line-height: 32px;
		color: var(--dia-color-text-primary, #121212);
	}

	/* ---- Fila de fecha/tiempo de lectura + compartir (Figma "Article info section" nodo
	   2915:8595) — reusa .post__author-row (single-news.css) tal cual, ahora a ancho completo
	   (1200px) en vez de acotada a .post__col: vive directo en .post-page__inner, igual que el
	   header de arriba. ---- */
	.perspective__meta-row { margin-bottom: 0; }

	.perspective__hero { border-radius: 12px; margin-top: 0; }

	.perspective__body { margin-top: clamp(1.875rem, 1.5rem + 1vw, 3rem); }
	.post__footer { padding-bottom: clamp(3rem, 6vw, 5rem); }

	/* ---- "Descubre más" (Figma nodo 2915:8217) — fondo subtle + borde superior. Carrusel Swiper
	   (mismo criterio que .related-news__swiper de single-news.css/single-news-slider.js: 3
	   columnas desktop, 2 tablet, 1 con peek en mobile) — pedido explícito del usuario 2026-07-14,
	   ANTES era un .perspective-grid fijo de 3 sin carrusel (esa clase la sigue reusando
	   archive-perspective.php para SUS filas, que no llevan carrusel — solo se retiró de acá). Sin
	   margin-top propio: el espacio antes de esta sección ya lo aporta el padding-bottom de
	   .post__footer de arriba. ---- */
	.related-perspectives {
		background: var(--dia-color-bg-subtle, #fafbfb);
		border-top: 1px solid #e5e5e5;
		padding-block: clamp(3rem, 6vw, 5rem);
		padding-inline: clamp(var(--space-m), 8vw, 7.5rem);
	}
	@media (width >= 80rem) {
		.related-perspectives { padding-inline: 0; }
	}
	.related-perspectives__title {
		margin: 0 0 clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
	}
	/* Sin width propio en el slide: Swiper calcula el ancho vía slidesPerView
	   (single-perspective-slider.js) — mismo criterio que .related-news__swiper (single-news.css). */
	.related-perspectives__swiper .swiper-slide { height: auto; }

	/* Dots — mismo look que .related-news__dots (single-news.css, Figma 2510:2310). !important
	   necesario: swiper-bundle.min.css no tiene @layer y le gana a cualquier regla en @layer sin
	   importar especificidad (arquitectura §12.1/§12.22). */
	.related-perspectives__dots {
		display: flex; justify-content: center; align-items: center;
		gap: 8px;
		margin-top: var(--space-l);
	}
	.related-perspectives__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;
	}
	.related-perspectives__dots .swiper-pagination-bullet-active {
		background: #cdd6e1 !important;
	}

	.perspective-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 30px;
	}

	/* Altura 450px (380×428 del Figma + 22px extra) — el título a 2 líneas de la variante
	   --featured (28px de line-height c/u = 56px) + su margin-bottom de 24px no cabía en los 428
	   originales sin que el overflow:hidden de .perspective-card__body recortara la 2da línea a la
	   mitad en vez de dejar ver el line-clamp completo (bug reportado). Igual en las 2 variantes
	   (flat y --featured) para que las 3 cards del grid queden a la misma altura (.perspective-grid
	   es un CSS Grid, así que align-items:stretch de grid ya empareja las 3 cards de la fila aunque
	   sea min-height en vez de height fijo — sigue sirviendo de piso).
	   min-height (NO height fijo, versión anterior) — bug real reportado: en la fila asimétrica
	   (.perspective-archive-wide-row, archive-perspective.css) esta card es un flex item con
	   flex:1 1 0 en tablet/mobile — flex-basis:0 IGNORA el height:450px para calcular el tamaño
	   base del flex item (flex-basis no-auto pisa la propiedad height/width del eje principal), y
	   como el body/la card tienen overflow:hidden (que resetea el automatic minimum size a 0), la
	   card podía terminar colapsando a un alto casi nulo dentro de la columna apilada de mobile en
	   vez de mostrar su contenido — con min-height, el flex-basis:0 sigue sin tomar el alto como
	   punto de partida, pero el resultado final del algoritmo de flex SIEMPRE se clampea contra el
	   min-height como piso, así que no puede colapsar por debajo de 450px.
	   height:100% (nuevo, para .related-perspectives__swiper): la card debe llenar el alto
	   completo del .swiper-slide que la contiene — mismo patrón que .news-card (height:100% +
	   min-height:490px, home-news.css) dentro de .related-news__swiper. En .perspective-grid (CSS
	   Grid) es redundante con el align-items:stretch de grid, no cambia nada ahí. */
	.perspective-card {
		height: 100%;
		min-height: 450px;
		border-radius: 12px;
	}
	.perspective-card:not(.perspective-card--featured) {
		border: 1px solid #d0d1d3;
		background: #f5f5f1;
		overflow: hidden;
	}
	.perspective-card__link {
		display: flex;
		flex-direction: column;
		height: 100%;
		color: inherit;
		text-decoration: none;
	}
	/* Imagen destacada (solo .perspective-card--featured, Figma nodo 3044:13081/13082 — 380×238) —
	   radio propio en las 4 esquinas (NO solo heredado del overflow:hidden del padre, que acá no
	   aplica: .perspective-card--featured no lo lleva porque el cuerpo de texto de abajo no tiene
	   fondo/borde que recortar) — sin esto solo se veían redondeadas las 2 esquinas de arriba (bug
	   reportado).
	   aspect-ratio:8/5 (16/10, mismo ratio "editorial" de facto que --ratio-article-compact de
	   base.css y el resto de las cards del sitio — 380×238 del Figma reduce a esa misma proporción),
	   NO height:238px fijo (versión anterior): con height fijo, la imagen respetaba el 380×238 del
	   Figma SOLO mientras la columna del grid medía exactamente 380px (3 columnas a 1200px de
	   container) — en el grid de 2 columnas de tablet (~323px de ancho) el alto seguía fijo en 238px
	   con menos ancho, dando una imagen más cuadrada/alta de lo previsto (bug real reportado). Con
	   aspect-ratio el alto sigue al ancho real de la columna en cualquier breakpoint. El resto del
	   alto disponible de la card (450px fijos, ver .perspective-card arriba) sigue quedando para
	   .perspective-card__body de abajo, que ya tiene overflow:hidden como red de seguridad. */
	.perspective-card__media {
		display: block;
		flex-shrink: 0;
		aspect-ratio: 8 / 5;
		border-radius: 12px;
		overflow: hidden;
	}
	.perspective-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		/* Mismo zoom de hover que .news-card--flat:hover .news-card__media img (home-news.css) —
		   transform en la img, no en .perspective-card__media (que ya recorta con overflow:hidden),
		   así el zoom queda contenido dentro del radio de 12px sin desbordar la card. */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
		-webkit-user-drag: none;
		user-select: none;
	}
	.perspective-card:hover .perspective-card__media img { transform: scale(1.06); }

	.perspective-card__body {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden; /* red de seguridad: recorta en vez de estirar la card si algo no cabe */
		padding: 32px;
	}
	/* 22px (no 32px, el mismo padding-top que la variante flat de arriba) — pedido explícito del
	   usuario 2026-07-15, ajuste fino contra el Figma. */
	.perspective-card--featured .perspective-card__body { padding: 22px 0 0; }

	.perspective-card__tag { flex-shrink: 0; margin-bottom: 12px; }
	.perspective-card__title {
		margin: 0 0 48px;
		font-family: var(--font-serif);
		font-stretch: 75%;
		font-weight: 500;
		font-size: 28px;
		line-height: 1.3;
		color: #111;
		/* Recorta con ellipsis en vez de desbordar — mismo motivo que overflow:hidden de
		   .perspective-card__body arriba, la card tiene alto fijo. line-clamp estándar +
		   -webkit-line-clamp (Safari/Chrome viejos todavía lo requieren con el prefijo). */
		display: -webkit-box;
		line-clamp: 6;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	/* Título más chico + menos espacio antes del autor en la variante con imagen (Figma nodo
	   3044:13086/13083: Noto_Serif_Condensed SemiBold 20px, gap de 24 en vez de 32 con el autor) —
	   menos alto disponible abajo de la imagen que en la variante flat de altura completa. */
	.perspective-card--featured .perspective-card__title {
		margin-bottom: 22px; /* antes 24px — mismo ajuste fino pedido 2026-07-15 que el padding de
			.perspective-card__body de arriba, para que el gap con el autor de abajo quede parejo con
			el nuevo padding-top:22px. */
		font-weight: 600;
		font-size: 20px;
		line-height: 28px;
		color: var(--dia-color-text-primary, #121212);
		line-clamp: 2;
		-webkit-line-clamp: 2;
	}
	/* Gap fijo con el título (48px flat / 24px featured, vía margin-bottom de .perspective-card__title
	   arriba) — NO margin-top:auto: el Figma pega el autor al título hacia arriba, no lo empuja al
	   fondo de la card (confirmado explícitamente, no un "empty space" que crezca con títulos cortos). */
	.perspective-card__writer { display: flex; align-items: flex-start; gap: 16px; flex-shrink: 0; }
	.perspective-card__avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
		-webkit-user-drag: none;
		user-select: none;
	}
	.perspective-card__avatar--initial {
		display: flex;
		align-items: center;
		justify-content: center;
		background:
			linear-gradient(311deg, rgba(45, 84, 128, 0.70) 14.44%, rgba(75, 137, 152, 0.00) 61.53%),
			linear-gradient(49deg, #5A94A0 50%, #83ABB6 69.4%, #A1BBC6 83.46%);
		color: #fff;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 16px;
	}
	.perspective-card__writer-info { display: flex; flex-direction: column; gap: 2px; }
	.perspective-card__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-primary, #121212);
	}
	.perspective-card__writer-department {
		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);
	}
	.perspective-card:hover .perspective-card__title { color: var(--dia-color-text-secondary, #767778); }

	/* Header de autor/metadatos apilado a 1 columna desde TABLET (no solo mobile, <48rem) — pedido
	   explícito del diseñador 2026-07-22: a 768px (=48rem EXACTO) el layout debía comportarse ya
	   como mobile, pero `width < 48rem` excluye justo ese valor (768px no es MENOR a 768px), así
	   que quedaba en el flex row de 2 columnas de desktop (autor 278px + divisor + título) hasta
	   80rem. Solo las clases propias de ESTE archivo (single-perspective.css) se mueven a <80rem —
	   .post__col/.perspective-grid siguen en su bloque <48rem de abajo porque son compartidas con
	   archive-perspective.php (archive-perspective.css ya resuelve su propio tablet/mobile aparte). */
	@media (width < 80rem) {
		.perspective__header { flex-direction: column; gap: 32px; }
		.perspective__author { width: 100%; }
		.perspective__author-divider { display: none; }
		.perspective__title-block { max-width: 100%; }
		.perspective__writer { flex-wrap: wrap; }
	}

	@media (width < 48rem) {
		.post__col { max-width: 100%; }

		.perspective-grid { grid-template-columns: 1fr; }
	}
}