/* Legacy page — Timeline Infographic. */

.legacy-timeline {
	position: relative;
}

.legacy-timeline .media-bg img {
	object-fit: cover;
}

.legacy-timeline-intro {
	position: relative;
	z-index: 1;
	max-width: 620px;
	margin-bottom: 60px;
}

/* Decorative dot row under the heading — one dot per milestone, tinted
 * with that milestone's accent color. */
.legacy-timeline-dots {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 16px;
}

.legacy-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent, #f7941d);
	display: inline-block;
}

.legacy-timeline-intro-text {
	margin: 0;
}

/* Track: a horizontal row of milestone columns with a line running
 * through the middle. Each column always reserves both a top slot and a
 * bottom slot (only one is filled per item) so the connecting dots stay
 * perfectly aligned on the line regardless of which milestones are
 * "top" vs "bottom". Items shrink to fit the container instead of
 * scrolling, however many milestones are added. */
.legacy-timeline-track {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	width: 100%;
	padding: 100px 0;
}

.legacy-timeline-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 10px;
}

.legacy-timeline-item::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	background: rgba(10, 34, 64, 0.12);
	z-index: 0;
}

.legacy-timeline-item:first-child::before {
	left: 50%;
}

.legacy-timeline-item:last-child::before {
	right: 50%;
}

.legacy-item-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-height: 200px;
}

.legacy-item-slot-top {
	justify-content: flex-end;
	padding-bottom: 18px;
}

.legacy-item-slot-bottom {
	justify-content: flex-start;
	padding-top: 18px;
}

.legacy-item-year {
	color: #0a2240;
	white-space: nowrap;
}

.legacy-item-dot {
	position: relative;
	z-index: 1;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--accent, #f7941d);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgba(10, 34, 64, 0.15);
	flex-shrink: 0;
}

/* Hexagon icon badge: a white hexagon with two faint accent-colored
 * hexagon "rings" behind it for depth, matching the reference's
 * concentric-outline look. A real <button> — clicking it opens the
 * shared modal below with that milestone's full details. */
.legacy-hex-badge {
	position: relative;
	display: block;
	width: 84px;
	height: 84px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.legacy-hex-ring {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--accent, #c2d500);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.legacy-hex-ring-1 {
	opacity: 0.16;
	transform: scale(1.32);
}

.legacy-hex-ring-2 {
	opacity: 0.32;
	transform: scale(1.16);
}

.legacy-hex-inner {
	position: absolute;
	inset: 0;
	display: flex;
	background: #fff;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 22px rgba(10, 34, 64, 0.12);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.legacy-hex-badge:hover .legacy-hex-inner,
.legacy-hex-badge:focus-visible .legacy-hex-inner {
	transform: scale(1.05);
	box-shadow: 0 14px 28px rgba(10, 34, 64, 0.18);
}

.legacy-hex-inner img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

/* Shared details modal — one instance per section, populated from
 * whichever badge was clicked (assets/js/legacy-timeline.js). Centered
 * and fixed to the viewport, so it's always fully visible regardless of
 * where the milestone sits on the page — no clipping, no cramped width. */
.legacy-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(10, 34, 64, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s;
}

.legacy-modal-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

.legacy-modal {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: 80vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	padding: 32px 28px 28px;
	text-align: left;
	box-shadow: 0 24px 60px rgba(10, 34, 64, 0.25);
	transform: translateY(10px);
	transition: transform 0.2s ease;
}

.legacy-modal-backdrop.is-open .legacy-modal {
	transform: translateY(0);
}

.legacy-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 28px;
	height: 28px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: rgba(10, 34, 64, 0.06);
	border-radius: 50%;
	font-size: 20px;
	color: rgba(10, 34, 64, 0.6);
	cursor: pointer;
	padding: 0;
}

.legacy-modal-close:hover {
	background: rgba(10, 34, 64, 0.12);
	color: #0a2240;
}

.legacy-modal-title {
	margin: 0 0 12px;
	padding-right: 24px;
	font-size: 22px;
	font-weight: 700;
	color: var(--accent, #c2d500);
}

.legacy-modal-text {
	margin: 0;
}

@media (max-width: 991px) {
	.legacy-hex-badge {
		width: 68px;
		height: 68px;
	}
	.legacy-hex-inner img {
		width: 26px;
		height: 26px;
	}
	.legacy-item-slot {
		min-height: 170px;
	}
}

/* Mobile: collapse to a simple vertical timeline — a line down the
 * left, each milestone stacked one after another in document order
 * (both "top" and "bottom" types render the same way here). */
@media (max-width: 767px) {
	.legacy-timeline-track {
		display: block;
		overflow-x: visible;
		padding: 20px 0 20px 20px;
	}

	.legacy-timeline-item {
		flex: none;
		min-width: 0;
		align-items: flex-start;
		text-align: left;
		padding: 0 0 32px 34px;
		position: relative;
	}

	.legacy-timeline-item::before {
		left: -1px;
		right: auto;
		top: 0;
		bottom: 0;
		width: 2px;
		height: auto;
	}

	.legacy-timeline-item:first-child::before,
	.legacy-timeline-item:last-child::before {
		left: -1px;
		right: auto;
	}

	.legacy-timeline-item:last-child {
		padding-bottom: 0;
	}

	.legacy-item-dot {
		position: absolute;
		left: -26px;
		top: 6px;
	}

	.legacy-item-slot {
		min-height: 0;
		align-items: flex-start;
	}

	.legacy-item-slot-top,
	.legacy-item-slot-bottom {
		justify-content: flex-start;
		padding: 0;
	}

	.legacy-item-slot-top {
		display: none;
	}

	.legacy-timeline-item.is-top .legacy-item-slot-top {
		display: flex;
	}

	.legacy-timeline-item.is-top .legacy-item-slot-bottom {
		display: none;
	}

	.legacy-hex-badge {
		width: 56px;
		height: 56px;
	}

	.legacy-hex-inner img {
		width: 22px;
		height: 22px;
	}

	.legacy-modal {
		padding: 26px 20px 22px;
	}
}