/**
 * vexel/eclipse-texto-imagen
 *
 * Medidas del nodo 3918:8541 (hero de la home):
 *   sección 1440x568 · padding 120/168 · gap 128 · alineación centrada
 *   texto 432 · 56 entre bloque y botón · 24 entre titular y cuerpo
 *   titular Newsreader Medium 40/40 en #4E506B, con 8 entre líneas
 *   remate en cursiva #628F99 · cuerpo Kumbh Sans 16/24 en #4E506B
 *   imagen 544, estirada al alto del texto, radio 16
 *
 * Los anchos, el hueco y el padding llegan como custom properties desde
 * render.php, así el mismo bloque cubre las secciones con otras proporciones.
 */

.vexel-eclipse-texto-imagen {
	--vexel-ti-texto: 432px;
	--vexel-ti-imagen: 544px;
	--vexel-ti-imagen-alto: auto;
	--vexel-ti-gap: 128px;
	--vexel-ti-padding: 120px;
	--vexel-ti-padding-top: var(--vexel-ti-padding);
	--vexel-ti-padding-bottom: var(--vexel-ti-padding);
	--vexel-ti-cierre-gap: 40px;
	--vexel-ti-cta-ancho: auto;
	--vexel-ti-color-titular: var(--wp--preset--color--secondary);
	--vexel-ti-color-cursiva: var(--wp--preset--color--celeste-texto);
	--vexel-ti-color-texto: var(--wp--preset--color--secondary);

	padding-top: var(--vexel-ti-padding-top);
	padding-bottom: var(--vexel-ti-padding-bottom);
}

.vexel-eclipse-texto-imagen.is-bg-bg {
	background-color: var(--wp--preset--color--bg);
}

.vexel-eclipse-texto-imagen.is-bg-soft {
	background-color: var(--wp--preset--color--bg-soft);
}

.vexel-eclipse-texto-imagen.is-bg-cream {
	background-color: var(--wp--preset--color--bg-cream);
}

.vexel-eclipse-texto-imagen.is-bg-navy {
	background-color: var(--wp--preset--color--navy);
	--vexel-ti-color-titular: var(--wp--preset--color--bg);
	--vexel-ti-color-texto: var(--wp--preset--color--bg);
	--vexel-ti-color-cursiva: var(--wp--preset--color--accent);
}

.vexel-eclipse-texto-imagen.is-bg-none {
	background-color: transparent;
}

.vexel-eclipse-texto-imagen__inner {
	display: flex;
	align-items: center;
	gap: var(--vexel-ti-gap);
}

.vexel-eclipse-texto-imagen.is-image-left .vexel-eclipse-texto-imagen__media {
	order: -1;
}

/*
 * Alineación vertical de la columna de texto.
 *
 * Por defecto va centrada frente a la imagen, que es lo que hace la maqueta
 * casi siempre. En alguna sección ("Tratamiento del alcoholismo") el texto
 * arranca arriba: allí Figma le da a la columna el mismo alto que la foto y
 * deja el contenido pegado al borde superior.
 */
.vexel-eclipse-texto-imagen.is-texto-top .vexel-eclipse-texto-imagen__texto {
	align-self: flex-start;
}

.vexel-eclipse-texto-imagen.is-texto-bottom .vexel-eclipse-texto-imagen__texto {
	align-self: flex-end;
}

/* --------------------------------------------------------------- Columna de texto */
.vexel-eclipse-texto-imagen__texto {
	display: flex;
	flex-direction: column;
	gap: 56px;
	flex: 0 0 auto;
	width: var(--vexel-ti-texto);
	max-width: 100%;
}

.vexel-eclipse-texto-imagen__grupo {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/*
 * Antetítulo: Kumbh Sans 14/24 en #4E506B, sin versalitas ni espaciado de
 * letra. En la maqueta va escrito en mayúsculas a mano ("EL CENTRO DE DÍA"),
 * no transformado por CSS, así que el editor controla el texto tal cual.
 */
.vexel-eclipse-texto-imagen__kicker {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 24px;
	color: var(--vexel-ti-color-texto);
}

/*
 * Filete de 64x1. Igual que en la banda: en Figma es una línea de alto 0 con
 * trazo de 1, así que la caja va a 0 y el trazo lo pinta el pseudoelemento.
 */
.vexel-eclipse-texto-imagen__filete {
	position: relative;
	display: block;
	width: 64px;
	height: 0;
}

.vexel-eclipse-texto-imagen__filete::before {
	content: "";
	position: absolute;
	/* -1 y no -0.5: con media unidad, Chrome resuelve la línea a la fila
	   siguiente y Figma a la anterior, y el filete salía 1px más abajo. */
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--wp--preset--color--accent);
}

/*
 * Titular a dos tintas.
 *
 * En Figma cada línea es su propia caja de 40 con 8 de separación
 * (40+8+40+8+40 = 136 en el hero). Con un <br> y line-height el hueco caería
 * dentro de la caja y el alto total no cuadraría, así que render.php parte el
 * titular en <span> y aquí los separa el gap, que da la medida exacta.
 */
.vexel-eclipse-texto-imagen__heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--3-xl);
	font-weight: 500;
	line-height: 1;
	color: var(--vexel-ti-color-titular);
}

.vexel-eclipse-texto-imagen__heading-line {
	display: block;
}

.vexel-eclipse-texto-imagen__heading em,
.vexel-eclipse-texto-imagen__heading i {
	font-style: italic;
	font-weight: inherit;
	color: var(--vexel-ti-color-cursiva);
}

.vexel-eclipse-texto-imagen__cuerpo {
	font-size: var(--wp--preset--font-size--md);
	line-height: 24px;
	color: var(--vexel-ti-color-texto);
}

.vexel-eclipse-texto-imagen__cuerpo p {
	margin: 0;
}

/* Entre párrafos la maqueta deja 16, no los 24 del resto de huecos. */
.vexel-eclipse-texto-imagen__cuerpo p + p {
	margin-top: 16px;
}

.vexel-eclipse-texto-imagen__cuerpo strong {
	font-weight: 700;
}

/*
 * Listas del cuerpo.
 *
 * Las páginas de cada adicción alternan párrafos y listas de signos o de fases
 * del tratamiento. Mismo interlineado de 24 que el texto corrido, para que la
 * columna siga cuadrando en múltiplos de 24 como en la maqueta.
 */
.vexel-eclipse-texto-imagen__cuerpo ul,
.vexel-eclipse-texto-imagen__cuerpo ol {
	margin: 16px 0 0;
	/* 24 exactos: en la maqueta el texto de los ítems arranca 24 a la derecha
	   del margen del párrafo. */
	padding-left: 24px;
}

.vexel-eclipse-texto-imagen__cuerpo ul:first-child,
.vexel-eclipse-texto-imagen__cuerpo ol:first-child {
	margin-top: 0;
}

.vexel-eclipse-texto-imagen__cuerpo li {
	margin: 0;
	line-height: 24px;
}

/* Topo pequeño y en celeste, como el de la maqueta: el punto a tamaño completo
   y en el color del texto pesaba demasiado al lado de un cuerpo de 16. */
.vexel-eclipse-texto-imagen__cuerpo li::marker {
	color: var(--wp--preset--color--celeste-texto);
	font-size: 0.75em;
}

.vexel-eclipse-texto-imagen__cuerpo p + ul,
.vexel-eclipse-texto-imagen__cuerpo ul + p {
	margin-top: 16px;
}

/*
 * Remate en cursiva.
 *
 * Es una frase suelta bajo el cuerpo, en Newsreader itálica 32/40. No forma
 * parte del texto porque tiene su propio tamaño y su propio hueco: en la
 * maqueta el grupo lo separa 40 del bloque anterior, no los 24 del resto.
 */
.vexel-eclipse-texto-imagen__cierre {
	margin: 0;
	margin-top: calc(var(--vexel-ti-cierre-gap) - 24px);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--2-xl);
	font-style: italic;
	font-weight: 500;
	line-height: 40px;
	color: var(--vexel-ti-color-titular);
}

.vexel-eclipse-texto-imagen__cta-wrap {
	margin: 0;
}

/*
 * Botón: 40 de alto exactos (8 + 24 + 8), como el vxl-Button de la maqueta.
 * El interlineado se declara aquí porque el que trae theme.json para
 * elements.button no llega hasta este enlace y el botón salía a 34.
 */
.vexel-eclipse-texto-imagen__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--vexel-ti-cta-ancho);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 24px;
}

/* --------------------------------------------------------------------- Imagen */
/*
 * La imagen se estira al alto de la columna de texto (self-stretch en Figma),
 * de ahí que no lleve alto propio: son los 328 del hero —y los 368 de centro
 * de día— los que salen del texto, no al revés.
 *
 * Va posicionada y fuera del flujo, y es deliberado.
 *
 * Con la imagen dentro del flujo y `height: 100%`, el alto depende del
 * contenedor y el del contenedor de la imagen: una dependencia circular que
 * los navegadores resuelven de formas distintas. Chrome acababa usando la
 * proporción intrínseca (544 x 1066/1600 = 362) y estiraba la sección 34px de
 * más. Sacándola del flujo, el alto de la fila lo fija solo la columna de
 * texto —los 328 de la maqueta— y la imagen rellena ese hueco.
 */
/*
 * Con alto propio, la imagen deja de estirarse al texto y pasa a mandar ella.
 *
 * En las páginas de cada adicción la maqueta fija el alto de la foto (506, 448,
 * 368) y es esa medida la que da la altura de la sección, con el texto centrado
 * al lado. Sin esto la sección se quedaba corta, tanto como texto más bajo que
 * la foto hubiera.
 */
.vexel-eclipse-texto-imagen.has-image-height .vexel-eclipse-texto-imagen__media {
	align-self: center;
	height: var(--vexel-ti-imagen-alto);
}

.vexel-eclipse-texto-imagen__media {
	position: relative;
	align-self: stretch;
	flex: 0 0 auto;
	width: var(--vexel-ti-imagen);
	max-width: 100%;
}

.vexel-eclipse-texto-imagen__imagen {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}

/* ------------------------------------------------------------------ Intermedio
 *
 * Entre 1024 y 1440 se mantienen las dos columnas, pero ni el hueco ni la
 * imagen pueden seguir siendo fijos: 432 + 128 + 544 son justo los 1104 de la
 * maqueta y a 1200 ya no caben. El hueco encoge con la pantalla (128 es el
 * 8.889% de 1440) y la imagen pasa a poder comprimirse.
 * ---------------------------------------------------------------------- */
@media (max-width: 1439px) {
	.vexel-eclipse-texto-imagen__inner {
		gap: var(--vexel-ti-gap-pc, 11.5942%);
	}

	.vexel-eclipse-texto-imagen__texto {
		width: var(--vexel-ti-texto-pc, 39.1304%);
		min-width: 0;
	}

	.vexel-eclipse-texto-imagen__media {
		width: var(--vexel-ti-imagen-pc, 49.2754%);
		min-width: 0;
	}
}

/* --------------------------------------------------------------------- Móvil */
/*
 * No hay pantalla de móvil en la maqueta: por debajo de 1024px las columnas se
 * apilan con la imagen debajo del texto y se le da una proporción fija, porque
 * ya no hay columna hermana de la que tomar el alto. Adaptación propia.
 */
@media (max-width: 1023px) {
	.vexel-eclipse-texto-imagen {
		padding-top: clamp(3.5rem, 8.333vw, var(--vexel-ti-padding-top));
		padding-bottom: clamp(3.5rem, 8.333vw, var(--vexel-ti-padding-bottom));
	}

	.vexel-eclipse-texto-imagen__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--50);
	}

	.vexel-eclipse-texto-imagen__texto,
	.vexel-eclipse-texto-imagen__media {
		width: 100%;
	}

	.vexel-eclipse-texto-imagen__texto {
		gap: var(--wp--preset--spacing--40);
	}

	.vexel-eclipse-texto-imagen__heading {
		line-height: 1.25;
	}

	/* Apilada ya no hay columna hermana de la que tomar el alto, así que la
	   proporción de la maqueta la marca el contenedor. */
	.vexel-eclipse-texto-imagen__media {
		align-self: auto;
		aspect-ratio: 544 / 328;
	}
}