/* ============ AI深度实践子系统（topics/）：文章站专属版式 ============
   仅用于 topics 列表/分类/分页与文章详情宽度；header/footer 与全站一致 */

/* 子系统 masthead（首页）与分类头 */
.jb-tp-hero { padding-block: var(--sp-xl) var(--sp-lg); }
.jb-tp-hero .jb-lede { max-width: 52em; }
.jb-tp-hero__title { margin-block: var(--sp-md); }
.jb-tp-hero__stats { font-size: var(--fs-cap); color: var(--ink-3); letter-spacing: 0.08em; }
.jb-tp-hero--cat .jb-display { font-size: 40px; line-height: 52px; }
@media (max-width: 640px) {
  .jb-tp-hero--cat .jb-display { font-size: 30px; line-height: 40px; }
  .jb-tp-hero .jb-display { font-size: 36px; line-height: 46px; }
}

/* 分类导航条：发丝线上下夹住的胶囊筛选（真页面跳转，非 JS 筛选） */
.jb-tp-navwrap { border-block: 1px solid var(--line); background: var(--surface); }
.jb-tp-cats { display: flex; flex-wrap: wrap; gap: var(--sp-sm); padding-block: 12px; }
.jb-tp-cat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; background: var(--paper);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.jb-tp-cat span { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--ink-3); }
.jb-tp-cat:hover { color: var(--primary); border-color: var(--primary); }
.jb-tp-cat.is-cur { color: var(--primary-deep); background: var(--primary-container); border-color: transparent; }
.jb-tp-cat.is-cur span { color: var(--primary-deep); }

/* 文章列表：期刊式行列表（编号 | 主体 | 箭头），发丝线分隔 */
.jb-tp-list { display: grid; }
.jb-tp-item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; gap: var(--sp-lg);
  align-items: start; padding: var(--sp-lg) var(--sp-sm);
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.jb-tp-item:first-child { border-top: 1px solid var(--line); }
.jb-tp-item:hover { background: var(--surface); }
.jb-tp-item__no { font-size: 20px; font-weight: var(--fw-semibold); color: var(--ink-3); padding-top: 2px; }
.jb-tp-item__meta { display: flex; align-items: center; gap: var(--sp-sm); margin-top: 10px; flex-wrap: wrap; }
.jb-tp-item__meta .jb-mono { color: var(--ink-3); letter-spacing: 0.06em; }
.jb-tp-item__title { font-size: var(--fs-h3); line-height: 30px; color: var(--ink); transition: color var(--dur) var(--ease); }
.jb-tp-item:hover .jb-tp-item__title { color: var(--primary); }
.jb-tp-item__arrow { color: var(--ink-3); display: flex; align-items: center; padding-top: 6px; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.jb-tp-item:hover .jb-tp-item__arrow { color: var(--primary); transform: translateX(3px); }
@media (max-width: 640px) {
  .jb-tp-item { grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-md); }
  .jb-tp-item__arrow { display: none; }
}

/* 分页器 */
.jb-tp-pager { display: flex; justify-content: center; align-items: center; gap: var(--sp-sm); margin-top: var(--sp-xl); }
.jb-tp-pager__num, .jb-tp-pager__btn {
  min-width: 40px; height: 40px; padding-inline: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.jb-tp-pager__num:hover, .jb-tp-pager__btn:hover { border-color: var(--primary); color: var(--primary); }
.jb-tp-pager__num.is-cur { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* 文章详情：正文宽度放开到标准容器（与其他区域一致）；标题区与正文间距收紧 */
.jb-tp-prose { max-width: none; }
.jb-tp-prose > :first-child { margin-top: 0; }
.jb-phero__plain { padding-block: var(--sp-xl) var(--sp-lg); }
.jb-tp-art__meta { display: flex; align-items: center; gap: var(--sp-sm); margin-block: var(--sp-md) 0; flex-wrap: wrap; }
.jb-tp-art__meta .jb-chip { text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.jb-tp-art__meta .jb-chip:hover { color: var(--primary); border-color: var(--primary); }