/* ---------- 「最新」稳定入口（URL 永久不变，老页面无需改动） ---------- */
.hub-newest {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.hub-newest a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.hub-newest a:hover { background: #D25123; }
.hub-newest span { font-size: 11px; color: #a1a1aa; }

/* ---------- 面包屑：与详情页完全一致（build_page.py 内联的那 5 条） ---------- */
.cp-crumb { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: #6b7280; }
.cp-crumb a { color: #6b7280; text-decoration: none; border-bottom: 1px solid transparent; }
.cp-crumb a:hover { color: #D25123; border-bottom-color: #D25123; }
.cp-crumb .sep { margin: 0 6px; color: #d1d5db; }
.cp-crumb [aria-current] { color: #111827; font-weight: 600; }

/* 目录页专用样式（2026-09-16）
   只被 /category-pages/ 目录页引用；详情页资产（category.css/js）不受影响。
   卡片视觉取自参考模板 Fabulk-分类导航滑块模板/src/styles.css（双图错位叠放）。 */

.hub-wrap {
  --hub-surface: #f5f5f9;
  --hub-ink: #000;
  --hub-ink-muted: #71717a;
  --hub-line: #ececf1;
  --hub-radius-card: 8px;
  --hub-radius-img: 6px;
}

/* ---------- 栅格：4 列 × 10 行 = 40 个/页 ---------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 8px;
}
@media (max-width: 1199px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hub-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- 分类卡（复刻参考模板） ---------- */
.hub-card {
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  overflow: hidden;
  border-radius: var(--hub-radius-card);
  color: var(--hub-ink);
  background: var(--hub-surface);
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.hub-card:hover { background: #efeff4; transform: translateY(-1px); }
.hub-card:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

.hub-card__stack {
  width: 108px;
  height: 78px;
  position: relative;
  flex: 0 0 108px;
}
.hub-card__stack img {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--hub-radius-img);
  transition: transform 420ms cubic-bezier(0.2, 1, 0.3, 1);
}
.hub-card__img--front { z-index: 2; left: 0; bottom: 0; width: 78px; height: 78px; background: #fff; }
.hub-card__img--back  { z-index: 1; top: 8px; right: 0; width: 62px; height: 62px; }
.hub-card:hover .hub-card__img--front { transform: rotate(-3deg) scale(1.06); }
.hub-card:hover .hub-card__img--back  { transform: translate(2px, 2px) scale(1.04); }

.hub-card__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hub-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------- 分页条：复用详情页样式（category.css 的 .pagination / .page-button） ---------- */
.pagination-gap {
  min-width: 22px;
  text-align: center;
  color: #9a9a9a;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- FAQ（8 条，折叠可展开；内容在 DOM 内可被索引） ---------- */
.hub-faq { margin: 40px 0 0; }
.hub-faq > h2 { font-size: 18px; font-weight: 700; margin: 0 0 14px; color: #111; }
.hub-faq__list {
  border: 1px solid var(--hub-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.hub-faq__item + .hub-faq__item { border-top: 1px solid var(--hub-line); }
.hub-faq__item > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hub-faq__item > summary::-webkit-details-marker { display: none; }
.hub-faq__item > summary:hover { background: #fafafa; }
.hub-faq__item > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1;
  color: #9a9a9a;
}
.hub-faq__item[open] > summary::after { content: "\2212"; }
.hub-faq__q {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #111;
}
.hub-faq__a { padding: 0 18px 16px; font-size: 13px; line-height: 1.75; color: #52525b; }
.hub-faq__a p { margin: 0; }

/* ---------- 折叠：完整链接索引（给机器读，DOM 内真实 <a>） ---------- */
.hub-index {
  margin: 30px 0 8px;
  border: 1px solid var(--hub-line);
  border-radius: 10px;
  background: #fff;
}
.hub-index > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #3f3f46;
  list-style: none;
}
.hub-index > summary::-webkit-details-marker { display: none; }
.hub-index > summary::before { content: "\25B8  "; color: #9a9a9a; }
.hub-index[open] > summary::before { content: "\25BE  "; }
.hub-index > summary span { font-weight: 400; color: #9a9a9a; }
.hub-index__list {
  margin: 0;
  padding: 2px 18px 18px;
  list-style: none;
  columns: 3;
  column-gap: 26px;
}
@media (max-width: 991px) { .hub-index__list { columns: 2; } }
@media (max-width: 640px) { .hub-index__list { columns: 1; } }
.hub-index__list li {
  margin: 0 0 7px;
  font-size: 12.5px;
  line-height: 1.5;
  break-inside: avoid;
}
.hub-index__list a { color: #111; text-decoration: none; border-bottom: 1px solid #e5e5ea; }
.hub-index__list a:hover { color: #c2410c; border-bottom-color: #c2410c; }
.hub-index__list span { color: #a1a1aa; }

/* ---------- 说明文字 ---------- */
.hub-note { margin: 26px 0 0; font-size: 12px; color: #9a9a9a; line-height: 1.7; }