/* =================================================================
   archive-perspective.css — Archive de Perspectives (Figma 15-Perspectives-Desktop,
   node-id=2866-8101). Reusa .post-tag (single-news.css), .perspective-card/.perspective-grid
   (single-perspective.css) y .news-card-wide/.news-card__content/.news-card__title--lg/
   .news-card__circle-btn/.news-card__cta-icon/.news-card__glass (news.css) — todas encoladas junto
   con este archivo (ver inc/enqueue.php) — en vez de duplicarlas. .home-stories (carrusel "Explora
   las historias...") también se reusa tal cual, ver parts/layout/archive-perspective-stories.php.
   Sin filter-bar: layout fijo (hero + fila + fila asimétrica + carrusel + fila + paginación) que se
   repite igual en cada página, ver archive-perspective.php.
   Breakpoint estándar 80rem para el wrap de página (§12), 64rem para la card ancha (mismo umbral
   que .news-card-wide en news.css, aprendizaje reusado de esa vista) y 48rem para el resto.
   ================================================================= */

@layer views {

	.perspective-archive-header {
		background: var(--dia-color-bg-page, #fff);
		border-bottom: 1px solid #e5e5e5;
	}
	.perspective-archive-header__inner {
		max-width: var(--container);
		margin-inline: auto;
		padding: clamp(1.5rem, 2vw, 3rem) clamp(var(--space-m), 8vw, 7.5rem);
	}
	@media (width >= 80rem) {
		.perspective-archive-header__inner { padding-inline: 0; }
	}
	.perspective-archive-header__title {
		margin: 0 0 16px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(2rem, 1.4rem + 2.4vw, 3.75rem); /* hasta 60px desktop */
		line-height: 1.17;
		letter-spacing: -2px;
		color: var(--dia-color-text-primary, #121212);
	}
	.perspective-archive-header__desc {
		margin: 0;
		max-width: 36.5rem; /* 585px */
		font-family: var(--font-sans);
		font-size: 20px;
		line-height: 32px;
		color: var(--dia-color-text-primary, #121212);
	}

	.perspective-archive__col {
		max-width: var(--container);
		margin-inline: auto;
		padding-inline: clamp(var(--space-m), 8vw, 7.5rem);
		padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* 40px → 80px, mismo clamp que .home-stories/related-news */
	}
	@media (width >= 80rem) {
		.perspective-archive__col { padding-inline: 0; }
	}
	.perspective-archive__col > * + * { margin-top: 48px; }

	/* ---- Artículo principal (Figma "Frame 69"/2866:8157 + imagen 2866:8156) ---- */
	.perspective-hero {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: clamp(2rem, 4vw, 5rem);
	}
	.perspective-hero__text {
		display: flex;
		flex-direction: column;
		gap: 12px;
		flex: 1 1 26rem; /* 480px con margen para encoger antes de apilar en mobile */
		min-width: 0;
	}
	.perspective-hero__title {
		margin: 0;
		font-family: var(--font-serif);
		font-stretch: 75%;
		font-weight: 500;
		font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
		line-height: 1.3;
		letter-spacing: -.5px;
		color: var(--dia-color-text-primary, #121212);
	}
	.perspective-hero__title a { color: inherit; text-decoration: none; }
	.perspective-hero__title a:hover { color: var(--dia-color-text-secondary, #767778); }
	.perspective-hero__writer { margin-top: 12px; }
	.perspective-hero__media {
		display: block;
		flex: 0 0 36.5625rem; /* 585px */
		width: 36.5625rem;
		aspect-ratio: 585 / 366;
		border-radius: 12px;
		overflow: hidden;
	}
	.perspective-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

	.perspective-archive-divider { height: 1px; background: #e5e5e5; }

	/* ---- Bloque de autor (avatar + nombre + departamento) compartido por el artículo principal
	   (56px, Figma 2867:8633) y la card ancha (48px, Figma 2870:9028) — modificador de tamaño
	   propio en cada contexto (ver abajo). Mismo criterio tipográfico que .perspective__writer-*
	   de single-perspective.css, pero SIN depender de ese archivo (esta vista no lo encola). ---- */
	.perspective-wide-writer { display: flex; align-items: center; gap: 16px; }
	.perspective-wide-writer__avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
	}
	.perspective-hero__writer .perspective-wide-writer__avatar { width: 56px; height: 56px; }
	.perspective-wide-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: 16px;
	}
	.perspective-wide-writer__info { display: flex; flex-direction: column; gap: 2px; }
	.perspective-wide-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-wide-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, #a3a3a3);
	}

	/* ---- Fila asimétrica: 1 card plana (.perspective-card, single-perspective.css) + 1 card ancha
	   (.news-card-wide.perspective-card-wide, ver card-perspective-wide.php) ---- */
	.perspective-archive-wide-row {
		display: flex;
		align-items: stretch;
		gap: 30px;
	}
	.perspective-archive-wide-row .perspective-card { flex: 0 0 380px; }
	.perspective-archive-wide-row .perspective-card-wide { flex: 1 1 auto; min-width: 0; }

	/* ---- Paginación (Figma "Pagination-Card" 3086:12880) — mismo tratamiento CLARO que
	   .news-pagination (news.css)/.resource-pagination/.project-pagination, clases propias
	   `.perspective-page-*` (mismo criterio de "1 CSS de paginación por vista" del resto del sitio). ---- */
	.perspective-pagination {
		padding-block: clamp(2rem, 4vw, 5rem) clamp(3rem, 6vw, 5rem);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}
	.perspective-pagination__numbers,
	.perspective-pagination__numbers-compact { display: flex; align-items: center; gap: 12px; }
	.perspective-pagination__numbers-compact { display: none; }
	.perspective-page-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		border-radius: 4px;
		border: 1px solid var(--dia-color-text-primary, #121212);
		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-primary, #121212);
	}
	.perspective-page-btn--ellipsis { border: 0; color: var(--dia-color-text-secondary, #767778); }
	.perspective-page-btn:not([aria-current="page"]):not(.perspective-page-btn--ellipsis):hover,
	.perspective-page-next:not(:disabled):hover,
	.perspective-page-prev:not(:disabled):hover {
		border: 1px solid #a7b7ca;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}
	.perspective-page-btn[aria-current="page"] {
		background: var(--dia-btn-gray-gradient);
		border: 1px solid #a7b7ca;
	}
	.perspective-page-next,
	.perspective-page-prev {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 16px 24px;
		border-radius: 4px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		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-primary, #121212);
	}
	.perspective-page-next svg,
	.perspective-page-prev svg { width: 16px; height: 16px; }
	.perspective-page-prev__icon { display: inline-flex; transform: rotate(180deg); }
	.perspective-page-next:disabled,
	.perspective-page-prev:disabled { opacity: .35; cursor: not-allowed; }
	.perspective-pagination__mobile { display: none; }

	/* ---- Spinner de paginación (perspective-spinner.js reposiciona esto sobre el botón clickeado)
	   — hx-indicator en #results (archive-perspective.php) togglea .htmx-request acá mientras hay
	   una petición en vuelo, recién visible si dura MÁS de 300ms (transition-delay). Mismo patrón/
	   colores que .resource-spinner (archive-resource.css), tratamiento CLARO. ---- */
	body.is-loading .perspective-archive #results { opacity: .6; transition: opacity .2s; }
	.perspective-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;
	}
	.perspective-spinner.htmx-request {
		opacity: 1;
		transition-delay: .3s;
	}
	.perspective-spinner__ring {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2px solid #d0d1d3;
		border-top-color: var(--dia-color-text-primary, #121212);
		animation: perspective-spinner-spin .7s linear infinite;
	}
	@keyframes perspective-spinner-spin {
		to { transform: rotate(360deg); }
	}

	/* ---- Estado vacío (no-results-perspective.php) — mismo patrón de 2 niveles que
	   .story-empty-outer/.story-empty (archive-stories.css), tratamiento CLARO. ---- */
	.perspective-empty-outer {
		display: flex;
		justify-content: center;
		padding-block: clamp(3rem, 6vw, 6rem);
	}
	.perspective-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		text-align: center;
		max-width: 26rem;
	}
	.perspective-empty__icon { width: 40px; height: 40px; color: var(--dia-color-text-secondary, #767778); }
	.perspective-empty__title {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
		color: var(--dia-color-text-primary, #121212);
	}
	.perspective-empty__desc {
		margin: 0;
		font-family: var(--font-sans);
		font-size: 16px;
		line-height: 24px;
		color: var(--dia-color-text-secondary, #767778);
	}

	/* ---- .home-stories reusado en medio del listado (archive-perspective-stories.php) — SOLO
	   padding-block propio (80px desktop, mismo clamp 40→80 que .related-news/single-news.css), SIN
	   margin: la separación contra el wide-row de arriba y el grid de abajo la aportan los paddings
	   de ambos .perspective-archive__col (pedido explícito del usuario, para no sumar dos fuentes de
	   espaciado distintas). Pisa el padding-block:var(--space-xl) (64px fijo) de home-stories.css. ---- */
	.perspective-archive .home-stories { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

	/* ---- Mobile/tablet: card ancha apilada (imagen arriba, contenido abajo) — a diferencia de
	   card-news-wide.php, esta imagen NUNCA lleva texto encima, así que alcanza con apilar en vez
	   de reemplazar el markup por un tratamiento "featured" con overlay. Contrarresta el
	   `.news-card-wide { display:block; ... } .news-card-wide__media,.news-card-wide__content
	   {display:none}` de news.css en este mismo rango (<64rem): selector de 2 clases
	   (.news-card-wide.perspective-card-wide) gana por especificidad sin necesitar !important. ---- */
	@media (width < 64rem) {
		.perspective-archive-wide-row { flex-direction: column; }
		.perspective-archive-wide-row .perspective-card { flex: 1 1 auto; }
		.news-card-wide.perspective-card-wide {
			display: flex;
			flex-direction: column;
			background: #f5f5f1;
			border: 1px solid #d0d1d3;
		}
		.perspective-card-wide .news-card-wide__media,
		.perspective-card-wide .news-card-wide__content { display: flex; }
		.perspective-card-wide .news-card-wide__media { flex: 0 0 auto; width: 100%; aspect-ratio: 380 / 238; }
	}

	@media (width < 48rem) {
		.perspective-hero { flex-direction: column; align-items: stretch; }
		/* flex:1 1 26rem (regla base) es un flex-BASIS de ANCHO pensado para la fila horizontal de
		   desktop — en column (arriba) ese eje pasa a ser el vertical, así que ese mismo 26rem se
		   interpretaba como una ALTURA mínima de 416px para el bloque de texto, dejando un hueco
		   enorme debajo en mobile/tablet (bug real reportado). auto: alto según su contenido real. */
		.perspective-hero__text { flex-basis: auto; }
		.perspective-hero__media { width: 100%; flex-basis: auto; }
		.perspective-archive__col > * + * { margin-top: 32px; }

		/* Los botones prev/next "--desktop" (icon-only en este breakpoint, ya que
		   .perspective-page-nav__label se oculta arriba) NO se ocultaban acá — quedaban visibles A
		   LA VEZ que el bloque .perspective-pagination__mobile (prev/next propios + "X OF Y"),
		   duplicando las flechas de navegación (bug real reportado, screenshot). */
		.perspective-pagination__numbers { display: none; }
		.perspective-pagination__numbers-compact { display: none; }
		.perspective-page-prev--desktop,
		.perspective-page-next--desktop { display: none; }
		.perspective-page-nav__label { display: none; }
		.perspective-page-next,
		.perspective-page-prev { height: 40px; padding-inline: 11px; padding-block: 0; }
		.perspective-pagination {
			gap: 12px;
			padding-block: 16px clamp(2rem, 6vw, 4rem);
		}
		.perspective-pagination__mobile {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}
		.perspective-pagination__mobile-status {
			flex: 1;
			text-align: center;
			font-family: var(--font-sans);
			font-weight: 700;
			font-size: 13px;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: var(--dia-color-text-primary, #121212);
		}
	}
}