/* ==========================================================================
   shangqiu.css · 商丘报考服务总页
   题头：左右分栏(城市图+文字) ｜ 内容区：城市背景大图+段落 / 服务3列卡 / 企业zigzag图左 / 9区县3×3磁贴 / FAQ手风琴 / CTA
   ========================================================================== */

/* ---------- 左右分栏题头 ---------- */
.sq-hero{
  padding:calc(var(--header-h) + 56px) 0 64px;background:linear-gradient(160deg,var(--gray-50) 0%,var(--white) 70%);
}
.sq-hero-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.sq-hero h1{margin:16px 0 18px}
.sq-hero h1 em{font-style:normal;color:var(--blue-600)}
.sq-hero p.lead{font-size:15.5px;color:var(--gray-600);line-height:1.9;margin-bottom:26px}
.sq-hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.sq-hero-facts{display:flex;gap:32px;margin-top:30px;flex-wrap:wrap}
.sq-hero-facts .f b{display:block;font-size:26px;color:var(--gray-900);font-weight:800}
.sq-hero-facts .f span{font-size:12.5px;color:var(--gray-500)}
.sq-hero-img{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-m)}
.sq-hero-img img{width:100%;height:420px;object-fit:cover}

/* ---------- 城市背景 大图+段落 ---------- */
.sq-bg{padding:72px 0}
.sq-bg-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.sq-bg-img{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-s);position:sticky;top:96px}
.sq-bg-img img{width:100%;height:440px;object-fit:cover}
.sq-bg-text p{font-size:15px;color:var(--gray-700);line-height:2;margin-bottom:18px}
.sq-bg-text .pull{
  border-left:3px solid var(--blue-400);background:var(--blue-50);padding:18px 22px;
  border-radius:0 var(--radius-s) var(--radius-s) 0;color:var(--blue-800);font-size:14.5px;margin:22px 0;
}

/* ---------- 服务内容 3 列卡 ---------- */
.sq-svc{background:var(--gray-50);padding:72px 0}
.sq-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sq-svc-card{background:var(--white);border-radius:var(--radius-m);padding:30px 26px;box-shadow:var(--shadow-s);border-top:3px solid var(--blue-400)}
.sq-svc-card h3{font-size:18px;margin-bottom:12px}
.sq-svc-card ul{margin-top:8px}
.sq-svc-card ul li{font-size:14px;color:var(--gray-600);padding:7px 0 7px 18px;position:relative;line-height:1.7}
.sq-svc-card ul li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--blue-300)}

/* ---------- 企业服务 zigzag 图左 ---------- */
.sq-enter{padding:72px 0}
.sq-zig{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.sq-zig.rev .sq-zig-img{order:2}
.sq-zig-img{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-m)}
.sq-zig-img img{width:100%;height:340px;object-fit:cover}
.sq-zig-body h3{font-size:22px;margin-bottom:16px}
.sq-zig-body p{font-size:14.5px;color:var(--gray-600);line-height:1.9;margin-bottom:14px}
.sq-zig-body ul{margin-top:10px}
.sq-zig-body ul li{padding:8px 0 8px 26px;position:relative;font-size:14.5px;color:var(--gray-700)}
.sq-zig-body ul li::before{content:"✓";position:absolute;left:0;top:8px;color:var(--blue-500);font-weight:700}

/* ---------- 9 区县 3×3 磁贴 ---------- */
.sq-dist{background:var(--blue-50);padding:72px 0}
.sq-dist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sq-dist-tile{
  display:block;background:var(--white);border-radius:var(--radius-m);padding:24px 22px;
  box-shadow:var(--shadow-s);border:1px solid var(--gray-100);transition:transform var(--trans),box-shadow var(--trans);
}
.sq-dist-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--blue-200)}
.sq-dist-tile .d-name{font-size:17px;font-weight:700;color:var(--gray-900);margin-bottom:6px}
.sq-dist-tile .d-tag{font-size:12.5px;color:var(--gray-500);line-height:1.7}
.sq-dist-tile .d-go{font-size:13px;color:var(--blue-600);font-weight:600;margin-top:10px;display:inline-block}

/* ---------- FAQ 手风琴 ---------- */
.sq-faq{padding:72px 0}
.sq-faq-wrap{max-width:820px;margin:0 auto}
.sq-faq-item{border:1px solid var(--gray-100);border-radius:var(--radius-m);margin-bottom:12px;background:var(--white);overflow:hidden}
.sq-faq-item summary{
  cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;font-size:15.5px;color:var(--gray-800);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.sq-faq-item summary::-webkit-details-marker{display:none}
.sq-faq-item summary::after{content:"+";font-size:20px;color:var(--blue-500);font-weight:400;transition:transform var(--trans)}
.sq-faq-item[open] summary::after{transform:rotate(45deg)}
.sq-faq-item .faq-body{padding:0 22px 18px;font-size:14px;color:var(--gray-600);line-height:1.9}

/* ---------- CTA ---------- */
.sq-cta{background:var(--gray-900);color:#fff;padding:52px 0}
.sq-cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.sq-cta h2{color:#fff}
.sq-cta p{color:var(--gray-300);font-size:14.5px;margin-top:8px}

/* ---------- 响应式 ---------- */
@media (max-width:920px){
  .sq-hero-wrap,.sq-bg-wrap,.sq-zig{grid-template-columns:1fr}
  .sq-zig.rev .sq-zig-img{order:0}
  .sq-svc-grid,.sq-dist-grid{grid-template-columns:1fr}
  .sq-bg-img{position:static}
  .sq-tl-wrap{grid-template-columns:1fr !important}
}

/* ---------- 考生时间安排参考 ---------- */
.sq-timeline{padding:64px 0;background:#f4f7fb}
.sq-tl-wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px;
}
.sq-tl-step{
  background:#fff;border-radius:10px;padding:24px 20px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);text-align:center;
}
.sq-tl-dot{
  width:40px;height:40px;border-radius:50%;background:#1a3a6b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;
  margin:0 auto 14px;font-size:16px;
}
.sq-tl-step h3{font-size:16px;color:#1a3a6b;margin-bottom:8px}
.sq-tl-step p{font-size:14px;color:#555;line-height:1.7}

/* ---------- 九县服务分工说明 ---------- */
.sq-county-desc{padding:64px 0}
.sq-county-desc p{
  font-size:15.5px;line-height:2;color:#444;margin-top:16px;text-indent:2em;
}