/* =========================================================================
   Satsuma Timeline — DESIGN: Vertical Flat (both sided)
   Flat, shadowless cards that alternate either side of a central rail, with a
   highlighted date marker, an accent edge that faces the line, and a small
   pointer + "Read more" link. Brand red / black / white.
   ========================================================================= */

.satsuma-tl--vertical-flat {
	position: relative;
	padding: 6px 0;
}

/* Central rail. */
.satsuma-tl--vertical-flat .satsuma-tl__line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 4px;
	transform: translateX(-50%);
	background: var(--satsuma-tl-line);
	border-radius: 4px;
}

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

.satsuma-tl--vertical-flat .satsuma-tl__item {
	position: relative;
	width: 50%;
	padding: 0 46px 40px 0;
}
.satsuma-tl--vertical-flat .satsuma-tl__item--right {
	margin-left: 50%;
	padding: 0 0 40px 46px;
}

/* Dot centred on the rail. */
.satsuma-tl--vertical-flat .satsuma-tl__dot {
	position: absolute;
	top: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--satsuma-tl-accent);
	box-shadow: 0 0 0 4px var(--satsuma-tl-card-bg), 0 0 0 6px var(--satsuma-tl-accent);
	z-index: 2;
}
/* Dot is 18px wide; offset by half (9px) so its centre lands exactly on the
   4px-wide central rail. */
.satsuma-tl--vertical-flat .satsuma-tl__item--left .satsuma-tl__dot {
	right: -9px;
}
.satsuma-tl--vertical-flat .satsuma-tl__item--right .satsuma-tl__dot {
	left: -9px;
}

/* Flat card — no shadow, square-ish, accent edge faces the rail. */
.satsuma-tl--vertical-flat .satsuma-tl__card {
	position: relative;
	background: var(--satsuma-tl-card-bg);
	border: 1px solid var(--satsuma-tl-card-border);
	border-radius: 6px;
	box-shadow: none;
	padding: 20px 22px;
}
.satsuma-tl--vertical-flat .satsuma-tl__item--left .satsuma-tl__card {
	border-right: 4px solid var(--satsuma-tl-accent);
}
.satsuma-tl--vertical-flat .satsuma-tl__item--right .satsuma-tl__card {
	border-left: 4px solid var(--satsuma-tl-accent);
}

/* Pointer triangle toward the rail. */
.satsuma-tl--vertical-flat .satsuma-tl__card::before {
	content: "";
	position: absolute;
	top: 12px;
	width: 0;
	height: 0;
	border: 9px solid transparent;
}
.satsuma-tl--vertical-flat .satsuma-tl__item--left .satsuma-tl__card::before {
	right: -18px;
	border-left-color: var(--satsuma-tl-accent);
}
.satsuma-tl--vertical-flat .satsuma-tl__item--right .satsuma-tl__card::before {
	left: -18px;
	border-right-color: var(--satsuma-tl-accent);
}

.satsuma-tl--vertical-flat .satsuma-tl__date {
	border-radius: 4px;
}

.satsuma-tl--vertical-flat .satsuma-tl__readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--satsuma-tl-accent);
	text-decoration: none;
	transition: gap 0.15s ease, color 0.15s ease;
}
.satsuma-tl--vertical-flat .satsuma-tl__readmore:hover {
	color: var(--satsuma-tl-accent-dark);
	gap: 10px;
}

/* ---- Mobile: single column, rail on the left ------------------------- */
@media (max-width: 768px) {
	.satsuma-tl--vertical-flat .satsuma-tl__line {
		left: 21px;
		transform: none;
	}
	.satsuma-tl--vertical-flat .satsuma-tl__item,
	.satsuma-tl--vertical-flat .satsuma-tl__item--right {
		width: 100%;
		margin-left: 0;
		padding: 0 0 30px 52px;
	}
	.satsuma-tl--vertical-flat .satsuma-tl__item--left .satsuma-tl__dot,
	.satsuma-tl--vertical-flat .satsuma-tl__item--right .satsuma-tl__dot {
		left: 12px;
		right: auto;
	}
	.satsuma-tl--vertical-flat .satsuma-tl__item--left .satsuma-tl__card,
	.satsuma-tl--vertical-flat .satsuma-tl__item--right .satsuma-tl__card {
		border-right: 1px solid var(--satsuma-tl-card-border);
		border-left: 4px solid var(--satsuma-tl-accent);
	}
	.satsuma-tl--vertical-flat .satsuma-tl__item--left .satsuma-tl__card::before,
	.satsuma-tl--vertical-flat .satsuma-tl__item--right .satsuma-tl__card::before {
		left: -18px;
		right: auto;
		border-right-color: var(--satsuma-tl-accent);
		border-left-color: transparent;
	}
}