/* =================================================================
   hospitals-directory.css — Clínicas y Hospitales (page-hospitals-directory.php). Breakpoint
   estándar 80rem (§12).

   Clonado de institutions-directory.css a propósito (mismo criterio "un archivo por vista" del
   resto del tema), con una diferencia real de UX: acá el acordeón (.hosp-row--expand) solo se usa
   en el país con 2+ hospitales (México); el resto son filas planas (.hosp-row--flat) sin botón —
   ver el docblock de page-hospitals-directory.php sobre por qué (Fitts's/Hick's Law en contra de
   forzar un disclosure que siempre revela un solo dato).
   ================================================================= */

@layer views {

	/* ---- Hero: mismo tratamiento que .edu-directory-hero__* (institutions-directory.css). ---- */
	.hosp-directory-hero {
		position: relative;
		min-height: 22rem;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-xl) var(--space-m);
		background: var(--hosp-directory-hero-bg) center / cover no-repeat, var(--dia-color-text-primary, #121212);
		isolation: isolate;
	}
	.hosp-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%);
	}
	.hosp-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%);
	}
	.hosp-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%;
	}
	.hosp-directory-hero__inner {
		position: relative;
		z-index: 1;
		max-width: 49.375rem; /* 790px, mismo ancho que institutions-directory.css */
		text-align: center;
	}
	.hosp-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);
	}
	.hosp-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% */
		letter-spacing: -1px;
	}

	.hosp-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) {
		.hosp-directory-page__inner { padding-inline: var(--space-m); }
	}
	.hosp-directory-page__intro {
		max-width: 49.375rem;
		margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem);
		text-align: center;
		color: var(--dia-color-text-secondary, #767778);
	}

	/* ---- Filas por país: borde compartido entre flat y expand, mismo look de línea divisoria que
	   .edu-accordion__item. ---- */
	.hosp-row { border-top: 1px solid #cdd6e1; }
	.hosp-row:last-child { border-bottom: 1px solid #cdd6e1; }

	.hosp-row__label { display: flex; align-items: center; gap: var(--space-s); min-width: 0; }
	.hosp-row__country {
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
		line-height: 32px; /* 160% */
		color: var(--dia-color-text-primary, #121212);
	}
	.hosp-row__flag { width: 24px; height: 14px; object-fit: cover; flex-shrink: 0; border-radius: 2px; }

	/* Fila plana (país con 1 solo hospital): sin botón, info del hospital DEBAJO del nombre del
	   país (spec de Figma) en vez de detrás de un disclosure — es el dato completo de la fila, no
	   hay nada más que "revelar". Apilada en todas las resoluciones, no solo mobile (antes iba lado
	   a lado con texto alineado a la derecha en desktop, pedido explícito de cambio 2026-08-24). */
	.hosp-row--flat {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-s);
		padding-block: 32px;
	}

	/* ---- Fila-acordeón (país con 2+, hoy solo México) — mismo patrón que .edu-accordion__*
	   (gotcha reutilizable §12.89 de docs-prd/gotchas.md antes de tocar). ---- */
	.hosp-row__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;
	}
	.hosp-row__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);
	}
	.hosp-row__toggle > span { display: flex; align-items: center; justify-content: center; }
	.hosp-row__toggle svg { width: 14px; height: 14px; display: block; }
	.hosp-row__head:hover .hosp-row__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 .edu-accordion__body-wrap. */
	.hosp-row__body-wrap {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .3s ease;
	}
	.hosp-row__body-wrap--open { grid-template-rows: 1fr; }
	/* Mismo fix de scroll que .edu-accordion__body-wrap--instant: al cambiar de país abierto a
	   OTRO, el que se cierra colapsa sin animar (evita 2 alturas cambiando a la vez). */
	.hosp-row__body-wrap--instant { transition: none; }
	.hosp-row__body { min-height: 0; overflow: hidden; }
	.hosp-row__body > *:last-child { margin-bottom: var(--space-l); }

	/* CSS columns — mismo criterio que .edu-institutions. */
	.hosp-institutions {
		column-count: 2;
		column-gap: 40px;
	}
	@media (width < 48rem) {
		.hosp-institutions { column-count: 1; }
	}

	/* ---- Datos de contacto de un hospital — mismo spec que .edu-institution__*. ---- */
	.hosp-institution {
		break-inside: avoid;
		margin-bottom: var(--space-m);
	}
	.hosp-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);
	}
	.hosp-institution .hosp-institution__name {
		margin: 0 0 var(--space-xs);
		font-weight: 700;
	}
	.hosp-institution p + p { margin-top: 2px; }
	.hosp-institution a { color: inherit; text-decoration: none; }
	.hosp-institution a:hover { text-decoration: underline; }
	.hosp-institution__contact-row {
		display: flex;
		align-items: baseline;
		gap: 4px;
	}
	.hosp-institution__link--truncate {
		min-width: 0;
		flex: 1 1 auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}