/**
 * PCBA 中心页 · 段1 Hero
 *
 * 数值取自 Figma 实测（节点 1:551 / 1:1018 / 1:1019 / 1:1020 / 1:1021 / 1:1022 /
 * 1:1029 / 1:1065 / 1:1030 / 1:1037 / 1:1034）：
 *   Hero 主体 fill #EFF5F3（浅灰）/ 1920×776；右侧配图 698×615；
 *   标题行1 #14363F 32px/58；行2 #008C11 48px/58；
 *   正文 #14363F 16px/28（790 宽）；生产范围 18px/28（676 宽）；
 *   主按钮 fill #008C11 / 圆角 6 / 267×60（白字）；
 *   次按钮 描边 #008C11 / 圆角 6 / 350×60（深字）；
 *   标签条 fill #008C11 / 1920×121（6 格，各 273 宽），文字 #FFFFFF 20px/24。
 */

.pcba-hero__stage {
  position: relative;
  min-height: 776px;
  overflow: hidden;
  background: #eff5f3;
}

.pcba-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 867px) minmax(0, 698px);
  gap: 0 60px;
  align-items: center;
  max-width: 1718px; /* = 设计稿内容宽 1638 + 左右各 40 padding */
  margin: 0 auto;
  padding: 84px 40px 76px;
}

/* ── 左侧内容 ───────────────────────────────────────── */

.pcba-hero__title {
  margin: 0 0 24px;
  font-family: var(--pcb-font-display);
  font-weight: 900;
  line-height: 58px;
}

.pcba-hero__title-line {
  display: block;
  /* 设计稿：标题行1 为 Orbitron Bold（700），行2 为 Orbitron Black（900）。
     父级 .*__title 统一写了 900，会让行1 也按 Black 渲染。 */
  font-weight: 700;
  font-size: 32px;
  color: #14363f;
}

.pcba-hero__title-accent {
  display: block;
  font-size: 48px;
  color: #008c11;
  /* 设计稿 1:1019 该行 textCase: TITLE，渲染为「SMT THT And Mixed Technology」
     （And 大写）。展示层还原，存储值保持句首小写。 */
  text-transform: capitalize;
}

.pcba-hero__lead {
  max-width: 790px;
  margin: 0 0 34px;
  /* 客户 9/28 新增 r11「文字两端对齐」。 */
  text-align: justify;
  font-size: 16px;
  line-height: 28px;
  color: #14363f;
}

.pcba-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 19px;
  margin-bottom: 44px;
}

.pcba-hero__btn {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 14px 0 20px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.pcba-hero__btn--primary {
  min-width: 267px;
  color: #ffffff;
  background: #008c11;
  border: 1px solid #008c11;
}

.pcba-hero__btn--primary:hover { background: #007a0f; }

.pcba-hero__btn--ghost {
  min-width: 350px;
  color: #14363f;
  background: transparent;
  border: 1px solid #008c11;
}

.pcba-hero__btn--ghost:hover { background: #e2f3e6; }

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

.pcba-hero__btn--ghost .pcba-hero__btn-dot {
  color: #ffffff;
  background: #008c11;
}

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

.pcba-hero__btn:hover {
  box-shadow: 0 14px 30px rgba(4, 62, 48, 0.14);
  transform: translateY(-2px);
}

/* 生产范围行（设计稿 1:1029）：整行 Outfit Bold(700)，前缀品牌绿、各项 #666666。
   冒号后 4 空格、竖线两侧各 2 空格 —— 用 margin 表达，避免依赖数据里的空格数量。 */
.pcba-hero__scope {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #666666;
}

.pcba-hero__scope-label {
  color: #008c11;
}

.pcba-hero__scope-colon {
  /* 设计稿冒号后是 4 个空格（18px Outfit Bold 约 20px） */
  margin-right: 20px;
}

.pcba-hero__scope-sep {
  /* 设计稿竖线两侧各 2 个空格（约 10px + ｜ 本体） */
  margin: 0 10px;
  color: #666666;
}

.pcba-hero__scope-item {
  margin: 0;
}

/* 窄屏整行折行时，短语不允许在内部断开（375 实测「Repeat Production」被拆成两行）。 */
.pcba-hero__scope-label,
.pcba-hero__scope-item {
  white-space: nowrap;
}

/* ── 右侧配图 ───────────────────────────────────────── */

.pcba-hero__figure {
  margin: 0;
}

.pcba-hero__figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 615px;
  height: auto;
  margin-left: auto;
}

/* ── 标签条（品牌绿实心，6 格 × 273）────────────────── */

.pcba-hero__tags {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: #008c11;
  border-top: 1px solid #cce0d7;
  border-bottom: 1px solid #cce0d7;
}

.pcba-hero__tag {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 121px;
  padding: 0 18px;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #ffffff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.pcba-hero__tag:first-child { border-left: 0; }

.pcba-hero__tag-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  opacity: 0.95;
}

.pcba-hero__tag-icon svg { width: 100%; height: 100%; }

/* ── 页内锚点（9 项）────────────────────────────────── */

.pcba-hero__anchors {
  background: #ffffff;
  border-bottom: 1px solid #cce0d7;
}

.pcba-hero__anchors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 38px;
  justify-content: center;
  max-width: 1780px;
  margin: 0 auto;
  padding: 22px 40px;
  list-style: none;
}

.pcba-hero__anchor a {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  font-size: 16px;
  line-height: 28px;
  color: #666666;
  text-decoration: none;
  transition: color 0.2s ease;
}

.pcba-hero__anchor a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  min-width: 86px;
  height: 2px;
  background: #008c11;
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pcba-hero__anchor a:hover { color: #008c11; }

.pcba-hero__anchor a.is-active {
  font-weight: 700;
  color: #008c11;
}

.pcba-hero__anchor a.is-active::after { transform: translateX(-50%) scaleX(1); }

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

@media (max-width: 1500px) {
  .pcba-hero__stage { min-height: 640px; }
  .pcba-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 0 40px; padding: 64px 40px 56px; }
  .pcba-hero__title-line { font-size: 27px; }
  .pcba-hero__title-accent { font-size: 40px; }
  .pcba-hero__title { line-height: 50px; }
  .pcba-hero__figure img { max-height: 460px; }
  .pcba-hero__tag { min-height: 96px; font-size: 17px; }
  .pcba-hero__tags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcba-hero__tag:nth-child(3n + 1) { border-left: 0; }
  .pcba-hero__tag:nth-child(n + 4) { border-top: 1px solid rgba(255, 255, 255, 0.2); }
}

@media (max-width: 1080px) {
  .pcba-hero__stage { min-height: 0; }
  .pcba-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 52px 24px 48px; }
  .pcba-hero__title-line { font-size: 23px; }
  .pcba-hero__title-accent { font-size: 32px; }
  .pcba-hero__title { line-height: 42px; }
  .pcba-hero__lead { font-size: 15px; line-height: 26px; }
  .pcba-hero__actions { flex-direction: column; gap: 12px; }
  .pcba-hero__btn { width: 100%; min-width: 0; }
  .pcba-hero__figure img { margin: 0 auto; max-height: 320px; }
  .pcba-hero__tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcba-hero__tag { min-height: 72px; font-size: 15px; }
  .pcba-hero__tag:nth-child(2n + 1) { border-left: 0; }
  .pcba-hero__anchors-list { gap: 6px 20px; padding: 16px 24px; }
}

@media (max-width: 640px) {
  .pcba-hero__title-line { font-size: 20px; }
  .pcba-hero__title-accent { font-size: 26px; }
  .pcba-hero__tags { grid-template-columns: minmax(0, 1fr); }
  .pcba-hero__tag { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .pcba-hero__tag:first-child { border-top: 0; }
}