/**
 * Component Sourcing 子页 · 段10 来料追溯与受控存储
 *
 * 数值取自 Figma 实测：标题 #14363F 40px/73（居中）；副标题 #008C11 24px/54；
 * 正文 #666666 18px/27（宽 1272）；左侧竖图 438×770（列间距 118）；
 * 行标题 #14363F 20px/24（宽 278）；行说明 #666666 16px/24（宽 804）；
 * 分隔线 #CCE0D7 / 1082 宽；底部原则块 #EFF5F3 圆角 10 / 1082×98。
 */

.csrc-trace {
  /* 设计稿该段白底 7149..8516：标题顶距段顶 134，说明条底 8338 → 段底 8516 = 178。 */
  padding-block: 134px 178px;
  background: #ffffff;
}

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

.csrc-trace__title {
  /* 设计稿标题框底 7356 → 副标题顶 7371，间距 15。
     客户 0826 r12「文字靠左」：标题从居中改左对齐（客户复核截图即此）。 */
  margin: 0 0 15px;
  font-family: var(--pcb-font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 73px;
  text-align: left;
  color: #14363f;
}

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

.csrc-trace__body {
  max-width: 1272px;
  /* 设计稿正文框底 7514 → 首行分隔线 7554，间距 40。 */
  margin: 0 auto 40px;
  font-size: 18px;
  line-height: 27px;
  text-align: center;
  color: #666666;
}

/* ── 两列：左竖图 + 右清单 ─────────────────────────── */

.csrc-trace__cols {
  display: grid;
  grid-template-columns: minmax(0, 438px) minmax(0, 1082px);
  gap: 0 118px;
  justify-content: space-between;
  max-width: 1720px;
  margin: 0 auto;
}

.csrc-trace__figure {
  align-self: start;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
}

.csrc-trace__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* 清单行：标题 278 + 说明 804 */
.csrc-trace-row {
  display: grid;
  /* 设计稿：标题列文字盒 195..211 → 正文列起点 975 / 宽 802..804。
     此前标题列 278 + 间距 40 会把正文推到 1015，正文列也只有 764。 */
  grid-template-columns: minmax(0, 198px) minmax(0, 804px);
  gap: 0 80px;
  /* 设计稿行分隔线间距实测为 100（7654/7754/…/8154），
     行内容 48 + 上内边距 22 + 下内边距 29 + 边框 1 = 100。 */
  padding: 22px 0 29px;
  border-top: 1px solid #cce0d7;
}

.csrc-trace-row__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #14363f;
}

.csrc-trace-row__body {
  font-size: 16px;
  line-height: 24px;
  color: #666666;
}

/* 底部原则块 */
.csrc-trace__note {
  /* 设计稿最后一行（Discrepancy，正文单行）底 8235 = 说明条顶 8235，无额外间距；
     其行高比统一行多 5，故用 5 补齐。 */
  margin-top: 5px;
  padding: 20px 15px;
  background: #eff5f3;
  border: 1px solid #b8d8bc;
  border-radius: 10px;
}

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

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

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

@media (max-width: 1500px) {
  .csrc-trace__title { font-size: 34px; line-height: 62px; }
  .csrc-trace__subtitle { font-size: 21px; line-height: 46px; }
  .csrc-trace__cols { gap: 0 60px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  .csrc-trace-row { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 0 28px; }
}

@media (max-width: 1080px) {
  .csrc-trace { padding-block: 60px 72px; }
  .csrc-trace__title { font-size: 26px; line-height: 46px; }
  .csrc-trace__subtitle { font-size: 18px; line-height: 34px; }
  .csrc-trace__body { font-size: 16px; line-height: 25px; margin-bottom: 38px; }
  .csrc-trace__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .csrc-trace__figure { max-width: 438px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .csrc-trace-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 16px 0;
  }
  .csrc-trace-row__title { font-size: 17px; line-height: 24px; }
  .csrc-trace-row__body { font-size: 15px; line-height: 22px; }
  .csrc-trace__note-body { font-size: 15px; }
}