/* ===============================================================
   EasyNotes — 博客样式 (blog.css)
   列表页对齐 Figma 3623:5185，文章页对齐 3623:6004
   =============================================================== */

body {
  background: var(--color-white);
}

/* Blog 列表/文章页顶部为白底，滚动后的导航玻璃底同样改用中性白 */
body.sec-blog {
  --nav-scrolled-bg: rgba(255, 255, 255, 0.85);
  --nav-solid-bg: #FFFFFF;
}

.page {
  padding-top: var(--nav-h);
}

/* ===============================================================
   列表页
   =============================================================== */
.blog-page {
  padding-bottom: 72px;
}

.blog-shell {
  max-width: 1160px;
  padding-top: 36px;
}

/* ---------- 分类药丸 ---------- */
.blog-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* 分类按钮是 JS 渲染的，先占住一行高度，数据回来时列表不会整块往下跳 */
  min-height: 35px;
  margin-bottom: 28px;
}

.pill-btn {
  padding: 8px 18px;
  font-family: inherit;
  font-size: var(--fs-sm);   /* buglist 第 39/60 条：标签 14 */
  font-weight: 500;
  color: var(--color-slate);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  line-height: normal;       /* 药丸现在是 <a>，行高对齐原 <button> 默认值 */
  text-decoration: none;
  cursor: pointer;
  /* buglist 8/31 第 7 条：切换分类时色块溢出圆角。原来是 transition: all，
     border-radius 也在过渡清单里，切换瞬间背景会按未插值完的方角重绘，
     露出一圈方形色块。只过渡真正要变的三个属性即可。 */
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.pill-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pill-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ---------- 列表 + 侧栏 ---------- */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.blog-card-cover {
  display: block;
  background: var(--color-primary-light);
}

.blog-card-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-card-body {
  padding: 16px 18px 20px;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.cat-tag {
  padding: 3px 10px;
  font-size: var(--fs-sm);   /* buglist 第 39/60 条：标签 14 */
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
}

.read-time {
  font-size: var(--fs-sm);   /* buglist 第 39/60 条：阅读时间 14 */
  color: var(--color-mute);
}

.card-soon {
  padding: 3px 8px;
  font-size: var(--fs-11);
  font-weight: 500;
  color: #9A6B18;
  background: #FFF3D6;
  border-radius: var(--radius-full);
}

.blog-card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-navy);
  margin-bottom: 8px;
}

.blog-card h2 a:hover {
  color: var(--color-primary);
}

.blog-card p {
  font-size: var(--fs-body);   /* buglist 第 39/60 条：正文 16 */
  line-height: 1.6;
  color: var(--color-slate);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-empty,
.blog-error {
  padding: 40px 0;
  text-align: center;
  color: var(--color-mute);
}

/* ---------- 侧栏热门 ---------- */
.trending-card {
  padding: 20px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: sticky;
  top: 96px;
}

.trending-card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-md);   /* buglist 第 39 条：trending 18 */
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 14px;
}

.trending-list li {
  display: flex;
  gap: 10px;
  padding: 12px 0;
}

.trending-list li + li {
  border-top: 1px solid var(--color-border);
}

.rank {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: var(--fs-sm);   /* buglist 第 61 条：左侧数字 14 */
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 5px;
}

.trending-list a {
  display: block;
  font-size: var(--fs-body);   /* buglist 第 39/61 条：条目标题 16 */
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.trending-list a:hover {
  color: var(--color-primary);
}

.trend-meta {
  font-size: var(--fs-sm);   /* buglist 第 39/61 条：分钟/阅读时间 14 */
  color: var(--color-mute);
}

/* ---------- 分页 ---------- */
.blog-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 36px;
}

.pg {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  white-space: nowrap;
  font-family: inherit;
  font-size: var(--fs-14);
  color: var(--color-slate);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pg:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pg.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.pg:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 箭头与文字之间用 gap，不用字面空格——窄屏文字隐藏后不会残留半个空格 */
.pg-prev, .pg-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pg-gap {
  padding: 0 4px;
  color: var(--color-mute);
}

/* 第 81 条：窄屏排不下 ‹Previous 1..5 Next›（约需 356px，iPhone 内容区只有 327），
   两枚按钮各自折行且方向相反。手机端只留箭头，文字改为仅读屏可见——
   保住 i18n 与语义，不用另配 aria-label。 */
@media (max-width: 768px) {
  .pg-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pg-prev, .pg-next { padding: 0; }

  /* buglist 8/31 第 11 条：分类按钮不换行，放不下就横向滑动。
     负外边距 + 同值内边距把滑动区拉到 .container 的左右边缘，
     这样滚到两端时按钮与页面留白对齐，中间态也不会被切掉半个按钮。 */
  .blog-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -24px;                  /* = .container 的左右内边距 */
    padding-inline: 24px;
    scrollbar-width: none;                 /* Firefox：滑动条会顶掉一行高度 */
    -webkit-overflow-scrolling: touch;
  }

  .blog-pills::-webkit-scrollbar { display: none; }

  .pill-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* ===============================================================
   文章页
   =============================================================== */
.article-page {
  padding-bottom: 72px;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) 220px;
  gap: 48px;
  justify-content: center;
  max-width: 1080px;
  padding-top: 28px;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-15);             /* buglist 第 41 条 */
  color: var(--color-mute);
  margin-bottom: 16px;
  /* buglist 第 49 条：一行展示，超出部分横向滑动，不换行 */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.crumbs::-webkit-scrollbar { display: none; }

.crumbs > * {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 末项是长标题，允许它被压缩并省略，避免整条一直可滑 */
.crumbs .crumb-current {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumbs a {
  color: var(--color-primary);
}

.crumbs a:hover {
  text-decoration: underline;
}

.crumb-current {
  color: var(--color-navy);
}

.article-title {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-navy);
  margin-bottom: 18px;
}

.article-byline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);   /* buglist 第 41/51 条：标题下方内容 14 */
  color: var(--color-slate);
  margin-bottom: 8px;
}

.article-byline img {
  border-radius: 7px;
}

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-sm);   /* buglist 第 41/51 条 */
  color: var(--color-mute);
  margin-bottom: 18px;
}

.article-share {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  font-size: var(--fs-sm);   /* buglist 第 41/51 条 */
  font-weight: 600;
  color: var(--color-navy);
}

.article-share a,
.article-share button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--color-navy);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.article-share a:hover,
.article-share button:hover {
  color: var(--color-primary);
}

.article-share svg {
  width: 15px;
  height: 15px;
}

.copy-link {
  position: relative;
}

.copy-link.copied {
  color: #2CB67D;
}

/* 复制成功的气泡提示 */
.copy-link.copied::after {
  content: "Copied!";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--color-navy);
  color: #FFFFFF;
  font-size: var(--fs-11);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

.article-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 26px;
}

/* ---------- 正文排版 ---------- */
.article-body {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--color-slate);
}

/* buglist 第 44/55 条：正文里无论表格、清单还是提示框，字号一律与正文一致 */
.article-body table,
.article-body .starter-list,
.article-body .callout {
  font-size: inherit;
}

.article-body > * + * {
  margin-top: 16px;
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--color-navy);
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.article-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--color-navy);
  margin-top: 22px;
}

.article-body ol,
.article-body ul {
  padding-left: 24px;
}

.article-body ol { list-style: decimal; }
.article-body ul { list-style: disc; }

.article-body li + li {
  margin-top: 10px;
}

.article-body strong {
  color: var(--color-navy);
}

/* buglist 第 42 条：链接靠颜色区分即可，不额外加粗 */
.article-body a {
  color: var(--color-primary);
  overflow-wrap: anywhere;
}

.article-body a:hover {
  text-decoration: underline;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
}

.article-body thead th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  border-bottom: 2px solid var(--color-primary);
}

.article-body tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

/* buglist 第 42 条：表格首列原来整列强制加粗，稿件里并没有强调它 */
.article-body tbody td:first-child {
  color: var(--color-navy);
  white-space: nowrap;
}

.article-body .starter-list {
  list-style: none;
  padding-left: 12px;
}

.article-body .callout {
  padding: 14px 18px;
  background: #F5FAFF;
  border: 1px solid var(--color-primary-pale);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

/* buglist 第 43 条：正文里的引用编号 [1] 原本是 <sup> 上标，吊在文字右上角。
   改为与正文基线齐平、同字号的行内标记（对齐 GoFasting 的做法）。 */
.article-body sup.fn {
  vertical-align: baseline;
  font-size: inherit;
  line-height: inherit;
  /* 第 42 条：编号原来紧贴前一个词（Dairy[1]），补一个词间距。
     用 margin 而不是在正文里插空格，33 篇已生成文章和生成器都不用动。 */
  margin-left: 0.25em;
}

.article-body sup.fn a {
  font-weight: 600;
  color: var(--color-primary);
}

.article-pending {
  padding: 28px;
  text-align: center;
  color: var(--color-mute);
  background: var(--color-cream);
  border-radius: var(--radius-md);
}

.article-missing {
  padding: 80px 0;
  text-align: center;
}

.article-missing h1 {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  color: var(--color-navy);
  margin-bottom: 12px;
}

.article-missing p {
  color: var(--color-slate);
  margin-bottom: 22px;
}

/* ---------- 目录 ---------- */
.toc-card {
  position: sticky;
  top: 96px;
  padding: 16px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.toc-card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-body);   /* buglist 第 41/53 条：目录 16 */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  margin-bottom: 10px;
}

.toc-list li + li {
  margin-top: 8px;
}

.toc-list a {
  display: flex;
  gap: 8px;
  font-size: var(--fs-body);   /* buglist 第 41/53 条：目录 16 */
  line-height: 1.5;
  color: var(--color-slate);
}

.toc-list a:hover {
  color: var(--color-primary);
}

.toc-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 4px;
}

/* ===============================================================
   响应式
   =============================================================== */
@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 1fr; }

  .trending-card { position: static; }

  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }

  .article-aside { display: none; }
}

@media (max-width: 768px) {

  .blog-shell { padding-top: 24px; }

  .blog-grid { grid-template-columns: 1fr; }

  .article-title { font-size: var(--fs-28); }

  .article-body h2 { font-size: var(--fs-18); }

  /* 表格在窄屏内部横向滚动，页面本身不出现横向滚动条 */
  .article-body table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* 正文已就绪但尚未经文案确认的草稿 */
.card-draft {
  padding: 3px 8px;
  font-size: var(--fs-11);
  font-weight: 500;
  color: #8A5A00;
  background: #FFE9A8;
  border-radius: var(--radius-full);
}

/* ---------- 预渲染文章页补充排版 ---------- */
.article-body .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-body .checklist {
  list-style: none;
  padding-left: 4px;
}

.article-body .checklist li {
  position: relative;
  padding-left: 26px;
}

/* 用方框模拟稿件里的 "- [ ]" 勾选项 */
.article-body .checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-primary-pale);
  border-radius: 3px;
}

/* ===============================================================
   文章页 FAQ —— buglist 第 45/46/56/57 条
   字号统一 16；桌面端默认全部展开、不显示折叠箭头；
   手机端保持折叠，点击展开；问题标题一律左对齐。
   =============================================================== */
.article-body .faq-qa + .faq-qa {
  margin-top: 18px;
}

.article-body .faq-qa h3 {
  margin-top: 0;
  margin-bottom: 6px;
}

.article-body .faq-qa .faq-question {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* 第 57 条：左对齐，不居中 */
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: var(--fs-body);     /* 第 45/56 条：标题 16 */
  font-weight: 700;
  text-align: left;
  color: var(--color-navy);
  background: none;
  border: none;
}

.article-body .faq-qa .faq-question > span { flex: 1; }

.article-body .faq-qa .faq-answer p {
  font-size: var(--fs-body);     /* 第 45/56 条：正文 16 */
  line-height: 1.8;
  color: var(--color-slate);
}

/* 桌面：全展开、无箭头、不可点（第 46 条） */
@media (min-width: 769px) {
  .article-body .faq-qa .faq-chevron { display: none; }

  .article-body .faq-qa .faq-question {
    cursor: default;
    pointer-events: none;
  }

  /* 覆盖 JS 写在行内的 max-height:0，保证始终展开 */
  .article-body .faq-qa .faq-answer {
    max-height: none !important;
    overflow: visible;
  }

  .article-body .faq-qa .faq-answer p { padding-bottom: 6px; }
}

/* 手机：保持折叠交互（第 56 条） */
@media (max-width: 768px) {
  /* 第 55 条：问题之间（含 FAQ 标题下第一条）的横线全部去掉。
     原来靠边框分隔才把间距压成 0，线没了就得把留白还回来。 */
  .article-body .faq-qa + .faq-qa { margin-top: 14px; }

  .article-body .faq-qa .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
  }

  .article-body .faq-qa .faq-answer p { padding-bottom: 14px; }
}

.article-body code {
  padding: 1px 5px;
  font-size: 0.9em;
  background: var(--color-cream);
  border-radius: 4px;
}

/* 目录跟随高亮 */
.toc-list a.active {
  color: var(--color-primary);
  font-weight: 600;
}

.toc-list a.active .toc-num {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---------- 返回顶部 ---------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-base);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

/* ---------- 目录：桌面侧栏 / 移动端折叠 ---------- */
.toc-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-body);   /* buglist 第 53 条：目录 16 */
  font-weight: 700;
  color: var(--color-navy);
  background: none;
  border: none;
  cursor: pointer;
}

.toc-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.toc-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (max-width: 1024px) {
  /* 侧栏在窄屏不再隐藏，改为正文上方的折叠条 */
  .article-aside { display: block; }

  .toc-card {
    position: static;
    margin: 0 0 24px;
  }

  .toc-title { display: none; }
  .toc-toggle { display: flex; }

  .toc-list {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
  }

  .toc-card.open .toc-list { display: block; }
}

@media (max-width: 768px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 38px;
    height: 38px;
  }
}

/* 正文配图。buglist 第 48 条：整宽铺开视觉面积太大，收到正文宽度的 72% 并居中。 */
.article-figure {
  margin: 26px auto;
  max-width: 72%;
}

.article-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.article-figure figcaption {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--color-mute);
  text-align: center;
}

@media (max-width: 768px) {
  /* 窄屏本来就不宽，再收就看不清了 */
  .article-figure { max-width: 100%; }
}

/* ===============================================================
   References —— buglist 第 47/58 条
   与 Conclusion 同层级（h2 的字号/字重/上边框），条目与标题之间的
   间距也对齐 h2 与正文的间距，不要挤在一起。
   =============================================================== */
.article-body .references {
  margin-top: 36px;
}

.article-body .references > h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-size: var(--fs-20);          /* 同 .article-body h2 */
  font-weight: 700;
  color: var(--color-navy);
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

/* 只有三角、没有文案的折叠开关，挂在标题行右端 */
.references-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--color-navy);
  background: none;
  border: none;
  cursor: pointer;
}

.references-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-base);
}

/* 展开时朝下、收起时朝上 */
.references-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }

.article-body .references ol { display: none; }
.article-body .references.open ol { display: block; }

.article-body .references ol {
  margin-top: 16px;            /* 同 .article-body > * + * 的段距 */
  padding-left: 24px;
  list-style: decimal;
}

.article-body .references li + li {
  margin-top: 10px;
}

/* 引用条目本身可以比正文小半档，但标题与间距按 h2 规格（上面已设） */
.article-body .references li {
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ===============================================================
   全部文章索引 —— 不依赖 JS 的固定入口（分页是纯前端状态）
   =============================================================== */
.archive {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border, #E6E8EC);
}

.archive h2 {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 16px;
}

.archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 32px;
}

.archive-list li {
  break-inside: avoid;
  margin-bottom: 9px;
}

.archive-list a {
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--color-slate);
  text-decoration: none;
}

.archive-list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .archive-list { columns: 1; }
}

/* ---------- 文章内产品卡（build_blog.insert_article_promo） ---------- */
.article-promo {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 32px 0;
  padding: 20px 22px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
}

.article-promo-icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.article-promo-body {
  flex: 1;
  min-width: 0;
}

.article-promo-body strong {
  display: block;
  font-size: var(--fs-18);
  line-height: 1.3;
  color: var(--color-heading);
}

.article-promo-body p {
  margin: 4px 0 0;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--color-slate);
}

.article-promo .store-badges {
  display: flex;
  flex: none;
  gap: 10px;
}

.article-promo .store-badge {
  --badge-width: 132px;
}

/* ---------- 相关文章（build_blog.related_articles_html） ---------- */
.article-related {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.article-related h2 {
  margin-bottom: 18px;
  font-size: var(--fs-24);
  color: var(--color-heading);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.related-card {
  display: block;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.related-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

.related-card h3 {
  margin: 10px 0 8px;
  font-size: var(--fs-16);
  line-height: 1.4;
  color: var(--color-heading);
}

@media (max-width: 768px) {
  .article-promo {
    flex-direction: column;
    align-items: flex-start;
  }

  .article-promo .store-badges {
    width: 100%;
  }

  .article-promo .store-badge {
    --badge-width: 140px;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }
}