@charset "utf-8";
/* ==================================================================
   苏州大自然门窗 · 常见问题 FAQ 页
   依赖 css/home.css（设计变量 --ink / --gold / --wrap / --ease 等）
   视觉与首页、产品中心、关于我们保持一致：墨绿近黑 + 香槟金点缀
   ================================================================== */

/* ---------- 主体 ---------- */
.fsec{background:var(--paper2);padding:80px 0 96px;}
.fwrap{max-width:1000px;margin:0 auto;}

/* ---------- 分类筛选 ---------- */
.fcat{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:42px;}
.fcat button{
  font-family:inherit;cursor:pointer;
  padding:11px 24px;font-size:14.5px;letter-spacing:.04em;color:var(--text);
  background:var(--paper);border:1px solid var(--line);
  transition:all .3s var(--ease);
}
.fcat button:hover{color:var(--gold);border-color:rgba(198,161,91,.5);}
.fcat button.on{
  color:var(--ink);border-color:transparent;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 10px 24px rgba(198,161,91,.28);
}

/* ---------- 手风琴 ---------- */
.flist{display:flex;flex-direction:column;gap:14px;}
.fitem{
  background:var(--paper);border:1px solid var(--line);overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fitem.open{border-color:rgba(198,161,91,.45);box-shadow:0 18px 40px rgba(12,20,17,.08);}
.fq{
  display:flex;align-items:center;gap:16px;cursor:pointer;
  padding:20px 24px;user-select:none;
}
.fq .qb{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ink),var(--ink3));
  color:var(--gold2);font-size:15px;font-weight:600;font-style:italic;
}
.fq .qt{flex:1;font-size:16.5px;font-weight:600;color:var(--text);line-height:1.6;transition:color .3s;}
.fitem.open .fq .qt,.fq:hover .qt{color:var(--gold);}
.fq .arw{
  flex:none;width:18px;height:18px;position:relative;transition:transform .35s var(--ease);
  color:var(--muted);
}
.fq .arw::before,.fq .arw::after{
  content:'';position:absolute;top:8px;width:11px;height:2px;background:currentColor;border-radius:2px;
}
.fq .arw::before{left:0;transform:rotate(45deg);}
.fq .arw::after{right:0;transform:rotate(-45deg);}
.fitem.open .fq .arw{transform:rotate(180deg);color:var(--gold);}

.fa{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease);
}
.fa-in{padding:0 24px 22px 70px;font-size:15px;line-height:2;color:var(--muted);}
.fa-in b,.fa-in strong{color:var(--ink);font-weight:600;}

/* ---------- 分组小标题 & AI 角标（后台 GEO FAQ 追加数据源） ---------- */
.grp-t{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--muted);letter-spacing:.06em;
  margin:26px 0 12px;
}
.grp-t::after{content:'';flex:1;height:1px;background:var(--line);}
.grp-t b{color:var(--gold);font-weight:700;}
.flist > .grp-t:first-child{margin-top:0;}
.tag-ai{
  display:inline-block;vertical-align:middle;font-weight:500;letter-spacing:.02em;
  background:linear-gradient(135deg,#2E5A4A,#3E7A64);color:#fff;
  font-size:11px;padding:2px 8px;border-radius:3px;margin-left:8px;
}

/* ---------- 详情页投放的问答区块（产品页 / 案例页复用） ---------- */
.pfaq{background:var(--paper2);padding:80px 0 90px;}
/* 上方「其他产品 / 相关案例」(.pother) 底距 96px + 本区顶距 80px，两块同为灰底会连成 176px 大空白。
   这里把紧贴 .pother 的问答区上提 176px，总空隙归零（2026-09-07 老王调参台定稿）。
   写成相邻选择器是留个兜底：案例页若无相关案例，上方会变成底距更小的图集区，此时不做上提，避免怼进图集。 */
.pother + .pfaq{margin-top:-176px;}
.pfaq .flist{max-width:1000px;margin:0 auto;}
.pfaq .pnote a{color:var(--gold);border-bottom:1px solid rgba(198,161,91,.45);padding-bottom:2px;}
.pfaq .pnote a:hover{color:var(--ink);border-color:var(--ink);}
.pfaq .pnote b{font-weight:600;}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .fsec{padding:56px 0 64px;}
  .fq{padding:16px 18px;gap:12px;}
  .fq .qt{font-size:15.5px;}
  .fa-in{padding:0 18px 18px 60px;font-size:14.5px;}
  .pfaq{padding:56px 0 64px;}
  /* 手机端两块内边距都变小（70 + 56 = 126），上提量同步收，并留 16px 免得贴死 */
  .pother + .pfaq{margin-top:-110px;}
}