/* ==========================================================================
   墨白互联 · faq.html 专属样式（常见问题）
   布局指纹：F11 双列对谈（访客左问 · 墨白右答，聊天气泡式）
   模块：页首 Banner → 分类快速跳转 → 五组对谈问答 → 未解决咨询入口 → 全页 CTA
   ========================================================================== */

/* ===== 页首 Banner ===== */
.faq-hero{position:relative;min-height:460px;display:flex;align-items:center;overflow:hidden}
.faq-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.faq-hero .mask-ink{z-index:1}
.faq-hero-inner{position:relative;z-index:2;padding-block:clamp(72px,9vw,120px);color:var(--moon-100)}
.faq-hero .kicker{color:var(--moon-200)}
.faq-hero .kicker::before{background:var(--moon-200)}
.faq-hero h1{color:#fff;font-size:clamp(30px,4.4vw,52px);letter-spacing:.08em;margin-top:18px}
.faq-hero p.sub{margin-top:18px;max-width:660px;color:rgba(247,245,238,.85);font-size:clamp(15px,1.5vw,18px);line-height:2}

/* ===== 分类快速跳转 ===== */
.cat-nav{position:sticky;top:72px;z-index:40;background:rgba(247,245,238,.95);backdrop-filter:blur(10px);
  border-block:1px solid var(--line-soft);padding-block:14px}
.cat-nav .container{display:flex;gap:10px;flex-wrap:wrap}
.cat-nav a{padding:8px 20px;border:1px solid rgba(78,124,91,.4);border-radius:999px;font-size:14px;
  color:var(--bamboo-700);letter-spacing:.06em;background:var(--moon-50)}
.cat-nav a:hover{background:var(--bamboo-500);color:#F4F8F2;border-color:var(--bamboo-500)}

/* ===== F11 双列对谈 ===== */
.chat-area{max-width:880px;margin:0 auto;padding-top:clamp(40px,6vw,72px)}
.qa-group{margin-bottom:clamp(44px,6vw,72px)}
.qa-cat-head{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.qa-cat-head .cat-badge{flex-shrink:0;background:var(--cinnabar-500);color:#FFF3EC;font-family:var(--serif);
  padding:6px 16px;border-radius:6px;letter-spacing:.2em;font-size:14px;transform:rotate(-2deg);
  box-shadow:inset 0 0 0 2px rgba(255,243,236,.3)}
.qa-cat-head h2{font-size:22px;letter-spacing:.06em}
.qa-cat-head .cat-line{flex:1;height:1px;background:var(--line)}

.qa-row{display:grid;gap:12px;margin-bottom:24px}
.qa-bubble-row{display:flex;gap:12px;align-items:flex-start}
.qa-bubble-row.qa-to{flex-direction:row}
.qa-bubble-row.qa-from{flex-direction:row-reverse}
.qa-avatar{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:15px}
.qa-to .qa-avatar{background:var(--moon-300);color:var(--ink-700);box-shadow:inset 0 0 0 2px var(--moon-400)}
.qa-from .qa-avatar{background:var(--bamboo-700);color:#F4F8F2}
.qa-bubble{max-width:78%;padding:15px 22px;line-height:1.9;border-radius:16px;font-size:15px}
.qa-to .qa-bubble{background:var(--bamboo-500);color:#F4F8F2;border-radius:4px 16px 16px 16px}
.qa-from .qa-bubble{background:var(--moon-50);color:var(--ink-700);border:1px solid var(--line-soft);
  border-radius:16px 4px 16px 16px;box-shadow:var(--shadow-soft)}
.qa-bubble b{font-family:var(--serif)}
.qa-to .qa-bubble b{color:#fff}

/* ===== 未解决咨询入口 ===== */
.unresolved{background:var(--moon-200)}
.ur-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:44px;
  background:var(--moon-50);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.ur-wrap img{width:100%;height:100%;object-fit:cover;min-height:280px}
.ur-body{padding:clamp(28px,4vw,48px)}
.ur-body h2{font-size:clamp(22px,2.6vw,30px);margin-top:8px}
.ur-body p{margin-top:14px;color:var(--ink-500);font-size:15px;line-height:2}
.ur-contact{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.ur-contact a{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink-900)}
.ur-contact a svg{width:18px;height:18px;fill:var(--cinnabar-500)}
.ur-contact .ur-phone-big{font-family:var(--serif);font-size:28px;color:var(--cinnabar-600);letter-spacing:.04em;margin-top:6px}

/* ===== 全页 CTA（对谈收尾） ===== */
.faq-cta{padding-block:clamp(56px,8vw,100px)}
.cta-chat{max-width:680px;margin:0 auto}
.cta-chat .qa-row{margin-bottom:0}
.cta-chat .qa-bubble{max-width:100%}
.cta-chat .qa-from .qa-bubble{text-align:center;padding:30px 26px}
.cta-chat h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:10px}
.cta-chat p{color:var(--ink-500);font-size:14.5px}
.cta-chat .btn{margin-top:18px}

/* ===== 响应式 ===== */
@media (max-width:767px){
  .faq-hero{min-height:380px}
  .cat-nav{position:static}
  .qa-bubble{max-width:88%}
  .ur-wrap{grid-template-columns:1fr}
  .ur-wrap img{min-height:200px}
}