/**
 * PCB 中心页 · 段11-13 常见问题
 *
 * 数值取自 Figma 实测：「Common Questions」48px Orbitron / 行高 40；
 * 引导语 #666666 20px/28（1035 宽）；分隔线 1637 宽（#B8D8BC）；
 * 问题 #008C11 24px/40；答案 #666666 20px/32（1532 宽）。
 */

.pcb-faq {
  /* 设计稿（画板 1:100）：段 10073..11616，高 1544；标题距段顶 104；
     末条分隔线 11474 → 段底 142。PCBA 版（1:550）为 132 / 122，见 pcba-center/13-faq.css。 */
  padding-block: 104px 142px;
  background: #ffffff;
}

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

.pcb-faq__title {
  display: flex;
  flex-wrap: wrap;
  /* 设计稿标题居中（x=702 w=515 → 中心 960）。 */
  justify-content: center;
  gap: 0 14px;
  align-items: baseline;
  /* 设计稿标题底 10217 → 导读顶 10259，间距 42。 */
  margin: 0 0 42px;
  font-family: var(--pcb-font-display);
  font-size: 48px;
  font-weight: 900;
  line-height: 40px;
  color: #14363f;
}

.pcb-faq__title-accent { color: #008c11; }

.pcb-faq__lead {
  max-width: 1035px;
  /* 设计稿导读居中（x=443 w=1035）、两行合计 54（20px / 行高 27）。
     导读底 10313 → 首条分隔线 10398 原间距 85；客户 1009 在两者之间插入
     View More FAQ 按钮，故 85 拆分为「43 + 按钮 + 43」：按钮自成一段、
     上下等距，且首条 FAQ 的绝对位置保持不变。换行由后台字段控制。 */
  margin: 0 auto 43px;
  text-align: center;
  font-size: 20px;
  line-height: 27px;
  color: #666666;
}

.pcb-faq__list {
  max-width: 1637px;
  margin: 0 auto;
}

.pcb-faq__item { border-top: 1px solid #b8d8bc; }

.pcb-faq__item:last-child { border-bottom: 1px solid #b8d8bc; }

.pcb-faq__question {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* 设计稿分隔线间距恒为 120：边框 1 + 上内边距 40 + 问题文字 40 + 下内边距 39 = 120。
     （实现原为 40/40 → 121，8 条累计多 8px。） */
  padding: 40px 27px 39px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  transition: background 0.24s ease;
}

.pcb-faq__question:hover { background: #f9fbfa; }

.pcb-faq__question:focus-visible {
  outline: 2px solid #008c11;
  outline-offset: -2px;
}

/* 设计稿（两页画板一致）：**展开项**的问题为品牌绿 + Outfit Bold(700)，
   其余为深色 + Outfit Regular(400)。
   PCBA 节点 1:568 Bold #008C11 / 1:569 Regular #14363F；
   PCB  节点 1:123 Bold #008C11 / 1:124 Regular #14363F。
   客户需求表第 30 行「展开态加粗」即此（原折叠/展开都写死 500）。 */
.pcb-faq__item.is-open .pcb-faq__question-text {
  font-weight: 700;
  color: #008c11;
}

.pcb-faq__question-text {
  font-size: 24px;
  font-weight: 400;
  line-height: 40px;
  color: #14363f;
  /* 设计稿对 FAQ 问题设置了 textCase: TITLE（What PCB Assembly Services…）。
     这里用展示层转换还原，存储值仍保持句首大写，便于内容维护与检索。
     PCB 与 PCBA 两页共用此规则，保证两页呈现一致。 */
  text-transform: capitalize;
}

/* 加号 / 减号：与 FAQ 页（page-support-faq.css）的胶囊徽标同款 ——
   折叠态：品牌绿实心胶囊 + 白色加号；
   展开态：白底胶囊 + 浅绿描边 #c8e4cc + 品牌绿减号。
   描边常驻（透明→浅绿过渡），避免展开时因 border 出现 2px 尺寸跳动。 */
.pcb-faq__icon {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 48px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #008c11;
  transition: background 0.24s ease, border-color 0.24s ease;
}

.pcb-faq__icon::before,
.pcb-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  background: #ffffff;
  transform: translate(-50%, -50%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.24s ease;
}

.pcb-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.pcb-faq__item.is-open .pcb-faq__icon {
  background: #ffffff;
  border-color: #c8e4cc;
}

.pcb-faq__item.is-open .pcb-faq__icon::before,
.pcb-faq__item.is-open .pcb-faq__icon::after {
  background: #008c11;
}

.pcb-faq__item.is-open .pcb-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.pcb-faq__answer {
  max-width: 1532px;
  /* 设计稿首条（展开）：分隔线间距 235 = 收起条 120 + 答案 115；
     答案文字两行 64（20px / 行高 32）→ 答案下内边距 51。 */
  padding: 0 27px 51px;
}

.pcb-faq__answer p {
  margin: 0;
  font-size: 20px;
  line-height: 32px;
  color: #666666;
}

.pcb-faq__item:not(.is-open) .pcb-faq__answer { display: none; }

@media (max-width: 1280px) {
  .pcb-faq { padding-block: 72px 80px; }
  .pcb-faq__title { font-size: 36px; line-height: 44px; }
  .pcb-faq__lead { font-size: 18px; line-height: 26px; margin-bottom: 32px; }
  .pcb-faq__question-text { font-size: 20px; line-height: 32px; }
  .pcb-faq__answer p { font-size: 17px; line-height: 28px; }
}

@media (max-width: 720px) {
  .pcb-faq { padding-block: 52px 60px; }
  .pcb-faq__title { font-size: 26px; line-height: 34px; }
  .pcb-faq__lead { font-size: 16px; line-height: 24px; }
  .pcb-faq__question { gap: 16px; padding: 20px 0; }
  .pcb-faq__question-text { font-size: 17px; line-height: 26px; }
  .pcb-faq__answer { padding: 0 0 22px; }
  .pcb-faq__answer p { font-size: 15px; line-height: 24px; }
  .pcb-faq__icon { width: 38px; height: 22px; }
  .pcb-faq__icon::before,
  .pcb-faq__icon::after { width: 10px; }
}

/* ── FAQ 导读下方 CTA（客户 1009 r5 / r12 / r17）─────────
   客户原话：「加一个按钮，跟右侧一样的那种」，参照稿 = 产品详情页 FAQ 的
   .product-action--outline（实测 217×68：白底 + #008C11 描边 + 右侧 42×42 绿块图标）。
   本文件同时被 PCB / PCBA / Component Sourcing 三个中心页加载（functions.php:750-764），
   因此按钮样式只在此定义一份，三页共用，不再各自复制。 */
.pcb-faq__cta {
  /* 客户 1009 追加（/pcb-manufacturing/ 截图：按钮需居中显示）：
     原先 inline-flex 是行内元素，水平位置跟随父级 text-align ——
     PCB 页 / CSRC 页父容器左对齐 → 按钮靠左（实测 x=40）；PCBA 页恰好因
     .pcba-faq{text-align:center} 而居中。改为块级 flex + width:max-content +
     margin-inline:auto，由按钮自身居中，三页口径统一，不再依赖父容器。 */
  display: flex;
  width: max-content;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 62px;
  /* 客户 1009 追加：按钮整体上移、脱离下方 FAQ 列表。
     上方间距不在此写死 —— 与 .pcb-faq__lead 的 margin-bottom 折叠取大值，
     由导读下边距决定（桌面 43 / ≤1080 32），保证各断点上下等距；
     下方 43 让按钮与首条 FAQ 分隔线脱开（原为 0，按钮紧贴列表）。 */
  margin: 0 auto 43px;
  padding: 11px 18px 13px 8px;
  border: 1px solid #008c11;
  border-radius: 8px;
  background: #ffffff;
  color: #14363f;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: none;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.pcb-faq__cta i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background: #008c11;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  transition: transform 240ms ease;
}

.pcb-faq__cta:hover,
.pcb-faq__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(22, 52, 58, 0.08);
}

.pcb-faq__cta:hover i,
.pcb-faq__cta:focus-visible i {
  transform: translateX(2px);
}

@media (max-width: 1080px) {
  /* 上方间距由该档 .pcb-faq__lead { margin-bottom: 32px } 决定。 */
  .pcb-faq__cta { margin-bottom: 32px; }
}

@media (max-width: 720px) {
  .pcb-faq__cta { margin-bottom: 24px; }
}