/* ============================================================
   zhoukou.css · 周口市页专属样式
   骨架配方：D 双轨 + hero-banner
   装饰母题：三川汇流（左右双轨并行 + 汇合水纹）
   ============================================================ */

/* ---------- 页头：横幅 ---------- */
.zk-hero { background: var(--cream); }
.zk-hero .hero-inner { position: relative; z-index: 3; }

/* ---------- 双轨板块：珍珠左右交替挂在双轨上 ---------- */
.zk-dual { padding-left: 62px; padding-right: 62px; position: relative; }
.zk-dual::before {
  content: ""; position: absolute; left: 18px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-light) 12%, var(--gold) 50%, var(--gold-light) 88%, transparent);
  border-radius: 2px;
}
.zk-dual::after {
  content: ""; position: absolute; right: 18px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-light) 12%, var(--gold) 50%, var(--gold-light) 88%, transparent);
  border-radius: 2px;
}
.zk-dual .pearl-l { position: absolute; left: 13px; }
.zk-dual .pearl-r { position: absolute; right: 13px; }

/* ---------- 汇流小图标：挂在板块标题下 ---------- */
.zk-river .sec-head::after {
  content: ""; display: block; width: 60px; height: 20px; margin: 16px auto 0;
  background:
    linear-gradient(180deg, transparent 44%, var(--gold) 46% 54%, transparent 56%) 0 0 / 30px 20px no-repeat,
    linear-gradient(180deg, transparent 44%, var(--gold-light) 46% 54%, transparent 56%) 30px 0 / 30px 20px no-repeat;
  opacity: .5;
}

/* ---------- 服务网络：双轨节点横排 ---------- */
.zk-net { position: relative; }
.zk-net::before {
  content: ""; position: absolute; top: 34px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
  opacity: .35;
}
.zk-net .card-line { position: relative; padding-top: 46px; }
.zk-net .card-line::before {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F7E9C4, var(--gold) 78%);
  box-shadow: 0 0 0 5px rgba(194, 160, 75, .15);
}

/* ---------- 间距与表格容器 ---------- */
.mt { margin-top: 16px; }
.mt-lg { margin-top: 26px; }
.mt-xl { margin-top: 44px; }
.tbl-wrap { overflow-x: auto; border-radius: var(--radius); }

@media (max-width: 860px) {
  .zk-dual { padding-left: 0; padding-right: 0; }
  .zk-dual::before, .zk-dual::after { display: none; }
  .zk-dual .pearl-l, .zk-dual .pearl-r { display: none; }
}