/**
 * PCB 中心页 · 段10 PCB 询价
 *
 * 数值取自 Figma 实测：左图 668×939；标题 #008C11 36px/64（左对齐，860 宽）；
 * 副标题 #14363F 20px/37；正文 #666666 16px/24（935 宽）；分隔线 936 宽；
 * 清单标题 #008C11 24px/37；清单 #666666 16px（行高 48，844 宽）；
 * 按钮 312×69（圆角 8 + 描边 #CCE0D7 + 白底），文字 #14363F 20px/37。
 */

.pcb-rfq {
  /* 设计稿 1:100：段 8957..10072（内层 = 配图 940），标题 9047 → 说明条底到段底 85。 */
  padding-block: 90px 85px;
  background: #ffffff;
  /* 左图出血量：PCB 页配图左缘 141（= (100vw-1638)/2）；
     PCBA 页（.pcba-rfq）此段多一层 40px 内边距，配图左缘 181，见下方覆盖。 */
  --pcba-rfq-bleed: calc(max(0px, (100vw - 1638px) / 2));
  overflow-x: clip;
}

/* PCBA 页此段多一层 40px 内边距，配图左缘在 181（实测），
   出血量要比 PCB 页多 40（客户需求表第 29 行同款）。 */
.pcba-rfq {
  --pcba-rfq-bleed: calc(max(0px, (100vw - 1638px) / 2) + 40px);
}

.pcb-rfq__inner {
  display: grid;
  grid-template-columns: minmax(0, 668px) minmax(0, 936px);
  gap: 0 60px;
  align-items: start;
  max-width: 1718px /* = 设计稿内容宽 1638 + 左右各 40 padding */;
  margin: 0 auto;
  padding: 0 40px;
}

.pcb-rfq__figure {
  /* 设计稿（image1，客户需求表第 29 行「左侧图片占满」）：
     配图**贴视口左缘**（x=0）且占满段高；线上 x=181（双重内边距）、圆角 12。
     宽度必须钉住：负 margin 会让 max-width:100% 的图被撑大（实测 668 → 889）。 */
  width: 668px;
  max-width: none;
  margin-left: calc(-1 * var(--pcba-rfq-bleed));
  overflow: hidden;
  border-radius: 0;
}

/* 客户 9/28 复核「图太贴边，往右一点点」+ 追加「再往右移一点」（仅 PCB 页；
   PCBA 页出血行为不变）：内缩量 = min(出血量, 80px) —— 出血 >80 的宽屏图左缘
   固定收到视口 80px；出血不足的宽度保持不贴边原位。
   宽度同步收掉内缩量，右缘仍停在原轨道位置，不挤占右侧文字列。 */
.pcb-center-page:not(.pcba-center-page) .pcb-rfq__figure {
  --pcba-rfq-inset: min(var(--pcba-rfq-bleed), 80px);
  margin-left: calc(-1 * var(--pcba-rfq-bleed) + var(--pcba-rfq-inset, 0px));
  width: calc(668px - var(--pcba-rfq-inset, 0px));
}

/* 客户 9/28 复核「跟右边内容居中」（仅 PCB 页）：
   右列（标题+正文+清单+CTA）远高于图，图在双栏行内垂直居中。 */
.pcb-center-page:not(.pcba-center-page) .pcb-rfq__inner {
  align-items: center;
}

.pcb-rfq__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.pcb-rfq__title {
  max-width: 860px;
  margin: 0 0 20px;
  font-family: var(--pcb-font-display);
  font-size: 36px;
  font-weight: 900;
  line-height: 64px;
  color: #008c11;
}

.pcb-rfq__subtitle {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 37px;
  color: #14363f;
}

.pcb-rfq__body {
  max-width: 935px;
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 24px;
  color: #666666;
}

.pcb-rfq__rule {
  display: block;
  width: 936px;
  max-width: 100%;
  height: 1px;
  margin-bottom: 28px;
  background: #cce0d7;
}

.pcb-rfq__list-title {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 37px;
  color: #008c11;
}

.pcb-rfq__list p {
  max-width: 844px;
  /* 设计稿两页的 RFQ 清单都是**无项间距**（PCB 10 条 h=469、PCBA 9 条 h=418，均 ≈ 条数 × 48）。
     原先的 14px 项间距会把 10 条清单撑高到 606。 */
  margin: 0;
  /* 设计稿该清单每条带项目符号（渲染图 x≈858 处实心点），文字相对符号缩进约 20px。 */
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 48px;
  color: #666666;
}

.pcb-rfq__list p::before {
  /* 用 CSS 画细圆点（• 字符字形墨量重、显粗）。inline-block + vertical-align:middle
     让圆点始终对齐首行文字中部，各断点行高变化时无需单独调 top。 */
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 15px;
  vertical-align: middle;
  border-radius: 50%;
  /* 设计稿清单的圆点是品牌绿（客户需求表第 29 行「圆点绿色」）。 */
  background: #008c11;
}

.pcb-rfq__cta {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-width: 312px;
  min-height: 69px;
  margin-top: 34px;
  padding: 0 14px 0 22px;
  font-size: 20px;
  font-weight: 600;
  color: #14363f;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #cce0d7;
  border-radius: 8px;
  transition: box-shadow 0.24s ease, transform 0.24s ease;
}

.pcb-rfq__cta-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #ffffff;
  background: #008c11;
  border-radius: 6px;
}

.pcb-rfq__cta-dot svg { width: 16px; height: 16px; }

.pcb-rfq__cta:hover {
  box-shadow: 0 14px 30px rgba(4, 62, 48, 0.1);
  transform: translateY(-2px);
}

@media (max-width: 1500px) {
  .pcb-rfq__inner { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 0 40px; }
  /* 图列缩到 460 后，钉死的 668px 会盖住右侧文字（1440 实测覆盖约 128px）。
     宽度改为「列宽 + 出血量」，图片仍然贴视口左缘，但不越过正文起点。 */
  .pcb-rfq__figure { width: calc(460px + var(--pcba-rfq-bleed)); }
  /* PCB 页：宽度同步收掉 40 内缩，右缘仍停在列右缘（scoped 规则优先级高于
     上面无前缀规则，须在此显式覆盖回响应式宽度）。 */
  .pcb-center-page:not(.pcba-center-page) .pcb-rfq__figure {
    width: calc(460px + var(--pcba-rfq-bleed) - var(--pcba-rfq-inset, 0px));
  }
  .pcb-rfq__title { font-size: 30px; line-height: 52px; }
  .pcb-rfq__list p { line-height: 34px; }
}

/* 1501–1600：668/936 两列按比例分摊「1664 − 内容宽」的缺口，图列轨道收缩到
   约 608–657，钉死的 668px 吃满 60px 列间距后仍会压到正文（实测最大约 35px）。
   此区间改为「轨道宽 + 出血」，图右缘恰好停在列右缘、留出完整 60px 间距；
   >1600 后缺口 ≤ 60px 全部由列间距吸收，恢复钉死 668px（1920 设计稿不变）。 */
@media (min-width: 1501px) and (max-width: 1600px) {
  .pcb-rfq__figure { width: calc(100% + var(--pcba-rfq-bleed)); }
  .pcb-center-page:not(.pcba-center-page) .pcb-rfq__figure {
    width: calc(100% + var(--pcba-rfq-bleed) - var(--pcba-rfq-inset, 0px));
  }
}

/* 客户 1009 r4（PCB）/ r11（PCBA）「右移至左右两侧间隔一样」
   （PCB 页另有「中间框中内容放大」）：
   >1600 区间列1 = 668、列间距 60 ⇒ 右列正文左缘 = 内容起点(bleed) + 728。
   原先配图一路向左出血贴视口（PCB 页左缘 80 / PCBA 页左缘 0），
   左侧留白与右侧差距大（1920 实测：PCB 右间隔 201、PCBA 右间隔 241）。
   改为让配图在「视口左缘 ↔ 右列正文左缘」之间左右等距：
     PCB  页：左右各 100，宽度随之放大（1920：588 → 669）；
     PCBA 页：宽度保持 668，等距 = (bleed + 60) / 2（1920 实测 120.5）。
   ≤1600 仍由上面的响应式宽度规则接管。 */
@media (min-width: 1601px) {
  .pcb-center-page:not(.pcba-center-page) .pcb-rfq__figure {
    margin-left: calc(-1 * var(--pcba-rfq-bleed) + 100px);
    width: calc(var(--pcba-rfq-bleed) + 528px);
  }

  .pcba-rfq .pcb-rfq__figure {
    margin-left: calc(var(--pcba-rfq-bleed) * -0.5 + 30px);
  }
}

@media (max-width: 1080px) {
  .pcb-rfq { padding-block: 60px 72px; }
  .pcb-rfq__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* 堆叠后恢复常规流式：出血与钉宽都是桌面双栏布局才需要的。 */
  .pcb-rfq__figure { width: auto; max-width: 100%; margin-left: 0; border-radius: 12px; }
  .pcb-center-page:not(.pcba-center-page) .pcb-rfq__figure { width: auto; margin-left: 0; }
  /* __inner 同时是 .pcb-container（已给 100% - 32px 的视口边距），自身的 40px 内边距
     在窄屏是重复内缩：375 实测内容只有 263px（其他段 295~343），
     按钮内容 284px 被 overflow:hidden 裁掉箭头。窄屏让回容器宽度。 */
  .pcb-rfq__inner { padding-inline: 0; }
  /* 箭头是 .pill-link i（inline-size 32），默认 flex-shrink:1 会被压成 17px；钉住不压缩。 */
  .pcb-rfq__cta > i { flex: 0 0 auto; }
  .pcb-rfq__title { font-size: 26px; line-height: 44px; }
  .pcb-rfq__subtitle { font-size: 18px; line-height: 30px; }
  .pcb-rfq__body { font-size: 15px; line-height: 24px; }
  .pcb-rfq__list-title { font-size: 20px; }
  .pcb-rfq__list p { font-size: 15px; line-height: 30px; }
  .pcb-rfq__cta { min-width: 0; width: 100%; font-size: 17px; }
}

/* ── 左侧交互产物（客户 2026-09-28）──────────────────
   白底 PCB 五视角底图 + 01~05 热点 + 顶部摘要联动 + 底部路线条。
   来源：docs/需求修改 /sunhope-pcb-rfq-interactive-upload-ready-20260928.html
   （原 #sunhope-hybrid-white-hd，改用 .pcb-rfq-iv 前缀并入主题样式）。
   热点坐标为底图百分比，底图固定用 assets/images/pcb-rfq-interactive.jpg，
   后台换图会导致热点错位。交互脚本见 assets/js/page-pcb-center.js。 */

.pcb-rfq-iv {
  width: 100%;
  color: #15353c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.pcb-rfq-iv * { box-sizing: border-box; }

.pcb-rfq-iv__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 0.8;
  overflow: hidden;
  background: #ffffff;
  container-type: inline-size;
  isolation: isolate;
}

.pcb-rfq-iv__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pcb-rfq-iv__guide {
  position: absolute;
  z-index: 4;
  top: 2.1%;
  right: 8%;
  left: 8%;
  margin: 0;
  color: #009a3d;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.pcb-rfq-iv__summary {
  position: absolute;
  z-index: 5;
  top: 5.3%;
  right: 12%;
  left: 12%;
  min-height: 58px;
  padding: 8px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.93);
  color: #5d706c;
  text-align: center;
  backdrop-filter: blur(5px);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.pcb-rfq-iv__summary strong {
  display: block;
  color: #003d2c;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.pcb-rfq-iv__summary span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.32;
}

.pcb-rfq-iv__summary.is-changing { transform: translateY(-2px); opacity: 0.58; }

.pcb-rfq-iv__hotspot {
  position: absolute;
  z-index: 7;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.pcb-rfq-iv__hotspot::before,
.pcb-rfq-iv__hotspot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(18px, 4.25cqw, 27px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pcb-rfq-iv__hotspot::before {
  border: 2px solid transparent;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pcb-rfq-iv__hotspot::after {
  border: 1px solid transparent;
  opacity: 0;
}

.pcb-rfq-iv__hotspot:hover::before,
.pcb-rfq-iv__hotspot.is-active::before {
  border-color: #009a3d;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.pcb-rfq-iv__hotspot.is-active::after {
  border-color: rgba(245, 182, 0, 0.8);
  animation: pcb-rfq-iv-pulse 0.62s ease-out 1;
}

.pcb-rfq-iv__hotspot--1 { left: 12.8%; top: 23.7%; }
.pcb-rfq-iv__hotspot--2 { left: 86%; top: 24.5%; }
.pcb-rfq-iv__hotspot--3 { left: 7.8%; top: 60%; }
.pcb-rfq-iv__hotspot--4 { left: 49.8%; top: 88.7%; }
.pcb-rfq-iv__hotspot--5 { left: 94.2%; top: 64.3%; }

.pcb-rfq-iv__route {
  position: absolute;
  z-index: 6;
  right: 5%;
  bottom: 1.2%;
  left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 5.7%;
  min-height: 24px;
  margin: 0;
  border-radius: 999px;
  background: #165a43;
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
}

.pcb-rfq-iv__route i {
  position: relative;
  width: 34px;
  height: 1px;
  background: #6ce6a7;
}

.pcb-rfq-iv__route i::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -1px;
  border-left: 6px solid #6ce6a7;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

@keyframes pcb-rfq-iv-pulse {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.92); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

@media (max-width: 480px) {
  /* 320 实测：guide（41 字符）折成 2 行，第 2 行被下方摘要卡盖住。
     收窄左右内边距 + 收紧字距 + nowrap，让 240 宽舞台也放得下单行。 */
  .pcb-rfq-iv__guide { top: 1.6%; right: 4%; left: 4%; font-size: 8px; letter-spacing: 0.06em; white-space: nowrap; }
  /* 320 实测：guide 单行底 15.8 与摘要顶（4.7% = 14.1）相压 1.9px，摘要下移让位。 */
  .pcb-rfq-iv__summary { top: 6.7%; right: 7%; left: 7%; min-height: 50px; padding: 6px 8px; }
  .pcb-rfq-iv__summary strong { font-size: 10px; }
  .pcb-rfq-iv__summary span { margin-top: 2px; font-size: 8px; line-height: 1.22; }
  .pcb-rfq-iv__route { right: 3%; left: 3%; gap: 5px; font-size: 7px; letter-spacing: 0.035em; }
  .pcb-rfq-iv__route i { width: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcb-rfq-iv,
  .pcb-rfq-iv *,
  .pcb-rfq-iv *::before,
  .pcb-rfq-iv *::after { animation: none !important; transition: none !important; }
}