/*
 * Bluumi — Detalle de Caso de Éxito.
 *
 * Portado del diseño de detalle (misma estética de filas alternadas que
 * "Somos + Hacemos"). Todo está scopeado bajo `.bluumi-caso-single`, el wrapper
 * de la plantilla single-caso_exito, para no filtrar nada al resto del sitio.
 *
 * Se carga SOLO en is_singular('caso_exito') desde functions.php. Los colores y
 * la tipografía se apoyan en los presets de theme.json / las variables del tema
 * (`--bluumi-*`), igual que style.css y somos-hacemos-plus.css.
 */

/* ---------------------------------------------------------------------------
 * Wrapper y sistema de tipografía fluida
 * ------------------------------------------------------------------------ */

.bluumi-caso-single {
	--caso-negro: var(--bluumi-negro);
	--caso-verde: var(--bluumi-verde);
	--caso-white: var(--bluumi-white);
	--caso-margin-sm: 16px;
	--caso-margin-md: 32px;

	/* Rango del sistema de interpolación del diseño (global.css). */
	--caso-min-screen-size: 430;
	--caso-max-screen-size: 1920;

	position: relative;
	width: 100%;
	background-color: var(--caso-negro);
	color: var(--caso-white);
	font-family: 'Inter', sans-serif;
	letter-spacing: 0;
	overflow: hidden; /* recorta los glows y las imágenes que bleedean */
}

/*
 * Interpolación fluida idéntica al sistema de somos-hacemos-plus. Las variables
 * --caso-min/max-font-size las fija cada utilidad; por eso el cálculo se declara
 * en cada elemento (`*`) y no solo en el wrapper: var() se resuelve donde se usa.
 */
.bluumi-caso-single * {
	--caso-interpolate-diff: calc(var(--caso-max-font-size) - var(--caso-min-font-size));
	--caso-interpolate: clamp(
		calc(var(--caso-min-font-size) * 1px),
		calc(
			(var(--caso-min-font-size) * 1px) +
			var(--caso-interpolate-diff) *
			((100vw - calc(var(--caso-min-screen-size) * 1px)) / (var(--caso-max-screen-size) - var(--caso-min-screen-size)))
		),
		calc(var(--caso-max-font-size) * 1px)
	);
}

/* WP aplica blockGap como margin-block-start; el ritmo vertical lo marca el gap. */
.bluumi-caso-single :where(h1, h2, h3, p, figure, .wp-block-image, .wp-block-group) {
	margin-block-start: 0;
}

.bluumi-caso-single :where(.bluumi-caso-intro-text, .bluumi-caso-row-text, .bluumi-caso-conclusion-text) p {
	margin: 0 0 1.2em;
}

.bluumi-caso-single :where(.bluumi-caso-intro-text, .bluumi-caso-row-text, .bluumi-caso-conclusion-text) p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------------
 * El hero es el MISMO bloque Portada que usan /somos/, /soluciones/,
 * /casos-de-exito/ y /equipo/ (`.bluumi-hero-cover`): alto del token del sitio,
 * contenido centrado, el gutter del hero y el fade a negro. Toda la geometría
 * vive en style.css junto a ese componente; acá queda solo lo propio del caso.
 * Antes había un hero propio con su `padding-top`, su gutter y su escalera de
 * tamaños, y por eso el título no caía a la misma altura (ni a la misma
 * distancia del borde) que en el resto de las páginas.
 * ------------------------------------------------------------------------ */

/* Sin imagen de fondo, un glow verde a la derecha da el aire del diseño. Con
   imagen el glow se apaga: ensuciaría la foto. */
.bluumi-hero-cover.bluumi-caso-hero--no-image::before {
	content: "";
	position: absolute;
	top: -80px;
	right: -120px;
	width: 720px;
	height: 720px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(4, 255, 217, 0.22) 0%, rgba(4, 255, 217, 0.08) 42%, rgba(4, 255, 217, 0) 72%);
	filter: blur(30px);
	pointer-events: none;
	z-index: 0;
}

/* ---------------------------------------------------------------------------
 * Intro
 * ------------------------------------------------------------------------ */

.bluumi-caso-intro {
	display: flex;
	flex-direction: column;
	/* gap: 44px; */
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding: clamp(48px, 7vw, 96px) clamp(24px, 3vw, 48px);
}

.bluumi-caso-intro-title {
	--caso-min-font-size: 22;
	--caso-max-font-size: 48;
	color: var(--caso-white);
	font-family: 'Public Sans', sans-serif;
	font-size: var(--caso-interpolate);
	font-weight: 300;
	line-height: 1.229;
}

.bluumi-caso-intro-text {
	--caso-min-font-size: 15;
	--caso-max-font-size: 18;
	color: var(--caso-white);
	font-size: var(--caso-interpolate);
	font-weight: 400;
	line-height: 2;
}

/* ---------------------------------------------------------------------------
 * Bloques alternados (texto / imagen)
 * ------------------------------------------------------------------------ */

.bluumi-caso-detalle {
	container: caso / inline-size;
	width: 100%;
}

.bluumi-caso-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end; /* fila texto-izq: la imagen toca el borde derecho */
	gap: 102px;
	width: 100%;
	background-color: var(--caso-negro);
	overflow: hidden;
}

/* Fila espejo: imagen-izq / texto-der. */
.bluumi-caso-row--text-right {
	justify-content: flex-start;
}

/* En pantallas > 1920 el canvas se centra, igual que en el resto del sitio. */
@media (min-width: 1920px) {
	.bluumi-caso-row {
		padding-inline: calc((100vw - var(--bluumi-design-width, 1920px)) / 2);
	}
}

.bluumi-caso-row-col {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 52px;
	width: 691px;
	max-width: 691px;
	flex-shrink: 0;
}

/* Glow verde detrás del texto en las filas con texto a la izquierda. */
.bluumi-caso-row--text-left .bluumi-caso-row-col::before {
	content: "";
	position: absolute;
	z-index: -2;
	top: -180px;
	left: -280px;
	width: 800px;
	height: 800px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(4, 255, 217, 0.28) 0%, rgba(4, 255, 217, 0.1) 42%, rgba(4, 255, 217, 0) 72%);
	filter: blur(30px);
	pointer-events: none;
}

.bluumi-caso-row-head {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.bluumi-caso-row-label {
	color: var(--caso-white);
	font-size: 32px;
	font-family: 'Public Sans', sans-serif;
	font-weight: 500;
	line-height: 1.469;
}

.bluumi-caso-row-subtitle {
	--caso-min-font-size: 22;
	--caso-max-font-size: 48;
	color: var(--caso-white);
	font-family: 'Public Sans', sans-serif;
	font-size: var(--caso-interpolate);
	font-weight: 300;
	line-height: 1.229;
}

.bluumi-caso-row-text {
	--caso-min-font-size: 15;
	--caso-max-font-size: 18;
	color: var(--caso-white);
	font-size: var(--caso-interpolate);
	font-weight: 400;
	line-height: 2;
}

/* La imagen ocupa media fila (960px en el canvas de 1920). Con un ancho fijo de
   960px, entre 1752 y 1919px las imágenes de dos filas seguidas (una pegada a
   la derecha, la siguiente a la izquierda) se solapaban en vertical en vez de
   encontrarse en el centro. Por encima de 1920 el % es del canvas centrado. */
.bluumi-caso-row-image {
	width: 50%;
	max-width: none;
	flex-shrink: 0;
	margin: 0;
	line-height: 0;
}

.bluumi-caso-row-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Conclusión
 * ------------------------------------------------------------------------ */

.bluumi-caso-conclusion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	width: 100%;
	max-width: 1000px;
	margin-inline: auto;
	padding: clamp(64px, 8vw, 130px) clamp(24px, 3vw, 48px);
	text-align: center;
}

.bluumi-caso-conclusion-label {
	color: var(--caso-white);
	font-family: 'Public Sans', sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.469;
}

.bluumi-caso-conclusion-text {
	--caso-min-font-size: 20;
	--caso-max-font-size: 32;
	color: var(--caso-white);
	font-family: 'Public Sans', sans-serif;
	font-size: var(--caso-interpolate);
	font-weight: 300;
	line-height: 1.469;
}

/* ---------------------------------------------------------------------------
 * Apilado de las filas (container query del detalle)
 * ------------------------------------------------------------------------ */

@container caso (width < 1752px) {
	.bluumi-caso-row {
		flex-direction: column;
		align-items: center;
		gap: 60px;
		padding: 48px 24px;
	}

	.bluumi-caso-row > * {
		text-align: center;
	}

	.bluumi-caso-row-col {
		width: 100%;
		max-width: 691px;
	}

	.bluumi-caso-row-col > * {
		text-align: left;
	}

	.bluumi-caso-row-image {
		width: 100%;
		max-width: 960px;
	}

	/* En apilado mantenemos el ritmo texto → imagen → texto → imagen: en las
	   filas con texto a la derecha, el texto sube antes que su propia imagen. */
	.bluumi-caso-row--text-right .bluumi-caso-row-col {
		order: -1;
	}

	.bluumi-caso-row--text-left .bluumi-caso-row-col::before {
		top: -220px;
		left: 50%;
		transform: translateX(-50%);
	}
}