/**
 * retech/process-flow —— 首页「One Integrated Process」7 步工艺链块样式。
 *
 * CSS 1:1 移植自原型 ret-ch/assets/css/retech.css 第 09 节「One Integrated Process
 * (7 步工艺链)」第 1284–1375 行 + 第 17 节「响应式」里属于 .flow 的那几条
 * (平板 1943–1946 / 手机 2005–2010 / 降级 2053):
 *   .process            → .retech-x-flow-section
 *   .flow               → .retech-x-flow
 *   .flow::before       → .retech-x-flow::before        (横向连接线,青色渐变)
 *   .flow::after        → .retech-x-flow::after         (沿流程移动的青色光点)
 *   @keyframes flowTravel → @keyframes retech-x-flow-travel
 *   .flow-step          → .retech-x-flow-step
 *   .flow-node          → .retech-x-flow-node
 *   .flow-no            → .retech-x-flow-no
 *   .flow-name          → .retech-x-flow-name
 *   .flow-desc          → .retech-x-flow-desc
 *   .flow-desc[hidden]  → .retech-x-flow-desc[hidden]
 *   .sec-cta            → .retech-x-flow-cta(只留纵距;按钮本身是共享 .retech-x-btn*)
 *
 * 原型 token → 本站 token 对照(retech.css / style-index.css):
 *   --cyan→--retech-x-tech, --cyan-a30→--retech-x-tech-a30,
 *   --cyan-a50→--retech-x-tech-a50, --line-dark→--retech-x-line-dark,
 *   --graphite→--retech-x-graphite, --steel→--retech-x-steel,
 *   --w60→--retech-x-w60, --line→--retech-x-line, --white→--retech-x-white,
 *   --ink-2→--retech-x-ink-2, --ink-3→--retech-x-ink-3,
 *   --dur→--retech-x-dur, --ease-ui→--retech-x-ease-ui。
 *   --fs-sm(14px)/ --fs-xs(13px) 在本站没有对应 token,按字面量落地(同 gallery)。
 *   入场动画复用全局 keyframes retech-x-panel-fade(属主 blocks/style-index.css),
 *   不重新声明 —— 原型这里是 @keyframes panelFade。
 *
 * ★ 双色语义(本站核心机制,不可混用):青 tech = 工艺 / 技术 / 控制,
 *   绿 flow = 循环 / 产出 / CTA。所以节点圆点、连接线、行程光点全部走
 *   --retech-x-tech(青);本块唯一绿色的是底部共享的 .retech-x-btn--primary。
 *   原型在节点上也写了同一条注释:「当前节点:Technical Cyan 高亮(技术/工艺语义)」。
 *
 * ★ 响应式三档(原型注释明确点名的机制,必须保留):
 *   ≤1080px —— 链收成 4 列网格 + row-gap;桌面连接线(.retech-x-flow::before/
 *              ::after)整条 display:none;.retech-x-flow-desc 默认隐藏,
 *              **只在激活步**显示(.retech-x-flow-step.is-active .…-desc)。这是
 *              让描述在拥挤网格里仍然可读的唯一办法。
 *   ≤700px —— 链变纵向时间线:连接线改成 1px 竖线(每步一个 ::before,
 *              width:1px / height:auto),最后一步的连接线隐藏。
 *              原型此处用 .flow-step 的 border-left 画同一条线;这里改成
 *              ::before 是为了能单独掐掉最后一步那一段(solutions.css 的
 *              .process-step 就是这个写法),视觉与原型一致。
 *
 * ★ 激活态三种都认(谁先落地都能亮):`.is-active`(原型 retech.js §7 在 li 上
 *   切的类)、`.retech-x-flow-step--active`(本站 view.js §6e 现行的块内状态类
 *   约定)、`.retech-x-active`(view.js 更早的全局状态类约定)。另外用 :hover /
 *   :focus-within 在纯 CSS 层兜住「点击 / 悬停 / 聚焦 → 高亮 + 展开描述」——
 *   因为截至本块落地 blocks/view.js 里还没有 process 模块(详见 render.php 头注)。
 *
 * 层纪律:块文件只允许 retech-block / retech-responsive 两层(不含 reset/base);
 * 所有 @media 都在 retech-responsive 里;不使用任何强制覆盖关键字;所有类名都是
 * retech-x-flow*。section / wrap / section-head / eyebrow / h2 / section-lead /
 * section--light / section--dark / rich / btn* 的唯一属主是 blocks/style-index.css,
 * 本文件只消费、不重复定义(重复锚定会被 check-css 判 E5)。
 */

@layer retech-block {
  /* 原型 .process { position: relative } */
  .retech-x-flow-section {
    position: relative;
  }

  /* ── 工艺链:桌面 7 列横向(1294–1302)──────────────────────────────── */
  .retech-x-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    padding-top: 8px;
  }

  /* 连接线:物料沿工艺移动的轻量动画(1296–1302) */
  .retech-x-flow::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 46px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--retech-x-tech-a30) 8%, var(--retech-x-tech-a30) 92%, transparent 100%);
  }

  /* 沿流程移动的青色光点(克制:8s 一轮,非持续强烈)(1304–1313) */
  .retech-x-flow::after {
    content: "";
    position: absolute;
    left: 0;
    top: 44px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--retech-x-tech);
    box-shadow: 0 0 10px 2px var(--retech-x-tech-a50);
    animation: retech-x-flow-travel 8s var(--retech-x-ease-ui) infinite;
    opacity: .85;
  }
  @keyframes retech-x-flow-travel {
    0% {
      left: 0%;
      opacity: 0;
    }
    8% {
      opacity: .9;
    }
    92% {
      opacity: .9;
    }
    100% {
      left: 100%;
      opacity: 0;
    }
  }

  /* ── 单个节点(1322–1372)──────────────────────────────────────────── */
  .retech-x-flow-step {
    position: relative;
    padding-right: 12px;
  }

  .retech-x-flow-node {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 0 0 18px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
  }

  /* 编号圆点:深色底上的「控制状态」,默认中性(1335–1348) */
  .retech-x-flow-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--retech-x-line-dark);
    border-radius: 50%;
    background: var(--retech-x-graphite);
    color: var(--retech-x-w60);
    font-size: 11px;
    font-weight: 700;
    transition: background-color var(--retech-x-dur) var(--retech-x-ease-ui),
                border-color var(--retech-x-dur) var(--retech-x-ease-ui),
                color var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  /* 当前节点:Technical Cyan 高亮(技术/工艺语义)。焦点态也一起亮,键盘可达。
     激活类三种都认,谁先落地都能亮(见文件头注):
       .is-active                  —— 原型 retech.js §7 在 li 上切的类
       .retech-x-flow-step--active —— 本站 view.js 现行的块内状态类约定(§6e tab)
       .retech-x-active            —— view.js 更早的全局状态类约定(滚动监听) */
  .retech-x-flow-step.is-active .retech-x-flow-no,
  .retech-x-flow-step.retech-x-flow-step--active .retech-x-flow-no,
  .retech-x-flow-step.retech-x-active .retech-x-flow-no,
  .retech-x-flow-node:hover .retech-x-flow-no,
  .retech-x-flow-node:focus-visible .retech-x-flow-no {
    background: var(--retech-x-tech);
    border-color: var(--retech-x-tech);
    color: #fff;
  }

  .retech-x-flow-name {
    color: var(--retech-x-w60);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    transition: color var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  .retech-x-flow-step.is-active .retech-x-flow-name,
  .retech-x-flow-step.retech-x-flow-step--active .retech-x-flow-name,
  .retech-x-flow-step.retech-x-active .retech-x-flow-name,
  .retech-x-flow-node:hover .retech-x-flow-name,
  .retech-x-flow-node:focus-visible .retech-x-flow-name {
    color: #fff;
  }

  /* 描述:展开时复用全局入场 keyframes(1365–1371) */
  .retech-x-flow-desc {
    padding-top: 4px;
    color: var(--retech-x-w60);
    font-size: 13px;
    line-height: 1.6;
    animation: retech-x-panel-fade 340ms var(--retech-x-ease-entry) both;
  }
  .retech-x-flow-desc[hidden] {
    display: none;
  }
  /* 无 JS 也保留「聚焦 / 悬停节点 → 展开该步描述」的交互(原型 §7 的 JS 行为)。
     注意:≤1080px 这一对会被 retech-responsive 层的 .retech-x-flow-desc
     { display: none } 压住(层序高于本条),即平板上只显示激活步的描述 —— 与原型
     「平板只显示当前步」的机制一致。 */
  .retech-x-flow-step:hover .retech-x-flow-desc,
  .retech-x-flow-step:focus-within .retech-x-flow-desc {
    display: block;
  }

  /* CTA:原型 .sec-cta(只留纵距,按钮走共享 .retech-x-btn--primary 绿) */
  .retech-x-flow-cta {
    margin-top: 44px;
  }

  /* ── 浅色变体(tone: light)──────────────────────────────────────────
     原型这一段恒为深色,浅色值由本站按同一套中性阶推导:圆点/文字改走墨色阶,
     连接线仍是青色(线本身是 tech 语义,浅底上 30% 青同样成立,故不覆盖)。 */
  .retech-x-flow-section--light .retech-x-flow-no {
    border-color: var(--retech-x-line);
    background: var(--retech-x-white);
    color: var(--retech-x-ink-3);
  }
  .retech-x-flow-section--light .retech-x-flow-name {
    color: var(--retech-x-ink-2);
  }
  .retech-x-flow-section--light .retech-x-flow-step.is-active .retech-x-flow-name,
  .retech-x-flow-section--light .retech-x-flow-step.retech-x-flow-step--active .retech-x-flow-name,
  .retech-x-flow-section--light .retech-x-flow-step.retech-x-active .retech-x-flow-name,
  .retech-x-flow-section--light .retech-x-flow-node:hover .retech-x-flow-name,
  .retech-x-flow-section--light .retech-x-flow-node:focus-visible .retech-x-flow-name {
    color: var(--retech-x-ink);
  }
  .retech-x-flow-section--light .retech-x-flow-desc {
    color: var(--retech-x-ink-3);
  }
}

@layer retech-responsive {
  /* ── 平板:4 列网格,连接线隐藏,描述只在激活步显示(1943–1946)────── */
  @media (max-width: 1080px) {
    .retech-x-flow {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      row-gap: 26px;
    }
    .retech-x-flow::before,
    .retech-x-flow::after {
      display: none;
    }
    .retech-x-flow-desc {
      display: none;
    }
    .retech-x-flow-step.is-active .retech-x-flow-desc,
    .retech-x-flow-step.retech-x-flow-step--active .retech-x-flow-desc,
    .retech-x-flow-step.retech-x-active .retech-x-flow-desc {
      display: block;
    }
  }

  /* ── 手机:纵向时间线 + 1px 竖线连接线(2005–2010)──────────────────── */
  @media (max-width: 700px) {
    .retech-x-flow {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0;
    }
    .retech-x-flow-step {
      padding-right: 0;
      padding-bottom: 22px;
    }
    .retech-x-flow-step:last-child {
      padding-bottom: 0;
    }
    /* 竖线:width:1px / height:auto,从节点圆心向下贯穿到下一步;
       最后一步那一段掐掉(原型的 border-left 版本做不到这一点,故改用 ::before)。 */
    .retech-x-flow-step::before {
      content: "";
      position: absolute;
      left: 15px;
      right: auto;
      top: 15px;
      bottom: 0;
      width: 1px;
      height: auto;
      background: var(--retech-x-line-dark);
    }
    .retech-x-flow-step:last-child::before {
      display: none;
    }
    .retech-x-flow-node {
      flex-direction: row;
      align-items: center;
      gap: 12px;
      padding-bottom: 8px;
    }
    .retech-x-flow-no {
      flex: 0 0 30px;
    }
    .retech-x-flow-desc {
      padding-left: 42px;
    }
  }

  /* ── 降级:关掉常驻行程光点与展开动画(原型 2053)──────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .retech-x-flow::after {
      animation: none;
    }
    .retech-x-flow-desc {
      animation: none;
    }
  }

  /* ── 无 JS 兜底:描述全部常显,内容不丢 ────────────────────────────────
     本块的非激活描述服务端带 hidden(原型一致),收起态只有共享 JS 才会打开。
     body.retech-x-js 由 blocks/view.js 在启动时立即置位,所以这条只在**真的没有
     JS**时生效 —— 那种情况下 7 段描述全部展开,而不是只剩第 1 段。
     放在 retech-responsive 层(而不是 retech-block):层序上必须压过上面平板档的
     .retech-x-flow-desc { display: none }。 */
  body:not(.retech-x-js) .retech-x-flow-desc[hidden] {
    display: block;
  }
}