/* ================================================================
   全国电话区号查询网 · 内容页专用样式
   QuHao Page — CSS
   ================================================================ */

/* ========== City Hero (区号大展示) ========== */
.city-hero{
  position:relative;
  margin-bottom:20px;padding:40px 32px 36px;
  background:linear-gradient(135deg, var(--bg-card-solid) 0%, var(--theme-glow) 60%, var(--bg-card-solid) 100%);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  text-align:center;
  overflow:hidden;
}
.city-hero::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle at 50% 50%, var(--gold-light) 0%, transparent 55%);
  opacity:0.18;pointer-events:none;
}
.ch-city{
  position:relative;z-index:1;
  font-size:28px;font-weight:900;
  font-family:var(--font-hero);
  color:var(--text-primary);letter-spacing:6px;margin-bottom:10px;
}
.ch-code{
  position:relative;z-index:1;
  font-size:110px;font-weight:900;
  font-family:var(--font-hero);line-height:1;
  letter-spacing:12px;margin-bottom:10px;
  background:linear-gradient(90deg,
    #f59e0b 0%, #ef4444 18%, #8b5cf6 36%,
    #3b82f6 54%, #10b981 72%, #f59e0b 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:codeShine 4s linear infinite;
  text-shadow:none;filter:drop-shadow(0 3px 12px rgba(0,0,0,0.1));
}
@keyframes codeShine{
  0%{background-position:0% center}
  100%{background-position:200% center}
}
.ch-sub{
  position:relative;z-index:1;
  font-size:14px;font-weight:var(--fw-medium);
  color:var(--gold-dark);letter-spacing:8px;
}
.ch-divider{
  position:relative;z-index:1;
  width:60px;height:3px;border-radius:2px;
  background:var(--gold-gradient);
  margin:14px auto 0;
}

/* ========== Info Cards Row (for city page) ========== */
.info-cards-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-bottom:28px;
}
.info-card{
  position:relative;overflow:hidden;
  padding:20px 16px;
  background:var(--bg-card-solid);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  text-align:center;
  transition:all 0.25s ease;
}
.info-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--gold-light);
}
.info-card.primary{
  /* 默认和普通卡片一致，hover 才凸显 */
  border:1px solid var(--border);
}
.info-card.primary:hover{
  border-color:var(--gold-light);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.info-card .ic-icon{
  font-size:28px;margin-bottom:8px;display:block;
}
.info-card .ic-value{
  font-size:40px;font-weight:900;
  font-family:var(--font-hero);color:var(--text-primary);
  margin-bottom:4px;letter-spacing:2px;line-height:1.1;
}
.info-card.primary .ic-value{
  font-size:48px;
}
.info-card.primary:hover .ic-value{
  color:var(--gold-dark);
}
.info-card .ic-label{
  font-size:14px;color:var(--text-muted);font-weight:700;letter-spacing:1px;
}

/* Hero + info cards responsive */
@media (max-width:800px){
  .ch-city{font-size:20px;letter-spacing:3px}
  .ch-code{font-size:72px;letter-spacing:6px}
  .info-cards-row{grid-template-columns:repeat(2,1fr)}
  .info-card .ic-value{font-size:32px}
  .info-card.primary .ic-value{font-size:40px}
}
@media (max-width:480px){
  .city-hero{padding:28px 20px 24px}
  .ch-city{font-size:16px;letter-spacing:2px}
  .ch-code{font-size:52px;letter-spacing:4px}
  .ch-sub{letter-spacing:4px}
  .info-cards-row{grid-template-columns:1fr 1fr;gap:10px}
  .info-card{padding:14px 10px}
  .info-card .ic-value{font-size:28px}
  .info-card.primary .ic-value{font-size:34px}
  .info-card .ic-label{font-size:12px}
}

/* ========== District Table ========== */
.table-wrap{overflow-x:auto;margin:20px 0 36px}
.data-table{
  width:100%;border-collapse:collapse;
  background:var(--bg-card-solid);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.data-table thead{background:var(--gold-gradient)}
.data-table thead th{
  color:#fff;padding:14px 18px;text-align:left;
  font-size:14px;font-weight:var(--fw-semibold);
  white-space:nowrap;
}
.data-table thead th:first-child{border-radius:var(--radius-md) 0 0 0}
.data-table thead th:last-child{border-radius:0 var(--radius-md) 0 0}
.data-table tbody td{
  padding:12px 18px;font-size:14px;
  border-bottom:1px solid var(--border);
  color:var(--text-secondary);
}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--theme-glow)}
.data-table .code-cell{
  font-family:'Courier New',monospace;font-weight:var(--fw-bold);
  color:var(--gold-dark);font-size:18px;letter-spacing:2px;
}

/* ========== City Cards Grid (Province page) ========== */
.city-card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;margin:20px 0 32px;
}
.city-card{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;background:var(--bg-card-solid);
  border-radius:var(--radius-sm);border:1px solid var(--border);
  transition:all 0.22s;text-decoration:none;color:var(--text-primary);
  box-shadow:var(--shadow-sm);
}
.city-card:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.city-card .cc-icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-gradient);color:#fff;
  font-size:18px;font-weight:var(--fw-black);
  flex-shrink:0;
}
.city-card .cc-info{flex:1;min-width:0}
.city-card .cc-name{font-size:15px;font-weight:var(--fw-semibold)}
.city-card .cc-meta{font-size:12px;color:var(--text-muted);margin-top:2px}