/* ==========================================================================
   xihua.html · 西华县属地服务页
   骨架：Hero → 网格磁贴（6枚不等宽 bento）→ 本地热点卡 → 流程 → 承诺 → 邻县 → CTA
   专属前缀 .pg-xh
   ========================================================================== */

/* ---------- Hero ---------- */
.pg-xh .xh-hero{ padding-top:calc(var(--nav-h) + clamp(40px,6vw,72px)); }
.pg-xh .xh-hero-grid{ display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,50px);align-items:center; }
.pg-xh .xh-hero-txt h1{ font-size:clamp(30px,4.2vw,46px); }
.pg-xh .xh-hero-cta{ display:flex;flex-wrap:wrap;gap:14px;margin-top:26px; }
.pg-xh .xh-hero-img img{ width:100%;height:auto;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);border:4px solid #fff;object-fit:cover; }

/* ---------- 网格磁贴 bento ---------- */
.pg-xh .xh-bento{
  display:grid;grid-template-columns:1.3fr 1fr 1fr;
  grid-auto-rows:170px;gap:18px;
}
.pg-xh .xh-tile{
  display:flex;flex-direction:column;justify-content:flex-start;gap:8px;
  padding:24px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .35s,box-shadow .35s;
}
.pg-xh .xh-tile:hover{ transform:translateY(-5px);box-shadow:var(--shadow-md); }
.pg-xh .xh-tile svg{ width:34px;height:34px;color:var(--purple-deep); }
.pg-xh .xh-tile h3{ font-size:18px; }
.pg-xh .xh-tile p{ font-size:13.5px;color:var(--ink-3); }
.pg-xh .xh-tile.t1{ grid-column:span 2;grid-row:span 2;justify-content:center; }
.pg-xh .xh-tile.t1 svg{ width:46px;height:46px; }
.pg-xh .xh-tile.t1 h3{ font-size:24px; }
.pg-xh .xh-tile.t1 p{ font-size:15px;max-width:420px; }
.pg-xh .xh-tile.t2,.pg-xh .xh-tile.t3,.pg-xh .xh-tile.t4,.pg-xh .xh-tile.t5,.pg-xh .xh-tile.t6{
  justify-content:center;
}
.pg-xh .xh-tile.pink{ background:linear-gradient(135deg,#FFD6EA,#FFF0F7); }
.pg-xh .xh-tile.blue{ background:linear-gradient(135deg,#DDF1FD,#EFF9FF); }
.pg-xh .xh-tile.t6{ grid-column:span 3;flex-direction:row;align-items:center;gap:16px; }
.pg-xh .xh-tile.t6 p{ flex:1; }
.pg-xh .xh-tile-more{ font-size:13px;font-weight:600;color:var(--purple-deep);margin-top:auto; }

/* ---------- 本地热点卡 ---------- */
.pg-xh .xh-hot-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.pg-xh .xh-hot-card{ padding:26px 24px; }
.pg-xh .xh-hot-card .tag{ margin-bottom:14px; }
.pg-xh .xh-hot-card h3{ font-size:18px;margin-bottom:10px; }
.pg-xh .xh-hot-card p{ font-size:14px;color:var(--ink-3);margin-bottom:14px; }
.pg-xh .xh-hot-link{ font-size:14px;font-weight:600;color:var(--pink-deep); }

/* ---------- 服务流程 ---------- */
.pg-xh .xh-flow-row{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:820px;margin:0 auto; }
.pg-xh .xh-flow-step{
  text-align:center;padding:26px 20px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.pg-xh .xh-flow-step .n{
  display:inline-flex;width:46px;height:46px;border-radius:50%;
  align-items:center;justify-content:center;font-weight:800;color:#fff;
  background:var(--grad-blue);margin-bottom:14px;
}
.pg-xh .xh-flow-step h3{ font-size:17px;margin-bottom:8px; }
.pg-xh .xh-flow-step p{ font-size:13px;color:var(--ink-3); }

/* ---------- 承诺 ---------- */
.pg-xh .xh-promise-box{
  max-width:820px;margin:0 auto;text-align:center;
  padding:clamp(28px,4vw,44px);border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.pg-xh .xh-promise-box h2{ font-size:clamp(22px,3vw,32px);margin-bottom:14px; }
.pg-xh .xh-promise-box p{ color:var(--ink-2); }

/* ---------- 邻县互链 ---------- */
.pg-xh .xh-city-tags{ display:flex;flex-wrap:wrap;gap:12px;justify-content:center; }
.pg-xh .xh-city-tags .tag{ font-size:14px;padding:9px 20px; }

/* ---------- CTA ---------- */
.pg-xh .xh-cta{ padding-block:var(--sec-pad); }
.pg-xh .xh-cta-box{
  background:linear-gradient(135deg,#EDE6FC,#DDF1FD);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(30px,5vw,56px);text-align:center;max-width:820px;margin:0 auto;
}
.pg-xh .xh-cta-box h2{ font-size:clamp(24px,3.4vw,36px);margin-bottom:12px; }
.pg-xh .xh-cta-box > p{ color:var(--ink-3);margin-bottom:26px; }
.pg-xh .xh-cta-form{ display:grid;gap:14px;text-align:left; }
.pg-xh .xh-cta-form .btn{ justify-self:center; }

/* ---------- 数据条 ---------- */
.pg-xh .xh-stats{ background:var(--grad-brand);padding:clamp(34px,4vw,50px) 0; }
.pg-xh .xh-stats-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center; }
.pg-xh .xh-stat .num{ font-size:clamp(28px,3.6vw,42px);font-weight:800;color:#fff; }
.pg-xh .xh-stat .lbl{ font-size:14px;color:rgba(255,255,255,.92);margin-top:4px; }

/* ---------- 本地常见问题 ---------- */
.pg-xh .xh-faq-list{ display:grid;gap:14px;max-width:860px;margin:0 auto; }
.pg-xh .xh-faq-item{ padding:20px 24px; }
.pg-xh .xh-faq-item summary{
  cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.pg-xh .xh-faq-item summary::-webkit-details-marker{ display:none; }
.pg-xh .xh-faq-item summary::after{
  content:"+";flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-mist);color:#3E8BC7;font-weight:700;transition:transform .3s;
}
.pg-xh .xh-faq-item[open] summary::after{ transform:rotate(45deg); }
.pg-xh .xh-faq-item p{ margin-top:12px;font-size:14px;color:var(--ink-3); }

/* ---------- 区块10：本地服务说明 ---------- */
.pg-xh .xh-note-wrap{ max-width:860px; }
.pg-xh .xh-note-wrap h2{ font-size:clamp(22px,3vw,30px);margin-bottom:16px; }
.pg-xh .xh-note-wrap p{ font-size:15px;color:var(--ink-3);line-height:1.9;margin-bottom:14px; }

/* ---------- 响应式：1024 ---------- */
/* ---------- 区块8：图解说明 ---------- */
.pg-xh .xh-guide-wrap{ display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,48px);align-items:center; }
.pg-xh .xh-guide-img img{ width:100%;border-radius:var(--r-xl);box-shadow:var(--shadow-md); }
.pg-xh .xh-guide-txt h2{ font-size:clamp(22px,3vw,30px);margin:10px 0 14px; }
.pg-xh .xh-guide-txt p{ font-size:15px;color:var(--ink-3);margin-bottom:18px; }
.pg-xh .xh-guide-txt ul{ list-style:none;display:grid;gap:10px; }
.pg-xh .xh-guide-txt li{ display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2); }
.pg-xh .xh-guide-txt li svg{ flex:none;width:20px;height:20px;color:var(--purple);margin-top:2px; }

/* ---------- 区块9：本地热点问答 ---------- */
.pg-xh .xh-hotqa-list{ display:grid;gap:14px;max-width:860px;margin:0 auto; }
.pg-xh .xh-hotqa-item{ display:flex;gap:16px;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); }
.pg-xh .xh-hotqa-no{ flex:none;font-weight:800;color:#fff;background:var(--grad-purple);border-radius:var(--r-md);padding:4px 10px;height:fit-content;font-size:14px; }
.pg-xh .xh-hotqa-item h3{ font-size:16px;margin-bottom:6px; }
.pg-xh .xh-hotqa-item p{ font-size:14px;color:var(--ink-3); }

@media (max-width:1024px){
  .pg-xh .xh-guide-wrap{ grid-template-columns:1fr; }
  .pg-xh .xh-hero-grid{ grid-template-columns:1fr; }
  .pg-xh .xh-bento{ grid-template-columns:1fr 1fr;grid-auto-rows:160px; }
  .pg-xh .xh-tile.t1{ grid-column:span 2;grid-row:span 1; }
  .pg-xh .xh-tile.t6{ grid-column:span 2;flex-direction:column;align-items:flex-start; }
  .pg-xh .xh-hot-grid{ grid-template-columns:1fr; }
}
/* ---------- 响应式：768 ---------- */
@media (max-width:768px){
  .pg-xh .xh-flow-row{ grid-template-columns:1fr; }
}
/* ---------- 响应式：480 ---------- */
@media (max-width:480px){
  .pg-xh .xh-bento{ grid-template-columns:1fr;grid-auto-rows:auto; }
  .pg-xh .xh-tile.t1,.pg-xh .xh-tile.t6{ grid-column:span 1; }
  .pg-xh .xh-hero-cta .btn{ width:100%; }
  .pg-xh .xh-cta-form .btn{ width:100%; }
}