/**
 * Widget «Cronologia» de Munné Elements.
 *
 * Tot el que és configurable passa per una propietat personalitzada, així els
 * controls d'Elementor només han d'escriure variables sobre .mun-timeline.
 * Les media queries d'apilament es generen en PHP a partir dels punts de
 * ruptura reals del lloc (vegeu MUN\Plugin::get_stacking_css).
 */

.mun-timeline {
	--mun-tl-rail: 96px;
	--mun-tl-gap: 56px;
	--mun-tl-field-gap: 8px;

	--mun-tl-line-x: 50%;
	--mun-tl-line-width: 4px;
	--mun-tl-line-color: currentColor;
	--mun-tl-line-style: solid;
	--mun-tl-line-start: 0px;
	--mun-tl-line-end: 0px;

	--mun-tl-marker-size: 22px;
	--mun-tl-marker-color: currentColor;
	--mun-tl-marker-radius: 50%;
	--mun-tl-marker-offset: 0px;

	--mun-tl-ratio: auto;
	--mun-tl-fit: cover;
	--mun-tl-fit-pos: center center;
	--mun-tl-media-w: 100%;

	--mun-tl-duration: 700ms;
	--mun-tl-distance: 40px;
	--mun-tl-easing: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
}

/* Línia central. Es dibuixa amb border-left perquè així «discontínua» i
   «puntejada» funcionen igual que «contínua». */
.mun-timeline__line {
	position: absolute;
	top: var(--mun-tl-line-start);
	bottom: var(--mun-tl-line-end);
	left: var(--mun-tl-line-x);
	width: 0;
	border-left: var(--mun-tl-line-width) var(--mun-tl-line-style) var(--mun-tl-line-color);
	transform: translateX(-50%);
	pointer-events: none;
}

/* La columna i els ítems han de poder encongir per sota del seu min-content:
   si no, la mida intrínseca de les imatges infla la graella i desborda el
   contenidor en pantalles estretes. */
.mun-timeline__items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--mun-tl-gap);
}

.mun-timeline__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mun-tl-rail) minmax(0, 1fr);
	align-items: start;
	min-width: 0;
}

.mun-timeline__marker {
	grid-row: 1;
	grid-column: 2;
	justify-self: center;
	box-sizing: border-box;
	width: var(--mun-tl-marker-size);
	height: var(--mun-tl-marker-size);
	margin-top: var(--mun-tl-marker-offset);
	border-radius: var(--mun-tl-marker-radius);
	background-color: var(--mun-tl-marker-color);
}

.mun-timeline__content {
	grid-row: 1;
	min-width: 0;
}

/* Sense alineació explícita, cada costat s'alinea cap a la línia. */
.mun-timeline__item--left .mun-timeline__content {
	grid-column: 1;
	text-align: var(--mun-tl-align, end);
}

.mun-timeline__item--right .mun-timeline__content {
	grid-column: 3;
	text-align: var(--mun-tl-align, start);
}

/* Separació uniforme entre camps, prou feble perquè els controls de marge
   d'Elementor la puguin sobreescriure. */
.mun-timeline__content > * {
	margin-block: 0;
}

.mun-timeline__content > * + * {
	margin-top: var(--mun-tl-field-gap);
}

/* La imatge és inline-block per heretar l'alineació del text quan no ocupa
   tota l'amplada de la columna. */
.mun-timeline__media {
	display: inline-block;
	box-sizing: border-box;
	width: var(--mun-tl-media-w);
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	line-height: 0;
}

.mun-timeline__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: var(--mun-tl-ratio);
	object-fit: var(--mun-tl-fit);
	object-position: var(--mun-tl-fit-pos);
}

/* ---------------------------------------------------------------------------
 * Animació d'entrada
 *
 * L'estat inicial només s'aplica quan el JS ha afegit .mun-timeline--ready: si
 * el script falla o no arriba, el contingut es veu igualment.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.mun-timeline--animated.mun-timeline--ready .mun-timeline__item {
		opacity: 0;
		transition:
			opacity var(--mun-tl-duration) var(--mun-tl-easing),
			transform var(--mun-tl-duration) var(--mun-tl-easing);
		transition-delay: var(--mun-tl-delay, 0ms);
		will-change: opacity, transform;
	}

	.mun-timeline--ready[data-animation="auto"] .mun-timeline__item--left {
		transform: translateX(calc(-1 * var(--mun-tl-distance)));
	}

	.mun-timeline--ready[data-animation="auto"] .mun-timeline__item--right {
		transform: translateX(var(--mun-tl-distance));
	}

	.mun-timeline--ready[data-animation="fade-up"] .mun-timeline__item {
		transform: translateY(var(--mun-tl-distance));
	}

	.mun-timeline--ready[data-animation="fade-down"] .mun-timeline__item {
		transform: translateY(calc(-1 * var(--mun-tl-distance)));
	}

	.mun-timeline--ready[data-animation="fade-left"] .mun-timeline__item {
		transform: translateX(calc(-1 * var(--mun-tl-distance)));
	}

	.mun-timeline--ready[data-animation="fade-right"] .mun-timeline__item {
		transform: translateX(var(--mun-tl-distance));
	}

	.mun-timeline--ready[data-animation="zoom-in"] .mun-timeline__item {
		transform: scale(0.92);
	}

	/* Ha de guanyar totes les regles de transform anteriors. */
	.mun-timeline--animated.mun-timeline--ready .mun-timeline__item.is-visible {
		opacity: 1;
		transform: none;
	}
}