/**
 * Component Sourcing 子页 · 段5 BOM 材料计划（八步流程条）
 *
 * 数值取自 Figma 实测：标题 #14363F 40px/73、副标题 #008C11 24px/54、
 * 正文 #666666 18px/27（宽 1272）、编号圆 56×56（#EFF5F3 + 圆角 10，未选中无描边）、
 * 圆心间距 186（1:1321 编号 x297 / 1:1322 编号 x481，圆心 307.5 / 493.5）、
 * 横线 #CCE0D7 1px（1358 宽）、已走过段 #008C11 190px、
 * 编号 #008C11 20px Outfit Bold、步骤名 #666666 20px Outfit SemiBold；
 * 选中步为品牌绿实心圆 + 白字 + 绿步骤名（1:1076 / 1:1322 / 1:1166，
 * 注意 1:1166 步骤名仍是 Outfit **SemiBold(600)**，不是 Bold）。
 * 悬停复用选中态的绿色描边 token，见下方 (hover: hover) 段。
 */

.csrc-plan {
  /* 设计稿：段4 底（2819）→ 段5 内容顶（2896）= 77px；段5 底与段6 卡片间 70px 由两段分摊 */
  padding-block: 77px 35px;
  background: #ffffff;
}

.csrc-plan__inner {
  max-width: 1718px /* = 设计稿内容宽 1638 + 左右各 40 padding */;
  margin: 0 auto;
  padding: 0 40px;
}

.csrc-plan__title {
  /* 设计稿各段「标题→副标题」统一为 15（Plan 2896→2984、Consigned 8584→8672）。 */
  margin: 0 0 15px;
  font-family: var(--pcb-font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 73px;
  text-align: center;
  color: #14363f;
}

.csrc-plan__subtitle {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 54px;
  text-align: center;
  color: #008c11;
}

.csrc-plan__body {
  max-width: 1272px;
  margin: 0 auto 62px;
  font-size: 18px;
  line-height: 27px;
  text-align: center;
  color: #666666;
}

/* ── 八步流程条 ─────────────────────────────────────── */

.csrc-plan__steps {
  position: relative;
  display: grid;
  /* 设计稿圆心是等距 186：8 个 56 宽的圆在 1358 容器里两端对齐
     （1358 = 7×186 + 56）。用 repeat(8, 1fr) 会得到 169.75 的间距，
     与设计稿差 16px/步，整体收窄 118px。 */
  grid-template-columns: repeat(8, 56px);
  justify-content: space-between;
  max-width: 1358px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* 贯穿横线：刚好从一个圆心连到另一个圆心（半径 28 = 56 / 2） */
.csrc-plan__steps::before {
  content: "";
  position: absolute;
  top: 28px;
  right: 28px;
  left: 28px;
  height: 1px;
  background: #cce0d7;
}

/* 已走过的横线段 */
.csrc-plan__steps::after {
  content: "";
  position: absolute;
  top: 28px;
  right: 28px;
  left: 28px;
  height: 1px;
  background: #008c11;
  transform: scaleX(var(--csrc-plan-progress, 0));
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.csrc-plan-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 整步是一个 tab 按钮：圆 + 步骤名都在点击热区内 */
.csrc-plan-step__btn {
  display: flex;
  flex-direction: column;
  /* 设计稿：圆底 → 步骤名顶 = 20
     （段5 1:1321 圆底 3243.5 → 1:1162 步骤名 3263；段11 1:1461 底 8931 → 1:1479 8951）。 */
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  background: none;
  border: 0;
  cursor: pointer;
}

.csrc-plan-step__index {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 20px;
  font-weight: 700; /* 设计稿 1:1321 为 Outfit Bold */
  line-height: 27px;
  color: #008c11;
  background: #eff5f3;
  /* 设计稿 1:1075 的未选中圆 strokes.visible = false（无描边）；
     透明描边占位，保证 hover / 选中时改色不引起 56×56 尺寸跳动。 */
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.csrc-plan-step__title {
  font-size: 20px;
  font-weight: 600; /* 设计稿 1:1162 / 1:1166 都是 Outfit SemiBold */
  line-height: 20px;
  /* 列宽只有 56（圆心间距 186），文字不换行 + 溢出居中，
     才能让步骤名始终居中在圆心下方。 */
  white-space: nowrap;
  color: #666666;
  transition: color 0.22s ease;
}

/* ── 悬停：复用设计稿选中态的绿色描边 token（1:1076 的 stroke #008C11）──
   只加描边与绿色文字，不填充实心绿 —— 与真正的选中态保持区分。 */

@media (hover: hover) {
  .csrc-plan-step:not(.is-active) .csrc-plan-step__btn:hover .csrc-plan-step__index {
    border-color: #008c11;
    box-shadow: 0 10px 22px rgba(0, 140, 17, 0.12);
    transform: translateY(-2px);
  }

  .csrc-plan-step:not(.is-active) .csrc-plan-step__btn:hover .csrc-plan-step__title {
    color: #008c11;
  }
}

/* 键盘焦点环（悬停环在触屏与键盘下都不会出现） */
.csrc-plan-step__btn:focus-visible {
  outline: 2px solid #008c11;
  outline-offset: 4px;
  border-radius: 12px;
}

/* ── 选中步：设计稿原样（1:1076 实心绿 + 1:1322 白字 + 1:1166 绿名 SemiBold）── */

.csrc-plan-step.is-active .csrc-plan-step__index {
  color: #ffffff;
  background: #008c11;
  border-color: #008c11;
}

.csrc-plan-step.is-active .csrc-plan-step__title {
  /* 设计稿 1:1166 是 Outfit SemiBold(600)，只有颜色变绿，字重不变。 */
  font-weight: 600;
  color: #008c11;
}

@media (prefers-reduced-motion: reduce) {
  .csrc-plan-step__index,
  .csrc-plan-step__title { transition: none; }

  .csrc-plan-step:not(.is-active) .csrc-plan-step__btn:hover .csrc-plan-step__index { transform: none; }
}

/* ── 响应式 ─────────────────────────────────────────── */

@media (max-width: 1280px) {
  .csrc-plan { padding-block: 70px 80px; }
  .csrc-plan__title { font-size: 28px; line-height: 52px; }
  .csrc-plan__subtitle { font-size: 19px; line-height: 38px; }
  .csrc-plan__body { font-size: 16px; line-height: 25px; margin-bottom: 44px; }
  .csrc-plan__steps { grid-template-columns: repeat(8, 44px); }
  .csrc-plan-step__index { width: 44px; height: 44px; font-size: 16px; }
  .csrc-plan-step__title { font-size: 15px; }
  .csrc-plan-step__btn { gap: 16px; }
  .csrc-plan__steps::before,
  .csrc-plan__steps::after { top: 22px; right: 22px; left: 22px; }
}

@media (max-width: 900px) {
  .csrc-plan { padding-block: 52px 60px; }
  .csrc-plan__title { font-size: 22px; line-height: 38px; }
  .csrc-plan__subtitle { font-size: 17px; line-height: 30px; }
  .csrc-plan__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 12px;
  }
  .csrc-plan__steps::before,
  .csrc-plan__steps::after { display: none; }
  .csrc-plan-step__index { width: 38px; height: 38px; font-size: 14px; }
  .csrc-plan-step__title { font-size: 13px; text-align: center; }
}