/* ============================================================
   lnwmold.com —— 问答中心页专属样式 css/page-faq.css
   布局特色：便签式页头 + 分类胶囊筛选 + 手风琴问题卡 +
             右侧悬浮联系卡
   ============================================================ */

.section{ padding:56px 0; }

/* ---------- ① 页头：便签纸 ---------- */
.fq-hero{ padding:50px 0 30px; }
.fq-hero-inner{
  position:relative; max-width:760px;
  background:var(--white); border-radius:var(--r-l);
  padding:40px 40px 30px; box-shadow:var(--shadow-l);
  border:2px dashed var(--yellow);
  transform:rotate(-.6deg);
}
.fq-hero-inner:hover{ transform:none; }
.fq-hero h1{ margin:14px 0 12px; }
.fq-lead{ font-size:16px; max-width:560px; }
.fq-hero-photo{
  position:absolute; right:-26px; top:-34px; width:190px;
  transform:rotate(4deg);
}
.fq-hero-photo img{ border-radius:var(--r-s); box-shadow:var(--shadow-m); border:6px solid var(--white); }

/* ---------- ② 分类胶囊 ---------- */
.fq-filter-sec{ padding:6px 0 10px; }
.fq-filter{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.fq-chip{
  padding:9px 20px; border-radius:999px; font-size:14px; font-weight:700;
  background:var(--white); color:var(--ink);
  border:2px dashed var(--yellow-soft);
  transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s;
}
.fq-chip:hover{ transform:translateY(-2px); border-color:var(--yellow); }
.fq-chip.is-on{
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  color:#fff; border-color:transparent; box-shadow:var(--shadow-m);
}

/* ---------- ③ 手风琴布局 ---------- */
.fq-layout{
  display:grid; grid-template-columns:1fr 300px; gap:34px;
  align-items:start;
}
.fq-list{ display:flex; flex-direction:column; gap:14px; }
.fq-item{
  background:var(--white); border-radius:var(--r-m);
  box-shadow:var(--shadow-s); overflow:hidden;
  transition:box-shadow .25s ease, opacity .25s ease;
}
.fq-item:hover{ box-shadow:var(--shadow-m); }
.fq-item.is-hidden{ display:none; }
.fq-q{
  width:100%; display:flex; align-items:center; gap:14px;
  padding:18px 22px; text-align:left;
  font-size:16px; font-weight:800; color:var(--ink);
}
.fq-q-no{
  flex:none; width:40px; height:40px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--yellow-soft); color:var(--yellow-deep);
  font-size:14px;
}
.fq-q-text{ flex:1; }
.fq-q-icon{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--pink-soft); position:relative;
  transition:transform .3s ease, background .3s ease;
}
.fq-q-icon::before, .fq-q-icon::after{
  content:""; position:absolute; top:50%; left:50%;
  background:var(--pink-deep); border-radius:2px;
  transform:translate(-50%,-50%);
}
.fq-q-icon::before{ width:12px; height:2.4px; }
.fq-q-icon::after{ width:2.4px; height:12px; transition:transform .3s ease; }
.fq-item.is-open .fq-q-icon{ transform:rotate(180deg); background:var(--pink); }
.fq-item.is-open .fq-q-icon::after{ transform:translate(-50%,-50%) scaleY(0); }
.fq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.fq-a-inner{
  padding:0 22px 20px 76px; font-size:15px; color:var(--body);
  border-top:2px dashed var(--yellow-soft); padding-top:16px; margin:0 22px 18px 54px;
}
.fq-a-inner p{ margin:0; }
.fq-a-inner a{ color:var(--pink-deep); font-weight:700; }

/* ---------- 侧边联系卡 ---------- */
.fq-side{ position:sticky; top:110px; }
.fq-side-card{
  background:linear-gradient(160deg,var(--green-soft),var(--white) 70%);
  border:3px dashed var(--green-mid); border-radius:var(--r-l);
  padding:28px 24px; text-align:center;
}
.fq-side-card h3{ margin-bottom:8px; }
.fq-side-card p{ font-size:14px; }
.fq-side-list{ margin:18px 0; text-align:left; }
.fq-side-list li{ margin-bottom:12px; }
.fq-side-list a{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border-radius:var(--r-s);
  background:var(--white); transition:transform .2s ease;
}
.fq-side-list a:hover{ transform:translateX(4px); }
.fq-side-list svg{ width:18px; height:18px; stroke:var(--green-deep); flex:none; }
.fq-side-list b{ color:var(--ink); font-size:15px; }
.fq-side-list span{ width:100%; font-size:12.5px; color:#9A8A7C; }
.fq-side-card .btn{ width:100%; }

/* ---------- ④ 底部 CTA ---------- */
.fq-cta{ padding:30px 0; }
.fq-cta-inner{
  text-align:center; border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  padding:48px 24px; box-shadow:var(--shadow-m);
}
.fq-cta-inner h2{ color:#fff; margin-bottom:20px; }
.fq-cta-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

/* ---------- 响应式 ---------- */
@media (max-width:991.98px){
  .fq-layout{ grid-template-columns:1fr; }
  .fq-side{ position:static; }
}
@media (max-width:575.98px){
  .section{ padding:40px 0; }
  .fq-hero-inner{ padding:30px 22px 24px; transform:none; }
  .fq-hero-photo{ display:none; }
  .fq-q{ padding:15px 16px; gap:10px; font-size:15px; }
  .fq-q-no{ width:34px; height:34px; font-size:12px; }
  .fq-a-inner{ margin:0 16px 14px 16px; padding:14px 0 0; }
  .fq-cta-btns .btn{ width:100%; }
}