/* ============================================================
   Timeline Template Styles
   Structural styles for the Timeline OpenContent template.
   Dynamic accent colors are set via the scoped <style> block
   in template.hbs and override the defaults defined here.
   ============================================================ */

/* Rail container */
.timeline-rail {
	position: relative;
	padding-left: 80px;
}

/* Gray background line */
.timeline-rail::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 6px;
	height: 100%;
	background: #dadada;
	border-radius: 3px;
}

/* Accent fill bar — height driven by JS */
.timeline-progress {
	position: absolute;
	left: 0;
	top: 0;
	width: 6px;
	height: 0%;
	border-radius: 3px;
	transition: height 0.2s ease;
	pointer-events: none;
}

/* Decade group headers */
.timeline-decade {
	font-size: 1.5rem;
	color: var(--bs-primary);
}

/* Mobile */
@media (max-width: 768px) {
	.timeline-rail {
		padding-left: 3rem;
	}

	.timeline-decade {
		font-size: 1.25rem;
	}
}

/* ============================================================
   Key Milestones Section
   ============================================================ */

.timeline-milestone-year {
	min-width: 90px;
	font-size: 1rem;
	line-height: 1.2;
	writing-mode: horizontal-tb;
}

/* ============================================================
   Timeline Card — Image + Body Layout
   ============================================================ */

.timeline-card-media {
	width: 280px;
	min-height: 210px;
	display: flex;
}

.timeline-card-img {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.timeline-card-media-empty {
	background-color: #f8f9fa;
	border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.timeline-card-overlay {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.timeline-card:hover .timeline-card-overlay {
	opacity: 1;
}

.timeline-card-body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 576px) {
	.timeline-card-media {
		width: 100%;
		min-height: 160px;
	}
}