/* ==================================
   归档页 (Archives) 修复版
   ================================== */

/* 1. 整体容器调整 */
.article-sort {
  padding-left: 20px;
  border-left: 2px solid #a4d8fa; /* 轴线颜色 */
  margin-left: 10px;
}

/* ==================================
   A. 这里是【年份】的样式 (2023, 2022...)
   ================================== */
.article-sort-item.year {
  background: transparent !important; /* 强制背景透明 */
  border: none !important;            /* 去掉边框 */
  box-shadow: none !important;        /* 去掉阴影 */
  padding: 0 0 20px 10px !important;  /* 调整间距 */
  margin: 0 !important;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  pointer-events: none; /* 让年份不可点击，防止鼠标悬停特效 */
}

/* 年份左侧的圆点 (大号) */
.article-sort-item.year::before {
  content: '';
  position: absolute;
  left: calc(-20px - 7px); /* 调整圆点对齐轴线 */
  top: 20px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #e97510; /* 蓝色大圆点 */
  z-index: 1;
}

/* 年份悬停不产生位移 */
.article-sort-item.year:hover {
  transform: none !important;
  background: transparent !important;
}

/* ==================================
   B. 这里是【文章卡片】的样式
   注意：使用了 :not(.year) 排除掉年份
   ================================== */
.article-sort-item:not(.year) {
  position: relative;
  margin: 0 0 15px 15px; /* 卡片间距 */
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eef2f5;
  box-shadow: 0 4px 8px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-decoration: none !important; /* 去掉链接下划线 */
}

/* 文章卡片悬停特效 */
.article-sort-item:not(.year):hover {
  transform: translateX(10px); /* 向右移动 */
  box-shadow: 0 8px 16px rgba(73, 177, 245, 0.2);
  border-color: #49b1f5;
  background: #f8fdff;
}

/* 文章左侧的小圆点 */
.article-sort-item:not(.year)::before {
  content: '';
  position: absolute;
  left: -23px; /* 对齐轴线 */
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #90caf9; /* 浅蓝色小圆点 */
  z-index: 1;
  transition: all 0.3s;
}

/* 悬停文章时，左侧圆点变色 */
.article-sort-item:not(.year):hover::before {
  background: #49b1f5;
  border-color: #49b1f5;
  width: 14px;
  height: 14px;
  left: -25px; /* 修正变大后的位置 */
  box-shadow: 0 0 8px #49b1f5;
}

/* 文章标题样式 */
.article-sort-item-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  transition: color 0.3s;
  
  /* 标题过长省略 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-sort-item:not(.year):hover .article-sort-item-title {
  color: #49b1f5;
}

/* 时间文字 */
.article-sort-item-time {
  color: #888;
  font-size: 0.85em;
}

/* 文章缩略图 (如果有) */
.article-sort-item-img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 15px;
  flex-shrink: 0;
  border: 1px solid #eee;
}
.article-sort-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.article-sort-item:not(.year):hover .article-sort-item-img img {
  transform: scale(1.2);
}

/* ==================================
   C. 深色模式适配
   ================================== */
[data-theme="dark"] .article-sort-item.year {
  color: #eee;
}

[data-theme="dark"] .article-sort-item:not(.year) {
  background: #2d2d2d;
  border-color: #444;
}

[data-theme="dark"] .article-sort-item:not(.year):hover {
  background: #383838;
  border-color: #49b1f5;
}

[data-theme="dark"] .article-sort-item-title {
  color: #ddd;
}
[data-theme="dark"] .article-sort-item:not(.year):hover .article-sort-item-title {
  color: #49b1f5;
}
[data-theme="dark"] .article-sort {
  border-left-color: #444;
}