/* =========================================================================
   Satsuma Timeline — DESIGN: Horizontal (alternating)
   Cards alternate above / below a centre line.

   CLIPPING FIX (v1.1.0)
   ---------------------
   The old version used fixed-height columns with absolutely positioned cards.
   Any card taller than half the column overflowed and was clipped by the
   track's `overflow-y:hidden`, so long stories were cut off by the border.

   The new layout makes every column a 3-row CSS grid:  [ 1fr | dot | 1fr ].
   Flexbox `align-items:stretch` forces ALL columns to the height of the
   tallest one, and the two 1fr rows split the spare space equally so the
   centre dot band stays perfectly aligned across every column. Because the
   column is always as tall as its content, nothing is ever clipped.
   ========================================================================= */

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

.satsuma-tl--horizontal .satsuma-tl__track {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 24px 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 .satsuma-tl__track::-webkit-scrollbar {
	height: 8px;
}
.satsuma-tl--horizontal .satsuma-tl__track::-webkit-scrollbar-thumb {
	background: var(--satsuma-tl-accent);
	border-radius: 8px;
}

/* Centre line — sits at the vertical middle of the track, which (thanks to
   equal top/bottom padding + the centred dot band) lines up with every dot. */
.satsuma-tl--horizontal .satsuma-tl__line {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 3px;
	transform: translateY(-50%);
	background: var(--satsuma-tl-line);
	border-radius: 3px;
	z-index: 0;
}

.satsuma-tl--horizontal .satsuma-tl__list {
	display: flex;
	align-items: stretch; /* all columns become equal height = tallest card */
	gap: var(--satsuma-tl-gap);
	position: relative;
	padding: 0 24px !important;
	min-width: min-content;
}

/* Each column is a 3-row grid: top card area / dot band / bottom card area. */
.satsuma-tl--horizontal .satsuma-tl__item {
	position: relative;
	flex: 0 0 320px;
	width: 320px;
	min-height: 420px;
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	scroll-snap-align: center;
}

/* Dot pinned to the centre band. */
.satsuma-tl--horizontal .satsuma-tl__dot {
	grid-row: 2;
	justify-self: center;
	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;
}

/* Odd items: card in the top row, anchored just above the line. */
.satsuma-tl--horizontal .satsuma-tl__item:nth-child(odd) .satsuma-tl__card {
	grid-row: 1;
	align-self: end;
	margin-bottom: 20px;
	position: relative;
}
/* Even items: card in the bottom row, anchored just below the line. */
.satsuma-tl--horizontal .satsuma-tl__item:nth-child(even) .satsuma-tl__card {
	grid-row: 3;
	align-self: start;
	margin-top: 20px;
	position: relative;
}

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

/* Accent edge for a more finished, professional card. */
.satsuma-tl--horizontal .satsuma-tl__card {
	border-top: 3px solid var(--satsuma-tl-accent);
}

/* Nav buttons. */
.satsuma-tl--horizontal .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 .satsuma-tl__nav:hover {
	background: var(--satsuma-tl-accent);
	color: #fff;
	transform: scale(1.05);
}
.satsuma-tl--horizontal .satsuma-tl__nav:disabled {
	opacity: 0.35;
	cursor: default;
	transform: none;
	background: var(--satsuma-tl-card-bg);
	color: var(--satsuma-tl-title);
}

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