/* =================================================================
   institutions-directory.css — Directorio de Instituciones Educativas Adventistas en
   Interamérica (page-institutions-directory.php, Figma node-id=5235-23392, archivo
   BdUd1g6K6cuVm4036Z5p6p). Breakpoint estándar 80rem (§12).

   Acordeón (.edu-accordion__*) y hero (.edu-directory-hero__*) clonados a propósito de
   .about-accordion__* y .about-hero__* (about-iad.css) — mismo criterio "un archivo por vista"
   del resto del tema, en vez de depender de que about-iad.css esté cargado en esta página.
   Gotcha real 2026-08-13 (mismo bug que gotchas.md §12.97): "__*" pegado directo a una barra sin
   espacio, dentro de un comentario, cierra el comentario antes de tiempo (asterisco + barra =
   fin de comentario en CSS) y tumba el parseo de TODO el archivo en el navegador. Siempre dejar
   un espacio entre "__*" y la barra que sigue si aparecen juntos en un comentario.
   ================================================================= */

@layer views {

	/* ---- Hero: foto full-bleed + blur/grano (pedido explícito 2026-08-13, mismo tratamiento que
	   .about-hero__glass/__after de about-iad.css — clonado, no reusado, mismo criterio "un
	   archivo por vista" del resto del set). ---- */
	.edu-directory-hero {
		position: relative;
		min-height: 22rem;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-xl) var(--space-m);
		background: var(--edu-directory-hero-bg) center / cover no-repeat, var(--dia-color-text-primary, #121212);
		isolation: isolate;
	}
	.edu-directory-hero__gradient {
		position: absolute; inset: 0;
		background: linear-gradient(180deg,
			rgba(0, 0, 0, .1) 0%,
			rgba(0, 0, 0, .35) 45%,
			rgba(0, 0, 0, .75) 100%);
	}
	.edu-directory-hero__glass {
		position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
		pointer-events: none;
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);
		-webkit-mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%);
	}
	.edu-directory-hero__glass::after {
		content: '';
		position: absolute; inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 231' preserveAspectRatio='none'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' result='a'/%3E%3CfeComponentTransfer in='a'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1440' height='231' fill='black' opacity='0.14' filter='url(%23grain)'/%3E%3C/svg%3E");
		background-size: 100% 100%;
	}
	.edu-directory-hero__inner {
		position: relative;
		z-index: 1;
		max-width: 49.375rem; /* 790px, spec literal del Figma en desktop */
		text-align: center;
	}
	/* DIA DS/Label/Tags, mismo spec que .service-hero__eyebrow (single-service.css) — clonado, no
	   reusado, mismo criterio "un archivo por vista" del resto del set. */
	.edu-directory-hero__eyebrow {
		margin: 0 0 4px;
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px; /* 150% */
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-inverse, #fff);
	}
	/* Spec literal del Figma (desktop): Noto Sans 700, 40px/50px (line-height 125%), -1px de
	   letter-spacing. Mobile/tablet: mismo clamp ya confirmado visualmente en los 8 __title de
	   sección de Landing (28px → 40px, misma proporción 125% de line-height) — mismo criterio de
	   "reusar la escala ya validada" en vez de inventar una nueva. Letter-spacing fijo (no clampea),
	   mismo criterio que .hero-title (base.css). */
	.edu-directory-hero__title {
		color: var(--dia-color-text-inverse, #fff);
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); /* 28px → 40px desktop */
		line-height: 1.25; /* 125%, 50/40 */
		letter-spacing: -1px;
	}

	/* 790px, spec literal del Figma en desktop — SIN padding-inline ahí (el ancho ya es el
	   contenido), el padding solo hace falta cuando el viewport se vuelve más angosto que esos
	   790px (si no, el texto llegaría al borde de la pantalla). */
	.edu-directory-page__inner {
		max-width: 49.375rem;
		margin-inline: auto;
		padding-inline: 0;
		padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
	}
	@media (width < 49.375rem) {
		.edu-directory-page__inner { padding-inline: var(--space-m); }
	}
	.edu-directory-page__intro {
		max-width: 49.375rem; /* 790px, mismo ancho que __inner por spec */
		margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem);
		text-align: center;
		color: var(--dia-color-text-secondary, #767778);
	}

	/* ---- Acordeón por país — mismo patrón que .about-accordion__* (about-iad.css), N items
	   dinámicos en vez de 3 keys fijas: ver gotcha §12.89 de docs-prd/gotchas.md antes de tocar. ---- */
	.edu-accordion__item { border-top: 1px solid #cdd6e1; }
	.edu-accordion__item:last-child { border-bottom: 1px solid #cdd6e1; }

	.edu-accordion__head {
		display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
		width: 100%;
		padding-block: 32px;
		padding-inline: 0;
		background: none;
		border: none;
		text-align: left;
		cursor: pointer;
	}
	.edu-accordion__label { display: flex; align-items: center; gap: var(--space-s); min-width: 0; }
	/* DIA DS/Body/Body Medium, spec literal del Figma. */
	.edu-accordion__label span:last-child {
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
		line-height: 32px; /* 160% */
		color: var(--dia-color-text-primary, #121212);
	}
	.edu-accordion__flag { width: 24px; height: 14px; object-fit: cover; flex-shrink: 0; border-radius: 2px; }

	.edu-accordion__toggle {
		flex-shrink: 0;
		display: flex; align-items: center; justify-content: center;
		width: 42px; height: 42px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		border-radius: 4px;
		color: var(--dia-color-text-primary, #121212);
	}
	.edu-accordion__toggle > span { display: flex; align-items: center; justify-content: center; }
	.edu-accordion__toggle svg { width: 14px; height: 14px; display: block; }
	.edu-accordion__head:hover .edu-accordion__toggle {
		border-color: transparent;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}

	/* grid-template-rows 0fr → 1fr: misma técnica que .about-accordion__body-wrap. */
	.edu-accordion__body-wrap {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .3s ease;
	}
	.edu-accordion__body-wrap--open { grid-template-rows: 1fr; }
	/* Al cambiar de un país abierto a OTRO (no al cerrar el mismo con un 2do click), el que se
	   cierra colapsa SIN animar — evita que 2 alturas cambien a la vez (300ms) y el navegador
	   calcule el scroll a mitad de esa transición (síntoma real reportado 2026-08-13: el país
	   recién abierto a veces quedaba scrolleado de más, el encabezado desaparecía arriba del
	   viewport). Mismo fix que .about-accordion__body-wrap--instant (about-iad.css) — se me había
	   olvidado portarlo acá, solo copié la técnica de grid-rows, no el fix de scroll completo. */
	.edu-accordion__body-wrap--instant { transition: none; }
	.edu-accordion__body { min-height: 0; overflow: hidden; }
	.edu-accordion__body > *:last-child { margin-bottom: var(--space-l); }

	/* DIA DS/Body/Body Medium, spec literal del Figma (mismo estilo que el nombre de institución). */
	.edu-union__title {
		margin: var(--space-m) 0 var(--space-s);
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
		line-height: 32px; /* 160% */
		color: var(--dia-color-text-primary, #121212);
	}

	/* CSS columns (llena de arriba hacia abajo por columna, como el Figma) — mismo criterio que
	   .about-countries (about-iad.css). */
	.edu-institutions {
		column-count: 2;
		column-gap: 40px;
	}
	.edu-institution {
		break-inside: avoid;
		margin-bottom: var(--space-m);
	}
	/* DIA DS/Body/Body Medium, spec literal del Figma — mismo tamaño/line-height/color para TODOS
	   los textos de la institución, pero SOLO el nombre va en negrita (700), el resto en 400.
	   .edu-institution__name y las filas de contacto son <p> por igual: ".edu-institution p" (clase
	   + tag) le gana en especificidad a ".edu-institution__name" sola (clase sola) — el override de
	   peso necesita el selector de 2 clases de abajo para ganar de verdad, un ".edu-institution__name"
	   suelto quedaría pisado en silencio por la regla de acá arriba. */
	.edu-institution p {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 20px;
		line-height: 32px; /* 160% */
		color: var(--dia-color-text-primary, #121212);
	}
	.edu-institution .edu-institution__name {
		margin: 0 0 var(--space-xs);
		font-weight: 700;
	}
	/* Filas de contacto: texto plano con etiqueta literal ("Tel: ...", "Email: ..."), SIN ícono —
	   spec literal del Figma (revisión 2026-08-12, ver docblock de page-institutions-directory.php). */
	.edu-institution p + p { margin-top: 2px; }
	.edu-institution a { color: inherit; text-decoration: none; }
	.edu-institution a:hover { text-decoration: underline; }
	/* Emails/sitios web largos sin espacios no hacen wrap solos y se salen de la columna — mismo
	   truco de siempre en el sitio (.project-filter-dropdown__label, archive-project.css): la fila
	   es flex ("Email: " + link en la misma línea) y el link es el ítem flexible que trunca con
	   ellipsis — display:block (intento anterior) sacaba el link a su propia línea, separado de
	   la etiqueta. */
	.edu-institution__contact-row {
		display: flex;
		align-items: baseline;
		gap: 4px;
	}
	.edu-institution__link--truncate {
		min-width: 0;
		flex: 1 1 auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	@media (width < 48rem) {
		.edu-institutions { column-count: 1; }
	}
}