/**
 * PCBA 中心页 · 段11 为什么选择 SUNHOPE
 *
 * 数值取自 Figma 实测：
 *   标题 #14363F 40px/73（**左对齐**，434 宽，两行）
 *   左列标题 28px/42（深色 + 品牌绿混排，433 宽）
 *   左列说明 #666666 16px/20（556 宽）
 *   按钮 404×60 圆角 4 描边 #008C11 + 绿圆 32×32（**两个，上下排列，间距 18**）
 *   行图标 71×71 品牌绿实心圆（内含白色线性图标 40×40）
 *   行标题 #14363F 16px/28；行说明 **#97A29C** 14px/20（837 宽）
 *   行分隔线 #B8D8BC 942 宽（首行上方无分隔线）
 *   行间距：圆 y=7350 → 7495 = 145px
 */

.pcba-why {
  /*
   * 设计稿（画板 1:550）：该段无通栏色块，即为页面白底；标题 y=7340、上一段（Quality）
   * 的浅底色块底为 7177，故该段标题距段顶 162。段底 8104（下一段色块顶 8105）。
   *
   * 段高按设计稿对齐到 927（162 + 内容 714 + 51）。下内边距取 51 是有意为之：
   * 设计稿的右列条目行距为 139/135/135，实现是 150（每行高约 11），内容合计比设计稿高约 74；
   * 该段是白底、段边界不可见，真正影响观感的是标题位置，因此优先把段高与标题位移对齐
   * （否则 Quality→Why 与 Why→Fit 两处间距会同时偏）。右列行距的差异另行处理。
   */
  padding-block: 162px 51px;
  background: #ffffff;
}

/* ── 区块标题：左对齐（位于左列内，与右侧 5 行并排）─── */

.pcba-why__title {
  max-width: 434px;
  margin: 0 0 49px;
  font-size: 40px;
  font-weight: 700;
  line-height: 73px;
  color: #14363f;
  text-align: left;
}

/* ── 两列：左 556 + 间隔 139 + 右 942 = 1637 ────────── */

/* 客户 9/28 新增 r17「整体跟右侧居中」：aside 相对右侧 5 行列表垂直居中。 */
.pcba-why__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pcba-why__cols {
  display: grid;
  grid-template-columns: minmax(0, 556px) minmax(0, 942px);
  gap: 0 60px;
  justify-content: space-between;
  max-width: 1780px;
  margin: 0 auto;
}

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

.pcba-why__subtitle {
  max-width: 433px;
  margin: 0 0 22px;
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  color: #14363f;
}

/*
 * 副标题的两段必须**各占一行**（客户需求表第 25 行「上面文字换行跟设计稿保持一致」）。
 *
 * 设计稿是「Keep the Board Material」/「Process and Evidence Connected」两行；
 * 两段在数据里用 | 分隔（"Keep the Board Material |Process and Evidence Connected"），
 * 但两个 span 是行内元素，浏览器会在 433 的宽度里把「Process」拉进第一行
 * （311 + 一个空格 + 418 的一部分）。改成块级后每段独占一行，
 * 418 ≤ 433 也不会再折。
 */
.pcba-why__subtitle > span {
  display: block;
}

.pcba-why__subtitle-accent { color: #008c11; }

.pcba-why__body {
  /* 客户 9/28 新增 r17「中间间隔位置需要一样」：与标题下间距（49）统一。 */
  margin: 0 0 49px;
  font-size: 16px;
  line-height: 20px;
  color: #666666;
}

.pcba-why__actions {
  display: grid;
  gap: 18px;
  max-width: 404px;
  /* 原按钮沉到底与右列末行齐平；客户 9/28 新增 r17 改为
     紧跟正文、间距与标题下间距一致，整列随 aside 垂直居中。 */
}

.pcba-why__cta {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-width: 404px;
  min-height: 60px;
  padding: 0 14px 0 22px;
  font-size: 16px;
  font-weight: 600;
  color: #14363f;
  text-decoration: none;
  border: 1px solid #008c11;
  border-radius: 4px;
  transition: background 0.24s ease, box-shadow 0.24s ease;
}

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

.pcba-why__cta-dot svg { width: 14px; height: 14px; }

.pcba-why__cta:hover {
  background: #eff5f3;
  box-shadow: 0 12px 26px rgba(0, 140, 17, 0.12);
}

/* ── 右列：行式布局 ─────────────────────────────────── */

.pcba-why__row {
  display: grid;
  grid-template-columns: 71px minmax(0, 1fr);
  gap: 0 37px;
  align-items: start;
  padding-block: 37px;
}

.pcba-why__row + .pcba-why__row { border-top: 1px solid #b8d8bc; }

.pcba-why__row:first-child { padding-block-start: 6px; }

.pcba-why__icon {
  display: grid;
  place-items: center;
  width: 71px;
  height: 71px;
  color: #ffffff;
  background: #008c11;
  border-radius: 50%;
}

.pcba-why__icon svg { width: 40px; height: 40px; }

.pcba-why__row-title {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  color: #14363f;
}

.pcba-why__row-body {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: #97a29c;
}

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

@media (max-width: 1500px) {
  .pcba-why { padding-block: 60px 76px; }
  .pcba-why__title { font-size: 32px; line-height: 52px; margin-bottom: 34px; }
  .pcba-why__cols { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 0 40px; }
  .pcba-why__subtitle { font-size: 24px; line-height: 36px; }
}

@media (max-width: 1080px) {
  .pcba-why__cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pcba-why__cta { min-width: 0; }
  .pcba-why__actions { max-width: 404px; }
}

@media (max-width: 720px) {
  .pcba-why { padding-block: 48px 56px; }
  .pcba-why__title { font-size: 26px; line-height: 38px; }
  .pcba-why__actions { max-width: none; }
  .pcba-why__cta { min-width: 0; width: 100%; }
  .pcba-why__row { grid-template-columns: 52px minmax(0, 1fr); gap: 0 18px; padding-block: 22px; }
  .pcba-why__icon { width: 52px; height: 52px; }
  .pcba-why__icon svg { width: 28px; height: 28px; }
}