/* =================================================================
   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: center; gap: 16px; }
	.perspective__writer-avatar {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
	}
	/* Sin foto de autor: iniciales sobre fondo de marca (mismo criterio que .post__avatar--initial
	   de single-news.css, a esta otra escala). */
	.perspective__writer-avatar--initial {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--dia-color-brand-primary, #2d5480);
		color: #fff;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
	}
	.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, 3 cards fijas
	   (sin carrusel, mismo criterio que .related-stories de single-story.css). 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);
	}

	.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-card {
		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). Alto fijo: el resto del alto disponible (428 - esto) queda para
	   .perspective-card__body de abajo. */
	.perspective-card__media {
		display: block;
		flex-shrink: 0;
		height: 238px;
		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);
	}
	.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;
	}
	.perspective-card--featured .perspective-card__body { padding: 32px 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: 24px;
		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: center; gap: 16px; flex-shrink: 0; }
	.perspective-card__avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
	}
	.perspective-card__avatar--initial {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--dia-color-brand-primary, #2d5480);
		color: #fff;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 16px;
	}
	.perspective-card__byline {
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.perspective-card:hover .perspective-card__title { color: var(--dia-color-text-secondary, #767778); }

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

		.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; }

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