/* =====================================================================
   周口网站建设 · zhoukou.css
   布局：横向数字带 / 三行左右交替图文 / 案例大卡(左图右文深色叠加) / FAQ / 城市chips
   ===================================================================== */

/* ---------- 横幅 ---------- */
.banner-service{background-image:url('../images/banner-service.jpg')}

/* ---------- 数字带 ---------- */
.zk-stats{background:var(--c-ice);padding:46px 0}
.zk-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.zk-stat{text-align:center;padding:10px 6px;border-right:1px dashed var(--c-line)}
.zk-stat:last-child{border-right:none}
.zk-stat .stat-num{color:var(--c-primary)}
.zk-stat span{display:block;margin-top:8px;font-size:14px;color:var(--c-text-2);font-weight:600}

/* ---------- 交替图文行 ---------- */
.zk-why{background:#fff}
.zk-row{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;margin-bottom:64px}
.zk-row:last-child{margin-bottom:0}
.zk-row-b{grid-template-columns:1.1fr 1fr}
.zk-row-b .zk-row-media{order:2}
.zk-row-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);aspect-ratio:3/2;object-fit:cover;width:100%}
.zk-row-tag{display:inline-block;font-size:12.5px;font-weight:800;color:var(--c-accent);background:var(--c-ice);padding:5px 14px;border-radius:6px;margin-bottom:14px;letter-spacing:1px}
.zk-row-text h3{font-size:clamp(20px,2.3vw,27px);margin-bottom:14px;line-height:1.4}
.zk-row-text p{color:var(--c-text-2)}

/* ---------- 案例大卡 ---------- */
.zk-case{background:var(--c-ice-2)}
.zk-case-card{
  display:grid;grid-template-columns:1fr 1.15fr;gap:0;background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-lg);
}
.zk-case-media{position:relative;min-height:100%}
.zk-case-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zk-case-badge{
  position:absolute;left:20px;bottom:20px;background:rgba(15,31,61,.85);color:#fff;
  font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:999px;backdrop-filter:blur(4px);
}
.zk-case-body{padding:48px 46px}
.zk-case-body h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:18px;line-height:1.35}
.zk-case-body p{color:var(--c-text-2);margin-bottom:14px}
.zk-case-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}

/* ---------- FAQ ---------- */
.zk-faq{background:#fff}
.zk-faq-list{max-width:820px;margin:0 auto;display:grid;gap:14px}
.zk-faq-item{border:1px solid var(--c-line);border-radius:12px;background:var(--c-ice-2);transition:all var(--trans)}
.zk-faq-item[open]{background:#fff;box-shadow:var(--shadow);border-color:var(--c-accent)}
.zk-faq-item summary{
  cursor:pointer;list-style:none;padding:17px 24px;font-weight:700;color:var(--c-primary);font-size:15.5px;
  display:flex;justify-content:space-between;gap:14px;align-items:center;
}
.zk-faq-item summary::-webkit-details-marker{display:none}
.zk-faq-item summary::after{content:"▾";color:var(--c-accent);transition:transform var(--trans)}
.zk-faq-item[open] summary::after{transform:rotate(180deg)}
.zk-faq-item p{padding:0 24px 18px;color:var(--c-text-2);font-size:14.5px}
.zk-faq-item p a{color:var(--c-accent);font-weight:600}

/* ---------- 城市 chips ---------- */
.zk-cities{background:var(--c-ice-2);padding-top:64px;padding-bottom:64px}
.zk-city-chips{display:flex;flex-wrap:wrap;gap:12px}
.zk-city-chips a{
  background:#fff;border:1px solid var(--c-line);border-radius:8px;padding:10px 20px;
  font-weight:600;color:var(--c-text-2);transition:all var(--trans);
}
.zk-city-chips a:hover{color:var(--c-accent);border-color:var(--c-accent);transform:translateY(-3px)}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .zk-row,.zk-row-b,.zk-case-card{grid-template-columns:1fr;gap:30px}
  .zk-row-b .zk-row-media{order:0}
  .zk-case-media{min-height:260px}
  .zk-stat-row{grid-template-columns:1fr 1fr;gap:26px 10px}
  .zk-stat:nth-child(2){border-right:none}
}