/* =========================================================
   css/articles.css — 首页文章展示模块（前台）
   复用 style.css 的 :root 变量与组件风格
   ========================================================= */

.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.article-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-2), inset 0 2px 0 0 var(--color-accent);
}
.article-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #0A0A0A, #1A1A1A);
}
.article-card__cover {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--transition-fast);
}
.article-card:hover .article-card__cover { transform: scale(1.05); }
.article-card__cover--ph { background: linear-gradient(135deg, #0A0A0A, #1A1A1A); }
.article-card__tag {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(10,10,11,0.55); color: #fff; backdrop-filter: blur(4px);
}
.article-card__ext {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-on-accent);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.article-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.article-card__title { font-size: 18px; font-weight: 600; color: var(--color-ink); margin: 0 0 var(--space-3); line-height: 1.4; }
.article-card__summary {
  font-size: 14px; color: var(--color-muted); line-height: 1.7; margin: 0 0 var(--space-4);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-card__date { margin-top: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--color-muted-2); }
.article-card--loading { padding: var(--space-5); color: var(--color-muted); }

/* 文章详情 modal */
.article-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.article-modal.open { display: block; }
.article-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.article-modal__panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(720px, 92vw); max-height: 86vh; overflow-y: auto;
  background: var(--color-paper); border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg); padding: var(--space-8); color: var(--color-ink);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.article-modal__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--color-line-strong); background: var(--color-bg-2);
  color: var(--color-ink); font-size: 20px; line-height: 1; cursor: pointer;
}
.article-modal__tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); }
.article-modal__title { font-size: var(--fs-h2); margin: 0 0 var(--space-3); line-height: 1.3; }
.article-modal__date { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted-2); margin-bottom: var(--space-5); }
.article-modal__cover { width: 100%; border-radius: var(--radius-md); margin-bottom: var(--space-5); display: block; }
.article-modal__content { font-size: 15px; line-height: 1.9; color: var(--color-ink); }
.article-modal__content p { margin: 0 0 var(--space-4); }
/* 正文内插图（图文混排） */
.article-modal__fig { margin: 0 0 var(--space-5); }
.article-modal__fig img { width: 100%; border-radius: var(--radius-md); display: block; background: var(--color-paper-dim); }
.article-modal__fig figcaption { margin-top: var(--space-2); font-size: 13px; color: var(--color-muted); text-align: center; line-height: 1.6; }
.article-modal__foot { margin-top: var(--space-6); }

@media (max-width: 767px) {
  .article-modal__panel { padding: var(--space-6); }
}