/**
 * About timeline — alternating layout, scroll-linked line.
 */

.maxs-about-timeline {
	--maxs-timeline-line-width: 2px;
	--maxs-timeline-node-size: 12px;
	--maxs-timeline-mobile-gutter: 3rem;
	--maxs-timeline-mobile-line: 1.5rem;
	width: 100%;
}

/* ---------- Typography fallbacks (when Bricks global CSS is not on page) ---------- */

.maxs-about-timeline__heading,
.maxs-about-timeline__date,
.maxs-about-timeline__subheading {
	font-size: var(--text-xl, 1.25rem);
	color: var(--text-title, #000000);
}

.maxs-about-timeline__date {
	font-size: var(--text-2xl, 1.5rem);
	line-height: 1.2;
}

.maxs-about-timeline__intro,
.maxs-about-timeline__body {
	font-size: var(--text-m, 1rem);
	color: var(--text-body, #404040);
}

/* ---------- Header ---------- */

.maxs-about-timeline__header {
	margin-bottom: var(--space-3xl, 3rem);
}

.maxs-about-timeline__intro {
	max-width: 60%;
	margin-top: var(--space-l, 1rem);
}

.maxs-about-timeline__intro p {
	margin: 0;
}

/* ---------- Track & line ---------- */

.maxs-about-timeline__track {
	position: relative;
	padding-bottom: var(--space-2xl, 2rem);
}

.maxs-about-timeline__line {
	position: absolute;
	left: 50%;
	width: var(--maxs-timeline-line-width);
	height: 0;
	margin-left: calc(var(--maxs-timeline-line-width) / -2);
	background-color: var(--text-body, #404040);
	transform-origin: top center;
	z-index: 1;
}

/* ---------- Entry grid ---------- */

.maxs-about-timeline__entry {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--space-2xl, 2rem);
	padding-block: var(--space-4xl, 4rem);
}

.maxs-about-timeline__entry--odd .maxs-about-timeline__media {
	grid-column: 1;
	grid-row: 1;
	justify-self: end;
}

.maxs-about-timeline__entry--odd .maxs-about-timeline__content {
	grid-column: 2;
	grid-row: 1;
	justify-self: start;
}

.maxs-about-timeline__entry--even .maxs-about-timeline__content {
	grid-column: 1;
	grid-row: 1;
	justify-self: end;
	text-align: right;
}

.maxs-about-timeline__entry--even .maxs-about-timeline__media {
	grid-column: 2;
	grid-row: 1;
	justify-self: start;
}

/* ---------- Node ---------- */

.maxs-about-timeline__node {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--maxs-timeline-node-size);
	height: var(--maxs-timeline-node-size);
	margin-top: calc(var(--maxs-timeline-node-size) / -2);
	margin-left: calc(var(--maxs-timeline-node-size) / -2);
	border-radius: 50%;
	background-color: var(--text-body, #404040);
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.4s ease, transform 0.4s ease;
	z-index: 2;
}

.maxs-about-timeline__node.is-active {
	opacity: 1;
	transform: scale(1);
}

/* ---------- Content ---------- */

.maxs-about-timeline__content {
	width: 75%;
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.maxs-about-timeline__date {
	display: block;
	margin: 0 0 var(--space-m, 0.5rem);
}

.maxs-about-timeline__subheading {
	line-height: 1.3;
	margin: 0 0 var(--space-m, 0.5rem);
}

.maxs-about-timeline__body p {
	margin: 0;
}

.maxs-about-timeline__body p + p {
	margin-top: var(--space-m, 0.5rem);
}

/* ---------- Media ---------- */

.maxs-about-timeline__media {
	width: 95%;
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.maxs-about-timeline__entry--odd .maxs-about-timeline__media {
	transform: translateX(-30px);
}

.maxs-about-timeline__entry--odd .maxs-about-timeline__content {
	transform: translateX(30px);
}

.maxs-about-timeline__entry--even .maxs-about-timeline__media {
	transform: translateX(30px);
}

.maxs-about-timeline__entry--even .maxs-about-timeline__content {
	transform: translateX(-30px);
}

.maxs-about-timeline__media.is-visible,
.maxs-about-timeline__content.is-visible {
	opacity: 1;
	transform: translate(0);
}

.maxs-about-timeline__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	background: none !important;
	background-image: none !important;
}

/* ---------- Complete state (reduced motion) ---------- */

.maxs-about-timeline.is-complete .maxs-about-timeline__node {
	opacity: 1;
	transform: scale(1);
}

.maxs-about-timeline.is-complete .maxs-about-timeline__media,
.maxs-about-timeline.is-complete .maxs-about-timeline__content {
	opacity: 1;
	transform: none;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
	.maxs-about-timeline__intro {
		max-width: 100%;
	}

	.maxs-about-timeline__track {
		padding-left: var(--maxs-timeline-mobile-gutter);
	}

	.maxs-about-timeline__line {
		left: var(--maxs-timeline-mobile-line);
		margin-left: calc(var(--maxs-timeline-line-width) / -2);
	}

	.maxs-about-timeline__entry {
		grid-template-columns: 1fr;
		gap: var(--space-xl, 1.5rem);
		padding-block: var(--space-3xl, 3rem);
	}

	.maxs-about-timeline__entry--odd .maxs-about-timeline__media,
	.maxs-about-timeline__entry--odd .maxs-about-timeline__content,
	.maxs-about-timeline__entry--even .maxs-about-timeline__media,
	.maxs-about-timeline__entry--even .maxs-about-timeline__content {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
		text-align: left;
		width: 100%;
	}

	.maxs-about-timeline__entry--even .maxs-about-timeline__content {
		order: 2;
	}

	.maxs-about-timeline__entry--even .maxs-about-timeline__media {
		order: 1;
	}

	.maxs-about-timeline__node {
		left: calc(var(--maxs-timeline-mobile-line) - var(--maxs-timeline-mobile-gutter));
	}

	.maxs-about-timeline__entry--odd .maxs-about-timeline__media,
	.maxs-about-timeline__entry--odd .maxs-about-timeline__content,
	.maxs-about-timeline__entry--even .maxs-about-timeline__media,
	.maxs-about-timeline__entry--even .maxs-about-timeline__content {
		transform: translateY(30px);
	}

	.maxs-about-timeline__media.is-visible,
	.maxs-about-timeline__content.is-visible {
		transform: translateY(0);
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.maxs-about-timeline__node,
	.maxs-about-timeline__media,
	.maxs-about-timeline__content {
		opacity: 1;
		transform: none;
		transition: none;
	}
}