/**
 * Timeline widget — alternating center-line layout (601px+), stacked rail (≤600px).
 */

.obc-timeline__section {
	padding-block: var(--space-2xl);
}

.obc-timeline__header {
	text-align: center;
	margin-bottom: var(--space-3xl);
}

.obc-timeline__track {
	position: relative;
	--obc-timeline-marker-size: 2rem;
	--obc-timeline-side-width: 41.666667%;
	--obc-timeline-item-gap: var(--space-4xl);
}

/* Center vertical rail (desktop / tablet timeline) */
.obc-timeline__track::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--color-outline-variant);
	transform: translateX(-50%);
	z-index: 0;
}

.obc-timeline__marker--primary {
	background-color: var(--color-primary);
}

.obc-timeline__marker--secondary {
	background-color: var(--color-secondary);
}

.obc-timeline__item {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: var(--obc-timeline-item-gap);
}

.obc-timeline__item:last-child {
	margin-bottom: 0;
}

.obc-timeline__item--left {
	flex-direction: row-reverse;
}

.obc-timeline__spacer {
	flex: 0 0 var(--obc-timeline-side-width);
	max-width: var(--obc-timeline-side-width);
}

.obc-timeline__marker {
	position: relative;
	z-index: 2;
	flex: 0 0 var(--obc-timeline-marker-size);
	width: var(--obc-timeline-marker-size);
	height: var(--obc-timeline-marker-size);
	border-radius: var(--radius-full);
	box-shadow: var(--elevation-hover);
}

.obc-timeline__card {
	position: relative;
	z-index: 1;
	flex: 0 0 var(--obc-timeline-side-width);
	max-width: var(--obc-timeline-side-width);
	width: var(--obc-timeline-side-width);
	box-sizing: border-box;
}

/* Slightly narrower cards between 601px and 900px while keeping the timeline */
@media (min-width: 601px) and (max-width: 900px) {
	.obc-timeline__track {
		--obc-timeline-side-width: 38%;
		--obc-timeline-item-gap: var(--space-3xl);
	}
}

/* Stacked rail layout — only at 600px and below */
@media (max-width: 600px) {
	.obc-timeline__section {
		padding-inline: var(--margin-mobile);
	}

	.obc-timeline__track {
		--obc-timeline-rail-center: calc(var(--obc-timeline-marker-size) / 2);
		--obc-timeline-item-gap: var(--space-2xl);
	}

	.obc-timeline__track::before {
		left: auto;
		right: auto;
		inset-inline-start: var(--obc-timeline-rail-center);
		margin-inline-start: -1px;
		transform: none;
	}

	.obc-timeline__item,
	.obc-timeline__item--left,
	.obc-timeline__item--right {
		display: block;
		position: relative;
		padding-inline-start: calc(var(--obc-timeline-marker-size) + var(--space-md));
	}

	.obc-timeline__spacer {
		display: none;
	}

	.obc-timeline__card {
		width: 100%;
		max-width: none;
	}

	.obc-timeline__marker {
		position: absolute;
		inset-inline-start: var(--obc-timeline-rail-center);
		margin-inline-start: calc(var(--obc-timeline-marker-size) / -2);
		top: var(--space-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.obc-timeline__item {
		margin-bottom: var(--space-2xl);
	}
}