/* Block Dòng thời gian (Figma "Detail page" → component "Timeline": ảnh 260 × 345; mốc mở 520 × 693, chữ đè mép ảnh
   ~140px). Feedback khách vòng 2: bỏ cuộn ngang – mọi mốc nằm vừa 1 hàng, mốc nào cũng mở được, mỗi lúc 1 mốc. */

/* Lề 2 bên đặt ở section: padding của <ol> bị reset "ol[class] { padding: 0 }" (base.css) đè mất. */
.block-timeline {
	padding-inline: var(--gutter);
	overflow-x: clip; /* chữ (đang ẩn) của mốc đóng rộng hơn mốc – không tạo thanh cuộn ngang */
}

/* Mobile / tablet: danh sách dọc, ảnh trái – chữ phải, mọi mốc luôn mở. */
.block-timeline__track {
	display: grid;
	gap: clamp(20px, 3vw, 32px);
	max-width: var(--container);
	margin-inline: auto;
}

.milestone {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 16px;
	align-items: center;
	outline-offset: 6px;
}

.milestone__media {
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 260 / 345;
	background: var(--color-beige);
}

.milestone__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.milestone__text {
	display: grid;
	gap: clamp(6px, 0.63vw, 12px);
}

.milestone__year {
	font-family: var(--font-display);
	font-size: clamp(36px, 5.4vw, 104px);
	font-weight: 700;
	line-height: 1;
}

.milestone__title {
	font-size: clamp(16px, 1.67vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.milestone__desc {
	max-width: 36em;
	font-size: clamp(14px, 0.94vw, 18px);
	line-height: 1.4;
}

.block-timeline__range {
	margin-top: clamp(16px, 2vw, 40px);
	font-size: clamp(20px, 1.88vw, 36px);
	font-weight: 500;
	text-align: center;
}

/* Mobile / tablet (Figma mobile "Timeline", feedback vòng 4): mỗi mốc là 1 slide trên dải vuốt ngang – ảnh lớn đen trắng bên
   trái, năm + tiêu đề + mô tả đè mép phải ảnh (hoà trộn "difference" như desktop), slide sau ló ra mép phải; cả dải vừa
   1 màn hình. Không dùng isolation trên slide: chữ phải hoà trộn với nền section. */
@media (max-width: 1023px) {
	.block-timeline {
		padding-inline: 0;
	}

	ol.block-timeline__track { /* "ol." thắng ol[class] { padding: 0 } của base.css */
		display: flex;
		gap: 16px;
		max-width: none;
		padding: 8px var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.block-timeline__track::-webkit-scrollbar {
		display: none;
	}

	.milestone {
		position: relative;
		display: block;
		flex: 0 0 min(100vw - 2 * var(--gutter) - 20px, 600px); /* slide sau ló ~20px báo hiệu vuốt được */
		scroll-snap-align: start;
		overflow: hidden; /* chữ của slide không lấn sang slide bên cạnh */
	}

	.milestone__media {
		width: 66%;
		max-height: calc(100svh - var(--header-height) - 140px);
	}

	.milestone__media img {
		filter: grayscale(1) brightness(0.5) contrast(1.15);
	}

	.milestone__text {
		position: absolute;
		top: 50%;
		right: 0;
		left: 44%;
		color: #fff;
		mix-blend-mode: difference;
		transform: translateY(-50%);
	}

	.milestone__year {
		font-size: clamp(36px, 11vw, 72px);
	}

	.milestone__title {
		font-size: clamp(15px, 4vw, 24px);
	}

	.milestone__desc {
		font-size: clamp(12px, 3.3vw, 16px);
		line-height: 1.35;
	}
}

/* Desktop: 1 hàng vừa khung. Mốc đóng chia đều 1 phần, mốc mở --tl-grow phần (ảnh chiếm nửa, chữ nửa còn lại
   đè lên mép ảnh); đổi mốc thì các mốc co / giãn mượt (flex-grow). */
@media (min-width: 1024px) {
	.block-timeline__track {
		--tl-gap: clamp(12px, 1.67vw, 32px);
		--tl-grow: 5.5;
		--tl-overlap: clamp(56px, 5.2vw, 100px);
		/* Bề rộng 1 phần → chiều cao ảnh mốc mở = chiều cao dải, cố định khi đổi mốc (trang không giật). */
		--tl-unit: calc((min(100vw - 2 * var(--gutter), var(--container)) - (var(--count) - 1) * var(--tl-gap)) / (var(--count) - 1 + var(--tl-grow)));
		display: flex;
		align-items: center;
		gap: var(--tl-gap);
		min-height: calc(var(--tl-unit) * var(--tl-grow) * 0.5 * 345 / 260);
	}

	.milestone {
		position: relative;
		display: block;
		flex: 1 1 0;
		min-width: 0;
		cursor: pointer;
		transition: flex-grow 0.8s cubic-bezier(0.65, 0, 0.35, 1);
	}

	.milestone__media {
		width: 100%;
		transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1);
	}

	.milestone__media img {
		transition: filter 0.6s ease, transform 0.6s ease;
	}

	.milestone:not(.is-open):hover .milestone__media img {
		transform: scale(1.05);
	}

	/* Chữ đè mép ảnh, hoà trộn "difference": trên nền sáng thành chữ đậm, trên ảnh thành chữ sáng (Figma).
	   Mốc đóng: chữ mờ hẳn nhưng vẫn có trong HTML (trình đọc màn hình, công cụ tìm kiếm). */
	.milestone__text {
		position: absolute;
		top: 50%;
		right: 0;
		left: calc(50% - var(--tl-overlap));
		color: #fff;
		mix-blend-mode: difference;
		opacity: 0;
		pointer-events: none;
		transform: translate(24px, -50%);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.milestone__desc {
		max-width: none;
	}

	/* Mốc đang mở. Không có JS (dải chưa .is-enhanced): rê chuột / focus mốc khác thì mở mốc đó thay mốc mặc định. */
	.milestone.is-open,
	.block-timeline__track:not(.is-enhanced) .milestone:is(:hover, :focus-visible) {
		flex-grow: var(--tl-grow);
	}

	.block-timeline__track:not(.is-enhanced):is(:hover, :focus-within) .milestone.is-open:not(:hover, :focus-visible) {
		flex-grow: 1;
	}

	.milestone.is-open .milestone__media,
	.block-timeline__track:not(.is-enhanced) .milestone:is(:hover, :focus-visible) .milestone__media {
		width: 50%;
	}

	.block-timeline__track:not(.is-enhanced):is(:hover, :focus-within) .milestone.is-open:not(:hover, :focus-visible) .milestone__media {
		width: 100%;
	}

	/* Ảnh mốc mở đen trắng, tối bớt để chữ đè lên vẫn đọc được (Figma: ảnh phố đen trắng tông trầm). */
	.milestone.is-open .milestone__media img {
		filter: grayscale(1) brightness(0.5) contrast(1.15);
	}

	/* Chữ hiện sau khi khung đã giãn gần xong. */
	.milestone.is-open .milestone__text,
	.block-timeline__track:not(.is-enhanced) .milestone:is(:hover, :focus-visible) .milestone__text {
		opacity: 1;
		transform: translate(0, -50%);
		transition: opacity 0.5s ease 0.45s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s;
	}

	.block-timeline__track:not(.is-enhanced):is(:hover, :focus-within) .milestone.is-open:not(:hover, :focus-visible) .milestone__text {
		opacity: 0;
		transition: opacity 0.25s ease;
	}
}