/* =========================================================================
   Satsuma Timeline — DESIGN: Classic Compact Story
   A compact, single-side vertical "story" timeline: left rail, ringed nodes,
   tight content-first cards with a small floated thumbnail. Brand red / black
   / white.
   ========================================================================= */

.satsuma-tl--classic-compact {
	position: relative;
}

/* Left rail. */
.satsuma-tl--classic-compact .satsuma-tl__line {
	position: absolute;
	left: 19px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--satsuma-tl-line);
}

.satsuma-tl--classic-compact .satsuma-tl__list {
	position: relative;
}

.satsuma-tl--classic-compact .satsuma-tl__item {
	position: relative;
	padding: 0 0 18px 54px;
}

/* Ringed node on the rail. */
.satsuma-tl--classic-compact .satsuma-tl__dot {
	position: absolute;
	left: 12px;
	top: 5px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--satsuma-tl-card-bg);
	border: 3px solid var(--satsuma-tl-accent);
	z-index: 2;
}

/* Compact card. */
.satsuma-tl--classic-compact .satsuma-tl__card {
	position: relative;
	background: var(--satsuma-tl-card-bg);
	border: 1px solid var(--satsuma-tl-card-border);
	border-left: 3px solid var(--satsuma-tl-accent);
	border-radius: 8px;
	box-shadow: none;
	padding: 14px 16px;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.satsuma-tl--classic-compact .satsuma-tl__card:hover {
	box-shadow: var(--satsuma-tl-card-shadow);
	transform: translateY(-2px);
}

/* Little connector from rail to card. */
.satsuma-tl--classic-compact .satsuma-tl__card::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 11px;
	width: 12px;
	height: 2px;
	background: var(--satsuma-tl-accent);
}

/* Compact typography. */
.satsuma-tl--classic-compact .satsuma-tl__date {
	font-size: 11px;
	padding: 3px 9px;
	margin-bottom: 8px;
}
.satsuma-tl--classic-compact .satsuma-tl__title {
	font-size: 17px;
	margin-bottom: 6px !important;
}
.satsuma-tl--classic-compact .satsuma-tl__content {
	font-size: 14px;
}

/* Small floated story thumbnail. */
.satsuma-tl--classic-compact .satsuma-tl__media {
	float: right;
	width: 96px;
	margin: 2px 0 8px 14px;
	border-radius: 6px;
}
.satsuma-tl--classic-compact .satsuma-tl__media img {
	border-radius: 6px;
}

/* ---- Mobile ---------------------------------------------------------- */
@media (max-width: 480px) {
	.satsuma-tl--classic-compact .satsuma-tl__media {
		float: none;
		width: 100%;
		margin: 0 0 10px 0;
	}
}