/* ============================================================================
   筛选 pills（v1.0.128）
   ----------------------------------------------------------------------------
   由 flt_pills_html()（inc/pills.php）输出，服务三个区块：
     flt/product-grid（产品 · link） / flt/posts（文章 · tab） / flt/case-grid（案例 · link）

   位置：区块头 .sec-head 的**右侧**（与既有的 .right 小字同位 ⇒ 开启 pills 时替代它）。
   观感：复用主题 token（--primary / --border / 999px 胶囊）✓，
        与归档页的 .filters / 搜索页 tabs 同一套语言 ✓。
   断点：≤767 改为横向滚动（与 product-list.css 的 .filters 一致 ✓），避免换行撑高标题行。
   ========================================================================== */

.flt-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.flt-pill {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  /* v1.0.133：**恢复原始过渡**（Boss 指定）。
     来龙去脉：v1.0.130 曾把颜色过渡去掉，用以缓解"切换时白字像没跟上"；
     但 v1.0.132 已证明**真因是 JS 在点击瞬间加类触发重绘、紧接浏览器导航**
     （见 assets/js/main.js 中 `.filters` 的注释）⇒ 过渡本身没有问题，恢复原值 ✓ */
  transition: all .15s;
}

.flt-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* 当前项：link 模式由 .is-on 表达（多数情况不设，因为真链接页面才是"当前"）；
   tab 模式由 JS 同步 .is-on + aria-selected */
.flt-pill.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.flt-pill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── tab 模式的面板 ─────────────────────────────────────────────────────── */
.flt-panel {
  display: none;
}

.flt-panel.is-on {
  display: block;
}

@media (max-width: 767px) {
  .flt-pills {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-top: 14px;

    /* ── v1.0.166 修「移动端整页横滑 + 右侧白边」✗ ──────────────────────
       线上实测（390 视口）：docW **491** ✗ / winW 390 ✓ ⇒ 本容器右边界正好
       = 491 = 文档宽 ⇒ **它是元凶** ✓（hero 有 overflow:hidden ✓ 与跑马灯无关 ✓）。
       成因：≤767 时 .sec-head 变 column + align-items:**flex-start**
       ⇒ 子项按内容 shrink-to-fit ✗；而这里 flex-wrap:nowrap + 子项 nowrap
       ⇒ 容器被撑到 **471px**（390 视口）✗ ⇒ 撑破 body ⇒ 整页横滑 ✓。
       三把钥匙（与 `.case-pills`（case.css ✓ 已踩过并写明）/
       `.products .filters`（main.css ✓）**同一套**）：
         ① width:100%   —— column 容器里占满整行（否则 shrink-to-fit ✗）
         ② min-width:0  —— flex 子项默认 min-width:auto **不允许收缩** ✗
         ③ max-width:100% —— 兜底，任何父级下都不越界 ✓
       ⚠️ 缺任一把都会复现 ⇒ 以后新增同类横向滚动条请整段复制这三行 ✓ */
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .flt-pills::-webkit-scrollbar {
    display: none;
  }
}