/**
 * PCBA 中心页 · 段10 质量证据与测试对齐
 *
 * 数值取自 Figma 实测：标题 #14363F 40px/73（居中，828 宽）；
 * 表头 #008C11 24px（三列：309 / 382 / 254，列起点 x=836/1145/1527）；
 * 左列标题 28px/42（深色 + 品牌绿混排）；说明 #666666 16px/20（556 宽）；
 * 按钮等分列宽（原 404×60）圆角 4 描边 #008C11 + 绿圆 32×32；配图列内 556 宽 309 高（原 698×309 贴边出血，客户 9/28 r15 取消）；
 * 行标题 #14363F 16px/28（215 宽）；行内容 #14363F 14px/20；分隔线 #B8D8BC（942 宽）。
 *
 * 本段复用 .pcb-capability 的容器与标题，表格为**三列**（PCB 页验证段是两列）。
 */

.pcba-quality {
  /*
   * 设计稿（画板 1:550，节点 1:558：段 6161..7177，高 1017；标题 6233 即距段顶 72）：
   *   标题 +72（h=73）→ 表头文字 +226 → 首分隔线 +279 → 6 行各 112（+279/391/503/615/727/839）
   *   → 段底 +1016（表底到段底 65）
   * 实现原为 90 / 100，段高 1083（+66）。
   */
  padding-block: 72px 65px;
  /* 该段复用 .pcb-capability，设计稿要求浅底 #F9FBFA（能力表段才是白色）。 */
  background: #f9fbfa;
  overflow-x: clip;
}

/* 设计稿标题 6233 → 表格头 6387，间距 154（实现 135）。
   标题用的是 .pcb-capability__title（PCB 能力段共用，那边设计值是 62），此处只覆盖本段。 */
.pcba-quality .pcb-capability__title {
  margin-bottom: 81px;
}

.pcba-quality__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-quality__subtitle {
  margin: 0 0 22px;
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  color: #14363f;
}

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

.pcba-quality__intro {
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 20px;
  color: #666666;
}

/* 客户 9/28 新增 r16「上面调整完之后左侧需要跟右侧表格居中」：
   aside 相对右侧 Question Area 表格垂直居中。 */
.pcba-quality__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*
   * 与 PCB 页验证段同源（客户对两页提出同一诉求，属预期联动）：
   * justify-content 对齐的是**盒子**中心，而右表盒子上沿即表头文字、下沿比末行文字
   * 多出 25px 内边距 → 盒子中心比可见内容中心低约 12px；左列盒中心又比其可见内容中心
   * 低约 4px，合计 16px（1920 实测左列可见内容中心比右侧低 16px）。
   * 故加 16 × 2 = 32px 下内边距把左列内容上提 16px。桌面双栏专用，≤1080 复位。
   */
  padding-bottom: 32px;
}

/* 客户 9/28 新增 r15「上面按钮跟下面图片一样长」：按钮等分列宽（与配图同宽 556）。 */
.pcba-quality__cta {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  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-quality__cta-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #ffffff;
  background: #008c11;
  border-radius: 50%;
}

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

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

.pcba-quality__figure {
  /* 客户 9/28 新增 r15「图片不用靠边，跟右侧一样」：取消向视口左缘的出血
     （原 698 定宽 + 负 margin 出血），收回到左列栅格内（556 宽、圆角 12），
     与右侧表格左缘对齐，同 PCB 页验证段配图。 */
  width: 100%;
  max-width: 698px;
  margin: 34px 0 0;
  overflow: hidden;
  border-radius: 12px;
}

.pcba-quality__figure img {
  display: block;
  width: 100%;
  height: 309px;
  object-fit: cover;
}

/* ── 三列表格（309 / 382 / 254）────────────────────── */

.pcba-quality__head {
  display: grid;
  /* 设计稿表格三列按文字 x 定位：836 / 1145 / 1527 —— 列距 309 / 382，**无列间距**；
     表格总宽 942（表头分隔线节点 1:892 为 836..1778）→ 第 3 列 251。
     实现原来是 309/382/171 且加了 40px 列间距，第 3 列只有 171（设计 251），
     把「What It Supports」及各行「What It Supports」列都挤成多于设计稿的折行。 */
  grid-template-columns: 309px 382px minmax(0, 1fr);
  gap: 0;
  /* 设计稿表头文字顶 +226 → 首分隔线 +279，即表头块 53 = 文字 28 + 下内边距 25。 */
  padding-bottom: 25px;
}

.pcba-quality__head span {
  font-size: 24px;
  font-weight: 700;
  /* 设计稿表头文字高 28（节点 1:865）。 */
  line-height: 28px;
  color: #008c11;
}

.pcba-quality__row {
  display: grid;
  grid-template-columns: 309px 382px minmax(0, 1fr);
  gap: 0;
  /*
   * 设计稿 6 行**行高恒定 112**（分隔线 6440 / 6552 / 6664 / 6776 / 6888 / 7000），
   * 内容多寡不影响行高；行内内容顶部对齐（首行文字顶 = 行顶 + 边框 1 + 内边距 26）。
   * 实现原来按内容撑开（首行 93、其余 113，合计 658）。
   * 112 = 边框 1 + 26 + 最长内容 60（3 行）+ 25，故下内边距取 25。
   */
  min-height: 112px;
  padding: 26px 0 25px;
  border-top: 1px solid #b8d8bc;
}

.pcba-quality__area {
  /* 设计稿 1:866/1:867… 都是 Outfit SemiBold(600)。
     客户需求表第 24 行「左侧框里文字加粗」即此（原为 400）。 */
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  color: #14363f;
}

.pcba-quality__method,
.pcba-quality__supports {
  font-size: 14px;
  line-height: 20px;
  color: #14363f;
}

/* 设计稿 Evidence Method 列的每格文字框宽 237~290（实测），
   比实现里的列宽 382 窄很多，所以设计稿每格要多折一行。
   客户需求表第 24 行「右侧框里再多换一行」即此。
   实测扫描：≤205 会变成 3,2,2,3,3,3；≥250 会掉成 2,2,2,2,2,3；
   只有 220~235 区间能复现设计稿的 2,2,2,3,3,3（取 228 留余量）。 */
.pcba-quality__method {
  max-width: 228px;
}

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

@media (max-width: 1500px) {
  .pcba-quality { padding-block: 60px 76px; }
  .pcba-quality__cols { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 0 40px; }
  .pcba-quality__subtitle { font-size: 24px; line-height: 36px; }
  .pcba-quality__head,
  .pcba-quality__row { grid-template-columns: minmax(0, 230px) minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 24px; }
  .pcba-quality__head span { font-size: 20px; }
}

@media (max-width: 1080px) {
  /* 堆叠后恢复常规流式：贴边出血与 698 定宽只属于桌面双栏布局。 */
  .pcba-quality__aside { padding-bottom: 0; }
  .pcba-quality__figure { width: auto; max-width: 100%; margin-left: 0; border-radius: 12px; }
  .pcba-quality__figure img { height: auto; }
  .pcba-quality__cols { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pcba-quality__cta { min-width: 0; width: 100%; }
  .pcba-quality__figure { max-width: 698px; }
}

@media (max-width: 720px) {
  .pcba-quality { padding-block: 48px 56px; }
  /* 桌面 81px 的标题间距在手机过大，收到与其他段一致。 */
  .pcba-quality .pcb-capability__title { margin-bottom: 28px; }
  .pcba-quality__head { display: none; }
  .pcba-quality__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0; }
  .pcba-quality__area { font-weight: 700; line-height: 24px; color: #008c11; }
  .pcba-quality__method,
  .pcba-quality__supports { font-size: 15px; line-height: 22px; }
}