/**
 * Component: Timeline History
 *
 * Clone giao diện JetElements Timeline (align-left, image-inside).
 * Cột: [năm] [đường + chấm] [card: ảnh trái, nội dung phải].
 *
 * @package flatsome-child
 */

.teco-timeline {
	--tl-col-year: 120px;
	--tl-col-point: 48px;
	--tl-line-x: calc(var(--tl-col-year) + (var(--tl-col-point) / 2));
	--tl-navy: #16244a;
	--tl-year-size: clamp(2rem, 3.4vw, 3.25rem); /* cỡ chữ năm, dùng chung để căn chấm */
	--tl-year-pt: 8px;                            /* padding-top của năm */
	--tl-dot-size: 18px;
	position: relative;
	margin: var(--teco-space-2xl) 0;
}

/* Đường dọc chạy suốt timeline + phần progress được tô cam theo scroll */
.teco-timeline__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--tl-line-x);
	width: 4px;
	transform: translateX(-50%);
	background: var(--teco-color-grey-2);
	z-index: 0;
}

.teco-timeline__progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scaleY(0);
	transform-origin: top center;
	background: var(--teco-color-orange);
	transition: transform 120ms linear;
	will-change: transform;
}

/* Mỗi mốc thời gian: lưới 3 cột */
.teco-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--tl-col-year) var(--tl-col-point) 1fr;
	align-items: start;
	padding-bottom: var(--teco-space-2xl);
}

.teco-timeline__item:last-child {
	padding-bottom: 0;
}

/* Cột 1: năm (cam, in đậm) */
.teco-timeline__year {
	grid-column: 1;
	text-align: right;
	padding-right: var(--teco-space-lg);
	padding-top: var(--tl-year-pt);
	font-family: var(--teco-font-primary);
	font-weight: 800;
	font-size: var(--tl-year-size);
	line-height: 1;
	color: var(--teco-color-orange);
}

/* Cột 2: chấm tròn nằm trên đường */
.teco-timeline__point {
	grid-column: 2;
	position: relative;
	display: flex;
	justify-content: center;
	/* Neo tâm chấm vào tâm dọc của số năm:
	   tâm năm = padding-top năm + nửa cỡ chữ; trừ đi nửa chấm để ra padding của chấm. */
	padding-top: calc(var(--tl-year-pt) + (var(--tl-year-size) / 2) - (var(--tl-dot-size) / 2));
	z-index: 1;
}

.teco-timeline__dot {
	box-sizing: border-box;
	width: var(--tl-dot-size);
	height: var(--tl-dot-size);
	border-radius: 50%;
	background: #fff;
	border: 4px solid var(--teco-color-orange);
	box-shadow: 0 0 0 4px #fff;
}

/* Cột 3: card nội dung */
.teco-timeline__card {
	grid-column: 3;
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0;
	height: 430px; /* Tất cả card bằng chiều cao nhau trên desktop */
	background: #fff;
	border-radius: var(--teco-radius-lg);
	box-shadow: 0 18px 40px rgba(22, 36, 74, 0.12);
	overflow: hidden;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 600ms var(--teco-ease-out-expo),
		transform 600ms var(--teco-ease-out-expo);
}

.teco-timeline__item.is--in-view .teco-timeline__card {
	opacity: 1;
	transform: translateY(0);
}

/* Mũi tên nhỏ trỏ về phía chấm */
.teco-timeline__arrow {
	position: absolute;
	top: 32px;
	left: -10px;
	width: 20px;
	height: 20px;
	background: #fff;
	transform: rotate(45deg);
	border-radius: 3px;
	box-shadow: -6px 6px 12px rgba(22, 36, 74, 0.06);
	z-index: 0;
}

.teco-timeline__img {
	flex: 0 0 42%;
	max-width: 42%;
	position: relative;
	background: var(--teco-color-grey-1);
}

.teco-timeline__img-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.teco-timeline__content {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--teco-space-xl);
	position: relative;
	z-index: 1;
	overflow-y: auto; /* Cuộn nếu nội dung dài hơn chiều cao card cố định */
}

/* Năm lặp lại trong card: ẩn trên desktop, dùng cho mobile */
.teco-timeline__meta {
	display: none;
	font-weight: 800;
	color: var(--teco-color-orange);
	font-size: var(--teco-text-h5);
}

.teco-timeline__title {
	margin: 0 0 var(--teco-space-md);
	font-family: var(--teco-font-primary);
	font-weight: 700;
	font-size: var(--teco-text-h4);
	line-height: 1.25;
	color: var(--tl-navy);
}

.teco-timeline__desc {
	color: var(--teco-color-text-muted);
	font-size: var(--teco-text-body);
	line-height: 1.7;
}

.teco-timeline__desc p {
	margin: 0 0 var(--teco-space-md);
}

.teco-timeline__desc p:last-child {
	margin-bottom: 0;
}

/* ===== Tablet (<= 1024px) ===== */
@media (max-width: 1024px) {
	.teco-timeline {
		--tl-col-year: 90px;
		--tl-col-point: 40px;
	}

	.teco-timeline__card {
		flex-direction: column;
		height: auto; /* Xếp dọc: ảnh trên + chữ dưới, để cao tự động */
	}

	.teco-timeline__img,
	.teco-timeline__img-el {
		max-width: 100%;
		flex-basis: auto;
	}

	.teco-timeline__img {
		height: 260px; /* Ảnh cover chiều cao cố định khi xếp dọc */
	}

	.teco-timeline__img-el {
		height: 100%;
	}

	.teco-timeline__content {
		overflow-y: visible; /* Không cần cuộn khi card cao tự động */
	}
}

/* ===== Mobile (<= 767px) ===== */
@media (max-width: 767px) {
	.teco-timeline {
		--tl-line-x: 11px;
	}

	.teco-timeline__item {
		grid-template-columns: 22px 1fr;
		column-gap: var(--teco-space-md);
	}

	/* Ẩn năm cột riêng, hiển thị năm trong card */
	.teco-timeline__year {
		display: none;
	}

	.teco-timeline__point {
		grid-column: 1;
	}

	.teco-timeline__card {
		grid-column: 2;
	}

	.teco-timeline__meta {
		display: block;
		margin-bottom: var(--teco-space-sm);
	}

	.teco-timeline__arrow {
		display: none;
	}

	.teco-timeline__content {
		padding: var(--teco-space-lg);
	}
}

/* Giảm chuyển động nếu người dùng yêu cầu */
@media (prefers-reduced-motion: reduce) {
	.teco-timeline__card {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.teco-timeline__progress {
		transition: none;
	}
}