/**
 * retech/scenario-tabs 块样式 —— 移植自原型 assets/css/retech.css §07
 * 「Material to Valuable Output（Tab + Before/After 对比）」= 1073–1212。
 *
 * 层级:只在 retech-block / retech-responsive 内写规则。断点:原型 1240 / 1080 / 700。
 * 共享件(版心 / section-head / eyebrow / h2 / section-lead / btn)由全局 style-index.css
 * 单一属主,本文件不重复定义。
 */

@layer retech-block {
  .retech-x-tabs {
    position: relative;
  }

  /* ── Tab 头(手机可横向滑动)──────────────────────────────────────────── */
  .retech-x-tab-list {
    display: flex;
    gap: 6px;
    padding-bottom: 22px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--retech-x-line);
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .retech-x-tab {
    flex: 0 0 auto;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--retech-x-r-md);
    background: transparent;
    color: var(--retech-x-ink-3);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-tab:hover {
    color: var(--retech-x-ink);
    background: var(--retech-x-gray-light);
  }
  .retech-x-tab--active {
    color: var(--retech-x-ink);
    background: var(--retech-x-white);
    border-color: var(--retech-x-line);
    box-shadow: var(--retech-x-sh-sm);
  }
  /* 当前项底边用绿色 = 「循环 / 产出」语义(青色留给工艺/技术) */
  .retech-x-tab--active::after {
    content: "";
    display: block;
    height: 2px;
    margin: 9px -18px -12px;
    background: var(--retech-x-flow);
    border-radius: 2px;
  }
  .retech-x-tab:focus-visible {
    outline: 2px solid var(--retech-x-flow);
    outline-offset: 2px;
  }

  /* ── 面板 ─────────────────────────────────────────────────────────────── */
  .retech-x-tab-panel[hidden] {
    display: none;
  }
  .retech-x-tab-panel--active {
    animation: retech-x-panel-fade 420ms var(--retech-x-ease-entry) both;
  }

  /* ── 场景两列:媒体 / 参数 ─────────────────────────────────────────────── */
  .retech-x-scenario__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: 48px;
    align-items: start;
  }
  .retech-x-scenario__media {
    margin: 0;
  }
  .retech-x-scenario__media figcaption {
    margin-top: 14px;
    color: var(--retech-x-ink-3);
    font-size: 13px;
    line-height: 1.6;
  }

  /* ── Before / After 对比滑块 ──────────────────────────────────────────── */
  .retech-x-ba {
    position: relative;
    border-radius: var(--retech-x-r-lg);
    overflow: hidden;
    background: var(--retech-x-gray-light);
    aspect-ratio: 3 / 2;
    user-select: none;
  }
  .retech-x-ba img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* After 图层默认被裁到右侧 45% —— JS 会按 range 值实时改写这个 inset */
  .retech-x-ba__after {
    clip-path: inset(0 0 0 55%);
  }
  /* range 铺满整块并透明化:它是唯一的交互面(鼠标拖动 + 键盘左右键) */
  .retech-x-ba__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
  }
  .retech-x-ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 55%;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(17, 23, 28, .18);
    z-index: 3;
    pointer-events: none;
  }
  /* 把手圆点:内嵌左右箭头 SVG(白色圆底 + 深色箭头) */
  .retech-x-ba__handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 7l-4 5 4 5M14 7l4 5-4 5' fill='none' stroke='%2311171C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
    box-shadow: 0 2px 10px rgba(17, 23, 28, .24);
  }
  .retech-x-ba__tag {
    position: absolute;
    bottom: 14px;
    z-index: 5;
    padding: 5px 11px;
    border-radius: var(--retech-x-r-xs);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: rgba(17, 23, 28, .66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .retech-x-ba__tag--before {
    left: 14px;
  }
  /* After 标签用绿色:产出 / 正向结果 */
  .retech-x-ba__tag--after {
    right: 14px;
    background: rgba(118, 192, 67, .92);
  }

  /* ── 场景参数表 ───────────────────────────────────────────────────────── */
  .retech-x-scenario__specs {
    display: grid;
    gap: 22px;
  }
  .retech-x-scenario__specs > div {
    padding-left: 15px;
    border-left: 2px solid var(--retech-x-line);
  }
  /* 第 1 条中性 / 第 2 条青色(工艺) / 第 3 条绿色(产出)—— 双色语义 */
  .retech-x-scenario__specs > div:nth-child(2) {
    border-left-color: var(--retech-x-tech);
  }
  .retech-x-scenario__specs > div:nth-child(3) {
    border-left-color: var(--retech-x-flow);
  }
  .retech-x-scenario__specs dt {
    margin-bottom: 6px;
    color: var(--retech-x-tech-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .retech-x-scenario__specs dd {
    color: var(--retech-x-ink-2);
    font-size: 14px;
    line-height: 1.66;
  }
  .retech-x-scenario__body .retech-x-btn {
    margin-top: 30px;
  }
}

@layer retech-responsive {
  @media (max-width: 1080px) {
    .retech-x-scenario__grid {
      grid-template-columns: 1fr;
      gap: 34px;
    }
  }

  /* 原型 retech.css:1964 的 `@media (max-width: 700px)` 段,对应规则在 1992-1996。 */
  @media (max-width: 700px) {
    /* retech.css:1992 —— `.tab-list { margin-bottom: 24px; padding-bottom: 16px }`
       (基座 34/22 见 retech.css:1077)。不收窄的话手机端 Tab 头与面板之间空一截,
       首屏能看到的面板内容变少。 */
    .retech-x-tab-list {
      margin-bottom: 24px;
      padding-bottom: 16px;
    }
    /* retech.css:1993 —— `.tab { padding: 10px 14px; font-size: var(--fs-xs) }`
       (本站无字号 token 档,按 13px 落地)。 */
    .retech-x-tab {
      padding: 10px 14px;
      font-size: 13px;
    }
    /* retech.css:1994 —— `.tab.is-active::after { margin: 8px -14px -11px }`
       (基座 9px/-18px/-12px 见 retech.css:1107)。必须跟着上面 1993 的 14px 横向
       内边距一起改:绿色下划线要正好铺满 Tab 的可视宽度,只改 padding 不改 margin
       下划线会两头露白或出界。 */
    .retech-x-tab--active::after {
      margin: 8px -14px -11px;
    }
    /* retech.css:1995 —— `.scenario-specs { gap: 18px }`(基座 22px 见 retech.css:1196)。 */
    .retech-x-scenario__specs {
      gap: 18px;
    }
    /* retech.css:1996 —— `.scenario-body .btn { width: 100%; margin-top: 24px }`
       (基座只有 margin-top:30px 见 retech.css:1212)。手机端按钮通栏是原型的明确决定。 */
    .retech-x-scenario__body .retech-x-btn {
      width: 100%;
      margin-top: 24px;
    }
    /* 注:原先这里的 `.retech-x-scenario__specs > div { padding-left: 13px }` 已删 ——
       原型 ≤700 只改 `.scenario-specs { gap: 18px }`(retech.css:1995);竖向
       分隔线的 `padding-left: 15px` 在 retech.css:1206,任何断点都没有覆盖。
       那条 13px 无出处,且原注释写的「统一成中性色」根本不是该声明做的事。 */
  }

  @media (prefers-reduced-motion: reduce) {
    .retech-x-tab-panel--active {
      animation: none;
    }
  }
}