/* --- 网格系统 --- */
/* 里程碑部分 */
.milestone-wrapper {
	display: flex;
	gap: 20px;
	position: relative; /* 确保坐标计算基准正确 */
	padding: 20px; /* 恢复对称的正常内边距 */
	overflow-x: auto; /* 允许横向滚动 */
	-webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
	scrollbar-width: none; /* Firefox 隐藏滚动条 */
	-ms-overflow-style: none; /* IE 10+ 隐藏滚动条 */

	/* 使用 CSS 变量由 JS 动态控制遮罩透明度 */
	--mask-left: black;
	--mask-right: transparent;
	-webkit-mask-image: linear-gradient(to right, var(--mask-left), black 60px, black calc(100% - 60px), var(--mask-right));
	mask-image: linear-gradient(to right, var(--mask-left), black 60px, black calc(100% - 60px), var(--mask-right));
}

.milestone-container {
	position: relative;
	width: 100%;
}

.milestone-nav-btn {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--card-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--item-border);
	box-shadow: var(--card-shadow);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	color: var(--text-main);
}
.milestone-nav-btn:hover { scale: 1.1; box-shadow: var(--card-hover-shadow); color: var(--primary-blue); }
.milestone-nav-btn.prev { left: -22px; }
.milestone-nav-btn.next { right: -22px; }
.milestone-nav-btn.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.milestone-nav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1100px) {
	.milestone-nav-btn.prev { left: 10px; }
	.milestone-nav-btn.next { right: 10px; }
}

@media (max-width: 768px) {
	.milestone-nav-btn { display: none; }
}

.milestone-wrapper::-webkit-scrollbar {
	display: none; /* Chrome/Safari 隐藏滚动条 */
}

.milestone-card {
	flex: 0 0 300px; /* 固定宽度，不收缩 */
	background: var(--card-bg); /* 使用主题变量 */
	border-radius: var(--card-radius);
	padding: 24px;
	box-shadow: var(--card-shadow); /* 使用主题变量 */
	transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
	border-top: 4px solid var(--primary-blue); /* 顶部蓝色边框，保持与其他卡片一致的视觉风格 */
	text-align: justify; /* 卡片内容两端对齐 */
}
/* 修复深色模式下里程碑卡片文字颜色 */
[data-theme='dark'] .milestone-card h3 { color: var(--text-main); }
[data-theme='dark'] .milestone-card p { color: var(--text-sub); }


.milestone-card .date {
	display: flex;
	align-items: center;
	font-weight: bold;
	color: var(--primary-blue);
	margin-bottom: 12px;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.milestone-tag {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 6px;
	font-family: 'Barlow', 'Inter', sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	font-variant: small-caps;
	margin-right: 10px;
	line-height: 1.2;
}
.tag-channel { background: rgba(30, 102, 198, 0.1); color: var(--primary-blue); }
.tag-insync { background: rgba(180, 83, 9, 0.1); color: #b45309; }
.tag-academic { background: rgba(88, 204, 2, 0.1); color: #58cc02; }
.tag-life { background: rgba(107, 114, 128, 0.1); color: var(--text-sub); }
.tag-nation { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.tag-skill { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.tag-achievement { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.tag-community { background: rgba(79, 70, 229, 0.1); color: #4f46e5; }
.tag-anecdote { background: rgba(244, 63, 94, 0.1); color: #f43f5e; }

.milestone-card h3 {
	margin: 0 0 10px 0;
	font-size: 1.25rem;
	color: var(--text-main); /* 使用主题变量 */
}


.milestone-card p {
	color: var(--text-sub); /* 使用主题变量 */
	font-size: 0.95rem;
	line-height: 1.6;
	text-align: justify;
}

/* 针对英文版里程碑文字改为左对齐，并保持卡片等宽 */
html[lang="en-US"] .milestone-card,
html[lang="en-US"] .milestone-card p {
	text-align: left;
}

/* --- 自动深色模式 (跟随浏览器设置) --- */
@media (prefers-color-scheme: dark) { 
	html:not([data-theme='light']) .tag-channel { background: rgba(147, 197, 253, 0.15); }
	html:not([data-theme='light']) .tag-insync { background: rgba(251, 191, 36, 0.15); color: #e9c15c; }
	html:not([data-theme='light']) .tag-academic { background: rgba(88, 204, 2, 0.15); }
	html:not([data-theme='light']) .tag-life { background: rgba(148, 163, 184, 0.15); }
	html:not([data-theme='light']) .tag-nation { background: rgba(248, 113, 113, 0.15); color: #f87171; }
	html:not([data-theme='light']) .tag-skill { background: rgba(192, 132, 252, 0.15); color: #c084fc; }
	html:not([data-theme='light']) .tag-achievement { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
	html:not([data-theme='light']) .tag-community { background: rgba(129, 140, 248, 0.15); color: #818cf8; }
	html:not([data-theme='light']) .tag-anecdote { background: rgba(251, 113, 133, 0.15); color: #fb7185; }
}
[data-theme='dark'] .tag-channel { background: rgba(147, 197, 253, 0.15); }
[data-theme='dark'] .tag-insync { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
[data-theme='dark'] .tag-academic { background: rgba(88, 204, 2, 0.15); }
[data-theme='dark'] .tag-life { background: rgba(148, 163, 184, 0.15); }
[data-theme='dark'] .tag-nation { background: rgba(248, 113, 113, 0.15); color: #f87171; }
[data-theme='dark'] .tag-skill { background: rgba(192, 132, 252, 0.15); color: #c084fc; }
[data-theme='dark'] .tag-achievement { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
[data-theme='dark'] .tag-community { background: rgba(129, 140, 248, 0.15); color: #818cf8; }
[data-theme='dark'] .tag-anecdote { background: rgba(251, 113, 133, 0.15); color: #fb7185; }