/* ============================================================
   faq.css · 常见问题页族（总页 + 报名/考试/证书/复审/行业）
   布局：居中 Hero + 分类胶囊 + 双列手风琴 + 帮助侧卡 + CTA
   ============================================================ */

/* ---------- Hero ---------- */
.hero-faq{ min-height:420px; padding:170px 0 80px; text-align:center; }
.hero-faq .kicker.light::before,.hero-faq .kicker.light::after{ background:rgba(255,255,255,.5); }
.hero-faq .kicker.light{ color:#F5E3B3; }
.hero-faq h1{ color:#FFF; margin-bottom:16px; text-shadow:0 2px 16px rgba(0,0,0,.22); }
.hero-faq .hf-sub{ color:rgba(255,255,255,.88); max-width:620px; margin:0 auto 26px; }
.hero-faq .hf-search{ display:flex; justify-content:center; }
.hero-faq .hf-search .box{ background:#FFF; border-radius:999px; padding:8px; display:flex; max-width:520px; width:100%; box-shadow:var(--shadow-l); }
.hero-faq .hf-search input{ flex:1; border:none; outline:none; padding:0 18px; font-size:14px; color:var(--ink); }
.hero-faq .hf-search .btn{ border-radius:999px; }

/* ---------- 分类胶囊 ---------- */
.faq-cats{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.faq-cats a{
  padding:10px 22px; border-radius:999px; background:#FFF; border:1.5px solid var(--line);
  font-size:14px; font-weight:600; color:var(--ink-2); transition:all .3s;
}
.faq-cats a:hover,.faq-cats a.on{ border-color:var(--amber); color:var(--amber); background:var(--bg-3); transform:translateY(-2px); box-shadow:var(--shadow-s); }

/* ---------- 手风琴 ---------- */
.faq-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:start; }
.faq-acc{ display:grid; gap:14px; }
.faq-item{ background:#FFF; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-c); overflow:hidden; transition:box-shadow .3s; }
.faq-item.open{ box-shadow:var(--shadow-l); }
.faq-q{ display:flex; gap:14px; align-items:center; padding:20px 24px; cursor:pointer; }
.faq-q .fq-mark{ flex:none; width:34px; height:34px; border-radius:11px; background:var(--pink); color:var(--rose); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.faq-q .fq-t{ font-size:15.5px; font-weight:700; color:var(--ink); flex:1; }
.faq-q .fq-arrow{ flex:none; width:26px; height:26px; border-radius:9px; background:var(--bg-2); color:var(--ink-2); display:flex; align-items:center; justify-content:center; transition:transform .3s,background .3s; }
.faq-item.open .fq-arrow{ transform:rotate(180deg); background:var(--amber); color:#FFF; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.faq-a .faq-a-inner{ padding:0 24px 22px 72px; font-size:14px; color:var(--ink-2); }
.faq-a .faq-a-inner p{ margin-bottom:8px; }
.faq-item.open .faq-a{ max-height:600px; }

/* ---------- 帮助侧卡 ---------- */
.faq-side{ position:sticky; top:110px; display:grid; gap:16px; }
.faq-side .fs-card{ background:#FFF; border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow:var(--shadow-c); }
.faq-side .fs-card .fs-ico{ width:50px; height:50px; border-radius:15px; background:var(--yellow); color:var(--amber); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.faq-side .fs-card.pink .fs-ico{ background:var(--pink); color:var(--rose); }
.faq-side .fs-card h3{ font-size:16px; margin-bottom:8px; }
.faq-side .fs-card p{ font-size:13.5px; margin-bottom:14px; }
.faq-side .fs-card .btn{ width:100%; justify-content:center; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .faq-layout{ grid-template-columns:1fr; }
  .faq-side{ position:static; }
}
@media (max-width:640px){
  .hero-faq{ padding:130px 0 60px; }
  .faq-a .faq-a-inner{ padding:0 20px 20px; }
}