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

.csrc-faq {
  /* 设计稿（1:1059）该段白色底 11488..13058：标题顶距段顶 139，末条分隔线到段底 147。 */
  padding-block: 139px 147px;
  background: #ffffff;
}

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

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

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

.csrc-faq__lead {
  max-width: 1035px;
  /* 设计稿导读居中：x=444 / w=1035（中心 961）。
     导读 → 首条 FAQ 原 72；客户 1009 在两者之间插入 View More FAQ 按钮后，
     改为「43 + 按钮 + 43」，与 PCB / PCBA 两页口径一致（见 pcb-center/11-faq.css）。 */
  margin: 0 auto 43px;
  /* 设计稿导读为两行（h=54），诗句间由后台换行控制。 */
  text-align: center;
  font-size: 20px;
  line-height: 28px;
  color: #666666;
}

/* ── 手风琴 ─────────────────────────────────────────── */

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

.csrc-faq-item { border-top: 1px solid #b8d8bc; }

.csrc-faq-item:last-child { border-bottom: 1px solid #b8d8bc; }

.csrc-faq-item__q {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* 设计稿：分隔线 12070 → 问题文字 12111，间距 41 = 边框 1 + 内边距 40。 */
  padding: 40px 27px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  transition: background 0.24s ease;
}

.csrc-faq-item__q:hover { background: #f9fbfa; }

.csrc-faq-item__q:focus-visible {
  outline: 2px solid #008c11;
  outline-offset: -2px;
}

/* 问题文字（设计稿节点实测）：
     折叠 1:1096 —— 24px Outfit **Regular(400)** / #14363F
     展开 1:1095 —— 24px Outfit **Bold(700)**   / #008C11
   客户需求「没点击展开的文字不是绿色」；此前折叠态也是绿色、字重写死 500。 */
.csrc-faq-item__text {
  font-size: 24px;
  font-weight: 400;
  line-height: 40px;
  color: #14363f;
  transition: color 0.24s ease, font-weight 0.24s ease;
}

.csrc-faq-item.is-open .csrc-faq-item__text {
  font-weight: 700;
  color: #008c11;
}

/* 加号 / 减号图标：设计稿是 50×28 的胶囊
 *   折叠态 —— 品牌绿实心胶囊 + 白色加号
 *   展开态 —— 白底胶囊 + 浅描边 + 品牌绿减号
 * 此前是裸的 20×20 十字线，没有胶囊底。 */
.csrc-faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 28px;
  background: #008c11;
  border: 1px solid #008c11;
  border-radius: 999px;
  transition: background 0.24s ease, border-color 0.24s ease;
}

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

.csrc-faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.csrc-faq-item.is-open .csrc-faq-item__icon {
  background: #ffffff;
  border-color: #e6eae7;
}

.csrc-faq-item.is-open .csrc-faq-item__icon::before,
.csrc-faq-item.is-open .csrc-faq-item__icon::after {
  background: #008c11;
}

.csrc-faq-item.is-open .csrc-faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.csrc-faq-item__a {
  max-width: 1532px;
  /* 设计稿展开条：边界线 11835 → 12070 共 235，
     由「边框 1 + 问题内边距 40+40 + 问题文字 40 + 答案 32 + 答案下内边距 82」构成。 */
  padding: 0 27px 82px;
}

.csrc-faq-item__a p {
  margin: 0;
  font-size: 20px;
  line-height: 32px;
  color: #666666;
}

/* 无答案时不显示内容区，但保留可点击（后台补答案后自动有内容） */
.csrc-faq-item:not(.is-open) .csrc-faq-item__a { display: none; }

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

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

@media (max-width: 720px) {
  .csrc-faq { padding-block: 52px 60px; }
  .csrc-faq__title { font-size: 26px; line-height: 34px; }
  .csrc-faq__lead { font-size: 16px; line-height: 24px; }
  .csrc-faq-item__q { gap: 16px; padding: 20px 0; }
  .csrc-faq-item__text { font-size: 17px; line-height: 26px; }
  .csrc-faq-item__a { padding: 0 0 22px; }
  .csrc-faq-item__a p { font-size: 15px; line-height: 24px; }
  .csrc-faq-item__icon { width: 38px; height: 22px; }
  .csrc-faq-item__icon::before,
  .csrc-faq-item__icon::after { width: 12px; }
}