/* ============================================================
   Vertical Timeline Widget（滚动进度填充时间线）
   ============================================================ */

.vt-section {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 0;
	box-sizing: border-box;
}

.vt-section *,
.vt-section *::before,
.vt-section *::after {
	box-sizing: border-box;
}

/* ---- 中央时间线 ---- */
.vt-line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: #e5e7eb;
	transform: translateX(-50%);
	overflow: hidden;
	z-index: 1;
}

.vt-line-progress {
	--progress-start: #b71a33;
	--progress-end: #051b3d;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background: linear-gradient(
		to bottom,
		var(--progress-start) 0%,
		var(--progress-end) 100%
	);
	will-change: height;
	transition: height 0.15s linear;
}

/* ---- 列表：整体 Grid，所有 item 共享同一组列，严格对齐 ---- */
.vt-list {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-auto-rows: minmax(180px, auto);
	column-gap: 24px;
	row-gap: 0;
	align-items: center;
}

/* item 作为透明容器，不参与布局；子项直接进入 .vt-list grid */
.vt-item {
	display: contents;
}

/* 每个 item 的 3 个子项共享同一 grid-row（由 --vt-row 指定） */
.vt-item > .vt-card,
.vt-item > .vt-node,
.vt-item > .vt-year {
	grid-row: var(--vt-row, auto);
	align-self: center;
}

/* ---- 卡片 ---- */
.vt-card {
	position: relative;
	background: var(--vt-card-bg, #ffffff);
	padding: 24px;
	border-radius: 6px;
	min-width: 0;
	/* 默认初始阴影； Elementor card_shadow 控件可完全覆盖 */
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* 左卡片：尖角在右侧（指向节点） */
.vt-item--left .vt-card::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent var(--vt-card-bg, #ffffff);
	transform: translateY(-50%);
	pointer-events: none;
}

/* 右卡片：尖角在左侧（指向节点） */
.vt-item--right .vt-card::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 8px 8px 0;
	border-color: transparent var(--vt-card-bg, #ffffff) transparent transparent;
	transform: translateY(-50%);
	pointer-events: none;
}

/* ---- 卡片图片 ---- */
.vt-card-img {
	width: 100%;
	display: block;
	border-radius: 4px;
	object-fit: cover;
	margin-bottom: 16px;
}

.vt-card-title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
	color: #051b3d;
	line-height: 1.3;
}

.vt-card-desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: #666;
}

/* ---- 节点圆圈 ---- */
.vt-node {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 2px solid #051b3d;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	position: relative;
	z-index: 3;
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

.vt-node i {
	font-size: 14px;
	color: #051b3d;
	line-height: 1;
	transition: color 0.35s ease;
}

.vt-node svg {
	width: 14px;
	height: 14px;
	fill: #051b3d;
	transition: fill 0.35s ease;
}

/* ---- 激活态：节点 ---- */
.vt-item.is-active .vt-node {
	background-color: #b71a33;
	border-color: #b71a33;
}

.vt-item.is-active .vt-node i {
	color: #ffffff;
}

.vt-item.is-active .vt-node svg {
	fill: #ffffff;
}

/* ---- 年份 ---- */
.vt-year {
	font-size: 22px;
	font-weight: 700;
	color: #051b3d;
	line-height: 1;
	transition: color 0.35s ease;
}

/* ---- 左侧卡片布局（奇数项）---- */
.vt-item--left .vt-card {
	grid-column: 1;
	text-align: left;
}

.vt-item--left .vt-node {
	grid-column: 2;
}

.vt-item--left .vt-year {
	grid-column: 3;
	justify-self: start;
	text-align: left;
}

/* ---- 右侧卡片布局（偶数项）---- */
.vt-item--right .vt-year {
	grid-column: 1;
	justify-self: end;
	text-align: right;
}

.vt-item--right .vt-node {
	grid-column: 2;
}

.vt-item--right .vt-card {
	grid-column: 3;
	text-align: left;
}

/* ---- 手机端导航栏（桌面端隐藏） ---- */
.vt-mob-header {
	display: none;
}

/* ============================================================
   手机端：水平时间线 + 单卡片轮播
   ============================================================ */
@media (max-width: 768px) {
	.vt-section {
		padding: 20px 16px;
	}

	/* 隐藏桌面端垂直线 */
	.vt-line {
		display: none;
	}

	/* 显示手机导航 */
	.vt-mob-header {
		display: block;
		margin-bottom: 20px;
	}

	.vt-mob-title {
		text-align: center;
		font-size: 18px;
		font-weight: 700;
		color: #051b3d;
		margin-bottom: 16px;
		line-height: 1.4;
	}

	.vt-mob-bar {
		display: flex;
		align-items: center;
		gap: 0;
	}

	.vt-mob-prev,
	.vt-mob-next {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #f0f0f0;
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		transition: background .2s;
	}

	.vt-mob-prev:hover,
	.vt-mob-next:hover {
		background: #e0e0e0;
	}

	.vt-mob-prev svg,
	.vt-mob-next svg {
		width: 20px;
		height: 20px;
		fill: #333;
	}

	.vt-mob-line-track {
		flex: 1;
		position: relative;
		height: 2px;
		margin: 0 8px;
	}

	.vt-mob-line-bg {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 2px;
		background: #e5e7eb;
		transform: translateY(-50%);
	}

	.vt-mob-node-wrap {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.vt-mob-node-wrap .vt-node {
		position: static;
		translate: none;
		transform: none;
		opacity: 1;
	}

	/* 列表改为单卡片显示 */
	.vt-list {
		display: block;
	}

	.vt-item,
	.vt-item--left,
	.vt-item--right {
		display: none;
		flex-direction: column;
		min-height: auto;
	}

	.vt-item.vt-mob-active {
		display: flex;
	}

	.vt-item > .vt-card,
	.vt-item > .vt-node,
	.vt-item > .vt-year {
		grid-row: auto;
		grid-column: auto;
		align-self: auto;
	}

	/* 手机端隐藏 item 内的节点和年份（已移到导航栏） */
	.vt-item .vt-node,
	.vt-item .vt-year {
		display: none;
	}

	.vt-item .vt-card {
		text-align: left;
	}

	.vt-item .vt-card::before,
	.vt-item .vt-card::after {
		display: none;
	}

	/* 手机端入场动画全部关闭 */
	.vt-animated .vt-item > .vt-card,
	.vt-animated .vt-item > .vt-node,
	.vt-animated .vt-item > .vt-year {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   入场动画：仅 .vt-animated 启用
   初始：卡片/年份从中线方向微位移并透明，节点 scale(0.4)
   激活（.is-revealed）：全部归位并完全可见；逐项延迟通过 --vt-delay
   ============================================================ */
.vt-animated .vt-item > .vt-card,
.vt-animated .vt-item > .vt-node,
.vt-animated .vt-item > .vt-year {
	opacity: 0;
	transition:
		opacity var(--vt-reveal-duration, 0.7s) ease,
		transform var(--vt-reveal-duration, 0.7s) cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--vt-delay, 0ms);
	will-change: opacity, transform;
}

/* 左项：卡片向右偏（靠中线出现），年份向左偏 */
.vt-animated .vt-item--left > .vt-card {
	transform: translateX(var(--vt-reveal-shift, 30px));
}

.vt-animated .vt-item--left > .vt-year {
	transform: translateX(calc(-1 * var(--vt-reveal-shift, 30px)));
}

/* 右项：卡片向左偏（靠中线出现），年份向右偏 */
.vt-animated .vt-item--right > .vt-card {
	transform: translateX(calc(-1 * var(--vt-reveal-shift, 30px)));
}

.vt-animated .vt-item--right > .vt-year {
	transform: translateX(var(--vt-reveal-shift, 30px));
}

/* 节点：从小弹出 */
.vt-animated .vt-item > .vt-node {
	transform: scale(0.4);
}

/* 揭示态：全部归位并可见 */
.vt-animated .vt-item.is-revealed > .vt-card,
.vt-animated .vt-item.is-revealed > .vt-year {
	opacity: 1;
	transform: translateX(0);
}

.vt-animated .vt-item.is-revealed > .vt-node {
	opacity: 1;
	transform: scale(1);
}

/* 降级：用户启用"减少动画"时，直接显示，不做过渡 */
@media (prefers-reduced-motion: reduce) {
	.vt-animated .vt-item > .vt-card,
	.vt-animated .vt-item > .vt-node,
	.vt-animated .vt-item > .vt-year {
		opacity: 1;
		transform: none;
		transition: none;
	}
}