/**
 * Caracool Churra — la línea de la historia.
 *
 * El bloque se monta en Elementor con cuatro clases y nada más:
 *
 *   Contenedor  .ch-linea          el bloque entero (encajonado)
 *     Contenedor  .ch-hito         un año (se repite; a ancho completo)
 *       Contenedor  .ch-hito__texto   el año, el título y el texto
 *         Encabezado .ch-hito__anio   el año, para que el aro sepa su altura
 *       Contenedor  .ch-hito__foto    la imagen
 *
 * La raya, la bola y el cursor los mete el script: no hay que dibujar nada
 * en Elementor. El script también reparte los lados (un año a la izquierda,
 * el siguiente a la derecha) poniendo `ch-hito--der` en los pares, y escribe
 * en cada hito dónde va su aro (`--aro-x`, `--aro-y`, en píxeles medidos en
 * vivo), así que los rellenos del contenedor se pueden cambiar sin que nada
 * se descoloque.
 *
 * Los colores y las letras salen del Kit de Elementor. Lo único que este CSS
 * fija de tipografía es el tamaño del año, porque el Kit no da tamaño a la
 * tipografía primaria.
 *
 * Sin el script la página se ve entera y quieta: las variables valen 1 de
 * fábrica y la raya sale completa.
 */

.ch-linea {
	position: relative;
	--ch-calle: 120px;        /* el hueco del centro, por donde baja la raya */
	--ch-anio: clamp(40px, 4.6vw, 68px);
	--ch-desenfoque: 12px;    /* cuánto entra desenfocado el texto */
	--ch-entrada: 64px;       /* de cuánto viene la foto desde su lado */
	/* las fotos entran desde fuera: que no saquen barra horizontal */
	overflow-x: clip;
}

/* ── La raya y lo ya recorrido ────────────────────────────────────────── */
.ch-linea__raya {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 0;
	background: var(--e-global-color-borde, #E3D8C6);
	pointer-events: none;
}
.ch-linea__hecho {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--e-global-color-secondary, #241610);
}
.ch-linea:not(.ch-linea--js) .ch-linea__raya,
.ch-linea:not(.ch-linea--js) .ch-linea__hecho { height: 100%; }

/* ── Cada año ─────────────────────────────────────────────────────────── */
/* `--display` es como Elementor decide el display del contenedor, así que
   se pasa a rejilla por ahí, sin !important. La clase va repetida a
   propósito: Elementor escribe ese mismo valor en una regla propia de cada
   elemento, con tres clases (`.elementor-21 .elementor-element
   .elementor-element-xxxx`), y sin repetirla gana la suya y el contenedor
   se queda en flex. Lo mismo con los rellenos, que también van por
   variables suyas. */
.ch-linea .ch-hito {
	position: relative;
	grid-template-columns: 1fr var(--ch-calle) 1fr;
	align-items: start;
}
.ch-linea .ch-hito.ch-hito.ch-hito { --display: grid; }
.ch-linea .ch-hito > .ch-hito__texto { grid-column: 1; text-align: right; }
.ch-linea .ch-hito > .ch-hito__foto  { grid-column: 3; }
.ch-linea .ch-hito--der > .ch-hito__texto { grid-column: 3; text-align: left; }
.ch-linea .ch-hito--der > .ch-hito__foto  { grid-column: 1; }
/* Los dos van en la misma fila a la fuerza: en los años invertidos la foto
   pide la columna 1 después de que el texto haya ocupado la 3, y la
   colocación automática de la rejilla se la lleva a una fila nueva. */
.ch-linea .ch-hito > .ch-hito__texto,
.ch-linea .ch-hito > .ch-hito__foto { grid-row: 1; }

/* El texto no debe hacerse infinito: en la columna cabe una medida de
   lectura, y en el lado izquierdo se pega a la raya. */
.ch-linea .ch-hito__texto .elementor-widget-container { max-width: 42ch; }
.ch-linea .ch-hito:not(.ch-hito--der) .ch-hito__texto .elementor-widget-container { margin-left: auto; }

/* El aro del año: solo borde, con el interior en crema tapando la raya, y
   clavado a la altura del número. Crece por width/height, nunca por scale:
   un borde de 1 px escalado se emborrona. */
.ch-linea .ch-hito::before {
	content: "";
	position: absolute;
	left: var(--aro-x, 50%);
	top: var(--aro-y, 50%);
	width: var(--tam, 9px);
	height: var(--tam, 9px);
	border-radius: 50%;
	border: 1px solid var(--e-global-color-secondary, #241610);
	background: var(--e-global-color-cremaclara, #FAF5EC);
	transform: translate(-50%, -50%);
	opacity: calc(.35 + .65 * var(--t, 1));
	pointer-events: none;
	z-index: 1;
}

/* Las fotos de la mediateca vienen en formatos distintos —unas apaisadas y
   otras verticales— y la tira se lee mucho mejor si todas guardan la misma
   proporción: se recortan desde el centro. Se cambia con `--ch-foto`. */
.ch-linea .ch-hito__foto img {
	display: block;
	width: 100%;
	aspect-ratio: var(--ch-foto, 4 / 3);
	object-fit: cover;
}

/* El año. Lo único de tipografía que pone el plugin: el Kit no le da tamaño
   a la primaria, y el widget de Encabezado escribe su propia regla con
   cuatro clases, así que esta lleva cinco. */
.ch-linea .ch-hito .ch-hito__texto .ch-hito__anio .elementor-heading-title {
	font-size: var(--ch-anio);
	line-height: 1;
}

/* Lo que mueve el script: el texto enfoca, la foto llega de su lado */
.ch-linea .ch-hito__texto {
	opacity: var(--t, 1);
	filter: blur(calc((1 - var(--t, 1)) * var(--ch-desenfoque)));
	transform: translateY(calc((1 - var(--t, 1)) * 16px));
}
.ch-linea .ch-hito__foto {
	opacity: var(--tf, 1);
	transform: translateX(calc((1 - var(--tf, 1)) * var(--ch-entrada) * var(--dir, -1)));
}
.ch-linea .ch-hito--der { --dir: 1; }

/* ── La bola que dibuja la raya ───────────────────────────────────────── */
.ch-bola {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 6;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--e-global-color-secondary, #241610);
	border: 1px solid var(--e-global-color-secondary, #241610);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity .35s ease;
}

/* ── El cursor de la línea ────────────────────────────────────────────────
 * Dentro del bloque, el puntero del sistema se esconde y en su sitio va un
 * aro. Al acercarse a la raya, el aro se deja llevar: primero se pega al eje
 * y después, si está a la altura de la bola, se funde con ella: encoge hasta
 * su tamaño y se rellena, así que los dos son ya un punto.
 *
 * La clase `ch-linea--cursor` la pone el script solo cuando quien entra es
 * un ratón de verdad (lo dice `pointerType`, no la media query
 * `(hover:hover)`, que hay navegadores que contestan mal).
 */
.ch-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 7;
	width: var(--cur, 20px);
	height: var(--cur, 20px);
	border-radius: 50%;
	border: 1px solid var(--e-global-color-secondary, #241610);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity .25s ease;
}
.ch-cursor__punto {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--e-global-color-secondary, #241610);
	opacity: var(--f, 0);
}
.ch-linea--cursor { cursor: none; }

/* ── Móvil: la raya al margen, todo en una columna ────────────────────── */
@media (max-width: 767px) {
	.ch-linea { --ch-entrada: 32px; }
	.ch-linea__raya { left: 4px; }
	.ch-linea .ch-hito.ch-hito.ch-hito {
		--display: flex;
		--flex-direction: column;
		--padding-left: 36px;
	}
	.ch-linea .ch-hito > .ch-hito__texto,
	.ch-linea .ch-hito--der > .ch-hito__texto { text-align: left; }
	.ch-linea .ch-hito__texto .elementor-widget-container { max-width: none; }
	.ch-linea .ch-hito:not(.ch-hito--der) .ch-hito__texto .elementor-widget-container { margin-left: 0; }
	.ch-linea .ch-hito { --dir: 1; }
}

/* Con movimiento reducido no hay nada que revelar: la raya sale hecha, los
   textos nítidos y no hay bola ni cursor. */
@media (prefers-reduced-motion: reduce) {
	.ch-bola, .ch-cursor { display: none; }
	.ch-linea .ch-hito__texto { filter: none; }
	.ch-linea--cursor { cursor: auto; }
}