/* SP Timeline — frontend base styles */
.sp-tl {
	position: relative;
	max-width: var(--sp-tl-maxw, 1120px);
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}
.sp-tl *,
.sp-tl *::before,
.sp-tl *::after { box-sizing: border-box; }

.sp-tl__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: var(--sp-tl-line, #e5e5e5);
	transform: translateX(-50%);
}

.sp-tl__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-tl-gap, 48px);
}

.sp-tl__row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 48px;
	align-items: start;
}

.sp-tl__bullet {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sp-tl-bullet, #000);
	z-index: 1;
}

.sp-tl__card {
	background: var(--sp-tl-card-bg, transparent);
	border-radius: var(--sp-tl-card-radius, 0);
	border: var(--sp-tl-card-border, 0 none transparent);
	padding: var(--sp-tl-card-padding, 0);
}

/* LTR placements */
.sp-tl[dir="ltr"] .sp-tl__row--left  > .sp-tl__card { grid-column: 1; text-align: right; margin-right: 32px; }
.sp-tl[dir="ltr"] .sp-tl__row--right > .sp-tl__card { grid-column: 2; text-align: left;  margin-left: 32px; }

/* RTL placements (mirrored) */
.sp-tl[dir="rtl"] .sp-tl__row--left  > .sp-tl__card { grid-column: 2; text-align: left;  margin-left: 32px; }
.sp-tl[dir="rtl"] .sp-tl__row--right > .sp-tl__card { grid-column: 1; text-align: right; margin-right: 32px; }

/* Wrapper used to align an inline-block .sp-tl__year via text-align */
.sp-tl__year-wrap { text-align: var(--sp-tl-year-align, inherit); }

/* Year */
.sp-tl__year {
	display: inline-block;
	margin-bottom: 12px;
	font-family: var(--sp-tl-year-ff, inherit);
	font-weight: var(--sp-tl-year-fw, 700);
	font-size: var(--sp-tl-year-size, 14px);
	line-height: var(--sp-tl-year-lh, 1.2);
	letter-spacing: var(--sp-tl-year-ls, 0);
	color: var(--sp-tl-year-color, #fff);
	background: var(--sp-tl-year-bg, #000);
	padding: var(--sp-tl-year-padding, 4px 12px);
	border-radius: var(--sp-tl-year-radius, 4px);
	text-transform: var(--sp-tl-year-transform, none);
}

/* Title */
.sp-tl__title {
	margin: 0 0 8px;
	font-family: var(--sp-tl-title-ff, inherit);
	font-weight: var(--sp-tl-title-fw, 700);
	font-size: var(--sp-tl-title-size, 20px);
	line-height: var(--sp-tl-title-lh, 1.3);
	letter-spacing: var(--sp-tl-title-ls, 0);
	color: var(--sp-tl-title-color, #111);
	text-align: var(--sp-tl-title-align, inherit);
}

/* Image */
.sp-tl__image-wrap {
	margin: 12px 0;
}
.sp-tl__image {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

/* Texts */
.sp-tl__text--1 {
	font-family: var(--sp-tl-text1-ff, inherit);
	font-weight: var(--sp-tl-text1-fw, 400);
	font-size: var(--sp-tl-text1-size, 16px);
	line-height: var(--sp-tl-text1-lh, 1.5);
	letter-spacing: var(--sp-tl-text1-ls, 0);
	color: var(--sp-tl-text1-color, #666);
	text-align: var(--sp-tl-text1-align, inherit);
}
.sp-tl__text--1 p { margin: 0 0 8px; }

.sp-tl__text--2 {
	margin-top: 8px;
	font-family: var(--sp-tl-text2-ff, inherit);
	font-weight: var(--sp-tl-text2-fw, 400);
	font-size: var(--sp-tl-text2-size, 14px);
	line-height: var(--sp-tl-text2-lh, 1.5);
	letter-spacing: var(--sp-tl-text2-ls, 0);
	color: var(--sp-tl-text2-color, #666);
	text-align: var(--sp-tl-text2-align, inherit);
}
.sp-tl__text--2 ul,
.sp-tl__text--2 ol { padding-left: 1.2em; margin: 0 0 8px; }
.sp-tl[dir="rtl"] .sp-tl__text--2 ul,
.sp-tl[dir="rtl"] .sp-tl__text--2 ol { padding-left: 0; padding-right: 1.2em; }
.sp-tl__text--2 li { margin: 2px 0; }

/* Per-element text-align inherits from the card by default; explicit user value overrides via the CSS var. */

/* Wrapper to align inline-block button via text-align */
.sp-tl__button-wrap { text-align: var(--sp-tl-button-align, inherit); }

/* Button */
.sp-tl__button {
	display: inline-block;
	margin-top: 12px;
	font-family: var(--sp-tl-button-ff, inherit);
	font-weight: var(--sp-tl-button-fw, 600);
	font-size: var(--sp-tl-button-size, 14px);
	line-height: 1.2;
	letter-spacing: var(--sp-tl-button-ls, 0);
	color: var(--sp-tl-button-color, #fff);
	background: var(--sp-tl-button-bg, #000);
	padding: var(--sp-tl-button-padding, 10px 20px);
	border-radius: var(--sp-tl-button-radius, 6px);
	text-decoration: none;
	transition: opacity .15s ease;
}
.sp-tl__button:hover,
.sp-tl__button:focus { opacity: .85; text-decoration: none; }

/* Responsive layout is emitted inline per-instance by the Renderer using the admin-defined breakpoint. */