/**
 * aesthetiflow — Ablauf / Timeline
 *
 * Desktop: centred rail, cards alternating left/right.
 * Below the chosen breakpoint: rail on the left, all cards on the right.
 */

/* ---------------------------------------------------------------- tokens
 * Three-step cascade, so every value can be steered at the level you want:
 *
 *   1. per instance  — the Bricks controls write onto #brxe-<id> (most specific)
 *   2. site-wide     — define --aef-tl-global-* once on :root
 *                      (Bricks > Theme Styles > Custom CSS, or a global variable)
 *   3. fallback      — the ACSS token, then a literal
 *
 * Because the globals are read here via var(), a :root definition always beats
 * the default regardless of stylesheet load order.
 */

.brxe-aef-timeline {
	/* Layout */
	--aef-tl-rail: var(--aef-tl-global-rail, 2rem);
	--aef-tl-gap: var(--aef-tl-global-gap, var(--space-s, 1.5rem));
	--aef-tl-card-gap: var(--aef-tl-global-card-gap, clamp(1.5rem, 3vw, 3rem));
	--aef-tl-card-gap-stacked: var(--aef-tl-global-card-gap-stacked, var(--space-s, 1.5rem));
	--aef-tl-card-max: none;
	--aef-tl-card-ratio: auto;
	--aef-tl-card-justify: flex-start;

	/* Line */
	--aef-tl-line-w: var(--aef-tl-global-line-w, 2px);
	/* Deliberately derived from the palette token, NOT from --aef-tl-dot-color:
	   line and dot must be settable independently of one another. */
	--aef-tl-line-color: var(--aef-tl-global-line-color, color-mix(in srgb, var(--primary, #6320ee) 35%, var(--white, #fff)));
	--aef-tl-line-inset: 0px;

	/* Dot */
	--aef-tl-dot-size: var(--aef-tl-global-dot-size, 16px);
	--aef-tl-dot-color: var(--aef-tl-global-dot-color, var(--primary, #6320ee));
	--aef-tl-dot-offset: 0px;
	--aef-tl-dot-ring: var(--aef-tl-global-dot-ring, 0px);
	--aef-tl-dot-ring-color: var(--aef-tl-global-dot-ring-color, var(--white, #fff));

	/* Card */
	--aef-tl-card-bg: var(--aef-tl-global-card-bg, var(--white, #fff));
	--aef-tl-card-radius: var(--aef-tl-global-card-radius, 16px);
	--aef-tl-card-pad: var(--aef-tl-global-card-pad, var(--space-m, 2rem));
	--aef-tl-card-shadow: var(--aef-tl-global-card-shadow,
		0 32px 48px #08080805,
		0 16px 20px #08080808,
		0 6px 8px #0808080a,
		0 1px 3px #0808080f);

	/* Type — sizes, colours and weights, each globally overridable */
	--aef-tl-num-size: var(--aef-tl-global-num-size, var(--text-xl, 2rem));
	--aef-tl-num-color: var(--aef-tl-global-num-color, var(--primary, #6320ee));
	--aef-tl-num-weight: var(--aef-tl-global-num-weight, 800);
	--aef-tl-num-width: var(--aef-tl-global-num-width, fit-content);
	--aef-tl-num-gap: var(--aef-tl-global-num-gap, 0px);

	--aef-tl-title-size: var(--aef-tl-global-title-size, var(--text-m, 1.125rem));
	--aef-tl-title-color: var(--aef-tl-global-title-color, var(--text-dark, inherit));
	--aef-tl-title-weight: var(--aef-tl-global-title-weight, 700);

	--aef-tl-desc-size: var(--aef-tl-global-desc-size, inherit);
	--aef-tl-desc-color: var(--aef-tl-global-desc-color, var(--text-dark-muted, #4b4b4b));
}

.aef-tl__track {
	position: relative;
}

/* ------------------------------------------------------------------- rail */

.aef-tl__line {
	position: absolute;
	inset-block: var(--aef-tl-line-inset);
	left: 50%;
	transform: translateX(-50%);
	width: var(--aef-tl-line-w);
	background: var(--aef-tl-line-color);
	border-radius: 999px;
	pointer-events: none;
}

/* Filled portion, only used by the GSAP "draw" animation. */
.aef-tl__line-fill {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--aef-tl-dot-color);
	border-radius: inherit;
	transform: scaleY(0);
	transform-origin: top center;
	opacity: 0;
}

.aef-tl[data-animation="gsap-draw"][data-anim-engine="gsap"] .aef-tl__line-fill {
	opacity: 1;
}

/* ------------------------------------------------------------------ items */

.aef-tl__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--aef-tl-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card and dot must share one row. Without an explicit row, sparse grid
   auto-placement pushes the dot onto a second row whenever its column comes
   before the card's — i.e. every right-hand card, and all of them once
   stacked. */
.aef-tl__item > .aef-tl__card,
.aef-tl__item > .aef-tl__dot {
	grid-row: 1;
}

.aef-tl__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--aef-tl-rail) minmax(0, 1fr);
	/* Gap rather than card margins: grid shrinks the columns to fit, so a
	   width:100% card can never overflow its track. */
	column-gap: var(--aef-tl-card-gap);
	align-items: stretch;
}

.aef-tl__item[data-side="left"] > .aef-tl__card {
	grid-column: 1;
	justify-self: end;
}

.aef-tl__item[data-side="right"] > .aef-tl__card {
	grid-column: 3;
	justify-self: start;
}

.aef-tl__dot {
	grid-column: 2;
	align-self: center;
	justify-self: center;
	width: var(--aef-tl-dot-size);
	height: var(--aef-tl-dot-size);
	margin-block-start: var(--aef-tl-dot-offset);
	border-radius: 50%;
	background: var(--aef-tl-dot-color);
	box-shadow: 0 0 0 var(--aef-tl-dot-ring) var(--aef-tl-dot-ring-color);
}

/* ------------------------------------------------------------------- card */

.aef-tl__card {
	display: flex;
	flex-direction: column;
	justify-content: var(--aef-tl-card-justify);
	width: 100%;
	/* Keep the ratio from widening the card: it may only add height. */
	min-width: 0;
	max-width: var(--aef-tl-card-max);
	/* A custom ratio wins over the preset; "auto" keeps the content height. */
	aspect-ratio: var(--aef-tl-card-ratio-custom, var(--aef-tl-card-ratio));
	padding: var(--aef-tl-card-pad);
	background: var(--aef-tl-card-bg);
	border-radius: var(--aef-tl-card-radius);
	box-shadow: var(--aef-tl-card-shadow);
}

.aef-tl__num {
	display: block;
	/* fit-content so a background or border wraps the digits instead of the
	   whole card width. An explicit width also defeats the flex stretch. */
	width: var(--aef-tl-num-width);
	margin-block-end: var(--aef-tl-num-gap);
	color: var(--aef-tl-num-color);
	font-size: var(--aef-tl-num-size);
	font-weight: var(--aef-tl-num-weight);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.aef-tl__title {
	margin-block: 0.5em 0;
	color: var(--aef-tl-title-color);
	font-size: var(--aef-tl-title-size);
	font-weight: var(--aef-tl-title-weight);
	line-height: 1.3;
}

.aef-tl__desc {
	margin-block-start: 1em;
	color: var(--aef-tl-desc-color);
	font-size: var(--aef-tl-desc-size);
}

.aef-tl__desc > :first-child { margin-block-start: 0; }
.aef-tl__desc > :last-child  { margin-block-end: 0; }

/* -------------------------------------------------------------- stacked
 * One block per site breakpoint, selected via the data-stack attribute.
 * Keeps the breakpoint choice in static CSS — no per-instance inline styles.
 */

@media (max-width: 991px) {
	.aef-tl[data-stack="991"] .aef-tl__item {
		grid-template-columns: var(--aef-tl-rail) minmax(0, 1fr);
		column-gap: var(--aef-tl-card-gap-stacked);
	}
	.aef-tl[data-stack="991"] .aef-tl__item > .aef-tl__card {
		grid-column: 2;
		justify-self: stretch;
		max-width: none;
	}
	.aef-tl[data-stack="991"] .aef-tl__dot {
		grid-column: 1;
	}
	.aef-tl[data-stack="991"] .aef-tl__line {
		left: calc(var(--aef-tl-rail) / 2);
	}
}

@media (max-width: 767px) {
	.aef-tl[data-stack="767"] .aef-tl__item {
		grid-template-columns: var(--aef-tl-rail) minmax(0, 1fr);
		column-gap: var(--aef-tl-card-gap-stacked);
	}
	.aef-tl[data-stack="767"] .aef-tl__item > .aef-tl__card {
		grid-column: 2;
		justify-self: stretch;
		max-width: none;
	}
	.aef-tl[data-stack="767"] .aef-tl__dot {
		grid-column: 1;
	}
	.aef-tl[data-stack="767"] .aef-tl__line {
		left: calc(var(--aef-tl-rail) / 2);
	}
}

@media (max-width: 478px) {
	.aef-tl[data-stack="478"] .aef-tl__item {
		grid-template-columns: var(--aef-tl-rail) minmax(0, 1fr);
		column-gap: var(--aef-tl-card-gap-stacked);
	}
	.aef-tl[data-stack="478"] .aef-tl__item > .aef-tl__card {
		grid-column: 2;
		justify-self: stretch;
		max-width: none;
	}
	.aef-tl[data-stack="478"] .aef-tl__dot {
		grid-column: 1;
	}
	.aef-tl[data-stack="478"] .aef-tl__line {
		left: calc(var(--aef-tl-rail) / 2);
	}
}

/* -------------------------------------------------------------- animation
 * The from-state is applied only after JS has confirmed it can animate
 * (`.is-anim-ready`). Without JS nothing is ever hidden.
 */

@media (prefers-reduced-motion: no-preference) {
	.aef-tl.is-anim-ready .aef-tl__item {
		opacity: 0;
	}

	.aef-tl.is-anim-ready[data-anim-engine="css"] .aef-tl__item {
		transform: translateY(var(--aef-tl-anim-distance, 32px));
		transition:
			opacity var(--aef-tl-anim-duration, 0.7s) ease,
			transform var(--aef-tl-anim-duration, 0.7s) cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: var(--aef-tl-anim-delay, 0s);
	}

	.aef-tl.is-anim-ready[data-anim-engine="css"] .aef-tl__item.is-inview {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aef-tl .aef-tl__item,
	.aef-tl .aef-tl__line-fill {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ------------------------------------------------------- dot anchoring
 * For "Höhe der Nummer" / "Höhe des Titels" the script measures the target
 * and writes --aef-tl-dot-top onto the item. Until (or unless) that happens
 * the dot stays centred on the card, so a no-JS page still looks right.
 */

.aef-tl[data-dot-anchor="number"] .aef-tl__item[style*="--aef-tl-dot-top"] > .aef-tl__dot,
.aef-tl[data-dot-anchor="title"] .aef-tl__item[style*="--aef-tl-dot-top"] > .aef-tl__dot {
	align-self: start;
	margin-block-start: calc(var(--aef-tl-dot-top, 0px) + var(--aef-tl-dot-offset));
}