/**
 * Component Sourcing 子页 · 段12 材料路径
 *
 * 数值取自 Figma 实测：卡片 804×242（#FFFFFF 圆角 20 描边 #B8D8BC，列间距 30）；
 * 卡片左图 278×242；标题 #14363F 24px/27；说明 #666666 16px/27（宽 455）；
 * CTA #008C11 14px。
 */

.csrc-path {
  /* 设计稿该段白色底 9593..10774：标题顶距段顶 94，说明条底 10631 → 段底 10774 = 143。 */
  padding-block: 94px 143px;
  background: #ffffff;
}

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

.csrc-path__title {
  /* 设计稿标题框底 9760 → 副标题顶 9775，间距 15。 */
  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-path__subtitle {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 54px;
  text-align: center;
  color: #008c11;
}

.csrc-path__body {
  max-width: 1272px;
  /* 设计稿正文框底 9918 → 卡片顶 9985，间距 67。 */
  margin: 0 auto 67px;
  font-size: 18px;
  line-height: 27px;
  text-align: center;
  color: #666666;
}

.csrc-path__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 804px));
  gap: 30px;
  justify-content: center;
  max-width: 1720px;
  margin: 0 auto;
}

.csrc-path-card {
  display: flex;
  min-height: 242px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #b8d8bc;
  border-radius: 20px;
  transition: box-shadow 0.24s ease, transform 0.24s ease;
}

.csrc-path-card:hover {
  box-shadow: 0 18px 40px rgba(4, 62, 48, 0.08);
  transform: translateY(-4px);
}

.csrc-path-card__figure {
  /* 客户 1009 r16「右移至左右间隔一样大」：原先插图贴卡片左缘（左距 1px），
     与文字右侧 30px 内边距不对称。改为插图左侧也留 30px（左右间隔相等），
     插图宽度同步从 278 收到 248 —— 卡片与正文宽度保持不变，正文不重排。 */
  flex: 0 0 248px;
  margin: 0 0 0 30px;
  overflow: hidden;
}

.csrc-path-card__figure img {
  display: block;
  width: 100%;
  height: 100%;
  /* 运营上传的是方形 SVG 动画，cover 会把动画上下裁掉（移动端更狠）。
     改为 contain：图框随布局响应式伸缩，图片在框内完整自适应显示。 */
  object-fit: contain;
}

.csrc-path-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 38px 30px 30px;
}

.csrc-path-card__title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 27px;
  color: #14363f;
}

.csrc-path-card__text {
  max-width: 455px;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 27px;
  color: #666666;
}

.csrc-path-card__link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: #008c11;
  text-decoration: none;
  transition: gap 0.24s ease;
}

.csrc-path-card__link svg { width: 14px; height: 14px; }

.csrc-path-card__link:hover { gap: 14px; }

.csrc-path__note {
  max-width: 1636px;
  /* 设计稿卡片网格底 10499 → 说明条顶 10533，间距 34。 */
  margin: 34px auto 0;
  padding: 20px 24px;
  background: #eff5f3;
  border: 1px solid #b8d8bc;
  border-radius: 10px;
}

.csrc-path__note-label {
  display: block;
  /* 设计稿标签底 10576 → 说明顶 10590，间距 14。 */
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #008c11;
}

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

@media (max-width: 1500px) {
  .csrc-path__title { font-size: 34px; line-height: 62px; }
  .csrc-path__subtitle { font-size: 21px; line-height: 46px; }
  .csrc-path-card__figure { flex: 0 0 220px; }
  .csrc-path-card__body { padding: 28px 24px; }
}

@media (max-width: 1080px) {
  .csrc-path { padding-block: 60px 72px; }
  .csrc-path__title { font-size: 26px; line-height: 46px; }
  .csrc-path__subtitle { font-size: 18px; line-height: 34px; }
  .csrc-path__body { font-size: 16px; line-height: 25px; margin-bottom: 38px; }
  .csrc-path__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 640px) {
  .csrc-path-card { flex-direction: column; min-height: 0; }
  .csrc-path-card__figure { flex: 0 0 180px; }
  .csrc-path-card__title { font-size: 20px; line-height: 26px; }
  .csrc-path-card__text { font-size: 15px; line-height: 24px; }
}