/**
 * PCBA 中心页 · 段2 路线选择补充样式
 * 设计稿：卡片内含「Typical Component Fit」与「Manufacturing Focus」两组说明（1:706~1:711）。
 */

.pcba-route-card__specs {
  margin: 0 25px 22px;
  padding: 0;
}

/* 设计稿 1:706（dt，1829）与 1:691（dd，1854）的文本框互相重叠 3px
   （dt 底 1857 > dd 顶 1854），故小标下边距为负值；1:709 / 1:694 同理。 */
.pcba-route-card__specs dt {
  margin-bottom: -3px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--pcb-green);
}

.pcba-route-card__specs dd {
  margin: 0 0 13px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--pcb-body);
}

.pcba-route-card__specs dd:last-of-type { margin-bottom: 0; }

@media (max-width: 640px) {
  .pcba-route-card__specs { margin-inline: 20px; }
}

/* ============================================================
   PCBA 覆盖 · 设计稿实测（1:676 / 1:679 / 1:688 / 1:706 / 1:691）
   PCBA 页的路线卡用**实拍照片通栏 526×179**（PCB 页是图标 + 底色块），
   故需覆盖 .pcb-route-card 的媒体区与图片约束。
   卡片：526×486 / 圆角 20 / 描边 #CCE0D7
   卡标题 #14363F 20px/28；小标 #008C11 14px/28；说明 #666666 14px/20
   ============================================================ */

/* 卡片 526×486。设计稿卡片底边 2048 → 链接圆点底 2032 = 16；
   链接用 `margin-top: auto` 贴底，故这段留白由卡片下内边距承担。 */
.pcba-route .pcb-route-card {
  min-height: 486px;
  padding-bottom: 16px;
}

.pcba-route-card .pcb-route-card__media {
  display: block;
  height: 179px;
  background: #f2f4f3;
  border-bottom: 0;
}

.pcba-route-card .pcb-route-card__media img {
  display: block;
  width: 100%;
  max-width: none;
  height: 179px;
  max-height: none;
  object-fit: cover;
}

/* 客户 SVG 路线插画（640×280，比例 2.29 ≠ 照片的 2.94 通栏比例）：
   cover 会裁掉动画线路两侧，改 contain 完整显示，留白由 #f2f4f3 底色承担。
   照片类（非 svg）仍按设计稿 cover 通栏。 */
.pcba-route-card .pcb-route-card__media img[src$=".svg"],
.pcba-route-card .pcb-route-card__media img[src$=".svgz"] {
  object-fit: contain;
}

.pcba-route-card .pcb-route-card__title {
  /* 设计稿 1:688 标题在 x166 = 卡片左 141 + 25（卡片有 1px 描边，故内缩 24）。
     原为 20，比设计稿少 5px，且与 dt/dd/链接的左边线不齐。 */
  margin: 35px 24px 24px;
  font-size: 20px;
  line-height: 28px;
  color: #14363f;
}

/* 小标（Typical Component Fit / Manufacturing Focus）为品牌绿 14px/28，
   设计稿 1:706 的字重是 Outfit **Bold**（原实现落到 600）。左边线与标题、链接对齐。 */
.pcba-route-card .pcba-route-card__specs dt {
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  color: #008c11;
  text-transform: none;
}

.pcba-route-card .pcba-route-card__specs dd {
  font-size: 14px;
  line-height: 20px;
  color: #666666;
}

/* 卡片底部链接：设计稿 1:697 文案在 x166（与标题、小标同一条左边线）、
   14px Outfit **SemiBold** 且**带下划线**；1:700 箭头圆 26×26，右缘距卡片右 27。
   原实现文案贴到卡片内边缘（1px）、字重 700、无下划线、圆 28。 */
.pcba-route .pcb-route-card__specs { margin-inline: 24px; }

.pcba-route .pcb-route-card__link {
  margin-right: 26px;
  margin-left: 24px;
}

/* 链接文案的 600 + 下划线已提到共享层（pcb-center/02-route.css），
   这里只保留 PCBA 卡片特有的左右内缩。 */

/* 卡片底部链接：品牌绿实心圆 + 白色箭头（设计稿手法，与页内其他 CTA 一致）。
   设计稿 1:700 该圆是 26×26（原实现 28）。 */
.pcba-route .pcb-route-card__link-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #ffffff;
  background: #008c11;
  border-radius: 50%;
}

.pcba-route .pcb-route-card__link-dot svg { width: 13px; height: 13px; }

/* 段2 的 CTA 按钮：白底 + 圆角 8 + 描边 #CCE0D7（1:626 实测）
   设计稿实测：按钮 245×69 **居中**（1:626 x=837，中心 959.5 = 内容中心 960）；
   文案 "Get a Quote" 20px Outfit SemiBold #14363F、距按钮左 14（1:627）；
   右侧绿块 44×44 / 圆角 4 / fill #008C11、距按钮右 11（1:628），箭头白色（1:629）。 */
.pcba-route .pcb-route__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 0;
  align-items: center;
  width: 245px;
  min-width: 0;
  min-height: 69px;
  margin: 0 auto;
  padding: 0 11px 0 14px;
  font-size: 20px;
  background: #ffffff;
  border: 1px solid #cce0d7;
  border-radius: 8px;
  color: #14363f;
}

/* 按钮内的箭头块（设计稿 1:628）：44×44 / 圆角 4 / 品牌绿实心 / 白色箭头（1:629）。
   选择器用 `pcb-route__cta-dot` —— PCBA 的按钮已改为与 PCB 页同结构的手写标记，
   不再由 junj_link() 输出 iconfont 图标。 */
.pcba-route .pcb-route__cta-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  color: #ffffff;
  background: #008c11;
  border-radius: 4px;
}

.pcba-route .pcb-route__cta-dot svg { width: 18px; height: 18px; }

.pcba-route .pcb-route__cta:hover { background: #f2f7f5; }

/**
 * 设计稿 1:550 段2 装配路线（1208..2495 = 1287）实测（相对标题 1208）：
 *   副标题 +88 · 正文 +150 · CTA +238（h=69）· 卡片顶 +354（CTA 底 → 卡片 47）
 *   卡标题 +569 · 小标 +621 · 说明 +646 / +724 · 链接文字 +800 · 说明条标签 +966
 * 即：标题下 15、正文下 34、标题区与卡片区之间 47。
 */
.pcba-route .pcb-route__title {
  margin: 0 0 15px;
}

/* 副标题设计稿为 Outfit Black（1:620，fontName Outfit Black / 行高 54），
   此前落到 700；Outfit 900 的 @font-face 见 assets/css/header.css。 */
.pcba-route .pcb-route__subtitle {
  font-weight: 900;
}

.pcba-route .pcb-route__body {
  margin: 0 auto 34px;
}

.pcba-route .pcb-route__head {
  margin-bottom: 47px;
}

/**
 * 段2 下内边距 96 → 47。
 *
 * 段2/段3 都是白底、**边界不可见**，所以能观测的只有设计稿里的可见锚点：
 *   卡片底 2048 → 引号装饰顶 2125 = **77**（引号节点在 `.pcb-note__left` 顶部，
 *   该栏有 `padding-top: 49`，49 + 27 + 25 + 54 = 155 到正文底）
 *   引号顶 2125 → 说明条标题 2174 = 49（共享基础层的 `__left` 内边距）
 *
 * 即「卡片底 → 说明条段顶」= 77 − 30（`.pcba-note` 的上内边距）= **47**，
 * 两者相加才是设计稿的 77。少算这 47 会让「路线标题 → 说明条标题」多出 49。
 */
.pcba-route {
  padding-bottom: 47px;
}

/* ── 响应式（与共享层 pcb-center/02-route.css 断点对齐）────────
   覆盖层选择器（.pcba-route-card 前缀）优先级高于共享层媒体查询，
   不在这里跟降高度的话，媒体区会一直是 179px。 */
@media (max-width: 1500px) {
  .pcba-route-card .pcb-route-card__media,
  .pcba-route-card .pcb-route-card__media img { height: 156px; }
}

@media (max-width: 720px) {
  .pcba-route-card .pcb-route-card__media,
  .pcba-route-card .pcb-route-card__media img { height: 150px; }

  /* 单列后卡片宽度 ≈ 容器宽，SVG 按宽度 contain，撑满媒体区 */
  .pcba-route-card .pcb-route-card__media img[src$=".svg"] { width: 100%; }
}
