/* =========================================================================
   Satsuma Timeline — DESIGN: Horizontal Highlighted (Elegant)
   Cards alternate above / below a central axis. A bold, highlighted date
   marker sits on the line. Uses the clip-proof 3-row grid column so long
   stories are never cut off. Brand red / black / white.
   ========================================================================= */

.satsuma-tl--horizontal-highlighted {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
}

.satsuma-tl--horizontal-highlighted .satsuma-tl__track {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 28px 0;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--satsuma-tl-accent) transparent;
}
.satsuma-tl--horizontal-highlighted .satsuma-tl__track::-webkit-scrollbar {
	height: 8px;
}
.satsuma-tl--horizontal-highlighted .satsuma-tl__track::-webkit-scrollbar-thumb {
	background: var(--satsuma-tl-accent);
	border-radius: 8px;
}

/* Axis line. */
.satsuma-tl--horizontal-highlighted .satsuma-tl__line {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: var(--satsuma-tl-accent);
	z-index: 0;
}

.satsuma-tl--horizontal-highlighted .satsuma-tl__list {
	display: flex;
	align-items: stretch;
	gap: 48px;
	position: relative;
	padding: 0 28px !important;
	min-width: min-content;
}

.satsuma-tl--horizontal-highlighted .satsuma-tl__item {
	flex: 0 0 300px;
	width: 300px;
	min-height: 440px;
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	scroll-snap-align: center;
}

/* Highlighted TITLE marker pinned to the axis. */
.satsuma-tl--horizontal-highlighted .satsuma-tl__marker {
	grid-row: 2;
	justify-self: center;
	margin: 0;
	max-width: 240px;
	background: var(--satsuma-tl-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	padding: 10px 18px;
	border-radius: 12px;
	box-shadow: 0 0 0 6px var(--satsuma-tl-card-bg), 0 6px 14px rgba(199, 57, 45, 0.30);
	z-index: 2;
}

/* Elegant card. */
.satsuma-tl--horizontal-highlighted .satsuma-tl__card {
	position: relative;
	background: var(--satsuma-tl-card-bg);
	border: 1px solid var(--satsuma-tl-card-border);
	border-radius: 12px;
	box-shadow: var(--satsuma-tl-card-shadow);
	padding: 22px 24px;
}
.satsuma-tl--horizontal-highlighted .satsuma-tl__item:nth-child(odd) .satsuma-tl__card {
	grid-row: 1;
	align-self: end;
	margin-bottom: 28px;
}
.satsuma-tl--horizontal-highlighted .satsuma-tl__item:nth-child(even) .satsuma-tl__card {
	grid-row: 3;
	align-self: start;
	margin-top: 28px;
}

/* Elegant title with an accent underline. */
.satsuma-tl--horizontal-highlighted .satsuma-tl__title {
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 12px !important;
	font-size: 19px;
}
.satsuma-tl--horizontal-highlighted .satsuma-tl__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38px;
	height: 3px;
	background: var(--satsuma-tl-accent);
	border-radius: 3px;
}

/* Connector from card to marker. */
.satsuma-tl--horizontal-highlighted .satsuma-tl__card::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 2px;
	height: 28px;
	background: var(--satsuma-tl-accent);
	transform: translateX(-50%);
}
.satsuma-tl--horizontal-highlighted .satsuma-tl__item:nth-child(odd) .satsuma-tl__card::after {
	top: 100%;
}
.satsuma-tl--horizontal-highlighted .satsuma-tl__item:nth-child(even) .satsuma-tl__card::after {
	bottom: 100%;
}

/* Nav buttons. */
.satsuma-tl--horizontal-highlighted .satsuma-tl__nav {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--satsuma-tl-card-border);
	background: var(--satsuma-tl-card-bg);
	color: var(--satsuma-tl-title);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--satsuma-tl-card-shadow);
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.satsuma-tl--horizontal-highlighted .satsuma-tl__nav:hover {
	background: var(--satsuma-tl-accent);
	color: #fff;
	transform: scale(1.05);
}
.satsuma-tl--horizontal-highlighted .satsuma-tl__nav:disabled {
	opacity: 0.35;
	cursor: default;
	transform: none;
	background: var(--satsuma-tl-card-bg);
	color: var(--satsuma-tl-title);
}

/* ---- Mobile: stack cards below the marker ---------------------------- */
@media (max-width: 768px) {
	.satsuma-tl--horizontal-highlighted .satsuma-tl__item {
		flex: 0 0 82vw;
		width: 82vw;
		min-height: 0;
		grid-template-rows: auto auto;
		row-gap: 20px;
		align-content: center;
	}
	.satsuma-tl--horizontal-highlighted .satsuma-tl__marker {
		grid-row: 1;
	}
	.satsuma-tl--horizontal-highlighted .satsuma-tl__item:nth-child(odd) .satsuma-tl__card,
	.satsuma-tl--horizontal-highlighted .satsuma-tl__item:nth-child(even) .satsuma-tl__card {
		grid-row: 2;
		align-self: start;
		margin: 0;
	}
	.satsuma-tl--horizontal-highlighted .satsuma-tl__card::after {
		display: none;
	}
	.satsuma-tl--horizontal-highlighted .satsuma-tl__nav {
		display: none;
	}
}