/* ============================================================
   About-R&D — From R&D to Production（4 屏时间轴切换）
   Figma: #596:34307 (1920×1440) + AAA-1/BBB-1/CCC-1
   标题 @(208,120) 76/90 ExtraBold var(--color-primary)；描述 @(208,240) 32/48
   时间轴区 1920×692 @(0,446)：背景图 + rgba(0,0,0,0.2) 蒙版
     步骤条 1490×220 @(215,398)：4 卡 x 165/465/765/1065（宽 260，间距 300/40）
     非高亮卡 260×108 @(x,45)：数字 24px 白 + 标题 24px 白 + 线 rgba(255,255,255,0.5)
     高亮卡 260×220 var(--color-primary) r6：标题 24px + 线 + desc 20px/27 白
     箭头 100×100 @(0,50)/(1390,50)；水印 940×145 @(0,1295) opacity 0.1
   切换动效：背景 fade（0.5s）+ 高亮卡 translateX 平滑移动（只动画 transform/opacity）
   全部坐标按 1920 基准换算 vw/百分比，min(vw,px) 封顶
   ============================================================ */

.ard-timeline {
  position: relative;
  background: var(--color-white);
  /* 底部留白 302px = 水印 145 + 空隙 157（设计稿：stage 底 1138 → 水印 1295-1440） */
  padding: 120px 0 302px;
  overflow: hidden;
}

.ard-timeline__title {
  font-size: clamp(1.75rem, 3.9583vw, 4.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 min(30px, 1.563vw);
  margin-left: 10.83%;   /* 208/1920 */
}

.ard-timeline__desc {
  max-width: 84.375%;    /* 1620/1920 */
  font-size: 32px;  /* PC 端固定 32px（仅调整 PC，移动端 ≤768 仍用下方 clamp） */
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: var(--color-text-secondary);
  opacity: 0.7;
  margin: 0 0 min(86px, 4.479vw);   /* 描述→时间轴区 86px（446-240-48-72? 用 86 近似） */
  margin-left: 10.83%;
}

/* ---- 时间轴区 1920×692 ---- */
.ard-timeline__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 692;
  overflow: hidden;
}

/* 背景图 4 张全部叠放于 left 0，当前屏 opacity 1、其余 0，交叉淡化切换（0.5s）
   注意：不做 transform 轨道滑动——本机无 GPU 环境下视口外（left: 100%）的元素
   即使被 transform 移入视口也不渲染，会整屏空白（实测）；opacity 方案无此问题 */
.ard-timeline__bgs {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ard-timeline__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.ard-timeline__bg--active {
  opacity: 1;
}

/* rgba(0,0,0,0.2) 蒙版 */
.ard-timeline__mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* ---- 步骤条 1490×220 @ (215, 398) ---- */
.ard-timeline__steps {
  position: absolute;
  left: 11.2%;           /* 215/1920 */
  top: 57.51%;           /* 398/692 */
  width: 77.6%;          /* 1490/1920 */
  aspect-ratio: 1490 / 220;
  z-index: 2;
}

/* 非高亮 step 卡：260×108，top 46px（中线 100 = 箭头中线），x = 165 + 300*index
   内部布局（设计稿 #596:34319 等）：数字 @y0 → 线 @y53 → 标题 @y74
   线 53 + 卡顶 46 = 绝对 99 ≈ 箭头中线 100，文字随设计稿位置 */
.ard-timeline__step {
  position: absolute;
  left: 11.07%;          /* 165/1490 */
  top: 20.9%;            /* 46/220：中线 46+54=100 与箭头中线对齐 */
  width: 17.45%;         /* 260/1490 */
  aspect-ratio: 260 / 108;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  /* 卡间距 300px（设计稿）/ 卡宽 260px → 115.38% 自身宽，随步骤条等比缩放 */
  transform: translateX(calc(var(--tl-step, 0) * 115.38%));
  transition: transform var(--duration-slow, 0.5s) var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1));
}

.ard-timeline__step[data-tl-step="0"] { --tl-step: 0; }
.ard-timeline__step[data-tl-step="1"] { --tl-step: 1; }
.ard-timeline__step[data-tl-step="2"] { --tl-step: 2; }
.ard-timeline__step[data-tl-step="3"] { --tl-step: 3; }

.ard-timeline__step-num {
  position: absolute;
  top: 0;
  left: 0;
  font-size: clamp(1rem, 0.32vw + 0.92rem, 1.5rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
}

.ard-timeline__step-line {
  position: absolute;
  top: 49.07%;           /* 53/108：线对齐箭头中线（46+53=99 ≈ 100） */
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.ard-timeline__step-title {
  position: absolute;
  top: 68.52%;           /* 74/108：标题在线下方 21px（设计稿） */
  left: 0;
  /* 18px + letter-spacing -0.02em：Manrope 实测 205.6px < 卡宽 258px，余量 52px；
     fallback（Arial 类 ≈ 236px）也安全；20px 时 Manrope 228.4/fallback 溢出（实测），故降至 18px */
  font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-white);
  white-space: nowrap;   /* 任何字体下强制单行，不折行 */
  overflow: hidden;      /* 兜底：极端字体宽度时裁切而非画出卡外 */
}

/* ---- 高亮卡：260×220 蓝块，top -10px（中线 100 = 箭头中线），base left 165，translateX 随 step 移动
   内部布局（设计稿 #596:34331 相对位置）：标题底线距线 20px、线距 desc 顶 21px
   线 @109.5（相对卡顶）+ 卡顶 -10 = 绝对 99.5 = 箭头中线 ---- */
.ard-timeline__active {
  position: absolute;
  left: 11.07%;          /* 165/1490 */
  top: -4.5%;            /* -10/220：中线 -10+110=100 与箭头中线对齐 */
  width: 17.45%;         /* 260/1490 */
  aspect-ratio: 260 / 220;
  /* 设计稿蓝块为 SVG（#596:34601）：三边 6px 圆角 + 右下角斜切 (260,183.1)→(222.5,220)，
     用 SVG 背景精确还原（clip-path 会丢圆角） */
  background: url('../images/ard-tl-active-svg.svg') no-repeat center / 100% 100%;
  box-sizing: border-box;
  transform: translateX(calc(var(--tl-active, 0) * 115.38%));
  transition: transform var(--duration-slow, 0.5s) var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1));
  z-index: 3;
}

.ard-timeline__active-title {
  position: absolute;
  top: 27.95%;           /* 61.5/220：标题底线 79.5（51.5+28）与编号底线 79 对齐（设计稿） */
  left: 8px;
  right: 8px;
  /* 18px + letter-spacing -0.02em + nowrap：Manrope 实测 205.6px < 内容宽 242px，余量 36px；
     fallback（Arial 类 ≈ 236px）单行安全；20px 时 Manrope 228.4 临界、fallback 溢出（实测），故降至 18px。
     行高保持 28px 不变 → 标题底线 79.5 与编号底线 79 仍对齐 */
  font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;      /* 兜底：极端字体宽度时裁切而非折行 */
  transition: opacity var(--duration-base, 0.3s) var(--ease-standard, ease);
}

.ard-timeline__active-line {
  position: absolute;
  top: 49.77%;           /* 109.5/220：线对齐箭头中线（-10+109.5 = 99.5） */
  left: 8px;
  right: 8px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.ard-timeline__active-desc {
  position: absolute;
  top: 59.32%;           /* 130.5/220：desc 顶距线 21px（设计稿） */
  left: 8px;
  right: 8px;
  /* 16px/22：2 行 44px → 底 174.5，斜切线（x=250 处 y≈193）内安全（余量 19px）；
     20px/27 时 Manrope 2 行底 183.5 贴线、fallback 字体折 3 行（底 210.5）穿出右下斜切缺口（实测溢出），故降号 */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-white);
  overflow: hidden;      /* 兜底：极端字体折 3 行时裁切而非穿出蓝块 */
  transition: opacity var(--duration-base, 0.3s) var(--ease-standard, ease);
}

/* 高亮卡文字切换时 fade */
.ard-timeline__active.is-switching .ard-timeline__active-title,
.ard-timeline__active.is-switching .ard-timeline__active-desc {
  opacity: 0;
}

/* ---- 左右箭头 100×100：设计稿在步骤条内 (0,50)/(1390,50)（步骤条 1490×220）
       → 相对 steps：left/right 0、top 22.7%（50/220）——贴卡组两侧，断点自动跟随 ---- */
.ard-timeline__arrow {
  position: absolute;
  top: 22.7%;            /* 50/220：设计稿箭头 @top50（100 高），中线 100 与卡片中线对齐 */
  width: min(100px, 5.208vw);
  aspect-ratio: 1 / 1;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ard-timeline__arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

.ard-timeline__arrow--prev {
  left: 0;
}

.ard-timeline__arrow--next {
  right: 0;
}

/* 移动端专用箭头（挂在 __stage 图片框内，上下居中）；PC 隐藏，PC 箭头仍用 __steps 内的原按钮 */
.ard-timeline__arrow--m {
  display: none;
}

/* ---- 水印 940×145 @ (0,1295) opacity 0.1 ---- */
.ard-timeline__watermark {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48.96%;         /* 940/1920 */
  aspect-ratio: 940 / 145;
  pointer-events: none;
}

/* ---------- responsive ---------- */

@media (max-width: 1440px) {
  .ard-timeline {
    padding: 100px 0 302px;
  }
  .ard-timeline__title,
  .ard-timeline__desc {
    margin-left: var(--container-padding);
  }
  .ard-timeline__desc {
    max-width: 100%;          /* 覆盖 PC 84.375%，避免灰色描述被限制在窄宽内 */
  }
  .ard-timeline__steps {
    left: var(--container-padding);
    width: calc(100% - 2 * var(--container-padding));
  }
}

@media (max-width: 768px) {
  .ard-timeline {
    padding: 80px 0 85px;   /* 底部 140→85：水印及以下内容（ab-cta 卡片）整体上移 55px */
  }
  .ard-timeline__title,
  .ard-timeline__desc {
    margin-left: var(--container-padding);
  }
  .ard-timeline__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
    text-align: center;
  }
  .ard-timeline__watermark {
    width: 100%;                   /* 同 products：移动端铺满屏宽等比缩放 */
    max-width: 940px;
  }
  .ard-timeline__desc {
    font-size: clamp(0.9375rem, 0.08vw + 0.92rem, 1.0625rem);
    text-align: center;              /* 移动端灰色描述左右居中 */
    margin: 0 var(--container-padding) 45px;   /* 左右留白同 ab-cta 蓝色卡片 */
  }
  /* 移动端：图片区收窄（4:3）圆角，左右留白与下方 ab-cta 卡片一致（var(--container-padding)），
     隐藏步骤卡与蓝色高亮块；箭头 absolute 覆盖在图片上左右分布、上下居中；
     图片下方一行：标题+描述（居中） */
  .ard-timeline__stage {
    aspect-ratio: 4 / 3;
    margin: 0 var(--container-padding);     /* 与 ab-cta 卡片同款左右留白 */
    width: calc(100% - 2 * var(--container-padding));
    border-radius: var(--radius-md);                     /* 图片圆角 */
  }
  .ard-timeline__steps {
    position: static;
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    justify-content: center;
    margin: 24px 0 0;            /* 图片→标题+描述 20+5px */
    padding: 0 var(--container-padding);
  }
  .ard-timeline__step {
    display: none;                 /* 步骤卡隐藏，改用箭头切换 */
  }
  .ard-timeline__active {
    position: static;
    width: auto;
    flex: 1;                       /* 文字区占满箭头之间的空间 */
    aspect-ratio: auto;
    background: none;              /* 去掉蓝色色块 */
    transform: none;
  }
.ard-timeline__active-title {
    position: static;
    display: block;              /* <b> 默认 inline，必须块级才能独立成行 */
    font-size: clamp(0.9375rem, 0.28vw + 0.87rem, 1.375rem);
    line-height: 1.5;
    text-align: center;          /* 标题一行，左右居中 */
    color: var(--color-text);
    margin: 0 0 6px;
    white-space: normal;         /* 允许换行，标题可折行 */
    overflow: visible;
  }
  .ard-timeline__active-line {
    display: none;
  }
.ard-timeline__active-desc {
    position: static;
    display: block;              /* <span> 默认 inline，必须块级才能独立成行 */
    font-size: clamp(0.875rem, 0.04vw + 0.87rem, 0.9375rem);
    line-height: 1.5;
    text-align: center;          /* 灰色描述一行，左右居中 */
    color: var(--color-text-muted);
    margin: 0;
  }
  /* 箭头：隐藏 __steps 内的 PC 箭头，改用 __stage 内的 --m 箭头（相对图片框上下居中） */
  .ard-timeline__steps .ard-timeline__arrow {
    display: none;
  }
  .ard-timeline__arrow--m {
    display: flex;
    position: absolute;            /* 定位基准 = __stage（图片框） */
    top: 50%;
    transform: translateY(-50%);   /* 图片框内上下居中 */
    width: 44px;
  }
  .ard-timeline__arrow--prev {
    left: 8px;
  }
  .ard-timeline__arrow--next {
    right: 8px;
  }
}

/* ==================== 无障碍降级 ==================== */
@media (max-width: 576px) {
  .ard-timeline__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ard-timeline__bg,
  .ard-timeline__step,
  .ard-timeline__active,
  .ard-timeline__active-title,
  .ard-timeline__active-desc {
    transition: none !important;
  }
}