/* =================================================================
   radio-directory.css — Estaciones de Radio (page-radio-directory.php). Breakpoint estándar
   80rem (§12).

   Clonado de hospitals-directory.css a propósito (mismo criterio "un archivo por vista" del
   resto del tema, mismo acordeón .radio-row--expand), con 2 diferencias reales:
   - El agrupador es una región editorial (radio_station_region), no un país ISO — sin bandera
     por fila (decisión del usuario 2026-08-16, ver docblock de page-radio-directory.php).
   - A diferencia de hospitales, TODAS las regiones usan acordeón, incluso las de 1 sola estación
     — acá están intercaladas entre las de muchas, no aisladas, así que no hay variante de fila
     plana (.hosp-row--flat) — ver docblock de dia_radio_stations_directory_groups().
   ================================================================= */

@layer views {

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

	/* 62.1875rem (995px): los 3 acordeones padre (Figma "event" frames, 995px de ancho contando
	   padding — a diferencia de hospitales/instituciones, que sí caben en el mismo ancho angosto
	   de 790px que el hero/intro). El intro conserva su propio ancho angosto (790px) vía
	   .radio-directory-page__intro, centrado dentro de este contenedor más amplio. */
	.radio-directory-page__inner {
		max-width: 62.1875rem;
		margin-inline: auto;
		padding-inline: 0;
		padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
	}
	@media (width < 62.1875rem) {
		.radio-directory-page__inner { padding-inline: var(--space-m); }
	}
	.radio-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);
	}

	/* ---- Contenido de TV (radio_tv_* — acf-json/group_radio_directory.json), adentro de
	   .radio-parent__body del acordeón padre "TV". ---- */
	/* DIA DS/Body/Body Medium */
	.radio-tv__outro { margin-bottom: var(--space-m); }
	.radio-tv__outro p { margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 400; line-height: 32px; color: var(--dia-color-text-primary, #121212); }
	/* DIA DS/Body/Body Medium — 2 líneas: nombre (texto plano) + liga subrayada. */
	.radio-tv__intro { margin-bottom: 48px; }
	.radio-tv__intro p { margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 400; line-height: 32px; }
	.radio-tv__intro-label { color: var(--dia-color-text-primary, #121212); }
	.radio-tv__intro-link { color: var(--dia-color-brand-secondary, #3e8391); text-decoration: underline; }
	/* DIA DS/Heading News/H4 */
	.radio-tv__channels-title {
		margin: 0 0 var(--space-s);
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px; /* 133.333% */
		letter-spacing: -0.5px;
		color: var(--dia-color-text-primary, #121212);
	}
	.radio-tv__banner {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 8px;
		margin-bottom: var(--space-m);
	}
	.radio-tv__channels {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-m) var(--space-l);
		margin-bottom: var(--space-m);
	}
	@media (width < 40rem) {
		.radio-tv__channels { grid-template-columns: 1fr; }
	}
	/* DIA DS/Label/Tags */
	.radio-tv__channel-lang {
		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-primary, #121212);
	}
	.radio-tv__channel-name {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 18px;
		color: var(--dia-color-text-primary, #121212);
	}
	/* DIA DS/Body/Body Medium (link) — solo cuando el canal tiene URL, distinto del texto plano
	   (700/18px/color primario) de arriba. */
	.radio-tv__channel-name a {
		color: var(--dia-color-brand-secondary, #3e8391);
		font-weight: 600;
		font-size: 20px;
		line-height: 32px; /* 160% */
		text-decoration: none;
	}
	.radio-tv__channel-name a:hover { text-decoration: underline; }
	.radio-tv__channel-name svg { width: 16px; height: 16px; color: var(--dia-color-brand-secondary, #3e8391); }
	/* DIA DS/Label/Tags */
	.radio-tv__apps-label {
		margin: 0 0 12px;
		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-primary, #121212);
	}
	/* DIA DS/Heading News/H4 — mismo token que .radio-tv__channels-title/.radio-parent__title. */
	.radio-tv__affiliated-label {
		margin: 0 0 var(--space-s);
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px; /* 133.333% */
		letter-spacing: -0.5px;
		color: var(--dia-color-text-primary, #121212);
	}
	.radio-tv__apps { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-bottom: var(--space-m); }
	.radio-tv__app-btn, .radio-tv__cta {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		letter-spacing: .5px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
		text-decoration: none;
	}
	.radio-tv__app-btn svg, .radio-tv__cta svg { width: 16px; height: 16px; }
	/* Botones de app store — spec literal del Figma (nodo 5355:16204): caja con borde, 52px de
	   alto, ícono 24x24, 24px de padding a la izquierda, 8px de gap al label. */
	.radio-tv__app-btn {
		height: 52px;
		padding-inline: 24px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		border-radius: 4px;
	}
	.radio-tv__app-btn img { width: 24px; height: 24px; display: block; }
	.radio-tv__app-btn:hover {
		border-color: transparent;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}
	/* CTA "Ver más canales" — SIN caja/borde, solo texto + ícono (a diferencia de los botones de
	   app, spec literal del Figma). */
	.radio-tv__cta { margin-bottom: 48px; }
	.radio-tv__cta:hover { text-decoration: underline; }
	/* El ícono de Roku es un logotipo (ancho variable), no un glifo cuadrado como Apple/Google
	   Play — se limita por alto en vez de forzarlo a 24x24 (se vería aplastado). */
	.radio-tv__app-btn--roku svg { width: auto; height: 20px; }
	.radio-tv__affiliated {
		margin: 0;
		padding-left: 1.25em;
		color: var(--dia-color-text-primary, #121212);
	}
	.radio-tv__affiliated li { margin-bottom: var(--space-s); }
	.radio-tv__affiliated li::marker { color: var(--dia-color-brand-secondary, #3e8391); }
	/* DIA DS/Body/Body Medium (link) — mismo criterio que .radio-tv__channel-name a. */
	.radio-tv__affiliated a {
		color: var(--dia-color-brand-secondary, #3e8391);
		font-weight: 700;
		font-size: 20px;
		line-height: 32px; /* 160% */
		text-decoration: underline;
	}

	/* ---- Filas por región: borde compartido entre flat y expand, mismo look que .hosp-row.
	   Sin border-bottom en la última fila — .radio-row SIEMPRE va anidado dentro de
	   .radio-parent__body (ver docblock de page-radio-directory.php), que ya cierra con su propio
	   padding/borde de tarjeta; el border-bottom duplicado dejaba una línea colgando antes del
	   padding inferior (bug real reportado 2026-08-24). ---- */
	.radio-row { border-top: 1px solid #cdd6e1; }

	.radio-row__label { display: flex; align-items: center; gap: var(--space-s); min-width: 0; }
	.radio-row__region {
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
		line-height: 32px; /* 160% */
		color: var(--dia-color-text-primary, #121212);
	}

	/* ---- Fila-acordeón (todas las regiones) — mismo patrón que .hosp-row__* (gotcha reutilizable
	   §12.89 de docs-prd/gotchas.md antes de tocar). ---- */
	.radio-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;
	}
	.radio-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);
	}
	.radio-row__toggle > span { display: flex; align-items: center; justify-content: center; }
	.radio-row__toggle svg { width: 14px; height: 14px; display: block; }
	.radio-row__head:hover .radio-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 .hosp-row__body-wrap. */
	.radio-row__body-wrap {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .3s ease;
	}
	.radio-row__body-wrap--open { grid-template-rows: 1fr; }
	.radio-row__body-wrap--instant { transition: none; }
	.radio-row__body { min-height: 0; overflow: hidden; }
	.radio-row__body > *:last-child { margin-bottom: var(--space-l); }

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

	/* ---- Datos de una estación — mismo spec que .hosp-institution__*. ---- */
	.radio-station {
		break-inside: avoid;
		margin-bottom: var(--space-m);
	}
	.radio-station 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);
	}
	.radio-station .radio-station__name {
		margin: 0 0 var(--space-xs);
		font-weight: 700;
	}
	.radio-station p + p { margin-top: 2px; }
	.radio-station a { color: var(--dia-color-brand-secondary, #3e8391); text-decoration: underline; }
	.radio-station__contact-row {
		display: flex;
		align-items: baseline;
		gap: 4px;
	}
	.radio-station__link--truncate {
		min-width: 0;
		flex: 1 1 auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* ---- Acordeón padre (TV / Production Centers / Radio Stations) — foto+título+toggle, mismo
	   patrón grid-rows 0fr→1fr que .radio-row__body-wrap, pero con foto rectangular en el header y
	   SIN el estado exclusivo (los 3 se abren/cierran independientes entre sí). El padding lateral
	   va en __head/__body (no en la tarjeta) para que la línea divisoria del header quede a ancho
	   COMPLETO del contenedor (edge-to-edge), spec literal del Figma. ---- */
	.radio-parent {
		background: #fafbfb;
		border: 1px solid transparent; /* visible en hover/expandido, mismo criterio que .event-row (archive-event.css) */
		border-radius: 12px;
		margin-bottom: var(--space-l);
		overflow: hidden;
	}
	.radio-parent:hover,
	.radio-parent:has(.radio-parent__body-wrap--open) {
		border-color: #cdd6e1; /* DIA-DS-Primitive-blue-100, spec literal del Figma */
	}
	.radio-parent__head {
		display: flex; align-items: center; gap: 24px;
		width: 100%;
		padding: 24px;
		background: none;
		border: none;
		border-bottom: 1px solid #cdd6e1;
		text-align: left;
		cursor: pointer;
	}
	/* Sin acordeón abierto: sin línea divisoria (no hay body visible debajo que separar). */
	.radio-parent:has(.radio-parent__body-wrap:not(.radio-parent__body-wrap--open)) .radio-parent__head {
		border-bottom-color: transparent;
	}
	/* Título + toggle en una sola fila que ocupa el espacio restante junto a la foto — en vez de
	   agrupar foto+título (como antes), así en mobile alcanza con apilar .radio-parent__head en
	   columna para que la foto quede a ancho completo arriba y título+toggle en su propia fila
	   abajo, sin tocar más marcado (bug real reportado 2026-08-17: con poco ancho, un título largo
	   empujaba el toggle a una posición rara junto a una foto diminuta). */
	.radio-parent__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); flex: 1 1 auto; min-width: 0; }
	.radio-parent__photo {
		flex-shrink: 0;
		width: 128px; height: 80px;
		border-radius: 6px;
		object-fit: cover;
	}
	@media (width < 40rem) {
		.radio-parent__head { flex-direction: column; align-items: stretch; gap: var(--space-s); }
		.radio-parent__photo { width: 100%; height: auto; aspect-ratio: 128 / 80; }
		.radio-parent__label { width: 100%; }
	}
	/* DIA DS/Heading News/H4 */
	.radio-parent__title {
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px; /* 133.333% */
		letter-spacing: -0.5px;
		color: var(--dia-color-text-primary, #121212);
	}
	/* Tablet: intermedio entre el 18px/24px de mobile y el 24px/32px de escritorio. */
	@media (width < 48rem) {
		.radio-parent__title { font-size: 21px; line-height: 28px; }
	}
	@media (width < 40rem) {
		.radio-parent__title { font-size: 18px; line-height: 24px; }
	}
	.radio-parent__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);
	}
	.radio-parent__toggle > span { display: flex; align-items: center; justify-content: center; }
	.radio-parent__toggle svg { width: 14px; height: 14px; display: block; }
	.radio-parent__head:hover .radio-parent__toggle {
		border-color: transparent;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}
	.radio-parent__body-wrap {
		display: grid;
		/* minmax(0, 0fr), no un 0fr suelto: a diferencia de .radio-row__body-wrap (sin ancestro con
		   overflow:hidden), este wrapper vive dentro de .radio-parent (overflow:hidden +
		   border-radius) — anidado así, un 0fr suelto no siempre resuelve a una pista realmente 0px
		   en todos los navegadores (bug real reportado 2026-08-16: quedaba una franja del body
		   visible bajo la tarjeta con el acordeón cerrado). minmax(0, Xfr) fuerza el mínimo a 0
		   explícito en vez de depender del cálculo circular de "auto" del contenedor. */
		grid-template-rows: minmax(0, 0fr);
		transition: grid-template-rows .3s ease;
		overflow: hidden;
	}
	.radio-parent__body-wrap--open { grid-template-rows: minmax(0, 1fr); }
	.radio-parent__body { min-height: 0; overflow: hidden; padding-block: 32px; padding-inline: 24px; }
	.radio-parent__body > *:last-child { margin-bottom: 0; }
	.radio-parent__body > *:not(:last-child) { margin-bottom: 32px; }
	/* Más específico que la regla genérica de arriba (mismo problema, mismo motivo: el spec pide
	   12px acá, no los 32px que aplican al resto de los hijos directos). */
	.radio-parent__body > .radio-tv__apps-label:not(:last-child) { margin-bottom: 12px; }
	/* Ídem: título -> banner (logo HopeChannel/HopeRadio) pide 24px, no los 32px genéricos de
	   arriba -- aplica en todas las resoluciones, no solo mobile. */
	.radio-parent__body > .radio-tv__channels-title:not(:last-child) { margin-bottom: 24px; }
	/* Contenido inset 102px respecto al header (Figma: header a ancho completo del panel, el
	   "Section" interno a 790px dentro de un panel de 995px = 102.5px de cada lado) — solo en
	   escritorio, el header (.radio-parent__head) queda a ancho completo en ambos casos. */
	@media (width >= 48rem) {
		.radio-parent__body { padding-inline: 102px; }
	}

	/* ---- Avatares de persona (Personal / Coordinadores Regionales, radio_leadership/
	   radio_coordinators) — mismo gradiente+iniciales que .about-team__avatar (about-iad.css). ---- */
	.radio-people {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px 30px; /* row-gap column-gap */
	}
	@media (width < 40rem) {
		.radio-people { grid-template-columns: 1fr; }
	}
	.radio-person { display: flex; align-items: flex-start; gap: var(--space-s); }
	.radio-person__avatar {
		flex-shrink: 0;
		display: flex; align-items: center; justify-content: center;
		width: 56px; height: 56px;
		border-radius: 50%;
		overflow: hidden;
		background:
			linear-gradient(311deg, rgba(45, 84, 128, .70) 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-size: 20px;
		font-weight: 700;
		line-height: 20px; /* 100% */
		letter-spacing: 1px;
	}
	.radio-person__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.radio-person__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
	/* DIA DS/Label/Labels — mismo token que .about-team__name--sm/__role--sm (about-iad.css). */
	.radio-person__name {
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px; /* 153.846% */
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.radio-person__role {
		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);
	}

	/* ---- Listas de Production Centers (regionales/universidades) — región/universidad en negrita
	   + coordinador, sin viñeta propia (usa la de .radio-tv__affiliated para el bullet de "org"). ---- */
	.radio-production__org { margin-bottom: var(--space-m); }
	.radio-production__list {
		margin: 0;
		padding-left: 1.25em;
		color: var(--dia-color-text-primary, #121212);
	}
	.radio-production__list li { margin-bottom: 4px; }
	.radio-production__list a { color: var(--dia-color-brand-secondary, #3e8391); font-weight: 700; text-decoration: underline; }

	/* ---- Sección Radio Stations: logo AWR + bullets. ---- */
	.radio-stations__awr-logo { display: block; width: 174px; height: auto; margin-bottom: 24px; }
	.radio-stations__awr-bullets { margin-bottom: var(--space-m); }
	/* DIA DS/Body/Body Medium — a diferencia del resto de .radio-tv__affiliated (link teal +
	   bullet teal), acá el texto es plano y el bullet hereda el MISMO color que el texto, no el
	   de un link. */
	.radio-stations__awr-bullets li {
		font-family: var(--font-sans);
		font-size: 20px;
		font-weight: 400;
		line-height: 32px; /* 160% */
	}
	.radio-stations__awr-bullets li::marker { color: currentColor; }

	/* ---- Mobile: ningún texto de la sección queda más grande que .radio-parent__title (18px/
	   24px, ver arriba) — varios textos del cuerpo (Body Medium 20px, Heading H4 24px) se pasaban
	   del título de su propio acordeón padre en pantallas chicas. Un solo bloque consolidado en
	   vez de repartir el override junto a cada regla individual, para que la jerarquía completa se
	   vea de un vistazo. ---- */
	@media (width < 40rem) {
		.radio-tv__channels-title,
		.radio-tv__affiliated-label { font-size: 18px; line-height: 24px; }
		.radio-tv__intro p,
		.radio-tv__outro p,
		.radio-tv__channel-name a,
		.radio-tv__affiliated a,
		.radio-row__region,
		.radio-station p,
		.radio-stations__awr-bullets li { font-size: 18px; line-height: 28px; }
	}
}