/* ============================================================
   shangqiu.css · 商丘市页专属样式
   骨架配方：F 曲线 + hero-half
   装饰母题：古城砖纹（S 形曲线串线 + 青砖错缝纹样）
   ============================================================ */

/* ---------- 页头 ---------- */
.sq-hero { background: var(--cream); }
.sq-hero .hero-inner { width: 100%; }

/* ---------- 曲线串线：S 形金色侧轨 ---------- */
.sq-flow { position: relative; padding-left: 90px; }
.sq-flow::before {
  content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-light) 8%, var(--gold) 50%, var(--gold-light) 92%, transparent);
  border-radius: 2px;
}
/* 曲线的"弯"：用半透明圆弧在节点处制造转弯感 */
.sq-flow .pearl { left: 29px; }
.sq-bend { position: relative; }
.sq-bend::before {
  content: ""; position: absolute; left: -60px; top: 40px;
  width: 60px; height: 120px; border: 2px solid transparent;
  border-left-color: var(--gold-light); border-bottom-color: var(--gold-light);
  border-radius: 0 0 0 60px; opacity: .55;
}

/* ---------- 砖纹母题：板块标题下的错缝砖线 ---------- */
.sq-brick .sec-head::after {
  content: ""; display: block; width: 90px; height: 14px; margin: 16px auto 0;
  background:
    linear-gradient(var(--gold-light), var(--gold-light)) 0 0 / 45px 2px no-repeat,
    linear-gradient(var(--gold-light), var(--gold-light)) 0 7px / 45px 2px no-repeat,
    linear-gradient(var(--gold-light), var(--gold-light)) 45px 3px / 45px 2px no-repeat;
  opacity: .5;
}

/* ---------- 服务网络：曲线节点横排 ---------- */
.sq-net { position: relative; }
.sq-net::before {
  content: ""; position: absolute; top: 34px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold-light) 0 10px, transparent 10px 20px);
  opacity: .4;
}
.sq-net .card-line { position: relative; padding-top: 46px; }
.sq-net .card-line::before {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 3px;
  background: var(--grad-gold); 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) {
  .sq-flow { padding-left: 0; }
  .sq-flow::before, .sq-bend::before { display: none; }
  .sq-flow .pearl { display: none; }
}