/* ==========================================================================
   客户与案例页  /cases · /cases/{slug}
   列表页：页头 → 案例列表 → 客户清单（默认关闭） → 行业覆盖 → 询盘
   详情页：页头 → 客户背景 → 面临的问题 → 实施范围 → 关键做法 → 实施成效
          → 客户评价（可空） → 其他案例 → 询盘
   ========================================================================== */

/* ---------------------------------------------------------- 01 页头 */

.cs-hero {
  /* 页头压到最紧：标题 + 一行导语 + 行业导航，首屏要能同时看到第一条案例。
     导语上方不再留大段空白，标题行与筛选条之间只隔一档。 */
  padding: var(--sp-4) 0 var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(880px 300px at 86% -24%, var(--c-primary-soft), transparent 70%),
    var(--c-bg);
}

/* 标题与三个数字同一行：数字靠右、底对齐，不占三行高度 */
.cs-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3) var(--sp-6);
  align-items: end;
}

.cs-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6) var(--sp-7);
  /* 左侧只有标题与备注，右侧三行数字更高：垂直居中，别让空白全堆在标题下面 */
  align-items: center;
}

.cs-hero__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h1);
}

.cs-hero__lead {
  margin: 0;
  max-width: 38em;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-text-2);
}

/* 授权说明：小字，带图标，不与正文抢注意力。放在筛选条下面一行 */
.cs-hero__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  margin: var(--sp-2) 0 0;
  max-width: 38em;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-3);
}
.cs-hero__note svg { flex: 0 0 auto; margin-top: 3px; opacity: .8; }

/* 三个数字横排：字号降一档，作为标题的注脚，不与标题争主次 */
.cs-stats {
  display: flex;
  gap: var(--sp-5);
  margin: 0;
  padding-bottom: 4px;
}
.cs-stats > div {
  display: block;
  padding: 0;
  border: 0;
}
.cs-stats dt {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-heading);
}
.cs-stats dt em {
  margin-left: 2px;
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 400;
  color: var(--c-text-3);
}
.cs-stats dd {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  white-space: nowrap;
}

/* ------------------------------------------------------ 02 案例列表 */

/* 列表紧跟页头，上留白收一档：96px 的段间距会让首屏只剩 1 条案例 */
.cs-list { padding-top: var(--sp-5); }

.cs-list__items {
  border-bottom: 1px solid var(--c-line);
}

.cs-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 186px;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) var(--sp-3);
  margin: 0 calc(var(--sp-3) * -1);
  border-top: 1px solid var(--c-line);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-fast) var(--e-out);
}
.cs-item:hover { background: var(--c-bg-2); }

.cs-item__no {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

.cs-item__body { display: block; min-width: 0; }

.cs-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin-bottom: var(--sp-1);
}
.cs-item__ind {
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--c-accent-ink);
}
.cs-item__id {
  position: relative;
  padding-left: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.cs-item__id::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 11px;
  margin-top: -5px;
  background: var(--c-line-2);
}
.cs-item__loc {
  position: relative;
  padding-left: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.cs-item__loc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 11px;
  margin-top: -5px;
  background: var(--c-line-2);
}

.cs-item__name {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-ink);
  transition: color var(--t-fast) var(--e-out);
}
.cs-item:hover .cs-item__name { color: var(--c-primary); }

/* 一句话结论：项目解决了什么。左侧细橙线把它和客户名分开，
   比下面那行灰色说明更醒目 —— 列表页先看结论，细节在详情页。 */
.cs-item__claim {
  display: block;
  position: relative;
  max-width: 40em;
  margin-bottom: var(--sp-1);
  padding-left: var(--sp-2);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-ink);
  text-wrap: pretty;
}
.cs-item__claim::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  bottom: .5em;
  width: 3px;
  border-radius: 2px;
  background: var(--c-accent);
}

.cs-item__desc {
  display: block;
  max-width: 44em;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-text-2);
  text-wrap: pretty;
}

.cs-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.cs-item__chips span {
  padding: 2px 8px;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-2);
  background: var(--c-bg);
}

/* 右栏：制程段 + 周期 + 入口 */
.cs-item__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
  text-align: right;
}
.cs-item__stages {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.cs-item__stages i {
  padding: 1px 6px;
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-radius: 2px;
}
.cs-item__period {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.cs-item__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-primary);
}
.cs-item__go svg { transition: transform var(--t-base) var(--e-out); }
.cs-item:hover .cs-item__go svg { transform: translateX(3px); }

/* --------------------------------------------------- 03 客户清单表格 */

.cs-table .table-wrap { background: var(--c-bg); }

/* ------------------------------------------------------ 04 行业覆盖 */

.cs-industries {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--c-line);
}
.cs-industries .container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
}
.cs-industries__label {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--c-text-3);
}
.cs-industries__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-industries__list li {
  font-size: var(--fs-body);
  color: var(--c-text);
}

/* ============================================================ 详情页 */

.cs-hero--detail { padding-bottom: var(--sp-6); }

/* 项目概况卡：右侧竖排档案 */
.cs-dossier {
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-top: 2px solid var(--c-primary);
  background: var(--c-bg);
}
.cs-dossier__label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--c-text-3);
}
.cs-dossier__name {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--c-ink);
}
.cs-dossier__list { margin: 0; }
.cs-dossier__list > div {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border-top: 1px solid var(--c-line);
}
.cs-dossier__list dt {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  padding-top: 1px;
}
.cs-dossier__list dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text);
}
.cs-dossier .cs-hero__note {
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  max-width: none;
}

/* 页头里那句话：放在导语下方当结论，用上分隔线跟导语分开 */
.cs-hero__claim {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--c-line-2);
  max-width: 30em;
  font-size: var(--fs-h3);
  line-height: 1.55;
  color: var(--c-ink);
  text-wrap: pretty;
}

/* ------------------------------------------------------ 05 客户背景 */

.cs-bg__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--sp-6);
  align-items: start;
}
.cs-bg .section-head { margin-bottom: 0; }
.cs-bg__text p {
  margin: 0;
  max-width: 32em;
  font-size: var(--fs-h4);
  line-height: 1.85;
  color: var(--c-text-2);
  text-wrap: pretty;
}
.cs-bg__text p + p { margin-top: var(--sp-2); }

/* ------------------------------------------------------ 06 面临的问题 */

.cs-probs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-prob {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 2px solid var(--c-line-2);
}
.cs-prob__no {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--c-text-3);
}
.cs-prob h3 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h4);
}
.cs-prob p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-text-2);
  text-wrap: pretty;
}

/* ------------------------------------------------------ 07 实施范围 */

.cs-scope__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--sp-6);
  align-items: start;
}
.cs-scope .section-head { margin-bottom: 0; }

/* 制程段与应用模块上下排在同一张卡里：
   并排两块会因为标签数量不同出现一块高一快低，底部空一格 */
.cs-scope__panels {
  padding: var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}
.cs-scope__panel + .cs-scope__panel {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
}
.cs-scope__label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--c-text-3);
}
.cs-scope__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-scope__tags li {
  padding: 3px 9px;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.cs-scope__tags li.is-stage {
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-color: transparent;
}
.cs-scope__hint { margin: var(--sp-2) 0 0; }

/* ------------------------------------------------------ 08 关键做法 */

.cs-approach {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-approach__item {
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-dark-line);
}
.cs-approach__no {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-dark-info);
}
.cs-approach h3 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h4);
}
.cs-approach p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-dark-text);
  text-wrap: pretty;
}

/* ------------------------------------------------------ 09 实施成效 */

.cs-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: 0;
}
.cs-metrics > div {
  padding: var(--sp-2) 0;
  border-top: 2px solid var(--c-primary);
}
.cs-metrics dt {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}
.cs-metrics dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.cs-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-outcome {
  padding-left: var(--sp-3);
  border-left: 2px solid var(--c-line-2);
}
.cs-outcome h3 {
  margin: 0 0 2px;
  font-size: var(--fs-body);
}
.cs-outcome p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-text-2);
  text-wrap: pretty;
}

/* ------------------------------------------------------ 10 客户评价 */

.cs-quote figure {
  margin: 0;
  max-width: 46em;
}
.cs-quote blockquote {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.7;
  color: var(--c-ink);
}
.cs-quote blockquote::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: var(--sp-3);
  background: var(--c-accent);
}
.cs-quote figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

/* ------------------------------------------------------ 11 其他案例 */

.cs-others__grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.cs-others__head h2 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h3);
}
.cs-others__note {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}
.cs-others__all { margin: 0; }

.cs-others__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.cs-peer {
  display: block;
  padding: var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--e-out);
}
.cs-peer:hover { border-color: var(--c-primary); }
.cs-peer__ind {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-xs);
  color: var(--c-accent-ink);
}
.cs-peer__name {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--c-ink);
}
.cs-peer__desc {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}
.cs-peer__meta { display: flex; flex-wrap: wrap; gap: 4px; }
.cs-peer__meta i {
  padding: 1px 6px;
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-radius: 2px;
}

/* 设计系统页里演示用的排版容器：左侧档案卡 + 右侧问题卡 */
.ds-cases-row {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  margin-bottom: var(--sp-6);
}

/* =========================================================== 响应式 */

@media (max-width: 1024px) {
  .cs-hero__grid { grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-5); }
  .cs-approach { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
  .cs-bg__grid,
  .cs-scope__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .cs-others__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

@media (max-width: 768px) {
  .cs-hero { padding: var(--sp-4) 0 var(--sp-3); }
  .cs-hero__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .cs-hero__top { grid-template-columns: 1fr; gap: var(--sp-2); }
  .cs-hero__lead { font-size: var(--fs-body); }

  /* 数字横排三格，比竖排更省屏；贴在标题下方，不再自己加边框占一屏 */
  .cs-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: var(--sp-1);
  }
  .cs-stats > div {
    display: block;
    padding: 0;
    border-bottom: 0;
  }
  .cs-stats > div + div {
    padding-left: var(--sp-3);
    border-left: 1px solid var(--c-line);
  }
  .cs-stats dt { font-size: var(--fs-h4); }
  .cs-stats dd { margin-top: 2px; font-size: var(--fs-xs); }

  /* 案例卡：编号与客户名同行，右栏移到正文下方 */
  .cs-item {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: var(--sp-3) var(--sp-2);
    margin: 0 calc(var(--sp-2) * -1);
  }
  .cs-item__no { line-height: 1.6; }
  .cs-item__name { font-size: var(--fs-h4); }
  .cs-item__side {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .cs-item__stages { justify-content: flex-start; }
  .cs-item__go { padding-top: 0; }

  .cs-probs,
  .cs-outcomes,
  .cs-others__items { grid-template-columns: 1fr; }
  .cs-probs { gap: var(--sp-4); }

  .cs-approach { grid-template-columns: 1fr; gap: var(--sp-3); }

  .cs-hero__claim { font-size: var(--fs-h4); padding-left: var(--sp-2); }
  .cs-dossier { padding: var(--sp-2) var(--sp-3); }
  .cs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-cases-row { grid-template-columns: 1fr; }
  .cs-industries__list { gap: var(--sp-1) var(--sp-4); }
  .cs-industries__list li { font-size: var(--fs-body); }
}

/* ============================================================ 行业分组 */
/* 案例按行业分段：筛选条在上，段落各自带标题与"看这个行业的做法"出口。
   只隐藏不重排 —— 切换筛选时不触发回流定位，页面不会跳。 */
.cs-filter {
  display: flex;
  flex-wrap: wrap;
  /* 11 个行业 + 全部 + 其他行业：留白收紧，1080 宽容器内尽量排成一排 */
  gap: 5px;
  margin: var(--sp-3) 0 0;
}
.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-full);
  background: var(--c-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  white-space: nowrap;
  color: var(--c-text-2);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out);
}
.cs-chip span { font-size: var(--fs-xs); color: var(--c-text-3); }
.cs-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.cs-chip.is-on {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: #fff;
}
.cs-chip.is-on span { color: rgba(255, 255, 255, .78); }

/* 没有案例的行业：虚线圈、灰字，点开给一句说明，不伪装成可筛选 */
.cs-chip--idle {
  border-style: dashed;
  color: var(--c-text-3);
}
.cs-chip--idle:hover { border-color: var(--c-primary); color: var(--c-primary); }
.cs-chip--idle span { color: var(--c-text-3); }
/* 点开空行业时它也会变成选中态：不覆盖回来会灰字压在蓝底上看不见 */
.cs-chip--idle.is-on {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: #fff;
}

/* 末尾「其他行业」是入口不是筛选：弱边框、带箭头 */
.cs-chip--ask {
  border-color: transparent;
  color: var(--c-primary);
  text-decoration: none;
}
.cs-chip--ask:hover { background: var(--c-primary-soft); border-color: transparent; }

/* 空行业提示条：替换掉列表，不留白屏 */
.cs-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-bg-2);
  font-size: var(--fs-body);
  color: var(--c-text-2);
}
.cs-empty[hidden] { display: none; }
.cs-empty__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-primary);
}
.cs-empty__reset {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.cs-empty__reset:hover { color: var(--c-primary); }

.cs-group + .cs-group { margin-top: var(--sp-6); }
.cs-group.is-off { display: none; }

.cs-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line-2);
}
.cs-group__head h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-h4);
  color: var(--c-ink);
}
.cs-group__head h3 span {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-text-3);
}

@media (max-width: 768px) {
  .cs-group__head { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }

  /* 12 个行业在手机上换行要占三排，会把第一条案例顶到屏外。
     改成横向滑动一排：导航仍然一眼看得到，首屏还能露出案例。 */
  .cs-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: var(--sp-3);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cs-filter::-webkit-scrollbar { display: none; }
  .cs-chip { flex: none; }
}