/* 新增：隐藏文章的类（用于筛选逻辑） */
.article-item.hide {
  display: none; /* 设置不显示 */
}

/* 1. 页面标题样式（比首页banner更简洁，带古风下划线） */
.articles-header {
  margin: 30px 0 40px; /* 设置上下外边距30px/40px，左右0 */
  text-align: center; /* 设置文本居中对齐 */
  position: relative; /* 设置相对定位 */
  padding-bottom: 15px; /* 设置下内边距为15px */
}
.articles-header::after {
  content: ""; /* 设置伪元素内容为空 */
  position: absolute; /* 设置绝对定位 */
  bottom: 0; /* 距离底部0 */
  left: 50%; /* 距离左侧50% */
  transform: translateX(-50%); /* 通过变换水平居中 */
  width: 80px; /* 设置宽度为80px */
  height: 2px; /* 设置高度为2px */
  background-color: var(--color-cyan-gray-light); /* 设置背景颜色为浅青灰色变量 */
}
.articles-title {
  font-family: "Ma Shan Zheng", "ZCOOL KuaiLe", "Noto Serif SC", serif; /* 设置字体族 */
  font-size: 2.5rem; /* 设置字体大小为2.5rem */
  color: var(--color-cyan-gray); /* 设置字体颜色为青灰色变量 */
  letter-spacing: 3px; /* 设置字间距为3px */
}

/* 2. 分类筛选栏（手风琴重叠风格） */
.filter-bar {
  display: flex; /* 设置为弹性盒子布局 */
  flex-wrap: wrap; /* 设置允许换行 */
  justify-content: center; /* 设置主轴居中对齐 */
  margin-bottom: 40px; /* 增加底部间距 */
  padding: 20px 0; /* 增加内边距 */
  background: transparent; /* 透明背景 */
  border: none; /* 去除边框 */
  box-shadow: none; /* 去除阴影 */
  overflow: visible; /* 允许放大溢出 */
}
.filter-btn {
  position: relative; /* 相对定位 */
  margin-right: -15px; /* 核心：负边距造成重叠 */
  padding: 10px 30px; /* 增加内边距 */
  background-color: var(--color-rice-white-dark); /* 必须有背景色遮挡 */
  border: 1px solid var(--color-border); /* 边框 */
  box-shadow: -4px 0 8px rgba(0,0,0,0.1); /* 左侧阴影，体现层叠感 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 弹性过渡 */
  z-index: 1; /* 默认层级 */
  border-radius: 8px; /* 圆角 */
  color: var(--color-text-light); /* 默认文字颜色 */
  font-family: "Noto Serif SC", serif; /* 字体 */
  font-size: 1rem; /* 字体大小 */
  cursor: pointer; /* 手型光标 */
}
/* 按钮悬停与激活效果 */
.filter-btn:hover,
.filter-btn.active {
  margin-right: 10px; /* 展开间距 */
  margin-left: 10px; /* 左右都推开一点 */
  z-index: 10; /* 浮起 */
  transform: translateY(-5px) scale(1.1); /* 放大 */
  background-color: var(--color-cyan-gray); /* 激活背景色 */
  color: var(--color-rice-white); /* 激活文字色 */
  box-shadow: 0 10px 20px rgba(74, 111, 124, 0.3); /* 激活阴影 */
  border-color: var(--color-cyan-gray); /* 激活边框色 */
}
.filter-btn:focus {
  outline: none; /* 去除轮廓 */
}

/* 移动端适配：取消手风琴效果，避免布局错乱 */
@media (max-width: 768px) {
  .filter-btn {
    margin: 5px; /* 统一间距，取消负边距 */
  }
  .filter-btn:hover,
  .filter-btn.active {
    margin: 5px; /* 保持间距不变，防止挤压 */
    transform: scale(1.05); /* 仅轻微放大，不位移 */
  }
}

/* 3. 文章列表卡片（比首页更紧凑，优化间距） */
.articles-list {
  margin-bottom: 40px; /* 设置下外边距为40px */
}
.article-item {
  background-color: var(--color-rice-white-dark); /* 设置背景颜色为深米白色变量 */
  border: 1px solid var(--color-border); /* 设置1像素实线边框，颜色使用边框变量 */
  border-radius: 4px; /* 设置边框圆角为4px */
  padding: 20px; /* 设置内边距为20px */
  margin-bottom: 20px; /* 设置下外边距为20px */
  box-shadow: var(--shadow); /* 设置阴影效果，使用阴影变量 */
  transition: all 0.3s ease; /* 设置所有属性的过渡效果 */
  display: flex; /* 设置为弹性盒子布局 */
  flex-direction: column; /* 设置主轴方向为垂直方向 */
}
.article-item:hover {
  transform: translateY(-3px); /* 设置悬停时向上移动3px */
  box-shadow: 0 6px 12px rgba(74, 111, 124, 0.15); /* 设置悬停时阴影加深 */
  border-color: var(--color-cyan-gray-light); /* 设置悬停时边框颜色 */
}
/* 文章标签（列表页单独显示在顶部） */
.article-tags {
  margin-bottom: 10px; /* 设置下外边距为10px */
}
.article-item-title {
  font-family: "Ma Shan Zheng", "Noto Serif SC", serif; /* 设置字体族 */
  font-size: 1.5rem; /* 设置字体大小为1.5rem */
  color: var(--color-cyan-gray); /* 设置字体颜色为青灰色变量 */
  margin-bottom: 12px; /* 设置下外边距为12px */
  transition: all 0.3s ease; /* 设置颜色过渡效果 */
}
.article-item-title:hover {
  color: var(--color-cyan-gray-light); /* 设置悬停时颜色为浅青灰色变量 */
  text-decoration: none; /* 去除下划线 */
}
.article-item-meta {
  color: var(--color-text-light); /* 设置字体颜色为浅色文本变量 */
  font-size: 0.9rem; /* 设置字体大小为0.9rem */
  margin-bottom: 12px; /* 设置下外边距为12px */
  display: flex; /* 设置为弹性盒子布局 */
  gap: 15px; /* 设置元信息间距为15px */
}
.article-item-excerpt {
  color: var(--color-text-dark); /* 设置字体颜色为深色文本变量 */
  margin-bottom: 15px; /* 设置下外边距为15px */
  display: -webkit-box; /* 设置为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 4; /* 列表页显示4行摘要 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  overflow: hidden; /* 设置溢出隐藏 */
  flex: 1; /* 让摘要占满中间空间，按钮靠底 */
}
/* 阅读全文按钮（列表页专属样式） */
.read-more-btn {
  align-self: flex-start; /* 设置按钮靠左对齐 */
  background-color: transparent; /* 设置背景颜色透明 */
  border: 1px solid var(--color-cyan-gray-light); /* 设置1像素实线边框，颜色为浅青灰色变量 */
  color: var(--color-cyan-gray); /* 设置字体颜色为青灰色变量 */
  padding: 4px 16px; /* 设置内边距：上下4px，左右16px */
  border-radius: 20px; /* 设置边框圆角为20px */
  font-size: 0.95rem; /* 设置字体大小为0.95rem */
  transition: all 0.3s ease; /* 设置所有属性的过渡效果 */
}
.read-more-btn:hover {
  background-color: var(--color-cyan-gray); /* 设置悬停时背景颜色为青灰色变量 */
  color: var(--color-rice-white); /* 设置悬停时字体颜色为米白色变量 */
  border-color: var(--color-cyan-gray); /* 设置悬停时边框颜色为青灰色变量 */
  text-decoration: none; /* 去除下划线 */
}

/* 4. 古风分页样式（完全重写，适配主题） */
.pagination-container {
  display: flex; /* 设置为弹性盒子布局 */
  justify-content: center; /* 设置主轴居中对齐 */
  margin-top: 40px; /* 增加顶部间距 */
  margin-bottom: 20px; /* 增加底部间距 */
}

.pagination {
  display: flex; /* 弹性布局 */
  padding-left: 0; /* 去除默认内边距 */
  list-style: none; /* 去除列表样式 */
  gap: 10px; /* 按钮间距 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 0; /* 去除默认外边距 */
}

.page-item {
  /* 移除 Bootstrap 默认样式干扰 */
}

.page-link {
  position: relative; /* 相对定位 */
  display: block; /* 块级显示 */
  padding: 8px 16px; /* 调整内边距，长方形更适合文字 */
  font-size: 1rem; /* 字体大小 */
  color: var(--color-text-dark); /* 默认文字颜色 */
  background-color: var(--color-rice-white-dark); /* 背景色与卡片一致 */
  border: 1px solid var(--color-border); /* 边框 */
  border-radius: 4px; /* 小圆角，类似书页 */
  text-decoration: none; /* 去除下划线 */
  transition: all 0.3s ease; /* 过渡动画 */
  font-family: "Noto Serif SC", serif; /* 字体 */
}

/* 悬停效果 */
.page-link:hover {
  color: var(--color-cyan-gray); /* 悬停文字颜色 */
  border-color: var(--color-cyan-gray); /* 悬停边框颜色 */
  background-color: rgba(74, 111, 124, 0.05); /* 淡淡的青色背景 */
  transform: translateY(-2px); /* 轻微上浮 */
  box-shadow: 0 4px 8px rgba(74, 111, 124, 0.15); /* 增加阴影 */
  z-index: 2; /* 提高层级 */
}

/* 激活状态（当前页） */
.page-item.active .page-link {
  z-index: 3; /* 最高层级 */
  color: var(--color-rice-white); /* 激活文字颜色 */
  background-color: var(--color-cyan-gray); /* 激活背景色 */
  border-color: var(--color-cyan-gray); /* 激活边框色 */
  box-shadow: 0 4px 8px rgba(74, 111, 124, 0.3); /* 激活阴影 */
}

/* 禁用状态 */
.page-item.disabled .page-link {
  color: var(--color-text-light); /* 禁用文字颜色 */
  pointer-events: none; /* 禁止点击 */
  background-color: rgba(0,0,0,0.02); /* 禁用背景色 */
  border-color: var(--color-border); /* 禁用边框色 */
  opacity: 0.6; /* 透明度 */
}

/* 去除 Bootstrap 默认的 focus 轮廓 */
.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(74, 111, 124, 0.25); /* 自定义聚焦光环 */
}

/* 针对“上一页/下一页”特殊处理 */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
  border-radius: 4px; /* 保持一致 */
  padding: 8px 20px; /* 稍微宽一点 */
  font-weight: bold; /* 加粗 */
}