/* =========================================================================
   Satsuma Timeline — DESIGN: Vertical (alternating)
   Center line, cards alternate left/right on desktop, single column on mobile.
   ========================================================================= */

.satsuma-tl--vertical {
	padding: 10px 0;
}

.satsuma-tl--vertical .satsuma-tl__list {
	position: relative;
}

/* Center spine. */
.satsuma-tl--vertical .satsuma-tl__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	margin-left: -1.5px;
	background: var(--satsuma-tl-line);
	border-radius: 3px;
}

.satsuma-tl--vertical .satsuma-tl__item {
	position: relative;
	width: 50%;
	padding: 0 40px var(--satsuma-tl-gap) 40px;
}

.satsuma-tl--vertical .satsuma-tl__item--left {
	left: 0;
	text-align: right;
}

.satsuma-tl--vertical .satsuma-tl__item--right {
	left: 50%;
	text-align: left;
}

/* Card resets the inherited text-align so content is always readable. */
.satsuma-tl--vertical .satsuma-tl__card {
	display: inline-block !important;
	text-align: left;
	width: 100% !important;
	max-width: 460px !important;
}

/* The connecting dot sits on the center line. */
.satsuma-tl--vertical .satsuma-tl__dot {
	position: absolute;
	top: 6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--satsuma-tl-accent);
	border: 4px solid var(--satsuma-tl-card-bg);
	box-shadow: 0 0 0 2px var(--satsuma-tl-accent);
	z-index: 2;
}

.satsuma-tl--vertical .satsuma-tl__item--left .satsuma-tl__dot {
	right: -9px;
}

.satsuma-tl--vertical .satsuma-tl__item--right .satsuma-tl__dot {
	left: -9px;
}

/* ---- Mobile: collapse to a single left-aligned column ---------------- */
@media (max-width: 768px) {
	.satsuma-tl--vertical .satsuma-tl__line {
		left: 20px;
		margin-left: 0;
	}

	.satsuma-tl--vertical .satsuma-tl__item,
	.satsuma-tl--vertical .satsuma-tl__item--left,
	.satsuma-tl--vertical .satsuma-tl__item--right {
		width: 100%;
		left: 0;
		text-align: left;
		padding: 0 0 var(--satsuma-tl-gap) 52px;
	}

	.satsuma-tl--vertical .satsuma-tl__item--left .satsuma-tl__dot,
	.satsuma-tl--vertical .satsuma-tl__item--right .satsuma-tl__dot {
		left: 12px;
		right: auto;
	}

	.satsuma-tl--vertical .satsuma-tl__card {
		max-width: 100%;
	}
}