.sec-stl-section {
	position: relative;
	padding: 80px 0;
	background: var(--sec-bg-base, var(--sec-bg-main, #ffffff));
	color: var(--sec-text-primary, var(--sec-text-main, #1e1b4b));
	overflow: hidden;
}

/* Sync with theme mode when Light mode is active */
[data-theme='light'] .sec-stl-section.sec-theme-sync,
.sec-stl-section.sec-theme-light {
	background: var(--sec-bg-base, #ffffff) !important;
	color: #1e1b4b !important;
	--sec-text-primary: #1e1b4b;
	--sec-text-secondary: #64748b;
	--sec-glass-bg: rgba(255, 255, 255, 0.85);
	--sec-glass-border: rgba(124, 58, 237, 0.12);
	--sec-glass-shadow: 0 10px 30px rgba(124, 58, 237, 0.08);
}

[data-theme='light'] .sec-stl-section.sec-theme-sync .sec-stl-title,
.sec-stl-section.sec-theme-light .sec-stl-title {
	color: #1e1b4b !important;
}

[data-theme='light'] .sec-stl-section.sec-theme-sync .sec-stl-subtitle,
.sec-stl-section.sec-theme-light .sec-stl-subtitle,
[data-theme='light'] .sec-stl-section.sec-theme-sync .sec-stl-timeline-note,
.sec-stl-section.sec-theme-light .sec-stl-timeline-note {
	color: #64748b !important;
}

[data-theme='light'] .sec-stl-section.sec-theme-sync .sec-stl-timeline-headline,
.sec-stl-section.sec-theme-light .sec-stl-timeline-headline,
[data-theme='light'] .sec-stl-section.sec-theme-sync .sec-stl-timeline-title,
.sec-stl-section.sec-theme-light .sec-stl-timeline-title {
	color: #1e1b4b !important;
}

[data-theme='light'] .sec-stl-section.sec-theme-sync .sec-stl-timeline-excerpt,
.sec-stl-section.sec-theme-light .sec-stl-timeline-excerpt {
	color: #475569 !important;
}

[data-theme='light'] .sec-stl-section.sec-theme-sync .sec-stl-timeline-item:hover,
[data-theme='light'] .sec-stl-section.sec-theme-sync .sec-stl-timeline-item.is-active,
.sec-stl-section.sec-theme-light .sec-stl-timeline-item:hover,
.sec-stl-section.sec-theme-light .sec-stl-timeline-item.is-active {
	background: #f5f3ff !important;
	border-color: rgba(124, 58, 237, 0.2) !important;
}

.sec-stl-section.sec-stl-full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding-left: 0;
	padding-right: 0;
}

.sec-glass {
	background: var(--sec-glass-bg, rgba(255, 255, 255, 0.06));
	-webkit-backdrop-filter: var(--sec-glass-blur, blur(16px));
	backdrop-filter: var(--sec-glass-blur, blur(16px));
	border: 1px solid var(--sec-glass-border, rgba(255, 255, 255, 0.14));
	border-radius: 16px;
	box-shadow: var(--sec-glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.18));
}

.sec-stl-section::before,
.sec-stl-section::after {
	content: '';
	position: absolute;
	border-radius: 999px;
	pointer-events: none;
	filter: blur(80px);
	opacity: 0.55;
}

.sec-stl-section::before {
	width: min(340px, 80vw);
	height: min(340px, 80vw);
	top: 0;
	left: 0;
	transform: translate(-35%, -35%);
	background: radial-gradient(circle, var(--sec-color-primary, rgba(124, 58, 237, 0.3)) 0%, transparent 70%);
}

.sec-stl-section::after {
	width: min(420px, 86vw);
	height: min(420px, 86vw);
	right: 0;
	bottom: 0;
	transform: translate(35%, 35%);
	background: radial-gradient(circle, var(--sec-color-accent, rgba(255, 61, 0, 0.25)) 0%, transparent 70%);
}

.sec-stl-heading {
	max-width: 820px;
	margin: 0 auto 32px;
	text-align: center;
}

.sec-stl-title {
	margin: 0 0 12px;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: 0;
	color: var(--sec-text-primary, #ffffff);
}

.sec-stl-subtitle {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--sec-text-secondary, #b3b3b3);
}

.sec-stl-wrapper.layout-stacked .sec-stl-grid {
	grid-template-columns: 1fr;
}

.sec-stl-grid {
	display: grid;
	grid-template-columns: var(--sec-stl-slider-percent, 60%) 1fr;
	gap: 24px;
	align-items: stretch;
	position: relative;
	z-index: 1;
}

.sec-stl-slider-panel {
	padding: 18px;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	/* Force dark theme context locally for the slider panel so it stays white-text styled across all themes */
	--sec-text-primary: #ffffff;
	--sec-text-secondary: rgba(255, 255, 255, 0.7);
	--sec-glass-bg: rgba(0, 0, 0, 0.25);
	--sec-glass-border: rgba(255, 255, 255, 0.1);
	--sec-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.sec-stl-timeline-panel {
	padding: 18px;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}

.sec-stl-slider-viewport {
	position: relative;
	width: 100%;
	min-height: auto;
	height: auto;
	flex-grow: 1;
	border-radius: 16px;
	overflow: hidden;
}

.sec-stl-slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(0.985);
	transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s ease;
	height: 100%;
}

.sec-stl-slide.is-active {
	position: relative;
	inset: auto;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: scale(1);
	z-index: 2;
	height: auto;
	width: 100%;
}

.sec-stl-slide-media {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	background-color: #111;
	flex-shrink: 0;
}

.sec-stl-slide-img {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 1;
	transition: transform 6s cubic-bezier(0.1, 1, 0.1, 1);
}

.sec-stl-slide:not(.is-active) .sec-stl-slide-img {
	height: 100%;
	object-fit: cover;
}

.sec-stl-slide.is-active .sec-stl-slide-img {
	transform: scale(1.03);
}

/* Background blur backdrop to fill empty space and display full image on any aspect ratio */
.sec-stl-slide-media::before {
	content: '';
	position: absolute;
	inset: -20px; /* Expand slightly to hide blur edges */
	background-image: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(20px);
	opacity: 0.45;
	z-index: 0;
}

.sec-stl-slide.no-image .sec-stl-slide-media {
	background-image: linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(13, 13, 13, 0.92)),
		radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 45%),
		linear-gradient(135deg, #161616 0%, #0d0d0d 100%);
	aspect-ratio: 16 / 9; /* Fallback aspect ratio if there is no image */
}

.sec-stl-slide-overlay {
	position: absolute;
	inset: 0;
	background: transparent;
}

.sec-stl-slide-content {
	position: absolute;
	left: 24px;
	bottom: 24px;
	width: calc(100% - 48px);
	padding: 24px;
	z-index: 2;
}

.sec-stl-slide-content.sec-glass {
	background: rgba(0, 0, 0, 0.45) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

.sec-stl-slide-content.sec-glass-strong {
	background: rgba(0, 0, 0, 0.75) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.sec-stl-slide-content:not(.sec-glass) {
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.sec-stl-slide-title {
	margin: 0 0 12px;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.05;
	color: #ffffff !important;
}

.sec-stl-slide-excerpt {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7) !important;
	max-width: 58ch;
}

.sec-stl-slide-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sec-stl-btn-secondary {
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
	-webkit-backdrop-filter: var(--sec-glass-blur, blur(16px));
	backdrop-filter: var(--sec-glass-blur, blur(16px));
}

.sec-stl-btn-secondary:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.16) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}

.sec-stl-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(0, 0, 0, 0.3);
	color: #ffffff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	-webkit-backdrop-filter: var(--sec-glass-blur, blur(16px));
	backdrop-filter: var(--sec-glass-blur, blur(16px));
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.sec-stl-arrow:hover {
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(255, 255, 255, 0.3);
}

.sec-stl-prev {
	left: 18px;
}

.sec-stl-next {
	right: 18px;
}

.sec-stl-dots {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 18px;
	display: flex;
	gap: 10px;
	justify-content: center;
	z-index: 3;
}

.sec-stl-dot {
	width: 11px;
	height: 11px;
	border-radius: 999px;
	border: 0;
	background: rgba(255, 255, 255, 0.32);
	padding: 0;
	cursor: pointer;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.sec-stl-dot.is-active {
	background: var(--sec-color-primary, #7C3AED);
	box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.2);
}

.sec-stl-timeline-header {
	margin-bottom: 18px;
}

.sec-stl-timeline-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	color: var(--sec-text-primary, #ffffff);
}

.sec-stl-timeline-note {
	margin: 0;
	font-size: 14px;
	color: var(--sec-text-secondary, #b3b3b3);
}

.sec-stl-timeline-list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px; /* Reduced from 12px for desktop compactness */
	flex-grow: 1;
	overflow-y: auto;
	padding-right: 4px;
}

/* Custom scrollbar for timeline list */
.sec-stl-timeline-list::-webkit-scrollbar {
	width: 6px;
}

.sec-stl-timeline-list::-webkit-scrollbar-track {
	background: transparent;
}

.sec-stl-timeline-list::-webkit-scrollbar-thumb {
	background: var(--sec-border-strong, #2d2d2d);
	border-radius: 10px;
}

.sec-stl-timeline-list::-webkit-scrollbar-thumb:hover {
	background: var(--sec-accent, #7C3AED);
}

.sec-stl-timeline-list::before {
	content: '';
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 21px; /* Perfectly aligned with 12px padding + half of 18px columns */
	width: 2px;
	background: var(--sec-border-strong, #2d2d2d);
	z-index: 0;
	pointer-events: none;
}

.sec-stl-timeline-item {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 10px; /* Reduced from 12px */
	align-items: start;
	width: 100%;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 10px 12px; /* Reduced from 14px 16px to fit within the slide aspect ratio height */
	background: transparent;
	color: inherit;
	text-align: left;
	position: relative;
	z-index: 1;
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.sec-stl-timeline-item:hover,
.sec-stl-timeline-item.is-active {
	background: var(--sec-glass-bg, rgba(255, 255, 255, 0.06));
	border-color: var(--sec-glass-border, rgba(255, 255, 255, 0.16));
	-webkit-backdrop-filter: var(--sec-glass-blur, blur(16px));
	backdrop-filter: var(--sec-glass-blur, blur(16px));
}

.sec-stl-timeline-marker {
	position: relative;
	margin-top: 4px;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: var(--sec-border-strong, #2d2d2d);
	box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.08);
	z-index: 2;
}

@keyframes marker-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(124, 58, 237, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
	}
}

.sec-stl-timeline-item.is-active .sec-stl-timeline-marker {
	background: var(--sec-color-primary, #7C3AED);
	box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.2);
	animation: marker-pulse 2s infinite;
}

.sec-stl-timeline-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sec-stl-timeline-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.sec-stl-timeline-date,
.sec-stl-timeline-label {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.sec-stl-timeline-date {
	background: var(--sec-color-primary, linear-gradient(135deg, #7C3AED 0%, #A855F7 100%));
	color: #ffffff;
}

.sec-stl-timeline-label {
	background: rgba(124, 58, 237, 0.12);
	color: var(--sec-color-primary, #7C3AED);
}

.sec-stl-timeline-headline {
	font-size: 15px; /* Compact desktop font size */
	font-weight: 700;
	color: var(--sec-text-primary, #ffffff);
}

.sec-stl-timeline-excerpt {
	font-size: 13px; /* Compact desktop font size */
	line-height: 1.6;
	color: var(--sec-text-secondary, #b3b3b3);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.sec-stl-btn-secondary,
	.sec-stl-arrow,
	.sec-stl-timeline-item.is-active,
	.sec-stl-timeline-item:hover {
		background: var(--sec-bg-surface-2, #1a1a1a);
	}
}

@media (max-width: 1024px) {
	.sec-stl-grid {
		grid-template-columns: 1fr;
	}

	.sec-stl-slider-viewport {
		min-height: auto; /* Disable fixed height on mobile/tablet */
		height: auto;
		aspect-ratio: auto; /* Disable aspect ratio on mobile to allow flex content flow */
	}

	.sec-stl-slide {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s ease;
		height: 100%;
	}

	.sec-stl-slide.is-active {
		position: relative;
		inset: auto;
		opacity: 1;
		visibility: visible;
		height: auto;
		width: 100%;
	}

	.sec-stl-slide-media {
		position: relative;
		width: 100%;
		height: auto; /* Allow 100% native image height scaling */
		inset: auto;
		flex-shrink: 0;
	}

	.sec-stl-slide-content {
		position: relative;
		left: auto;
		bottom: auto;
		width: 100%;
		padding: 20px 16px 50px 16px !important; /* Extra padding for dots */
		box-sizing: border-box;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	.sec-stl-slide-title {
		font-size: 26px;
		margin-bottom: 8px;
		color: var(--sec-text-primary, #ffffff) !important;
	}

	.sec-stl-slide-excerpt {
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 16px;
		color: var(--sec-text-secondary, rgba(255, 255, 255, 0.7)) !important;
	}

	.sec-stl-arrow {
		top: 25vw; /* Center relative to image section on mobile */
	}

	.sec-stl-timeline-list {
		max-height: none;
	}
}

@media (max-width: 575px) {
	.sec-stl-section {
		padding: 64px 0;
	}

	.sec-stl-title {
		font-size: 30px;
	}

	.sec-stl-arrow {
		width: 42px;
		height: 42px;
	}

	.sec-stl-slide-title {
		font-size: 20px;
	}

	/* Optimize timeline panel & items padding on small screens to prevent text squeezing */
	.sec-stl-timeline-panel {
		padding: 12px !important;
	}

	.sec-stl-timeline-item {
		padding: 10px 12px !important;
		gap: 8px !important;
		grid-template-columns: 14px minmax(0, 1fr) !important;
	}

	.sec-stl-timeline-list::before {
		left: 19px !important; /* Perfectly align the connector line with smaller padding */
	}

	.sec-stl-timeline-headline {
		font-size: 16px !important;
	}

	.sec-stl-timeline-excerpt {
		font-size: 13px !important;
	}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	.sec-stl-slide {
		transition: none !important;
	}
	.sec-stl-slide-media {
		transition: none !important;
		transform: none !important;
	}
	.sec-stl-timeline-marker {
		animation: none !important;
	}
}

/* Individual Layout Helpers */
.layout-single-timeline .sec-stl-timeline-item {
	cursor: pointer;
}

/* Modal Popup Styling */
.sec-stl-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sec-stl-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.sec-stl-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.sec-stl-modal-container {
	position: relative;
	width: min(680px, calc(100% - 32px));
	max-height: 85vh;
	overflow-y: auto;
	padding: 36px;
	z-index: 10;
	transform: scale(0.96);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	background: rgba(18, 18, 18, 0.85) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
	border-radius: 20px;
}

.sec-stl-modal.is-open .sec-stl-modal-container {
	transform: scale(1);
}

.sec-stl-modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 32px;
	font-weight: 300;
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
	line-height: 1;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.sec-stl-modal-close:hover {
	color: #ffffff;
	transform: rotate(90deg);
}

.sec-stl-modal-content {
	color: #ffffff;
	text-align: left;
}

.sec-stl-modal-content .sec-stl-modal-title {
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 16px;
	line-height: 1.3;
	color: #ffffff;
}

.sec-stl-modal-content .sec-stl-modal-body {
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.8);
}

.sec-stl-modal-content .sec-stl-modal-body pre,
.sec-stl-modal-content .sec-stl-modal-body code {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	font-family: Consolas, Monaco, monospace;
}

.sec-stl-modal-content .sec-stl-modal-body pre {
	padding: 16px;
	overflow-x: auto;
}

.sec-stl-modal-content .sec-stl-modal-body code {
	padding: 2px 6px;
}

/* Premium Glassmorphic Buttons */
.sec-stl-btn-back,
.sec-stl-btn-archive {
	display: inline-block;
	padding: 10px 24px;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	background: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
	border-radius: 30px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sec-stl-btn-back:hover,
.sec-stl-btn-archive:hover {
	background: rgba(255, 255, 255, 0.22) !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
	color: #fff !important;
}

.sec-stl-btn-back:active,
.sec-stl-btn-archive:active {
	transform: translateY(0);
}