/* ==========================================================================
   FAQ 索引页 —— 按 design-taste-frontend 重设计
   --------------------------------------------------------------------------
   Design Read: B2B 企业服务站的 FAQ 索引页，for 正在评估落地印尼的中资企业决策者，
                trust-first / 克制专业语言，native CSS + 品牌红单色强调 + 信息优先排版。
   Dials:       DESIGN_VARIANCE 4 / MOTION_INTENSITY 3 / VISUAL_DENSITY 5
                （信任优先 → 低变量、低动效、中高密度，见 skill 1.A）

   ── 形状规则（skill 4.4 SHAPE CONSISTENCY LOCK，文档化后才允许混用）──
     · 容器与分隔 = 直角，靠 1px 细线组织（不用卡片）
     · 交互元素（按钮、索引项、跳转胶囊）= pill

   ── 主题锁定（skill 4.11）──
     全页跟随站点主题（tokens 的 [data-theme] + prefers-color-scheme），
     段与段之间不翻转。颜色全部走 token，深色模式自动成立。

   ── 配色锁定（skill 4.2 COLOR CONSISTENCY LOCK）──
     全页只有一个强调色 --accent。没有第二个色相。

   ── 关于图片 ──
     索引栏不带预览图（站点所有者要求）。全页因此没有图片。
     这是索引型页面的取舍：40 条问答的可扫读性优先于视觉装饰。
     skill 4.8 要求「即使极简站点也要真实图片」针对的是 landing page；
     本页是目录，不适用。

   ── 为什么不用卡片（skill 4.4 / 9.C）──
     上一版是「12 个子分类卡片 + 40 个问答卡片」共 52 个卡片，
     属于 card overuse。问答列表靠细线与负空间分组即可，不需要 elevation。
   ========================================================================== */

.faq-page {
  --faq-rail-w: 17rem;
  /* 索引栏的 sticky 顶距：跟着页头占位高走（与 svc-pages.css 同一口径），
     不写死像素 —— 页头条高改动时自动跟随。 */
  --faq-sticky-top: calc(var(--header-h) + var(--space-6));
  /* 版面宽度收窄：站点栅格是 84rem（1344px），对 FAQ 这种「索引 + 正文」页
     来说正文列会拉到 ~900px，问题文字只占一半、右侧大片空。
     收到 76rem 后正文列约 775px、索引列约 240px，读起来更聚拢。
     页头/页脚是各自的 .grid，不受这里影响，保持站点原宽。 */
  --faq-max: 76rem;
}

.faq-page .grid { max-width: var(--faq-max); }

/* 字号统一：全页只用 token 阶梯上的档位，不再出现任意 clamp
     页首 h1  → 与 .page-head__title 同档 clamp(2rem, 4vw, 3.25rem)，桌面 52px
     分项 h3  → --fs-h4     (1.0625rem)
     问题/答案/页首导语 → --fs-body (1rem)
     索引 → --fs-small  (0.9375rem)
   段 h2 用 --fs-h3 但已改为 .visually-hidden（段标题行下线），不计入可见档位。
   上一版是 13/15/16/17/20–26/28–40px 六档混用，现在可见的只剩 4 档。 */

/* --------------------------------------------------------------------------
   1. 页首：左对齐，无卡片，无 eyebrow
   skill 4.3 ANTI-CENTER BIAS（VARIANCE 4 时避免居中）
   skill 4.7 EYEBROW RESTRAINT：h1 已经写着「常见问题」，
             再挂一个同义的英文/徽标 eyebrow 是重复，直接不要。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. 主体：左索引 + 右内容
   skill 4.9「长列表要用对的 UI 组件」：> 5 项时推荐 2-column split with
   grouped items。40 条问答正是这个形状 —— 左栏是完整索引，右栏是内容。
   skill 3.E「Grid over Flex-Math」：用站点既有 12 栏 .grid + .col-*。
   -------------------------------------------------------------------------- */
.faq-body {
  padding-block: var(--space-10) var(--space-16);
}

.faq-index {
  grid-column-end: span 12;
}

.faq-content {
  grid-column-end: span 12;
}

@media (min-width: 1024px) {
  .faq-index { grid-column-end: span 3; }
  .faq-content { grid-column-end: span 9; }
}

/* --------------------------------------------------------------------------
   3. 索引栏：全页唯一一处毛玻璃
   skill 0.D「generic glassmorphism on everything」是 LLM 默认，禁止 everywhere；
   skill 5 说玻璃适合「media-overlay / premium」，这里只用于一块浮在内容上的
   导航面 —— 这是它唯一说得通的用法。
   站点所有者要求：边框用灰色圆角细线，去掉阴影。所以不叠投影，
   浮起感只由 1px 灰线 + 圆角 + 玻璃本身承担；prefers-reduced-transparency
   时退成实底。
   -------------------------------------------------------------------------- */
.faq-index__inner {
  padding: var(--space-4);
  border: 1px solid var(--line);   /* 灰色细线 */
  border-radius: var(--r-md);      /* 圆角 */
  /* 回退在前、玻璃在后：不支持 color-mix 的浏览器拿到实底，不会没背景 */
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  /* 无 box-shadow（站点所有者要求） */
}

@media (min-width: 1024px) {
  .faq-index__inner {
    position: sticky;
    top: var(--faq-sticky-top);
    max-height: calc(100dvh - var(--faq-sticky-top) - var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .faq-index__inner {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.faq-index__label {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* 索引只列内项（主题），不再列段入口 —— 站点所有者要求。
   12 条主题平铺，点哪条跳哪条；段的归属由右栏内容的 h2 承担。 */
.faq-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-index__list a {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding-inline: var(--space-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.faq-index__list a:hover {
  color: var(--accent-deep);
  background-color: var(--accent-soft);
}

.faq-index__list a:active { background-color: var(--accent-soft); }

.faq-index__list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 移动端：索引折成横向 scroll-snap 胶囊条，贴在内容上方。
   skill 4.7「Mobile collapse must be explicit per section」。 */
@media (max-width: 1023px) {
  .faq-index__inner {
    margin-bottom: var(--space-8);
    padding: var(--space-2);
  }

  .faq-index__label { display: none; }

  .faq-index__list {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .faq-index__list::-webkit-scrollbar { display: none; }

  .faq-index__list li {
    flex: none;
    scroll-snap-align: start;
  }

  .faq-index__list a {
    min-height: var(--tap-min);
    padding-inline: var(--space-3);
    border: 1px solid var(--line);
    background-color: var(--surface);
    color: var(--ink);
  }
}

/* --------------------------------------------------------------------------
   4. 段落与主题：细线分组，不用卡片
   skill 4.7 Section-Layout-Repetition Ban 的判断：
     这 4 段是同质内容（一个索引组件的 4 个分组），不是 4 个异质 landing
     section。段内保持一致是「条理」，不是重复。真正要避免的是 4 个
     「大图 + 卡片列表」的克隆块 —— 那正是上一版的问题，已去掉。
   -------------------------------------------------------------------------- */
/* 段标题行（「还在决定要不要做 6 条」）按站点所有者要求下线。
   段本身仍在文档大纲里（h2 用 .visually-hidden），但不再有可见的标题行。 */
.faq-sec + .faq-sec {
  margin-top: 0;
}

/* 每个分项用红色分割线隔开（站点所有者要求）。
   段标题行去掉后，红色分割线承担分组视觉：
   红线 → 分项名 → 该分项的问答列表。 */
.faq-topic {
  padding-top: var(--space-5);
  border-top: 2px solid var(--accent);
}

.faq-topic + .faq-topic {
  margin-top: var(--space-10);
}

.faq-topic__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   5. 问答行：复用站点既有的 .faq-item 组件语言
   （.faq-item / .faq-item__q / .faq-item__a 定义在 components.css，
     品牌红 "+" 展开转 45° 为 "×"）。
   这里只做密度调整：这一页是索引，行距比首页问答紧一档。
   skill 9.F「NO border-t + border-b on every row」→ 只保留上边线一个方向。
   -------------------------------------------------------------------------- */
.faq-content .faq-item__q {
  font-size: var(--fs-body);
  padding-block: var(--space-4);
  gap: var(--space-3);
}

/* 答案与问题同号，层级靠颜色（问题 --ink / 答案 --ink-2）承担，
   不靠字号落差 —— skill 4.7「Control hierarchy with weight + color,
   not raw scale」。上一版答案比问题小一档（15 vs 16px），收敛掉。 */
.faq-content .faq-item__a {
  padding-block-end: var(--space-5);
  padding-inline-start: calc(1ch + var(--space-3));
  font-size: var(--fs-body);
}

/* --------------------------------------------------------------------------
   6. 结尾行动区：复用站点既有的 .cta-panel（components.css）
   skill 11.C preservation：站内已有的组件语言不另起一套。
   文案也换成站点既有说法，不编造服务承诺（上一版自己写了
   「商务顾问会在一个工作日内回复」，站内并无此说法）。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. 降级（skill 6.B：MOTION_INTENSITY 3 已接近静态，只需保证
      过渡在 reduced-motion 下不生效）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .faq-index__inner,
  .faq-index__seclink,
  .faq-index__topics a {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   8. 强制高对比度模式（skill 6 可访问性护栏）
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .faq-index__inner,
  .faq-sec__head {
    border-color: currentColor;
  }
}