/**
 * Component Sourcing 子页 · 段7 寻源通道与源头治理
 *
 * 数值取自 Figma 实测：段背景 #F9FBFA / 1920×990；标题 #14363F 40px/73（居中）；
 * 左列标题 28px/42（品牌绿 + 深色混排）；左列说明 #666666 16px/20（宽 556）；
 * 表格 942×（列 299 + 352 + 291 相邻无间距），列起点 x=823/1122/1474
 * （1:1274 x823 / 1:1281 x1122 / 1:1296 分隔线 823 宽 942）；
 * 表头 #008C11 24px；行·列1 #14363F 16px/28；行·列2/3 #14363F 14px/20；
 * 底部原则块 #EFF5F3 圆角 10 描边 #B8D8BC（942×98）。
 */

.csrc-ch {
  /* 配图出血量变量 --csrc-ch-bleed 已于 2026-10-09（客户 1009 r15）停用并移除：
     配图不再贴视口左缘出血，改为收进左列、与正文同宽（见 .csrc-ch__figure）。 */
  padding-block: 76px 90px;
  background: #f9fbfa;
  /* 保险：任何内容溢出都不触发横向滚动条 */
  overflow-x: clip;
}

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

.csrc-ch__title {
  /* 设计稿标题框底 3966 → 左侧栏顶 4035，间距 69。 */
  margin: 0 0 69px;
  font-family: var(--pcb-font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 73px;
  text-align: center;
  color: #14363f;
}

/* ── 两列：左说明 + 右表格 ──────────────────────────── */

.csrc-ch__cols {
  display: grid;
  /* 设计稿：左列 x141、表 x823（宽 942）→ 左列 622 + 间距 60。
     原来用 space-between，表实际落在 x861、宽 918。 */
  grid-template-columns: minmax(0, 622px) minmax(0, 942px);
  gap: 0 60px;
  justify-content: start;
  max-width: 1718px;
  margin: 0 auto;
}

/* 左列：设计稿 1:1285 标题框 141,4088（= 表头 1:1274 顶 4035 之下 53） */
.csrc-ch__side {
  padding-top: 53px;
}

.csrc-ch__side-title {
  /* 设计稿 1:1285：宽 398（自动高 → 2 行）/ Outfit **Black(900)** / 行高 42；
     "Control the Source" 段品牌绿，其余 #14363F。 */
  max-width: 398px;
  margin: 0 0 21px;
  font-size: 28px;
  font-weight: 900;
  line-height: 42px;
  color: #14363f;
}

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

.csrc-ch__side-body {
  /* 设计稿 1:1284：556×159 / 16px / 行高 20，正文里有一段手动分段（\n\n），
     pre-line 让后台输入的换行生效。 */
  max-width: 556px;
  margin: 0 0 42px;
  white-space: pre-line;
  font-size: 16px;
  line-height: 20px;
  color: #666666;
  /* 客户 1009 r15「文字两端对齐」：口径同产品页正文（inter-word + 末行自然）。 */
  text-align: justify;
  text-justify: inter-word;
  -webkit-text-justify: inter-word;
  text-align-last: left;
}

/* 配图：客户 1009 r15「图片跟右侧一样」——
   原先 710px 宽 + 负 margin 向左出血，越出左列（622）并贴视口左缘（实测 x=0）；
   改为与正文同宽（556）、左缘与正文左缘对齐，不再越出内容列。

   客户 1009 二次反馈「跟其他两个页面还是不太一样 / 圆角也不见了」：
   1) 圆角原为 0，与 PCB 页 .pcb-verify__figure、PCBA 页 .pcba-quality__figure 的
      12px 不一致 → 统一为 12px；
   2) 原先锁死容器比例 aspect-ratio: 710/340（设计稿 2.09:1）并 object-fit: contain，
      而运营上传图实际为 1600×1000（1.6:1）→ contain 下图片只绘制 426×266、
      左右各留 65px 空白，视觉上"图片变小"且与正文宽度对不齐。
      改为与 PCB 页验证段同款：按图片自然比例（height:auto）完整显示，无留白、无裁切。
      若运营改传 710:340 的图，高度会自动回到设计稿的 266。 */
.csrc-ch__figure {
  width: 556px;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
}

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

/* ── 右列表格 ───────────────────────────────────────── */

.csrc-ch__head {
  display: grid;
  /* 设计稿三列相邻无间距（299 + 352 + 291 = 942，列起点 823/1122/1474）；
     加 20px gap 会让第三列被挤到 227 宽、整表宽度对不上。 */
  grid-template-columns: 299px 352px 291px;
  gap: 0;
  /* 设计稿：表头文字底 4063 → 分隔线 4088，间距 25。 */
  padding-bottom: 25px;
}

.csrc-ch__h1,
.csrc-ch__h2,
.csrc-ch__h3 {
  font-size: 24px;
  font-weight: 700;
  color: #008c11;
}

.csrc-ch__h1 { line-height: 28px; }
/* 设计稿 1:1281：字号 24 / 行高 22 */
.csrc-ch__h2,
.csrc-ch__h3 { line-height: 22px; font-size: 24px; }

.csrc-ch-row {
  display: grid;
  grid-template-columns: 299px 352px 291px;
  gap: 0;
  /* 设计稿：分隔线 4088 → 行首文字 4108，上内边距 19。 */
  padding: 19px 0;
  border-top: 1px solid rgba(20, 54, 63, 0.14);
}

.csrc-ch-row__path {
  font-size: 16px;
  line-height: 28px;
  color: #14363f;
}

.csrc-ch-row__applies,
.csrc-ch-row__focus {
  font-size: 14px;
  line-height: 20px;
  color: #14363f;
}

/* 底部原则块 */
.csrc-ch__note {
  margin-top: 24px;
  /* 设计稿 1:1307 / 1:1311：块顶 4653 → 标签顶 4666，上内边距 13；块宽 942。 */
  padding: 13px 15px;
  background: #eff5f3;
  border: 1px solid #b8d8bc;
  border-radius: 10px;
}

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

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

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

@media (max-width: 1500px) {
  .csrc-ch__title { font-size: 34px; line-height: 62px; margin-bottom: 44px; }
  .csrc-ch__side-title { font-size: 24px; line-height: 36px; }
  .csrc-ch__head,
  .csrc-ch-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  .csrc-ch { padding-block: 56px 68px; }
  .csrc-ch__title { font-size: 26px; line-height: 48px; }
  .csrc-ch__cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* 单列时没有右侧表头，去掉为对齐加的顶部留白 */
  .csrc-ch__side { padding-top: 0; }
  .csrc-ch__side-title { max-width: none; }
  .csrc-ch__side-body { margin-bottom: 28px; }
  .csrc-ch__figure { display: none; }
  .csrc-ch__h2,
  .csrc-ch__h3 { font-size: 17px; }
  .csrc-ch__h1 { font-size: 18px; }
}

@media (max-width: 720px) {
  .csrc-ch__head { display: none; }
  .csrc-ch-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 18px 0;
  }
  .csrc-ch-row__path { font-size: 17px; font-weight: 700; color: #008c11; }
  .csrc-ch__note-body { font-size: 15px; }
}