/* ============================================================
   城市列表聚合页样式 (special_city_list)
   设计要点：多彩、无黑色字体、无 emoji
   ============================================================ */

/* ---------- Hero 区（蓝色渐变） ---------- */
.cl-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #06204f 0%, #1444be 46%, #2f74f5 100%);
  padding: 88px 0 72px; text-align: center;
}
.cl-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(56,189,248,.30), transparent 60%),
    radial-gradient(780px 480px at 90% 112%, rgba(37,99,235,.42), transparent 62%),
    radial-gradient(620px 420px at 55% 45%, rgba(99,102,241,.16), transparent 70%);
  pointer-events: none;
}
.cl-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.cl-hero .container { position: relative; z-index: 2; }

.cl-hero .cl-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 20px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  margin-bottom: 24px; backdrop-filter: blur(6px);
}
.cl-hero .cl-kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #22d3ee; box-shadow: 0 0 12px rgba(34,211,238,.9);
}
.cl-hero h1 {
  font-size: 42px; font-weight: 900; line-height: 1.3;
  margin-bottom: 18px; color: #fff; letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.12);
}
.cl-hero h1 .grad {
  background: linear-gradient(90deg, #67e8f9 0%, #a5b4fc 55%, #c4b5fd 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(103,232,249,.28));
}
.cl-hero p.cl-lead {
  font-size: 17px; color: rgba(255,255,255,.92);
  max-width: 640px; margin: 0 auto 36px; line-height: 1.8;
}

/* 数据统计条 */
.cl-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 820px; margin: 0 auto;
}
.cl-stat {
  padding: 24px 16px; border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); transition: transform .3s;
}
.cl-stat:hover { transform: translateY(-4px); }
.cl-stat .num { font-size: 34px; font-weight: 900; color: #fff; line-height: 1.1; }
.cl-stat .num i { font-size: 15px; font-style: normal; color: rgba(255,255,255,.75); margin-left: 2px; }
.cl-stat .label { font-size: 13.5px; color: rgba(255,255,255,.85); margin-top: 8px; font-weight: 600; }
.cl-stat:nth-child(1) .num { color: #fcd34d; }
.cl-stat:nth-child(2) .num { color: #67e8f9; }
.cl-stat:nth-child(3) .num { color: #93c5fd; }
.cl-stat:nth-child(4) .num { color: #c4b5fd; }

/* ---------- 地图区（深蓝黑底 + 透明地图） ---------- */
.cl-map-section { padding: 80px 0; background: #fff; }
.cl-map-wrap {
  position: relative; border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  border: none;
  box-shadow: 0 24px 60px rgba(15,23,42,.4);
}
.cl-map-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(56,189,248,.15), transparent 62%),
    radial-gradient(760px 460px at 88% 112%, rgba(37,99,235,.20), transparent 62%);
  pointer-events: none;
}
#clMap { position: relative; z-index: 2; width: 100%; height: 680px; cursor: pointer; }
.cl-map-legend {
  position: absolute; left: 24px; bottom: 22px; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 20px; border-radius: 14px;
  background: rgba(15,23,42,.75); backdrop-filter: blur(12px);
  border: 1px solid rgba(96,165,250,.25);
  box-shadow: 0 8px 24px rgba(3,18,56,.5);
}
.cl-map-legend .li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: rgba(224,242,254,.9);
}
.cl-map-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.cl-map-legend .dot.center { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.35), 0 0 12px rgba(251,191,36,.6); }
.cl-map-legend .dot.municipality { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,.5); }
.cl-map-legend .dot.capital { background: #06b6d4; box-shadow: 0 0 8px rgba(6,182,212,.5); }
.cl-map-legend .dot.keycity { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,.5); }

/* ---------- 分组区 ---------- */
.cl-group-section { padding: 80px 0; background: #fff; }
.cl-group-section:nth-of-type(even) {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.cl-group-head { text-align: center; margin-bottom: 56px; }

/* 分组胶囊标签（无图标） */
.cl-group-head .cl-tag {
  display: inline-flex; align-items: center;
  padding: 10px 28px; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  margin-bottom: 20px; border: none; transition: all .3s;
}
.cl-group-head .cl-tag:hover { transform: translateY(-2px); }
.cl-tag.municipality { color: #3b82f6; background: rgba(59,130,246,.08); box-shadow: 0 2px 12px rgba(59,130,246,.10); }
.cl-tag.municipality:hover { background: rgba(59,130,246,.12); box-shadow: 0 4px 20px rgba(59,130,246,.15); }
.cl-tag.capital { color: #0891b2; background: rgba(6,182,212,.08); box-shadow: 0 2px 12px rgba(6,182,212,.10); }
.cl-tag.capital:hover { background: rgba(6,182,212,.12); box-shadow: 0 4px 20px rgba(6,182,212,.15); }
.cl-tag.keycity { color: #d97706; background: rgba(245,158,11,.08); box-shadow: 0 2px 12px rgba(245,158,11,.10); }
.cl-tag.keycity:hover { background: rgba(245,158,11,.12); box-shadow: 0 4px 20px rgba(245,158,11,.15); }

.cl-group-head .cl-title {
  font-size: 36px; font-weight: 900; color: #1e293b;
  margin-bottom: 16px; letter-spacing: -.5px;
}
.cl-group-head .cl-desc {
  font-size: 16px; color: #64748b;
  max-width: 600px; margin: 0 auto; line-height: 1.8;
}
.cl-map-section .cl-title .hl { color: #2563eb; }

/* ---------- 城市卡片 ---------- */
.cl-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}
.cl-group-section[data-cols="4"] .cl-grid { grid-template-columns: repeat(4, 1fr); }

.cl-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e8edf5; border-radius: 16px;
  padding: 26px 22px 20px; text-decoration: none;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  overflow: hidden;
}
.cl-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 16px 16px 0 0;
}
.cl-card.g-municipality::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.cl-card.g-capital::before     { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.cl-card.g-keycity::before     { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.cl-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(30,41,59,.12);
  border-color: transparent;
}
.cl-card.g-municipality:hover { box-shadow: 0 18px 44px rgba(59,130,246,.18); }
.cl-card.g-capital:hover      { box-shadow: 0 18px 44px rgba(6,182,212,.18); }
.cl-card.g-keycity:hover      { box-shadow: 0 18px 44px rgba(245,158,11,.18); }

.cl-card .city-name { font-size: 21px; font-weight: 900; margin-bottom: 6px; letter-spacing: -.02em; }
.cl-card.g-municipality .city-name { color: #3b82f6; }
.cl-card.g-capital .city-name      { color: #0891b2; }
.cl-card.g-keycity .city-name      { color: #f59e0b; }

.cl-card .city-addr { font-size: 13px; color: #94a3b8; font-weight: 600; margin-bottom: 10px; }
.cl-card .city-desc {
  font-size: 13.5px; color: #64748b; line-height: 1.65; flex: 1;
  margin-bottom: 16px;
}
.cl-card .city-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid #f1f5f9;
}
.cl-card .city-tag {
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.cl-card.g-municipality .city-tag { color: #3b82f6; background: rgba(59,130,246,.10); }
.cl-card.g-capital .city-tag      { color: #0891b2; background: rgba(6,182,212,.10); }
.cl-card.g-keycity .city-tag      { color: #d97706; background: rgba(245,158,11,.10); }
.cl-card .city-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: #fff; transition: transform .3s;
}
.cl-card.g-municipality .city-arrow { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.cl-card.g-capital .city-arrow      { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.cl-card.g-keycity .city-arrow      { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.cl-card:hover .city-arrow { transform: translateX(3px); }

/* ---------- 底部 CTA（紧凑横条样式） ---------- */
.cl-cta {
  position: relative; overflow: hidden; text-align: center;
  padding: 48px 0 40px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
  color: #fff;
}
.cl-cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(800px 500px at 20% 0%, rgba(96,165,250,.3), transparent 60%),
    radial-gradient(700px 450px at 80% 100%, rgba(59,130,246,.4), transparent 60%);
  pointer-events: none;
}
.cl-cta .container { position: relative; z-index: 2; }
.cl-cta h2 {
  font-size: 36px; font-weight: 900; margin-bottom: 12px;
  color: #fff; letter-spacing: -0.5px;
}
.cl-cta h2 span {
  background: linear-gradient(90deg, #93c5fd, #bfdbfe);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cl-cta p {
  font-size: 16px; color: rgba(255,255,255,.85);
  margin-bottom: 24px; font-weight: 400;
}
.cl-cta .btn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 12px;
  background: #fff;
  color: #1e40af; font-size: 16px; font-weight: 700;
  text-decoration: none; transition: all .3s; letter-spacing: .3px;
  box-shadow: 0 8px 24px rgba(30,58,138,.3), 0 2px 8px rgba(0,0,0,.08);
}
.cl-cta .btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(30,58,138,.4), 0 4px 12px rgba(0,0,0,.12);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .cl-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .cl-hero h1 { font-size: 30px; }
  .cl-stats { grid-template-columns: repeat(2, 1fr); }
  .cl-grid { grid-template-columns: repeat(2, 1fr); }
  .cl-group-head .cl-title { font-size: 28px; }
  #clMap { height: 480px; }
  .cl-cta h2 { font-size: 30px; }
  .cl-cta p { font-size: 15px; }
  .cl-cta .btn-cta { padding: 14px 32px; font-size: 16px; }
}
@media (max-width: 600px) {
  .cl-hero { padding: 56px 0 48px; }
  .cl-hero h1 { font-size: 24px; }
  .cl-hero .cl-lead { font-size: 15px; }
  .cl-group-section { padding: 56px 0; }
  .cl-group-head .cl-title { font-size: 22px; }
  .cl-group-head .cl-desc { font-size: 14px; }
  .cl-grid { grid-template-columns: 1fr; }
  #clMap { height: 340px; }
  .cl-map-legend { left: 12px; bottom: 12px; padding: 10px 14px; }
}