/* ===== 百科模块（Encyclopedia）公共样式 =====
   配色自适应机制：
   - 视图根节点 .baike 上内联注入 --bk-accent / --bk-accent-dark / --bk-accent-soft，
     取值由 src/themeAccent.js 自动探测当前站点模板的主色（public/themes/<name>.css :root 第一个色值）。
   - 因此本文件不写死品牌色，任何模板下都自动贴合其风格；未探测到时回退 --fw-primary。 */

.baike {
  --bk-accent: var(--fw-primary, #f56d33);
  --bk-accent-dark: var(--fw-primary-dark, #e05a25);
  --bk-accent-soft: #fdf0ea;
  color: var(--fw-dark, #282828);
  padding: 6px 0 34px;
}
.baike a { color: inherit; }

/* ---- 频道头 ---- */
.bk-head { text-align: center; padding: 22px 0 6px; }
.baike .bk-h1 { font-size: 30px; margin: 0 0 8px; color: var(--fw-dark, #282828); }
.bk-intro { margin: 0 auto 16px; max-width: 640px; color: var(--fw-gray, #666); font-size: 15px; }
.bk-search { display: flex; max-width: 520px; margin: 0 auto; border: 1.5px solid var(--bk-accent); border-radius: 24px; overflow: hidden; background: #fff; }
.bk-search input { flex: 1; border: 0; outline: none; padding: 10px 18px; font-size: 15px; background: transparent; color: inherit; }
.bk-search button { border: 0; background: var(--bk-accent); color: #fff; font-size: 20px; padding: 0 20px; cursor: pointer; line-height: 1; }
.bk-search button:hover { background: var(--bk-accent-dark); }

/* ---- 布局：侧栏分类 + 词条区 ---- */
.bk-layout { display: flex; gap: 26px; align-items: flex-start; margin-top: 20px; }
.bk-side { width: 262px; flex: none; background: #fff; border: 1px solid var(--fw-border, #e5e5e5); border-radius: 10px; overflow: hidden; }
.bk-side-hd { background: var(--bk-accent); color: #fff; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.bk-fold { margin-left: auto; flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: rgba(255,255,255,.18); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.bk-fold:hover { background: rgba(255,255,255,.34); }
.bk-cats { padding: 7px 8px; max-height: calc(100vh - 120px); overflow: auto; }
.bk-cat-all { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; margin-bottom: 4px; }
.bk-cat-all:hover, .bk-cat-all.on { background: var(--bk-accent-soft); color: var(--bk-accent-dark); }
.bk-node { margin: 1px 0; }
.bk-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.bk-row:hover { background: var(--bk-accent-soft); }
.bk-tw { flex: none; width: 20px; height: 22px; border: 0; background: transparent; color: var(--fw-gray, #8a8f96); font-size: 11px; line-height: 1; cursor: pointer; padding: 0; transition: transform .15s ease; }
.bk-tw:hover { color: var(--bk-accent-dark); }
.bk-node.bk-open > .bk-row .bk-tw { transform: rotate(90deg); }
.bk-tw-sp { flex: none; width: 20px; }
.bk-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 7px 6px 7px 3px; font-size: 14px; text-decoration: none; }
.bk-ico { flex: none; font-size: 12.5px; opacity: .85; }
.bk-link .bk-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-link:hover .bk-cat-name, .bk-link.on .bk-cat-name { color: var(--bk-accent-dark); }
.bk-link.on { font-weight: 700; }
.bk-cat-n { flex: none; background: var(--bk-accent-soft); color: var(--bk-accent-dark); border-radius: 10px; font-size: 12px; padding: 1px 8px; min-width: 24px; text-align: center; }
.bk-sub { display: none; padding-left: 17px; }
.bk-node.bk-open > .bk-sub { display: block; }

.bk-main { flex: 1; min-width: 0; }
.bk-note { color: var(--fw-gray, #666); margin: 0 0 12px; font-size: 14px; }

/* ---- 词条卡片网格 ---- */
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.bk-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fw-border, #e5e5e5); border-radius: 10px; overflow: hidden; text-decoration: none; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.bk-card:hover { border-color: var(--bk-accent); box-shadow: 0 8px 22px rgba(0,0,0,.08); transform: translateY(-2px); }
.bk-cover { aspect-ratio: 4 / 3; overflow: hidden; background: var(--fw-bg, #f7f7f7); }
.bk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-card-body { padding: 13px 15px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.baike .bk-card-title { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--fw-dark, #282828); }
.bk-card:hover .bk-card-title { color: var(--bk-accent-dark); }
.bk-card-ex { margin: 0; font-size: 13px; color: var(--fw-gray, #666); line-height: 1.55; }
.bk-card-meta { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--fw-gray-2, #7d8289); }
.bk-empty { color: var(--fw-gray, #666); padding: 30px 0; text-align: center; }

/* ---- 分页 ---- */
.bk-pager { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.bk-pg { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--fw-border, #e5e5e5); border-radius: 8px; text-decoration: none; font-size: 14px; color: var(--fw-dark, #282828); background: #fff; }
a.bk-pg:hover { border-color: var(--bk-accent); color: var(--bk-accent-dark); }
.bk-pg.cur { background: var(--bk-accent); border-color: var(--bk-accent); color: #fff; font-weight: 700; }
.bk-pg.off { opacity: .4; cursor: default; }

/* ---- 详情页 ---- */
.bk-crumb { font-size: 13px; color: var(--fw-gray, #666); padding: 14px 0 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bk-crumb a { color: var(--bk-accent-dark); text-decoration: none; }
.bk-crumb a:hover { text-decoration: underline; }
.bk-crumb-sep { color: var(--fw-border, #ccc); }
.bk-crumb-cur { color: var(--fw-gray-2, #7d8289); }
.bk-article { background: #fff; border: 1px solid var(--fw-border, #e5e5e5); border-radius: 10px; padding: 26px 30px; margin-top: 12px; }
.bk-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--fw-gray-2, #7d8289); margin: -4px 0 14px; }
.bk-tag { background: var(--bk-accent-soft); color: var(--bk-accent-dark); border-radius: 12px; padding: 2px 12px; font-weight: 600; }
.bk-hero { margin: 0 0 16px; border-radius: 8px; overflow: hidden; background: var(--fw-bg, #f7f7f7); }
.bk-hero img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.bk-lead { font-size: 15.5px; color: var(--fw-gray, #666); border-left: 3px solid var(--bk-accent); padding: 4px 0 4px 14px; margin: 0 0 18px; }
.bk-body { font-size: 15px; line-height: 1.85; word-break: break-word; }
.bk-body img { max-width: 100%; height: auto; }
.bk-body h1, .bk-body h2, .bk-body h3 { color: var(--fw-dark, #282828); }
.bk-body a { color: var(--bk-accent-dark); }
.bk-body table { border-collapse: collapse; width: 100%; }
.bk-body table td, .bk-body table th { border: 1px solid var(--fw-border, #e5e5e5); padding: 6px 10px; }
.bk-back { margin: 22px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
.bk-back a { color: var(--bk-accent-dark); text-decoration: none; font-size: 14px; }
.bk-back a:hover { text-decoration: underline; }

/* ---- 相关词条 ---- */
.bk-related { margin-top: 26px; }
.baike .bk-rel-title { font-size: 19px; margin: 0 0 12px; }
.bk-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.bk-card.sm .bk-card-title { font-size: 14px; }
.bk-card.sm { padding: 13px 15px; gap: 8px; }

/* ---- 移动端 ---- */
@media (max-width: 860px) {
  .bk-layout { flex-direction: column; }
  .bk-side { width: 100%; }
  .bk-cats { max-height: 46vh; }
  .bk-article { padding: 18px 16px; }
  .baike .bk-h1 { font-size: 24px; }
}