/* ==========================================================================
   shenqiu.html · 沈丘县属地服务页
   骨架：横幅 hero + 瀑布卡流 → 数据条 → 需求 → 流程 → 承诺 → 邻县 → CTA
   专属前缀 .pg-sq
   ========================================================================== */

/* ---------- 横幅 Hero ---------- */
.pg-sq .sq-banner{
  position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(70px,10vw,120px)) 0 clamp(50px,7vw,80px);
  background:
    linear-gradient(135deg,rgba(124,108,217,.88),rgba(255,126,188,.78)),
    url("../images/xiancheng.jpg") center/cover no-repeat;
}
.pg-sq .sq-banner-inner{ position:relative;z-index:2;max-width:820px; }
.pg-sq .sq-banner .crumbs{ margin-bottom:14px;color:rgba(255,255,255,.85); }
.pg-sq .sq-banner .crumbs a{ color:#fff; }
.pg-sq .sq-banner .eyebrow{ background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.3); }
.pg-sq .sq-banner h1{ font-size:clamp(30px,4.6vw,50px);color:#fff;margin:14px 0 14px; }
.pg-sq .sq-banner h1 .grad-text{ background:linear-gradient(90deg,#fff,#DDF1FD);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.pg-sq .sq-banner .sub{ color:rgba(255,255,255,.92);font-size:clamp(15px,1.6vw,18px);max-width:680px; }
.pg-sq .sq-banner-cta{ display:flex;flex-wrap:wrap;gap:14px;margin-top:28px; }

/* ---------- 瀑布卡流 ---------- */
.pg-sq .sq-flow{
  columns:3 300px;column-gap:20px;
}
.pg-sq .sq-card{
  break-inside:avoid;margin-bottom:20px;overflow:hidden;
  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-sq .sq-card:hover{ transform:translateY(-5px);box-shadow:var(--shadow-md); }
.pg-sq .sq-card img{ width:100%;height:auto;object-fit:cover; }
.pg-sq .sq-card-body{ padding:20px; }
.pg-sq .sq-card-body .tag{ margin-bottom:12px; }
.pg-sq .sq-card-body h3{ font-size:17px;margin-bottom:8px; }
.pg-sq .sq-card-body p{ font-size:13.5px;color:var(--ink-3); }

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

/* ---------- 本地需求 ---------- */
.pg-sq .sq-need-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.pg-sq .sq-need-card{ padding:28px 24px; }
.pg-sq .sq-need-card h3{ font-size:18px;margin-bottom:10px; }
.pg-sq .sq-need-card p{ font-size:14px;color:var(--ink-3); }

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

/* ---------- 承诺 ---------- */
.pg-sq .sq-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-sq .sq-promise-box h2{ font-size:clamp(22px,3vw,32px);margin-bottom:14px; }
.pg-sq .sq-promise-box p{ color:var(--ink-2); }

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

/* ---------- CTA ---------- */
.pg-sq .sq-cta{ padding-block:var(--sec-pad); }
.pg-sq .sq-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-sq .sq-cta-box h2{ font-size:clamp(24px,3.4vw,36px);margin-bottom:12px; }
.pg-sq .sq-cta-box > p{ color:var(--ink-3);margin-bottom:26px; }
.pg-sq .sq-cta-form{ display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:flex-end; }
.pg-sq .sq-cta-form .form-row{ flex:1 1 420px; }
.pg-sq .sq-cta-form .btn{ flex:none; }

/* ---------- 本地常见问题 ---------- */
.pg-sq .sq-faq-list{ display:grid;gap:14px;max-width:860px;margin:0 auto; }
.pg-sq .sq-faq-item{ padding:20px 24px; }
.pg-sq .sq-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-sq .sq-faq-item summary::-webkit-details-marker{ display:none; }
.pg-sq .sq-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-sq .sq-faq-item[open] summary::after{ transform:rotate(45deg); }
.pg-sq .sq-faq-item p{ margin-top:12px;font-size:14px;color:var(--ink-3); }

/* ---------- 区块7：服务案例 ---------- */
.pg-sq .sq-case-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.pg-sq .sq-case-card{ padding:24px;display:flex;flex-direction:column;gap:10px; }
.pg-sq .sq-case-card h3{ font-size:17px; }
.pg-sq .sq-case-card p{ font-size:14px;color:var(--ink-3);flex:1; }

/* ---------- 区块8：办理清单 ---------- */
.pg-sq .sq-check-grid{ display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin:0 auto; }
.pg-sq .sq-check-col{ padding:24px; }
.pg-sq .sq-check-col h3{ font-size:17px;margin-bottom:14px; }
.pg-sq .sq-check-col ul{ list-style:none;display:grid;gap:10px; }
.pg-sq .sq-check-col li{ display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2); }
.pg-sq .sq-check-col li svg{ flex:none;width:20px;height:20px;color:#3E8BC7;margin-top:2px; }

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

/* ---------- 响应式：1024 ---------- */
@media (max-width:1024px){
  .pg-sq .sq-flow{ columns:2 280px; }
  .pg-sq .sq-need-grid{ grid-template-columns:1fr; }
  .pg-sq .sq-flow-row{ grid-template-columns:1fr 1fr; }
}
/* ---------- 响应式：768 ---------- */
@media (max-width:768px){
  .pg-sq .sq-flow{ columns:1; }
  .pg-sq .sq-stats-grid{ grid-template-columns:1fr 1fr;gap:28px 16px; }
  .pg-sq .sq-case-grid{ grid-template-columns:1fr; }
  .pg-sq .sq-check-grid{ grid-template-columns:1fr; }
}
/* ---------- 响应式：480 ---------- */
@media (max-width:480px){
  .pg-sq .sq-flow-row{ grid-template-columns:1fr; }
  .pg-sq .sq-banner-cta .btn{ width:100%; }
  .pg-sq .sq-cta-form .btn{ width:100%; }
}