/* ==========================================================================
   p-catalog.css — 产品目录页外壳（产品中心 / 智算中心 共用）
   几何全部取自 01_产品中心02.psd 与 01_智算中心02.psd（1920 稿，1rem = 100 设计 px）

   PSD 实测（两稿同一套骨架）：
     · 二级栏   641~702（sub.css 负责），槽内文字 641 起，面包屑右贴 1682
     · 类别灰带 700~872（#f9fafb 通栏）—— 智算中心该带向上吃掉简介区，700~1221
     · 图标     749~787（高 38）；文字 804~822；当前项下划 866~872（宽 77、斜角）
     · 胶囊     930~988（高 58、宽 182、间距 18、居中）
     · 内容     1046 起：侧栏 239~602（363）、主区 679~1682（1003，卡片 323 + 17）
     · 分页     2425~2484（圆 59、间距 15）；页底留白 118
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 版心：比全站 1604 窄，与二级栏同宽（239~1682）
   -------------------------------------------------------------------------- */
#main .container {
  width: min(14.43rem, calc(100% - 0.4rem));
}

/* --------------------------------------------------------------------------
   1. 类别灰带
   智算中心在 .cat-band__in 前面多一个 .p-intro，所以这里用相邻选择器
   把带内的上内边距让给简介（简介自己带 1.17 的上下留白）
   -------------------------------------------------------------------------- */
.cat-band {
  position: relative;
  background: #f9fafb;
}
.cat-comp {padding-top: 1.17rem; text-align: center;}
.cat-band__in {
  padding: 0.49rem 0 0.5rem;
}
.p-intro + .cat-band__in {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   2. 一级分类：图标 + 文字 + 当前项斜块下划线
   PSD 里 6 个格子的间距不是等分的（各标签字数不同），实际是「按文字宽 + 155 间距」
   居中排布，所以用 flex + 固定 gap，字数变化时自动保持节奏。
   -------------------------------------------------------------------------- */
.cat-cells {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.24rem 1.55rem;
}
.cat-cell__a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.17rem;
}
/* 图标：由后台在分类里上传（{$uploadpath}{$CategoryIcon}），模板里就一个 <img>。
   只上传一套【红色】图，未选中时靠 filter 去色压成 #666 的灰，选中/悬停时去掉滤镜
   露出红色原图 —— 这样换色不用两套图，也不怕后台传的尺寸不一致：
   48×38 的框 + object-fit:contain，图标比例怎么变都不会变形。 */
.cat-cell__ico {
  display: block;
  flex: none;
  width: 0.48rem;
  height: 0.38rem;
  object-fit: contain;
  /* grayscale 后品牌红(#d80a10)约 #363636，×1.88 提到 #666，与设计稿的灰一致 */
  filter: grayscale(1) brightness(1.88);
  transition: filter 0.24s ease;
}
.cat-cell.is-active .cat-cell__ico,
.cat-cell__a:hover .cat-cell__ico { filter: none; }
.cat-cell__tx {
  font-size: 0.18rem;
  line-height: 1;
  color: var(--c-ink);
  white-space: nowrap;
  transition: color 0.24s ease;
}
/* 当前项下划线：77×6 的平行四边形，贴灰带底（文字底 + 44） */
.cat-cell__a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  width: 0.77rem;
  height: 0.06rem;
  background: var(--c-accent);
  transform: translateX(-50%);
  opacity: 0;
  -webkit-clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  transition: opacity 0.24s ease;
}
.cat-cell.is-active .cat-cell__tx { color: var(--c-accent); }
.cat-cell.is-active .cat-cell__a::after { opacity: 1; }
.cat-cell__a:hover .cat-cell__tx { color: var(--c-accent); }

/* --------------------------------------------------------------------------
   3. 二级分类胶囊（当前一级分类下的子分类）
   每组默认隐藏，由 p-catalog.js 把命中 lcid/pid 的那组打开。
   间距挂在本组上而不是容器上——没有子分类时（如智算中心）不留空档。
   -------------------------------------------------------------------------- */
.cat-tabs__grp {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.18rem;
  margin-top: 0.58rem;
}
.cat-tabs__grp.is-on { display: flex; }

/* 三级胶囊（智算中心）：没有「按一级分组」那一层，
   容器自己就是 flex，胶囊直接铺在里面（间距 = 上面那组的 58） */
.cat-tabs--flat {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.18rem;
  margin-top: 0.58rem;
}
.cat-tabs--flat.is-on { display: flex; }

/* 三级页面：整棵分类树都渲染在 HTML 里，每个一级一个 .cat-root，
   只显示当前这一支。默认只露出第一个，JS 没跑起来时至少不是白块 */
.cat-root ~ .cat-root { display: none; }
.cat-root.is-on { display: block; }
.cat-root.is-off { display: none; }

.cat-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.82rem;
  height: 0.58rem;
  padding-inline: 0.24rem;
  border-radius: 0.08rem;
  background: var(--c-tab);
  font-size: 0.16rem;
  line-height: 1;
  color: var(--c-primary-deep);
  transition: background-color 0.24s ease, color 0.24s ease;
}
.cat-tab:hover { color: var(--c-primary); }
.cat-tab.is-active {
  background: var(--c-primary);
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   4. 内容区两栏
   -------------------------------------------------------------------------- */
.p-body {
  padding: 0.58rem 0 1.18rem;
}
.p-body .layout { gap: 0.77rem; }
.p-body .side { width: 3.63rem; }
.p-body .layout__main {
  flex: none;
  width: 10.03rem;
}

/* 侧栏搜索框：363×62 浅灰底、无描边，放大镜贴右 56。
   搜索框与第一个筛选小节之间只留 .pf 自己的 42，这里不要再加 margin，
   否则上下两段留白会叠加（PSD：搜索 1108 → 第一个标题 1150） */
.p-body .side-search { margin-bottom: 0; }
.p-body .side-search input {
  display: block;
  width: 100%;
  height: 0.62rem;
  padding-inline: 0.41rem 0.6rem;
  border: 0;
  border-radius: 0.04rem;
  background: #f9fafb;
  font-size: 0.18rem;
  color: var(--c-ink);
}
.p-body .side-search input::placeholder { color: var(--c-ink-3); }
/* 去掉浏览器自带的清除按钮：Chrome/Safari 的 × 会压在右侧放大镜上 */
.p-body .side-search input::-webkit-search-cancel-button,
.p-body .side-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.p-body .side-search input::-ms-clear,
.p-body .side-search input::-ms-reveal {
  display: none;
}
.p-body .side-search button {
  right: 0.56rem;
  width: 0.19rem;
  height: 0.19rem;
  color: var(--c-ink-3);
}
.p-body .side-search button:hover { color: var(--c-ink); }
.p-body .side-search button .ico { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   5. 筛选面板（静态示例：勾选项写死在模板里，等属性数据接上后由后台循环替换）
   只剩「小节」一层（.pf-sec），没有可折叠的组头了：
   搜索框 → 42 → 小节标题 20 → 30 → 选项（行高 16、行距 24，即 40 一格）；小节之间 38
   -------------------------------------------------------------------------- */
.pf { padding-top: 0.42rem; }
.pf-sec + .pf-sec { margin-top: 0.38rem; }
.pf-ti {
  font-size: 0.2rem;
  line-height: 1;
  color: var(--c-ink);
}
.pf-list {
  display: grid;
  margin-top: 0.3rem;
  row-gap: 0.24rem;
}
/* 列宽照 PSD：两列 170 / 三列 136 + 135（三列时末列只剩 91 宽，按剩余空间自适应） */
.pf-list--c2 { grid-template-columns: 1.7rem minmax(0, 1fr); }
.pf-list--c3 { grid-template-columns: 1.36rem 1.35rem minmax(0, 1fr); }

.pf-ck {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.19rem;
  height: 0.16rem;
  font-size: 0.16rem;
  line-height: 1;
  color: var(--c-ink-2);
  cursor: pointer;
  transition: color 0.2s ease;
}
.pf-ck:hover { color: var(--c-ink); }
.pf-ck input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
/* 勾选框 = 品牌斜块：外框是平行四边形描边，选中后描边变红 + 内嵌小红块 */
.pf-ck__bx {
  position: relative;
  flex: none;
  width: 0.19rem;
  height: 0.16rem;
}
.pf-ck__bx::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid #cccccc;
  transform: skewX(-12deg);
  transition: border-color 0.2s ease;
}
.pf-ck__bx::after {
  content: "";
  position: absolute;
  left: 0.05rem;
  top: 0.04rem;
  width: 0.09rem;
  height: 0.08rem;
  background: var(--c-accent);
  transform: skewX(-12deg) scale(0);
  transition: transform 0.18s ease;
}
.pf-ck input:checked ~ .pf-ck__bx::before { border-color: var(--c-accent); }
.pf-ck input:checked ~ .pf-ck__bx::after { transform: skewX(-12deg) scale(1); }
.pf-ck input:focus-visible ~ .pf-ck__bx { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.pf-ck__tx {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   6. 产品网格：3 列 323，列距 17、行距 18（行距 440 - 卡高 422）
   卡片内部按 PSD 统一成「底部对齐的图槽」：
     图槽 13~276（高 263），名称落在卡内 315，规格 354 —— 三行卡片位置一致，
     图片高低不同也只影响图槽内的居中，不会把名字推上推下。
   -------------------------------------------------------------------------- */
.p-body .grid {
  grid-template-columns: repeat(3, 3.23rem);
  gap: 0.18rem 0.17rem;
  justify-content: start;
}
/* 卡片底色与灰带同色（PSD 实测 #f9fafb，比 tokens 里的 --c-card 亮一档） */
.p-body .pcard { background: #f9fafb; }
.p-body .pcard__fig {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 2.63rem;
  margin-top: 0.13rem;
  padding-inline: 0;
}
.p-body .pcard__fig img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* 卡片文案：PSD 名称 24 号（sub.css 的 20 是上一版稿子）、规格 #666 */
.p-body .pcard__name {
  margin-top: 0.39rem;
  font-size: 0.24rem;
}
.p-body .pcard__spec {
  margin-top: 0.19rem;
  color: var(--c-ink-2);
}
/* 换页时列表闪一下（沿用原智算中心的反馈） */
.p-body .grid.is-flip { animation: catGridFlip 0.42s ease both; }
@keyframes catGridFlip {
  0% { opacity: 1; }
  35% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   7. 分页：59 圆 + 15 间距，数字浅灰底，当前白底红圈，下一页实心红
   -------------------------------------------------------------------------- */
.p-body .pager {
  gap: 0.15rem;
  margin-top: 0.77rem;
}
/* 注意用 background-color：上一版写 background 简写会把 .pager-next 的箭头底图一起清掉 */
.p-body .pager > a {
  width: 0.59rem;
  height: 0.59rem;
  border: 1px solid #ededed;
  border-radius: 50%;
  background-color: #f7f9fa;
  font-size: 0.16rem;
  color: var(--c-ink-2);
}
.p-body .pager .a_cur,
.p-body .pager .is-active {
  border-color: transparent;
  background-color: var(--c-white);
  box-shadow: inset 0 0 0 0.02rem var(--c-accent);
  color: var(--c-accent);
}
.p-body .pager .pager-prev { background: var(--c-white); }
.p-body .pager .pager-next {
  border-color: var(--c-accent);
  background-color: var(--c-accent);
  color: var(--c-white);
}
/* 省略号也是个圆（PSD 里 1236~1295 的圆 + …） */
.p-body .pager .pager-dots {
  display: grid;
  place-items: center;
  width: 0.59rem;
  height: 0.59rem;
  border: 1px solid #ededed;
  border-radius: 50%;
  background-color: #f7f9fa;
  color: var(--c-ink-2);
  cursor: default;
}

/* --------------------------------------------------------------------------
   8. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #main .container { width: calc(100% - 0.4rem); }
  .cat-cells { gap: 0.24rem 0.6rem; }
  .p-body .layout { gap: 0.44rem; }
  .p-body .side { width: 2.6rem; }
  .p-body .layout__main { flex: 1; width: auto; }
  .p-body .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-body .pcard { height: auto; padding-bottom: 0.3rem; }
  /* 竖排层数变多后图槽固定高会留白，收成内容自适应 */
  .p-body .pcard__fig {
    height: 2.6rem;
    margin-top: 0;
    padding-block: 0.3rem;
  }
  .p-body .pcard__fig img { max-height: 100%; }
  .p-body .pcard__name { margin-top: 0.1rem; }
  .pf-list--c3 { grid-template-columns: 1.36rem minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .cat-band__in { padding: 0.34rem 0 0.44rem; }
  /* 窄屏把 6 个分类横过来滚，格子和下划线一起缩 */
  .cat-cells {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cat-cells::-webkit-scrollbar { display: none; }
  .cat-cell__a { gap: 0.14rem; }
  /* 图标槽同比例放大（48×38 → 0.66×0.52），上传图靠 object-fit 自己适配 */
  .cat-cell__ico { width: 0.66rem; height: 0.52rem; }
  .cat-cell__tx { font-size: max(0.26rem, 13px); }
  .cat-cell__a::after { bottom: -0.32rem; width: 0.9rem; height: 0.05rem; }

  .cat-tabs__grp,
  .cat-tabs--flat {
    gap: 0.16rem;
    margin-top: 0.34rem;
    padding-inline: 0.2rem;
  }
  .cat-tab {
    min-width: 0;
    height: 0.66rem;
    padding-inline: 0.28rem;
    font-size: max(0.24rem, 13px);
  }

  .p-body { padding: 0.34rem 0 0.66rem; }
  .p-body .layout { flex-direction: column; gap: 0.34rem; }
  .p-body .side { width: 100%; }
  .p-body .side-search { margin-bottom: 0.3rem; }
  .p-body .side-search input { height: 0.8rem; font-size: max(0.26rem, 13px); }
  .p-body .side-search button { right: 0.28rem; width: 0.3rem; height: 0.3rem; }
  .pf { padding-top: 0.3rem; }
  .pf-ti { font-size: max(0.26rem, 14px); }
  .pf-ck { height: auto; font-size: max(0.26rem, 13px); line-height: 1.4; }
  .pf-ck__bx { width: 0.28rem; height: 0.24rem; }
  .pf-ck__bx::after { left: 0.07rem; top: 0.06rem; width: 0.13rem; height: 0.12rem; }
  .pf-list { row-gap: 0.2rem; }
  .pf-list--c2,
  .pf-list--c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .p-body .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem; }
  .p-body .pcard__fig { height: 2.6rem; padding: 0.2rem; }
  .p-body .pcard__name { margin-top: 0.06rem; font-size: max(0.26rem, 13px); }
  .p-body .pager { gap: 0.12rem; margin-top: 0.5rem; }
  .p-body .pager > a { width: 0.7rem; height: 0.7rem; font-size: max(0.24rem, 12px); }
}