/* 百科栏目：站内文章列表卡片 + 文章详情 */

/* 与 models/plans/shops/products/deals/community 栏目一致：页头留 20px 顶距，面包屑位置才对齐 */
.wiki-page { padding-top: 20px; }

/* 面包屑到筛选面板的视觉间距 = 8px 段距 + .sticky-filter 自己的 12px 内边距 = 20px，跟广场页一致 */
#article-list { padding-top: 8px; }

/* ---------- 栏目导航芯片：路径跳转，选中态用 aria-current ---------- */
.cat-chip { color: var(--text-2); }
.cat-chip[aria-current="page"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.cat-chip[aria-current="page"] span.count { color: var(--accent); }
.cat-chip.is-empty { color: var(--text-4); }
.cat-chip.is-empty span.count { color: var(--text-4); }

/* ---------- 文章卡片网格 ---------- */
.article-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.article-card:hover { border-color: var(--accent); background: var(--bg-surface); }

/* 封面：源站没有逐篇封面图，先用站内标识排版封面；有 cover_url 时换成图片 */
.article-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.article-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-plate { display: grid; place-items: center; }
.cover-mark { width: 44px; height: 44px; object-fit: contain; opacity: 0.3; }
.cover-mark--dark { display: none; }
[data-theme="dark"] .cover-mark--light { display: none; }
[data-theme="dark"] .cover-mark--dark { display: block; }
.cover-cat { position: absolute; top: 10px; left: 10px; font-size: 10px; background: var(--bg); }
.cover-date { position: absolute; bottom: 10px; left: 12px; font-size: 15px; font-weight: 700; color: var(--text-3); }

.article-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px 16px;
}
.article-body h3 { font-size: 14px; line-height: 1.5; }

/* 标题拉伸覆盖整卡：卡片即站内文章入口 */
.article-title { color: var(--text); }
.article-title::after { content: ""; position: absolute; inset: 0; }
.article-title:hover { color: var(--accent); }

.article-excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 0;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}

/* 卡片标签：只作文摘分类展示，筛选由栏目与搜索承担 */
.article-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.article-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
}

.article-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-3);
  text-align: center;
}

/* ---------- 文章详情：正文 + 右侧推荐栏 ---------- */
/* 宽度跟全站内容区一致：右侧栏固定 296px，正文吃掉剩下的宽度 */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 24px;
  align-items: start;
}
.doc-col { min-width: 0; }
.doc-head { padding: 20px 0 18px; }
.doc-title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.28; }
.doc-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.doc-lead { max-width: 76ch; margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.doc-summary { margin-top: 18px; grid-template-columns: repeat(3, minmax(88px, auto)); }
.doc-summary dd { font-size: 14px; font-weight: 600; letter-spacing: 0; }

.doc-cover {
  position: relative;
  aspect-ratio: 21 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.doc-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.doc-article { margin-top: 24px; }
/* 正文按可读行宽排版，表格与代码块用满整列 */
.doc-block { max-width: 82ch; }
.doc-p { margin-top: 14px; font-size: 15px; line-height: 1.85; color: var(--text-2); }
.doc-h2 { margin-top: 30px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.doc-h3 { margin-top: 22px; font-size: 16px; font-weight: 700; color: var(--text); }
.doc-block:first-child { margin-top: 0; }
.doc-ul, .doc-ol { margin-top: 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.doc-ul li, .doc-ol li { font-size: 15px; line-height: 1.8; color: var(--text-2); }
.doc-table-scroll { margin-top: 18px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.doc-table-scroll.doc-block { max-width: 100%; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-table th, .doc-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.doc-table thead th { font-size: 11px; letter-spacing: 0.06em; color: var(--text-3); background: var(--bg-surface); }
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table td.num, .doc-table th.num { font-variant-numeric: tabular-nums; }
.doc-pre {
  margin-top: 18px;
  max-width: 100%;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre;
}

/* 编辑器正文（后台 TinyMCE）补充元素：引用块 / 正文链接 / 插图 / 分隔线 */
.doc-quote {
  margin-top: 16px;
  padding: 10px 14px;
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-surface);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.8;
}

.doc-article a.doc-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

.doc-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-top: 16px;
}

.doc-article hr {
  margin-top: 24px;
  border: 0;
  border-top: 1px solid var(--border);
}

/* 站外原文：快讯与调价记录保留来源入口 */
.doc-source {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.doc-source-host { margin-right: auto; color: var(--text-3); font-size: 12px; }
.doc-source .icon { width: 12px; height: 12px; }

.doc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }

/* ---------- 相关阅读 ---------- */
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.related-card:hover { border-color: var(--accent); background: var(--bg-surface); }
.related-card h3 { font-size: 13px; line-height: 1.5; }
.related-card a { color: var(--text); }
.related-card a:hover { color: var(--accent); }
.related-card time { margin-top: auto; color: var(--text-4); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---------- 右侧推荐栏：店铺 / 优惠 / 最新贴子 ---------- */
.doc-rail {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.rail-panel .panel-head { padding: 12px 14px; }
.rail-panel .panel-title { font-size: 13px; }
.rail-panel .panel-head .btn-text { font-size: 11px; }
.rail-list { display: flex; flex-direction: column; margin: 0; padding: 2px 14px 8px; list-style: none; }
.rail-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.rail-list li:last-child { border-bottom: 0; }
.rail-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text);
}
.rail-name:hover { color: var(--accent); }
.rail-name.is-dead { color: var(--text-2); }
.rail-note { margin-left: auto; flex: none; color: var(--text-4); font-size: 11px; font-variant-numeric: tabular-nums; }
.rail-post { display: block; flex: 1; min-width: 0; }
.rail-post .rail-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}
.rail-post:hover .rail-text { color: var(--text); }
.rail-meta { margin-top: 4px; color: var(--text-4); font-size: 11px; font-variant-numeric: tabular-nums; }
.rail-list .icon { width: 10px; height: 10px; margin-left: 3px; vertical-align: 1px; color: var(--text-4); }

/* ---------- 窄屏 ---------- */
@media (max-width: 1200px) {
  .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  /* 收成单列后推荐栏落到正文下面横排三张，不再竖向占一整屏 */
  .doc-rail { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 820px) {
  .article-grid { grid-template-columns: 1fr; }
  .doc-rail { grid-template-columns: 1fr; }
  .doc-summary { grid-template-columns: 1fr; }
  .doc-summary > div { border-left: 0; border-top: 1px solid var(--border); }
  .doc-summary > div:first-child { border-top: 0; }
}
@media (max-width: 560px) {
  .doc-cover { aspect-ratio: 16 / 9; }
  .related-grid { grid-template-columns: 1fr; }
}