/**
 * PCBA 中心页 · 段12 RFQ（复用 .pcb-rfq）
 *
 * 设计稿 1:550 该段是「左侧整幅配图 668×939 + 右侧内容」，配图与段上下边齐平：
 *   段顶 = 配图顶 = 9534 · 段底 = 配图底 = 10472（段高 939 = 配图高）
 *   标题 9595（距配图顶 61）· 内容底 10470（与配图底齐平）
 * 因此本段上下内边距为 0，右侧内容与配图底对齐。
 *
 * （清单的「无项间距」是两页共有的设计值，已改在共享的 10-rfq.css。）
 */

.pcba-rfq {
  padding-block: 0;
}

.pcba-rfq .pcb-rfq__inner {
  align-items: end;
}

/* ── 左侧交互产物「build passport」（客户 2026-09-28）─────
   白底 SVG 组装板插画 + 01~05 热点（SVG marker 同步高亮）+ 底部摘要 + 路线条。
   来源：docs/需求修改 /sunhope-pcba-rfq-build-passport-interactive-upload-ready.html
   （原 #sunhope-pcba-rfq-passport，改用 .pcba-rfq-iv 前缀并入主题样式；
     marker/trace/status 为插画内部类，统一收在 .pcba-rfq-iv 作用域下）。
   交互脚本见 assets/js/page-pcb-center.js（bindRfqInteractive / bindIvRoot）。 */

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

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

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

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

.pcba-rfq-iv__heading {
  /* 客户 9/28 复核「字和图片重叠，字体往上移」：
     标题块是固定像素高、插画按百分比定位，宽度收窄时两者相顶。
     标题上移（4.7% → 3.6%）+ 插画下移（10.8% → 12.4%）+ guide 让位（2% → 1.2%），
     1440（stage 575 高）实测标题底与插画顶仍留 ~13px。 */
  position: absolute;
  z-index: 8;
  top: 3.6%;
  right: 8%;
  left: 8%;
  text-align: center;
}

.pcba-rfq-iv__heading small {
  display: block;
  color: #009a3d;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pcba-rfq-iv__heading strong {
  display: block;
  margin-top: 5px;
  color: #063f31;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.16;
}

.pcba-rfq-iv__art {
  position: absolute;
  z-index: 2;
  top: 12.4%;
  left: 2%;
  width: 96%;
  height: 65.8%;
  overflow: visible;
}

/* 插画内部：编号圆标（与热点按钮同步 is-active） */
.pcba-rfq-iv .marker .marker-ring {
  fill: #ffffff;
  stroke: #cfe4d7;
  stroke-width: 3;
  transition: stroke 0.18s ease, stroke-width 0.18s ease;
}

.pcba-rfq-iv .marker .marker-number {
  fill: #063f31;
  font-size: 18px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: middle;
  transition: fill 0.18s ease;
}

.pcba-rfq-iv .marker.is-active .marker-ring { stroke: #009a3d; stroke-width: 5; }
.pcba-rfq-iv .marker.is-active .marker-number { fill: #009a3d; }

.pcba-rfq-iv .trace-motion { animation: pcba-rfq-iv-trace 2.6s linear infinite; }
.pcba-rfq-iv .status-motion { animation: pcba-rfq-iv-status 2.1s ease-in-out infinite; }

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

.pcba-rfq-iv__hotspot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

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

.pcba-rfq-iv__hotspot--1 { left: 16.4%; top: 28.2%; }
.pcba-rfq-iv__hotspot--2 { left: 83.6%; top: 33.3%; }
.pcba-rfq-iv__hotspot--3 { left: 13.4%; top: 51%; }
.pcba-rfq-iv__hotspot--4 { left: 86.6%; top: 58.7%; }
.pcba-rfq-iv__hotspot--5 { left: 50%; top: 74.4%; }

.pcba-rfq-iv__summary {
  position: absolute;
  z-index: 12;
  top: 79.4%;
  right: 9%;
  left: 9%;
  min-height: 74px;
  padding: 10px 15px;
  border: 1px solid #cfe4d7;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.96);
  color: #5d706c;
  text-align: center;
  box-shadow: 0 8px 24px rgba(6, 63, 49, 0.08);
  backdrop-filter: blur(5px);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.pcba-rfq-iv__summary strong {
  display: block;
  color: #063f31;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.pcba-rfq-iv__summary span {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.35;
}

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

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

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

.pcba-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 pcba-rfq-iv-trace { to { stroke-dashoffset: -34; } }
@keyframes pcba-rfq-iv-status { 50% { opacity: 0.42; } }
@keyframes pcba-rfq-iv-pulse {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.92); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.58); }
}

/* ≤720（手机 → 小平板）：481~560 区间实测最严重 —— 舞台竖比回到 0.8 后比 ≤480 的
   0.64 还矮（500 实测 388×485），guide 折 2 行压标题 16.4px、摘要压路线条 7.5px、
   路线条标签外溢药丸。因此把这套手机版几何整体覆盖到 720：
   竖比 0.64 让插画盒转为宽约束（内容恒满 96% 宽、x 对齐不变），
   内容顶 11.7% → 18.4%；热点 top 按内容高 67.2% → 53.8% 重算
   （y = 17.4% + cy/700×53.8%，沿用桌面 -1% 取整约定），x 不变。 */
@media (max-width: 720px) {
  .pcba-rfq-iv__stage { aspect-ratio: 0.64; }
  .pcba-rfq-iv__guide { top: 1.6%; right: 4%; left: 4%; font-size: 9px; letter-spacing: 0.08em; white-space: nowrap; }
  .pcba-rfq-iv__heading { top: 4.6%; }
  .pcba-rfq-iv__heading small { font-size: 8px; }
  .pcba-rfq-iv__heading strong { font-size: 16px; }
  .pcba-rfq-iv__hotspot--1 { top: 31.4%; }
  .pcba-rfq-iv__hotspot--2 { top: 35.5%; }
  .pcba-rfq-iv__hotspot--3 { top: 49.7%; }
  .pcba-rfq-iv__hotspot--4 { top: 55.8%; }
  .pcba-rfq-iv__hotspot--5 { top: 68.5%; }
  .pcba-rfq-iv__summary { top: 76%; }
  /* 窄屏标签会折 2 行，固定 5.7% 高度装不下 → 按内容自适应。 */
  .pcba-rfq-iv__route { right: 3%; left: 3%; height: auto; min-height: 0; padding: 5px 8px; gap: 6px; font-size: 8px; line-height: 1.3; letter-spacing: 0.03em; }
  .pcba-rfq-iv__route i { width: 18px; }
}

@media (max-width: 480px) {
  /* 375 实测：guide 折成 2 行后与「THE BUILD PASSPORT」重叠、标题两行底压过插画顶。 */
  .pcba-rfq-iv__guide { top: 1%; right: 3%; left: 3%; font-size: 7px; letter-spacing: 0.04em; }
  .pcba-rfq-iv__heading { top: 5%; }
  .pcba-rfq-iv__heading small { font-size: 7px; }
  .pcba-rfq-iv__heading strong { font-size: 14px; }
  .pcba-rfq-iv__summary { top: 75.5%; right: 6%; left: 6%; min-height: 60px; padding: 7px 9px; }
  .pcba-rfq-iv__summary strong { font-size: 10px; }
  .pcba-rfq-iv__summary span { margin-top: 3px; font-size: 8px; line-height: 1.25; }
  .pcba-rfq-iv__route { gap: 5px; font-size: 7px; line-height: 1.25; letter-spacing: 0.025em; }
  .pcba-rfq-iv__route i { width: 15px; }
}

/* ≤360（Fold 外屏等）：320 实测舞台 208 宽时 7px guide 仍放不下一行、
   14px 标题折 3 行压过插画。再降一级竖比 0.55，guide 允许 2 行、
   标题降到 12px，热点按内容高 46.2%、内容顶 22.2% 重算
   （y = 21.2% + cy/700×46.2%）。 */
@media (max-width: 360px) {
  .pcba-rfq-iv__stage { aspect-ratio: 0.55; }
  .pcba-rfq-iv__guide { font-size: 6px; letter-spacing: 0.03em; white-space: normal; }
  .pcba-rfq-iv__heading { top: 7.5%; }
  .pcba-rfq-iv__heading strong { font-size: 12px; }
  .pcba-rfq-iv__hotspot--1 { top: 33.2%; }
  .pcba-rfq-iv__hotspot--2 { top: 36.7%; }
  .pcba-rfq-iv__hotspot--3 { top: 48.9%; }
  .pcba-rfq-iv__hotspot--4 { top: 54.2%; }
  .pcba-rfq-iv__hotspot--5 { top: 64.9%; }
  .pcba-rfq-iv__summary { top: 74%; }
  /* 320 实测每个标签仅约 47px 宽：6px 字号把 3 个标签收回 2 行，路线条高度不变。 */
  .pcba-rfq-iv__route { font-size: 6px; }
}

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