/**
 * PCB 中心页 · 段4 能力快照表 + 段5 需求匹配
 *
 * 段4 数值取自 Figma 实测：段背景 #F9FBFA；标题 #14363F 40px/73；
 * 表头 #008C11 24px；表格列宽 306 / 399 / 423（列起点 x=652/958/1357）；
 * 行名 #14363F 16px/28；值 14px/20；注释 14px/20；分隔线 #CCE0D7；
 * 左列标题 28px/42（绿 + 深混排）；按钮 368×60 圆角 4 描边 #008C11；装饰图 912×620。
 *
 * 段5 数值：标题 40px/73；副标题 #008C11 28px/42；正文 #666666 18px/20（1054 宽）；
 * 卡片 526×432（横向排列，间距 30）；卡图 526×212。
 */

/* ── 段4：能力快照表 ─────────────────────────────────── */

.pcb-capability {
  padding-block: 74px 90px;
  background: #f9fbfa;
}

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

.pcb-capability__title {
  margin: 0 0 62px;
  font-family: var(--pcb-font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 73px;
  text-align: center;
  color: #14363f;
}

.pcb-capability__cols {
  display: grid;
  grid-template-columns: minmax(0, 402px) minmax(0, 1128px);
  gap: 0 60px;
  justify-content: space-between;
  max-width: 1720px;
  margin: 0 auto;
}

.pcb-capability__subtitle {
  margin: 0 0 22px;
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  color: #14363f;
}

.pcb-capability__subtitle-lead { color: #008c11; }

.pcb-capability__lead {
  /* 设计稿 1:748：402×164 / 16px / 行高 20，正文里有一段手动分段（\n\n）——
     客户需求表第 20 行「上面文字是有分段的」。pre-line 让后台输入的换行生效。 */
  margin: 0;
  white-space: pre-line;
  /* 客户 9/28 新增 r3「文字两端对齐」。 */
  text-align: justify;
  font-size: 16px;
  line-height: 20px;
  color: #666666;
}

/* 左列纵向 flex。原设计按钮沉底对齐表格末行；
   客户 9/28 新增 r4/r13 改为：按钮紧跟说明文字、整列相对右侧表格垂直居中
   （PCB 段4 与 PCBA 段5 共用本类，两页客户诉求方向一致，同处生效）。 */
.pcb-capability__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 左列按钮：透明底 + 绿描边；紧跟 lead，间距与段内节奏一致 */
.pcb-capability__cta {
  margin-top: 28px;
  display: inline-flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-width: 368px;
  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;
}

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

.pcb-capability__cta-dot svg { width: 14px; height: 14px; }

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

/* ── 表格（列宽 306 / 399 / 423）───────────────────── */

.pcb-capability__table-wrap { min-width: 0; }

.pcb-capability__table {
  width: 100%;
  border-collapse: collapse;
}

.pcb-capability__table thead th {
  padding: 0 24px 16px 0;
  font-size: 24px;
  font-weight: 700;
  text-align: left;
  vertical-align: top;
  color: #008c11;
}

.pcb-capability__table thead th:nth-child(1) { width: 306px; line-height: 28px; }
.pcb-capability__table thead th:nth-child(2) { width: 399px; line-height: 22px; }
.pcb-capability__table thead th:nth-child(3) { width: auto; line-height: 22px; padding-right: 0; }

/* 设计稿该表 9 行**每行固定 60px**（标签 3052/3112/…/3531，间距 60；
   即使注释是两行也按 60 排），内容在行内垂直居中。 */
.pcb-capability__table tbody tr { height: 60px; border-top: 1px solid #cce0d7; }

.pcb-capability__table tbody th {
  padding: 9px 24px 9px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-align: left;
  vertical-align: middle;
  color: #14363f;
}

.pcb-capability__table tbody td {
  padding: 9px 24px 9px 0;
  font-size: 14px;
  line-height: 20px;
  vertical-align: middle;
  color: #14363f;
}

.pcb-capability__table tbody td:last-child { padding-right: 0; }

/* 装饰图：设计稿占位 912×620，实际图形内容约 518 宽。
   不设 width:100%（否则会被拉伸变形），改为按原始比例居中显示。 */
/*
 * 段4 能力表上方的装饰图已移至段5 —— 设计稿里它是段5 左上角的背景层
 * （节点 1:107，与标题区重叠、不占布局高度）。此处保留占位说明以免误加回流式图片。
 */

/* ── 段5：需求匹配 ──────────────────────────────────── */

.pcb-controls {
  position: relative;
  /* 设计稿该段白底 3640..4707：卡片区底 4538 → 段底 469，实测下内边距 169。 */
  padding-block: 90px 169px;
  background: #ffffff;
}

/* 装饰图（客户 9/23 设计新增 r5「底图不对」）：大圆弧电路底纹贴段左上角，
   设计稿量测约 610×700（视口 1920），不占布局高度。 */
.pcb-controls__decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 610px;
  height: 700px;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.pcb-controls__decor svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pcb-controls__inner {
  position: relative;
  z-index: 1;
  max-width: 1718px /* = 设计稿内容宽 1638 + 左右各 40 padding */;
  margin: 0 auto;
  padding: 0 40px;
}

.pcb-controls__title {
  /* 设计稿标题框底 3803 → 副标题顶 3829，间距 26。 */
  margin: 0 0 26px;
  font-family: var(--pcb-font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 73px;
  text-align: center;
  color: #14363f;
}

.pcb-controls__subtitle {
  /* 设计稿副标题底 3871 → 正文顶 3888，间距 17。 */
  margin: 0 0 17px;
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  text-align: center;
  color: #008c11;
}

.pcb-controls__body {
  max-width: 1054px;
  /* 设计稿正文底 3928 → CTA 顶 3989，间距 61。 */
  margin: 0 auto 61px;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
  color: #666666;
}

.pcb-controls__actions {
  display: flex;
  justify-content: center;
  /* 设计稿 CTA 底 4049 → 卡片区顶 4082，间距 33。 */
  margin-bottom: 33px;
}

.pcb-controls__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;
}

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

.pcb-controls__cta-dot svg { width: 14px; height: 14px; }

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

/* ── 横向卡片轨（4 张 × 526，间距 30，可横向滚动）────── */

.pcb-controls__rail {
  display: grid;
  grid-auto-flow: column;
  /* 列宽必须固定：minmax(0, 526px) 会被网格压塌（实测 4 张全塞进容器 → 288）。
     设计稿卡片 526（与能力表 1:783 同宽），轨道里 3.5 张可见、横向滚动。
     客户需求表第 5 行「图片比现在宽」。 */
  grid-auto-columns: 526px;
  gap: 30px;
  max-width: 1780px;
  margin: 0 auto;
  padding: 4px 40px 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  /* 客户 9/23 设计新增 r7「需要滑动效果」：桌面可按住拖动（JS 拖拽滚动），抓手提示。
     客户 9/28 复核「左右拉不要呈现为横向滚动条、删除横向滚动条」：
     保留拖拽/滑动与原生触摸滚动，仅隐藏滚动条本身。 */
  cursor: grab;
  scrollbar-width: none;
}

.pcb-controls__rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.pcb-controls__rail.is-dragging .pcb-controls-card { pointer-events: none; }

.pcb-controls__rail::-webkit-scrollbar { display: none; }

.pcb-controls-item {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.pcb-controls-card {
  display: flex;
  flex-direction: column;
  /* 客户 9/28 复核「卡片等高等宽，第一张要与其他卡片对齐」：
     轨道是单行网格，item 已随最高卡拉伸；卡片再 flex:1 撑满 item，
     各卡说明长短不一时卡框仍然等高、底边对齐（宽度本就由轨道钉死 526）。 */
  flex: 1 1 auto;
  overflow: hidden;
  /* 设计稿卡片有 1px 浅色描边 + 圆角（客户需求表第 5 行「外面有框」；
     照片贴着边框内侧，由卡片圆角裁切）。 */
  background: #ffffff;
  border: 1px solid #cce0d7;
  border-radius: 12px;
}

.pcb-controls-card__title {
  margin: 0 0 18px;
  /* 预留两行高度（2 × 28 行高）：标题有 1 行 / 2 行之分，
     固定占位后四张卡的卡图与说明区顶部才能横向齐平。 */
  min-height: 56px;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  color: #14363f;
}

.pcb-controls-card__media {
  height: 212px;
  margin: 0 0 20px;
  overflow: hidden;
  /* 照片贴卡片内缘：圆角交给卡片的 overflow 裁切。 */
  border-radius: 0;
}

.pcb-controls-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pcb-controls-card__body {
  display: flex;
  flex-direction: column;
  /* 客户 9/23 设计新增 r7「下面文字不要贴边」：文字与卡片内缘留出边距。
     客户 9/28 新增 r5 曾收紧为紧凑节奏并取消占位；同日复核改判——
     「设置卡片里面的标题和说明对齐」优先，恢复说明区行数占位（见下），
     组内 6 / 组间 19 的间距节奏保留。 */
  gap: 6px;
  padding: 20px 24px 24px;
}

.pcb-controls-card__label {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #008c11;
}

/* 第二组小标题（Practical Objective）与上一组说明的间距，对齐 PCBA 卡片 */
.pcb-controls-card__text + .pcb-controls-card__label { margin-top: 19px; }

.pcb-controls-card__text {
  margin: 0;
  /* 预留两行高度（2 × 20 行高）：说明长短不一时，
     下一组小标题（Practical Objective）仍保持横向齐平（客户 9/28 复核）。 */
  min-height: 40px;
  font-size: 14px;
  line-height: 20px;
  color: #666666;
}

/* 第一组说明（Manufacturing Controls 下）占位按当前运营内容实测收紧：
   桌面 526px 卡实测最长 2 行（40px），原 4 行（80px）多留 2 行空白（客户 9/28「间距放小」）。
   注意：占位 = 各卡最长说明的行数，后台把文案改长后需同步放大本值，
   否则 Practical Objective 小标题不再横向齐平。 */
.pcb-controls-card__body .pcb-controls-card__text:first-of-type { min-height: 40px; }

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

@media (max-width: 1500px) {
  .pcb-capability__title,
  .pcb-controls__title { font-size: 34px; line-height: 62px; }
  .pcb-capability__cols { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0 40px; }
  .pcb-capability__subtitle { font-size: 24px; line-height: 36px; }
  .pcb-capability__table thead th { font-size: 20px; }
  .pcb-controls__subtitle { font-size: 24px; line-height: 36px; }
}

@media (max-width: 1080px) {
  .pcb-capability { padding-block: 56px 64px; }
  .pcb-capability__title { margin-bottom: 40px; }
  .pcb-capability__cols { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pcb-capability__lead { margin-bottom: 28px; }
  .pcb-capability__cta { min-width: 0; width: 100%; }
  .pcb-capability__table thead th { font-size: 17px; }
  .pcb-capability__table tbody th { font-size: 15px; }
  .pcb-capability__table thead th:nth-child(1),
  .pcb-capability__table thead th:nth-child(2) { width: auto; }

  .pcb-controls { padding-block: 64px 72px; }
  .pcb-controls__subtitle { font-size: 20px; line-height: 32px; }
  .pcb-controls__body { font-size: 16px; line-height: 24px; }
  .pcb-controls__cta { min-width: 0; width: 100%; }
  .pcb-controls__rail {
    /* 列宽必须固定（与桌面 526px 同理）：minmax(0, 380px) 的下界是 0，
       网格会把 4 张卡压塌进容器 —— 840 实测卡宽 118、正文列 68px 一字一行。
       下界钉到 320px，轨道正常溢出并横向滚动。 */
    grid-auto-columns: minmax(320px, 380px);
    padding-inline: 24px;
  }
  .pcb-controls-card__media { height: 170px; }
  /* 卡片收窄到 380px 后行数变多：实测标题最多 4 行（112px）、
     第一组说明最多 9 行（180px），占位同步放大才能保持横向齐平（客户 9/28 复核）。 */
  .pcb-controls-card__title { min-height: 112px; }
  .pcb-controls-card__body .pcb-controls-card__text:first-of-type { min-height: 180px; }
}

@media (max-width: 720px) {
  .pcb-capability__table thead { display: none; }
  /* 基础层给 tr 的 height:60px 在 block 化后会钳住行高，多行内容溢出
     压到后续行/下一段（375 实测整表叠字），必须复位为 auto。 */
  .pcb-capability__table tbody tr { display: block; height: auto; padding: 14px 0; }
  /* 标题补齐移动端字号：此前只有 ≤1500 的 34px/62px（桌面 40/73 的比例），
     375 实测折 4 行 248px，而其他段标题均为 22~26px —— 全站唯一的漏降级。 */
  .pcb-capability__title { font-size: 26px; line-height: 42px; margin-bottom: 28px; }
  .pcb-capability__table tbody th,
  .pcb-capability__table tbody td { display: block; padding: 0 0 6px; }
  .pcb-capability__table tbody th { font-weight: 700; color: #008c11; }
  .pcb-controls__rail { grid-auto-columns: 86%; padding-inline: 20px; }
  /* 手机端卡片约 300px 宽但字号降为 19px：实测标题回到 2 行（52px）、
     第一组说明最长 5 行（100px，原 4 行 80 不够），占位按实测回収。 */
  .pcb-controls-card__title { font-size: 19px; line-height: 26px; min-height: 52px; }
  .pcb-controls-card__body .pcb-controls-card__text:first-of-type { min-height: 100px; }
}