/*
 * Satsuma Timeline CSS – Base / Legacy Designs
 */

:root {
	--st-primary-fallback: #3498db;
	--st-secondary-color: #2ecc71;
	--st-text-color: #333333;
	--st-date-color: #ffffff;
	--st-bg-color: #ffffff;
	--st-line-color: #e0e0e0;
}

.satsuma-timeline-wrapper {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 0;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
}

/* Base Styles */
.satsuma-timeline-wrapper .st-timeline-line {
	position: absolute;
	background: var(--st-line-color);
}

.satsuma-timeline-wrapper .st-timeline-items {
	position: relative;
	width: 100%;
}

.satsuma-timeline-wrapper .st-timeline-item {
	position: relative;
	width: 50%;
	padding: 20px 40px;
	margin: 0;
}

.satsuma-timeline-wrapper .st-item-dot {
	position: absolute;
	width: 20px;
	height: 20px;
	background: var(--st-item-color, var(--st-primary-color, #3498db));
	border-radius: 50%;
	top: 30px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 0 0 4px #fff, inset 0 2px 0 rgba(0,0,0,0.08), 0 3px 0 4px rgba(0,0,0,0.05);
}

.satsuma-timeline-wrapper .st-item-dot i {
	font-size: 10px;
}

.satsuma-timeline-wrapper .st-item-content {
	padding: 20px 30px;
	background: var(--st-bg-color);
	position: relative;
	border-radius: 6px;
}

.satsuma-timeline-wrapper .st-item-date {
	display: inline-block;
	background: var(--st-item-color, var(--st-primary-color, var(--st-primary-fallback)));
	color: var(--st-date-color);
	padding: 5px 15px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 15px 0;
}

.satsuma-timeline-wrapper .st-item-media {
	margin: 0 0 15px 0;
}

.satsuma-timeline-wrapper .st-item-media img {
	border-radius: 4px;
}

.satsuma-timeline-wrapper .st-item-title {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 20px;
	color: var(--st-text-color);
	line-height: 1.3;
}

.satsuma-timeline-wrapper .st-item-desc {
	font-size: 15px;
	line-height: 1.6;
	color: #666;
}

/* Layout: Vertical (Alternating) */
.st-layout-vertical .st-timeline-line {
	width: 4px;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -2px;
}

.st-layout-vertical .st-left {
	left: 0;
	text-align: right;
}

.st-layout-vertical .st-right {
	left: 50%;
	text-align: left;
}

.st-layout-vertical .st-left .st-item-dot  { right: -10px; }
.st-layout-vertical .st-right .st-item-dot { left: -10px; }

/* Layout: Vertical One Side */
.st-layout-vertical-one-side .st-timeline-line {
	width: 4px;
	top: 0;
	bottom: 0;
	left: 20px;
}

.st-layout-vertical-one-side .st-timeline-item {
	width: 100%;
	padding: 20px 0 20px 60px;
	text-align: left;
}

.st-layout-vertical-one-side .st-item-dot {
	left: 12px;
}

/* Layout: Horizontal */
.st-layout-horizontal {
	overflow-x: auto;
	white-space: nowrap;
	padding-bottom: 20px;
}

.st-layout-horizontal .st-timeline-line {
	height: 4px;
	top: 50%;
	left: 0;
	right: 0;
	margin-top: -2px;
}

.st-layout-horizontal .st-timeline-items {
	display: inline-flex;
	min-width: 100%;
	align-items: center;
}

.st-layout-horizontal .st-timeline-item {
	width: 350px;
	display: inline-block;
	white-space: normal;
	vertical-align: top;
	padding: 20px;
}

/* Design: Default */
.st-design-default .st-item-content {
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	border: 1px solid #eee;
}

/* Design: Clean */
.st-design-clean .st-item-content {
	background: transparent;
	padding: 0;
}
.st-design-clean .st-item-date {
	background: transparent;
	color: var(--st-item-color, var(--st-primary-color, var(--st-primary-fallback)));
	padding: 0;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.st-design-clean .st-item-dot {
	background: transparent;
	border: 3px solid var(--st-item-color, var(--st-primary-color, var(--st-primary-fallback)));
	box-shadow: none;
}

/* Design: Minimal */
.st-design-minimal .st-timeline-line {
	background: rgba(0,0,0,0.05);
}
.st-design-minimal .st-item-dot {
	width: 12px;
	height: 12px;
	box-shadow: none;
	background: #999;
}
.st-design-minimal .st-item-content {
	background: #fafafa;
	border-left: 3px solid var(--st-item-color, var(--st-primary-color, var(--st-primary-fallback)));
	border-radius: 0;
	box-shadow: none;
}
.st-layout-vertical.st-design-minimal .st-left .st-item-content {
	border-left: none;
	border-right: 3px solid var(--st-item-color, var(--st-primary-color, var(--st-primary-fallback)));
}
.st-layout-vertical.st-design-minimal .st-left .st-item-dot  { right: -6px; }
.st-layout-vertical.st-design-minimal .st-right .st-item-dot { left: -6px; }

/* Responsive */
@media screen and (max-width: 768px) {
	.st-layout-vertical .st-timeline-line {
		left: 20px;
	}
	.st-layout-vertical .st-timeline-item {
		width: 100%;
		padding: 20px 0 20px 60px;
		text-align: left;
	}
	.st-layout-vertical .st-right {
		left: 0;
	}
	.st-layout-vertical .st-left .st-item-dot,
	.st-layout-vertical .st-right .st-item-dot {
		left: 12px;
		right: auto;
	}
	.st-layout-vertical.st-design-minimal .st-left .st-item-content {
		border-right: none;
		border-left: 3px solid var(--st-item-color, var(--st-primary-color, var(--st-primary-fallback)));
	}
}