/*
====================================================================
File: articles.css
Purpose: 文章列表页（articles.html）专属样式：现代卡片网格 + 辅助组件
Notes:
- 与 homepage.css 解耦，仅作用于 #articleContainer.articles-modern 和通用辅助组件。
- 若首页也需要通用组件（返回顶部等），可继续一起引用本文件或保留在 homepage.css。
Last Updated: 2025-08-31
====================================================================
*/

/* 现代卡片网格（仅在列表页容器带 .articles-modern 时生效） */
#articleContainer.articles-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px; /* 减小间距，避免容器与 wrapper 双重内边距导致拥挤 */
  padding: 8px 0 48px; /* 去掉左右 5% 内边距，交给外层 wrapper 控制整体留白 */
}

#articleContainer.articles-modern .modern-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

#articleContainer.articles-modern .modern-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

#articleContainer.articles-modern .card-media { position: relative; padding-top: 56%; background: #f6f7f9; }
#articleContainer.articles-modern .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

#articleContainer.articles-modern .card-body { padding: 12px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
#articleContainer.articles-modern .card-body > * { margin: 0; }
#articleContainer.articles-modern .card-title { font-size: 18px; line-height: 1.28; font-weight: 700; color: #222; margin: 0; }
#articleContainer.articles-modern .card-excerpt { font-size: 14px; line-height: 1.6; color: #555; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }

#articleContainer.articles-modern .card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 0; color: #8a8f98; font-size: 12px; }
#articleContainer.articles-modern .card-meta .meta-item { position: relative; padding-left: 0; }

@media (max-width: 1200px) {
  #articleContainer.articles-modern {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
  }
}

@media (max-width: 768px) {
  #articleContainer.articles-modern {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 4px 4px 40px;
  }
  /* 紧凑信息密度（移动端）：缩小图片比例、精简文本与间距 */
  #articleContainer.articles-modern .card-media { padding-top: 62%; }
  #articleContainer.articles-modern .card-title {
    font-size: 15px; line-height: 1.3; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 隐藏摘要，避免文字撑高卡片 */
  #articleContainer.articles-modern .card-excerpt { display: none; }
  /* 移动端减轻阴影，优化滚动流畅度与电量 */
  #articleContainer.articles-modern .modern-card { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
  /* 增大触控目标间距 */
  #articleContainer.articles-modern .card-body { padding: 10px; gap: 4px; }
  /* 仅显示浏览数，隐藏作者与日期 */
  /* 移动端：展示“作者 · 日期 · 浏览”，必要时自动换行 */
  #articleContainer.articles-modern .card-meta {
    font-size: 10px; gap: 0; margin-top: 0;
    white-space: normal; /* 允许换行，避免浏览数被截断 */
    overflow: hidden; text-overflow: ellipsis;
    display: flex; flex-wrap: wrap; row-gap: 2px;
  }
  #articleContainer.articles-modern .card-meta .meta-item { display: inline-flex; }
  #articleContainer.articles-modern .card-meta .meta-item + .meta-item::before {
    content: '·';
    display: inline-block;
    margin: 0 6px;
    opacity: .6;
  }
  /* 确保第 3 项（浏览）显示 */
  #articleContainer.articles-modern .card-meta .meta-item:nth-child(3) { display: inline-flex !important; }
}

/* 大屏手机/横屏（600-768px）：提升为三列显示 */
@media (min-width: 600px) and (max-width: 768px) {
  #articleContainer.articles-modern {
  /* 尽量达到三列：若空间不足则自动降级为两列 */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  padding: 8px 8px 40px;
  }
}

/* 超窄屏降级为单列，避免过窄卡片导致可读性下降 */
@media (max-width: 430px) {
  #articleContainer.articles-modern .card-media { padding-top: 60%; }
  #articleContainer.articles-modern .card-title { font-size: 14px; }
  #articleContainer.articles-modern .card-excerpt { display: none; }
  #articleContainer.articles-modern .card-body { padding: 10px 10px 12px; gap: 4px; }
}

@media (max-width: 330px) {
  #articleContainer.articles-modern {
    grid-template-columns: 1fr;
  gap: 8px;
  padding: 4px 4px 36px;
  }
  #articleContainer.articles-modern .card-title { font-size: 15px; }
}

/* 辅助组件：返回顶部按钮 & 吸底提示（如首页也需要，可保留 homepage.css 的版本或同时引用本文件） */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #a8010f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 999;
  user-select: none;
}
.back-to-top.show { opacity: 1; transform: translateY(0); }
.back-to-top:active { transform: translateY(1px) scale(0.98); }
.back-to-top svg { width: 20px; height: 20px; fill: currentColor; }

.bottom-tip {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translate(-50%, 20px);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 999;
  pointer-events: none;
}
.bottom-tip.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 768px) {
  .back-to-top { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .bottom-tip { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* 动画减少模式兼容 */
@media (prefers-reduced-motion: reduce) {
  .modern-card, .hp-article-card, .back-to-top { transition: none !important; }
}