/**
 * Component Sourcing 子页 · 段9 替代料与审批控制
 *
 * 数值取自 Figma 实测：段背景 #F9FBFA / 1920×870；标题 #14363F 40px/73（左对齐，502 宽 2 行）；
 * 左列标题 28px/42（绿 + 深混排）；左列说明 #666666 16px/20；
 * 工程边界小标 #008C11 16px/22；边界说明 #666666 16px/20（548 宽）；
 * 按钮 404×60（圆角 4 + 描边 #008C11，透明底）+ 绿圆 32×32；
 * 圆形插图 141×141，6 个按 3 列 × 2 行（列宽 255，列间距 73，行距 60）。
 */

.csrc-alt {
  padding-block: 95px 100px;
  background: #f9fbfa;
}

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

.csrc-alt__cols {
  display: grid;
  grid-template-columns: minmax(0, 557px) minmax(0, 1fr);
  gap: 0 140px;
  max-width: 1720px;
  margin: 0 auto;
}

/* ── 左列 ───────────────────────────────────────────── */

.csrc-alt__title {
  max-width: 502px;
  /* 设计稿标题框底 6520 → 副标题框顶 6558，间距 38。 */
  margin: 0 0 38px;
  font-family: var(--pcb-font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 73px;
  color: #14363f;
}

.csrc-alt__heading {
  margin: 0 0 26px;
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  color: #14363f;
}

.csrc-alt__heading-lead { color: #008c11; }

.csrc-alt__body {
  /* 设计稿正文框底 6803 → 说明标签顶 6827，间距 24。 */
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 20px;
  color: #666666;
}

.csrc-alt__note {
  /* 设计稿说明框底 6936 → CTA 按钮顶 7017，间距 81。 */
  margin-bottom: 81px;
}

.csrc-alt__note-label {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #008c11;
}

.csrc-alt__note-body {
  max-width: 548px;
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #666666;
}

/* 按钮：透明底 + 绿描边 + 右侧绿圆 */
.csrc-alt__cta {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-width: 404px;
  min-height: 60px;
  padding: 0 14px 0 24px;
  font-size: 16px;
  font-weight: 600;
  color: #14363f;
  text-decoration: none;
  background: transparent;
  border: 1px solid #008c11;
  border-radius: 4px;
  transition: background 0.24s ease, box-shadow 0.24s ease;
}

.csrc-alt__cta-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #ffffff;
  background: #008c11;
  border-radius: 50%;
}

.csrc-alt__cta-dot svg { width: 14px; height: 14px; }

.csrc-alt__cta:hover {
  background: #eff5f3;
  box-shadow: 0 12px 26px rgba(0, 140, 17, 0.14);
}

/* ── 右侧 6 个步骤（3 列 × 2 行）───────────────────── */

.csrc-alt__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 255px));
  gap: 60px 73px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csrc-alt-step__figure {
  width: 141px;
  height: 141px;
  margin: 0 0 14px;
}

.csrc-alt-step__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.csrc-alt-step__label {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 20px;
  color: #008c11;
}

/*
 * 步骤编号与标题排版（客户 9/23 设计新增 r33「文字排版颜色」）：
 * 对照正确稿（image300）—— 编号独占一行（绿），标题另起一行深色。
 */
.csrc-alt-step__index {
  display: block;
  margin: 0 0 2px;
  font-weight: 700;
}

.csrc-alt-step__title {
  display: block;
  font-weight: 700;
  color: #14363f;
}

.csrc-alt-step__body {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  color: #666666;
}

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

@media (max-width: 1500px) {
  .csrc-alt__title { font-size: 34px; line-height: 60px; margin-bottom: 28px; }
  .csrc-alt__heading { font-size: 24px; line-height: 36px; }
  .csrc-alt__cols { gap: 0 70px; }
  .csrc-alt__steps { gap: 44px 40px; }
  .csrc-alt-step__figure { width: 110px; height: 110px; }
}

@media (max-width: 1080px) {
  .csrc-alt { padding-block: 60px 72px; }
  .csrc-alt__title { font-size: 26px; line-height: 46px; max-width: none; }
  .csrc-alt__cols { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .csrc-alt__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .csrc-alt__cta { min-width: 0; width: 100%; }
}

@media (max-width: 640px) {
  .csrc-alt__title { font-size: 22px; line-height: 38px; }
  .csrc-alt__heading { font-size: 20px; line-height: 30px; }
  .csrc-alt__steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .csrc-alt-step__figure { width: 96px; height: 96px; }
}