/* =========================================================
   文章分类（Content Taxonomy）样式 · 20260925a
   适用：insights.html / insights-2~4.html（入口页）
         insights/<cat>/index.html（9 个静态分类页）
   说明：本文件为分类重构新增，独立于 style.css，便于回滚。
   ========================================================= */

/* --- 分类导航区（替换原 filter-tabs 按钮组） --- */
.section--cats{padding:0 0 8px}
.cat-nav{position:relative}
.cat-nav__list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:0;padding:0;list-style:none;
}
.cat-nav__item{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:999px;
  border:1px solid var(--color-line);background:#fff;
  font-size:14.5px;font-weight:500;line-height:1;
  color:var(--color-primary);text-decoration:none;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.cat-nav__item:hover{
  background:var(--color-accent-soft);border-color:rgba(176,42,48,.35);
  color:var(--color-accent-strong);transform:translateY(-1px);
}
.cat-nav__item.is-active{
  background:var(--color-primary);border-color:var(--color-primary);
  color:#fff;box-shadow:0 4px 14px rgba(15,44,82,.18);
}
.cat-nav__item.is-active:hover{background:var(--color-primary-deep);color:#fff}
.cat-nav__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:19px;padding:0 6px;border-radius:999px;
  background:var(--color-bg-alt);color:var(--color-text-muted);
  font-size:11.5px;font-weight:700;letter-spacing:0;
}
.cat-nav__item:hover .cat-nav__n{background:rgba(176,42,48,.12);color:var(--color-accent-strong)}
.cat-nav__item.is-active .cat-nav__n{background:rgba(255,255,255,.22);color:#fff}

/* --- 分类页 Hero --- */
.cat-hero{padding-bottom:28px}
.cat-hero .crumbs{margin-bottom:18px}
.cat-hero h1{margin-bottom:14px}
.cat-hero__meta{
  margin:16px auto 0 !important;font-size:13px;letter-spacing:.02em;
  color:var(--color-text-muted) !important;
}
.cat-hero__meta::before{
  content:"";display:block;width:44px;height:2px;margin:0 auto 14px;
  background:var(--color-accent);opacity:.5;
}
/* 分类页面包屑：.crumbs 基色是为深色 .pagehero 设计的白色，这里 hero 是浅色底，
   必须显式改回深色，否则面包屑不可见（与 .art-hero .crumbs 同一处理）。 */
.cat-hero .crumbs{color:var(--color-text-muted)}
.cat-hero .crumbs a{color:var(--color-accent)}
.cat-hero .crumbs a:hover{color:var(--color-accent-strong)}

/* --- 分类页：完整清单下的分页区退化为「延伸入口」 --- */
.cat-nav ~ .section .pagination,
.section .pagination--bare{padding-top:22px}
.pagination__pages .pagination__nav{min-width:auto;padding:0 18px}

/* --- 分类色标 ---
   标签叠在封面图上，需足够对比度，因此统一用「深色实底 + 白字」。
   十色同明度（暗调、低彩度），既互相可辨，也仍然收敛于本所的深蓝／暗红主调。 */
.article-card__tag{letter-spacing:.01em;box-shadow:0 2px 8px rgba(10,31,60,.18)}
.article-card[data-cat="trademark"]   .article-card__tag{background:#A32A32} /* 商标 · 品牌红 */
.article-card[data-cat="patent"]      .article-card__tag{background:#17365F} /* 专利 · 深海军蓝 */
.article-card[data-cat="contract"]    .article-card__tag{background:#2A5F63} /* 合同 · 深青 */
.article-card[data-cat="crossborder"] .article-card__tag{background:#2B4E86} /* 跨境 · 靛蓝 */
.article-card[data-cat="counsel"]     .article-card__tag{background:#7A2E33} /* 顾问 · 暗红棕 */
.article-card[data-cat="equity"]      .article-card__tag{background:#41496B} /* 股权 · 石板紫 */
.article-card[data-cat="labor"]       .article-card__tag{background:#6B4A2E} /* 用工 · 深棕 */
.article-card[data-cat="copyright"]   .article-card__tag{background:#52407A} /* 著作权 · 深紫 */
.article-card[data-cat="industry"]    .article-card__tag{background:#2C5F45} /* 行业 · 深绿 */
.article-card[data-cat="geo"]         .article-card__tag{background:#7C2B5A} /* 直答 · 莓紫 */

/* 入口页标签即分类入口（可点击，直达该分类静态页） */
a.article-card__tag{
  text-decoration:none;cursor:pointer;
  transition:filter .2s ease,transform .2s ease;
}
a.article-card__tag:hover{filter:brightness(1.18);transform:translateY(-1px)}
a.article-card__tag:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* --- 卡片分类可点击时的手感（分类页内 tag 仍为纯文字标签） --- */
.article-card__title a:focus-visible,
.cat-nav__item:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px;
}

/* =========================================================
   详情页（insights 下的 .html）分类闭环
   ========================================================= */

/* --- 详情页「所属分类」回链：作为正文结束与延伸阅读之间的收束条 --- */
.cat-back{
  margin:0;padding:0;
  border-top:1px solid var(--color-line);
  background:var(--color-bg-alt);
}
.cat-back .container{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding-top:16px;padding-bottom:16px;
}
.cat-back__label{
  font-size:13px;letter-spacing:.06em;
  color:var(--color-text-muted);
}
.cat-back__label::after{content:"：";}
.cat-back__link{
  display:inline-flex;align-items:center;
  padding:5px 14px;border-radius:999px;
  background:var(--color-primary);color:#fff;
  font-size:14px;font-weight:500;line-height:1.5;text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.cat-back__link:hover{background:var(--color-primary-deep);color:#fff;transform:translateY(-1px)}
.cat-back__link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.cat-back__n{font-size:13px;color:var(--color-text-muted)}

/* --- 详情页面包屑第 3 段（分类）与第 4 段（文章标题）层次区分 ---
   .crumbs 基色为深色（.art-hero 内已由 style.css 处理），此处只加强分类链接的可点击感。
   注：.crumbs 为 display:block + 行内 <a>，四段过长时自然换行，无需 flex 设置。 */
.art-hero .crumbs a[href^="../insights/"]{
  font-weight:500;
  border-bottom:1px solid rgba(176,42,48,.28);
}
.art-hero .crumbs a[href^="../insights/"]:hover{border-bottom-color:var(--color-accent)}

@media(max-width:640px){
  .cat-back .container{gap:8px}
  .cat-back__link{padding:4px 12px;font-size:13px}
}

/* --- 响应式 --- */
@media(max-width:860px){
  .cat-nav__list{gap:8px}
  .cat-nav__item{padding:8px 14px;font-size:13.5px}
}
@media(max-width:640px){
  .section--cats{padding-bottom:4px}
  .cat-nav__list{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    padding:2px 2px 10px;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .cat-nav__list::-webkit-scrollbar{height:5px}
  .cat-nav__list::-webkit-scrollbar-thumb{background:var(--color-line);border-radius:99px}
  .cat-nav__item{scroll-snap-align:start;flex:0 0 auto}
  .cat-hero{padding:40px 0 22px}
  .cat-hero .crumbs{font-size:12px}
}