/**
 * retech/faq-block —— 全站共用问答区块(原型 sec sec--light sol-faq)。
 *
 * CSS 1:1 移植自 ret-ch/assets/css/solutions.css 第 399–434 行
 * (`.faq-list` / `.faq-item` / `summary` / `summary::-webkit-details-marker` /
 *  `summary h3` / `summary:hover h3` / `summary::after` 雪佛龙 / `[open]` /
 *  `.faq-answer` / `.faq-answer p`)。
 *
 * 雪佛龙忠实保留原型的 CSS 画法:11px 的 border-right + border-bottom 方块,
 * 闭合时 rotate(45deg),展开 `[open]` 时 rotate(-135deg)。
 *
 * 层纪律:块文件只允许 retech-block / retech-responsive 两层(不含 reset/base);
 * 所有 @media 都在 retech-responsive 里,且不含任何 important 强制覆盖。
 *
 * 本文件只定义本块属主类 retech-x-faq-*(注意与 faq-accordion 的双下划线命名
 * `retech-x-faq__x` 区分开,避免 check-css E5 同前缀被两个块文件重复锚定)。
 * section / wrap / section-head / eyebrow / h2 / section--light / section--dark
 * 这些共享基座一律来自 blocks/style-index.css,此处不重复定义;
 * 入场动画复用全局 keyframes retech-x-panel-fade,不重新声明。
 */
@layer retech-block {
  .retech-x-faq-list {
    border-top: 1px solid var(--retech-x-line);
  }

  .retech-x-faq-item {
    border-bottom: 1px solid var(--retech-x-line);
  }

  .retech-x-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
  }
  .retech-x-faq-item > summary::-webkit-details-marker {
    display: none;
  }

  .retech-x-faq-q {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--retech-x-ink);
    transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-faq-item > summary:hover .retech-x-faq-q {
    color: var(--retech-x-flow-dark);
  }

  /* 雪佛龙:CSS 画的 11px 方块,闭合 45° / [open] -135°。 */
  .retech-x-faq-item > summary::after {
    content: "";
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
    border-right: 1.8px solid var(--retech-x-ink-3);
    border-bottom: 1.8px solid var(--retech-x-ink-3);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  .retech-x-faq-item[open] > summary::after {
    transform: rotate(-135deg) translateY(-2px);
  }

  .retech-x-faq-answer {
    padding: 0 40px 24px 0;
    animation: retech-x-panel-fade 320ms var(--retech-x-ease-entry) both;
  }
  .retech-x-faq-answer p {
    color: var(--retech-x-ink-2);
    font-size: 14px;
    line-height: 1.7;
    max-width: 82ch;
  }

  /* 深色基调(tone="dark"):文字/描边换到深底档,与 section 声明保持一致。
     用 [data-header] 作用域而不是再写一遍共享的 .retech-x-section--dark。 */
  [data-header="dark"] .retech-x-faq-list,
  [data-header="dark"] .retech-x-faq-item {
    border-color: var(--retech-x-line-dark);
  }
  [data-header="dark"] .retech-x-faq-q {
    color: var(--retech-x-w90);
  }
  [data-header="dark"] .retech-x-faq-item > summary:hover .retech-x-faq-q {
    color: var(--retech-x-flow);
  }
  [data-header="dark"] .retech-x-faq-item > summary::after {
    border-right-color: var(--retech-x-w60);
    border-bottom-color: var(--retech-x-w60);
  }
  [data-header="dark"] .retech-x-faq-answer p {
    color: var(--retech-x-w72);
  }

  /* ── 段末小字(原型 `.sol-note` + `.sol-note .link-arrow`)─────────────────
     为什么属主在本文件:全站第一处 `p.sol-note` 就出现在 FAQ 段(原型
     `sec--light sol-faq` 段末),而 `.retech-x-note` 是**跨块共享**的段末小字
     (产品详情的 FAQ 与视频段都用它)。`check-css` 的 E5 要求一个类只有一个属主,
     所以它落在这里,其它块(如 video-facade 的 `--tight` 修饰)只消费不重复定义;
     跨块加载由 inc/css-auto-loader.php 按需入队本文件。

     数值逐条照抄原型 solutions.css:217–223 —— 只有 margin 拉开距离,
     **没有**分隔线(原型注释:卡片/网格自带分隔感,再加线是多余的);
     深色区用 `--w60`(原型 1240/1274 两条 `--w60` 规则)。 */
  .retech-x-note {
    margin-top: 30px;
    color: var(--retech-x-ink-3);
    font-size: 13px;
    line-height: 1.6;
  }
  .retech-x-note .retech-x-link-arrow {
    padding-top: 0;
    margin-top: 10px;
  }
  /* 视频门面下方的档(原型 `.vfacade-wrap .sol-note { margin-top: 14px }`) */
  .retech-x-note--tight {
    margin-top: 14px;
  }
  [data-header="dark"] .retech-x-note {
    color: var(--retech-x-w60);
  }
}

@layer retech-responsive {
  @media (max-width: 700px) {
    /* ⚠️ 原型 ≤700 对 FAQ **只改了一件事**:`.faq-answer { padding-right: 0 }`
       (solutions.css:600)。问题行、问题字号、summary 的 padding 与 gap 全都不变:
         · `.faq-item summary { padding: 22px 0 }`      → 所有断点恒定(403-412)
         · `.faq-item summary h3 { font-size: 17px }`   → 所有断点恒定(414-420)
         · `.faq-item summary { gap: 24px }`            → 所有断点恒定(404-411)
       移植时凭空发明了一整套"手机 FAQ 压缩"(gap 16 / padding 18 / 字号 15 /
       answer padding 0 24px 20px 0),实测每条 FAQ 行矮 11px、字号小 2px ——
       原文明确要求样式与原型完全一致,故整段删除,只保留原型那条 padding-right。 */
    .retech-x-faq-answer {
      padding-right: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .retech-x-faq-answer {
      animation: none;
    }
    .retech-x-faq-item > summary::after {
      transition: none;
    }
  }
}