/* 博客列表页与文章页专属样式,颜色字体一律取 :root 设计令牌 */

/* ---------- 列表页:分类筛选 ---------- */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2rem;
}

.blog-filter-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--moon-dim);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.6em 1.1em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.blog-filter-btn:hover {
  border-color: var(--moon-line-strong, rgba(234, 230, 216, 0.42));
  color: var(--moon);
}

.blog-filter-btn.on {
  background: var(--cinnabar-wash);
  border-color: var(--cinnabar);
  color: var(--moon);
}

.blog-empty {
  color: var(--moon-dim);
  font-size: 0.9375rem;
  margin: 2rem 0 0;
}

/* ---------- 文章卡片(列表页与延伸阅读共用) ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gutter);
}

.post-card {
  background: var(--silk-panel);
  border: 1px solid var(--line);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  transition: border-color 0.15s ease;
}

.post-card:hover {
  border-color: var(--moon-line-strong, rgba(234, 230, 216, 0.42));
}

.post-meta {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.post-meta time {
  color: var(--moon-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.post-tag {
  background: var(--cinnabar-wash);
  border: 1px solid var(--cinnabar);
  border-radius: 0;
  color: var(--cinnabar);
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.3em 0.6em;
}

.post-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.55;
  margin: 0 0 0.625rem;
}

.post-title a {
  color: var(--moon);
  text-decoration: none;
}

.post-title a:hover {
  color: var(--gold);
}

.post-sum {
  color: var(--moon-dim);
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.8;
  margin: 0 0 1.125rem;
}

.post-more {
  align-self: flex-start;
  color: var(--moon);
  font-size: 0.875rem;
  text-decoration: none;
  border-bottom: 1px solid var(--cinnabar);
  padding-bottom: 2px;
}

.post-more::after {
  content: " →";
  color: var(--cinnabar);
}

.post-more:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------- 文章页:面包屑(与页头之间留呼吸空间) ---------- */
.crumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  font-size: 0.8125rem;
}

.crumb a {
  color: var(--moon-dim);
  text-decoration: none;
}

.crumb a:hover {
  color: var(--moon);
}

.crumb .sep {
  color: var(--line);
}

.crumb [aria-current] {
  color: var(--moon);
}

/* ---------- 文章页:页头元信息 ---------- */
.post-head-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.post-head-meta time,
.post-head-meta .post-read {
  color: var(--moon-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* ---------- 文章页:正文排版补充(基础排版由 .prose 承担) ---------- */
.post-body {
  margin-top: 2.5rem;
}

.post-body .prose {
  max-width: 46rem;
}

/* ---------- 文章页:文末下载引导卡 ---------- */
.dl-cta {
  background: var(--silk-panel);
  border: 1px solid var(--line);
  border-radius: 0;
  margin-top: 3rem;
  padding: 1.75rem;
  position: relative;
}

.dl-cta-main {
  max-width: 40rem;
}

.dl-cta-title {
  color: var(--moon);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}

.dl-cta-desc {
  color: var(--moon-dim);
  font-size: 0.9375rem;
  line-height: 1.8;
  margin: 0;
}

.dl-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* ---------- 文章页:延伸阅读 ---------- */
#related-posts {
  margin-top: 3.5rem;
}

.related-title {
  color: var(--moon);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 1.5rem;
  padding-left: 0.875rem;
  border-left: 3px solid var(--cinnabar);
}

.related-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---------- 文章页:上一篇 / 下一篇 ---------- */
#post-nav {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr 1fr;
  margin-top: 3rem;
}

#post-nav:empty {
  display: none;
}

.post-nav-card {
  background: var(--silk-panel);
  border: 1px solid var(--line);
  border-radius: 0;
  display: block;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.post-nav-card:hover {
  border-color: var(--moon-line-strong, rgba(234, 230, 216, 0.42));
}

.post-nav-next {
  text-align: right;
}

.post-nav-dir {
  color: var(--cinnabar);
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
}

.post-nav-name {
  color: var(--moon);
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.post-nav-card:hover .post-nav-name {
  color: var(--gold);
}

@media (max-width: 640px) {
  #post-nav {
    grid-template-columns: 1fr;
  }

  .post-nav-next {
    text-align: left;
  }
}