/* ============================================================
   PRC CITIES — first-class cards (mobile-first)
   Used by: city_public_records.htm + 50 *citiespublicrecord.htm
   ============================================================ */

/* ---------- HUB (city_public_records.htm) — state grid ---------- */
.cities-hub-wrap{max-width:1280px;margin:0 auto;padding:18px 16px 40px}
.cities-hub-intro{text-align:center;color:#475569;font-size:15px;line-height:1.55;margin:0 auto 22px;max-width:760px}
.cities-hub-intro strong{color:#0a1628}

.states-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:32px}
@media(min-width:540px){.states-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.states-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.states-grid{grid-template-columns:repeat(4,1fr)}}

.state-card{
  background:#fff;border:1px solid #e2e8f0;border-radius:14px;
  padding:14px 16px;text-decoration:none;color:#0a1628;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
  transition:transform .18s,box-shadow .18s,border-color .18s;
  position:relative;overflow:hidden;
}
.state-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,118,182,.14);
  border-color:#00b4d8;
}
.state-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#00b4d8,#0077b6);
  border-radius:14px 0 0 14px;
}
.state-card .sc-emoji{font-size:24px;line-height:1;flex-shrink:0;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e0f2fe,#dbeafe);border-radius:10px}
.state-card .sc-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.state-card .sc-name{font-size:15px;font-weight:700;color:#0a1628;line-height:1.2}
.state-card .sc-sub{font-size:11.5px;color:#64748b;font-weight:500;letter-spacing:.2px}
.state-card .sc-arrow{color:#94a3b8;font-size:14px;transition:color .18s,transform .18s;flex-shrink:0}
.state-card:hover .sc-arrow{color:#00b4d8;transform:translateX(3px)}

.cities-section-head{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:700;color:#0a1628;
  margin:24px 0 14px;padding-bottom:10px;
  border-bottom:2px solid #e2e8f0;
}
.cities-section-head i{color:#00b4d8;font-size:20px}

/* ---------- STATE-CITIES PAGES ---------- */
.cities-hero{
  background:linear-gradient(135deg,#0a1628 0%,#0d1f3c 50%,#0a1628 100%);
  color:#fff;padding:18px 16px 26px;
  border-bottom:3px solid #00b4d8;
  position:relative;overflow:hidden;
}
.cities-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 50%, rgba(0,180,216,.10) 0%, transparent 50%),
             radial-gradient(circle at 80% 50%, rgba(0,150,200,.08) 0%, transparent 50%);
  pointer-events:none;
}
.cities-hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:2}
.cities-breadcrumb{
  font-size:12px;color:rgba(255,255,255,.65);margin-bottom:10px;
  display:flex;flex-wrap:wrap;gap:0;align-items:center;
}
.cities-breadcrumb a{color:#7dd3fc;text-decoration:none;font-weight:600}
.cities-breadcrumb a:hover{color:#bae6fd}
.cities-breadcrumb .bc-sep{margin:0 8px;color:rgba(255,255,255,.35)}
.cities-breadcrumb .bc-cur{color:#fff;font-weight:600}
.cities-hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,180,216,.14);border:1px solid rgba(0,180,216,.35);
  color:#7dd3fc;font-size:11px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;padding:5px 12px;border-radius:999px;
  margin-bottom:10px;
}
.cities-hero h1{
  font-size:clamp(22px,5.5vw,34px);
  font-weight:800;line-height:1.15;margin:0 0 10px;
  color:#fff;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.cities-hero h1 i{color:#00b4d8;font-size:.85em}
.cities-hero-sub{
  font-size:14px;line-height:1.55;color:rgba(255,255,255,.78);
  margin:0;max-width:780px;
}
@media(min-width:768px){
  .cities-hero{padding:28px 24px 36px}
  .cities-hero h1{font-size:34px}
  .cities-hero-sub{font-size:15px}
}

.cities-main{max-width:1280px;margin:0 auto;padding:18px 16px 40px}
.cities-stats-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.cst-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.2px;
  border:1px solid transparent;
}
.cst-chip i{font-size:12px}
.cst-teal{background:#ecfeff;color:#0e7490;border-color:#a5f3fc}
.cst-blue{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.cst-green{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.cst-amber{background:#fffbeb;color:#b45309;border-color:#fde68a}

.cities-intro{
  background:#f8fafc;border-left:4px solid #00b4d8;
  padding:14px 16px;border-radius:8px;margin:0 0 20px;
  font-size:14px;line-height:1.65;color:#334155;
}

.cities-az-nav{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  background:#fff;border:1px solid #e2e8f0;border-radius:12px;
  padding:10px 12px;margin-bottom:18px;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
  position:sticky;top:0;z-index:50;
}
.cities-az-label{
  font-size:12px;font-weight:700;color:#64748b;
  text-transform:uppercase;letter-spacing:.4px;margin-right:4px;
}
.cities-az-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 8px;
  background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#0a1628;
  font-size:13px;font-weight:700;text-decoration:none;
  border-radius:7px;transition:all .16s;
}
.cities-az-link:hover{
  background:linear-gradient(135deg,#00b4d8,#0077b6);color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,180,216,.35);
}

.cities-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.cities-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:880px){.cities-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1180px){.cities-grid{grid-template-columns:repeat(4,1fr)}}

.cities-letter-card{
  background:#fff;border:1px solid #e2e8f0;border-radius:14px;
  padding:0;overflow:hidden;
  box-shadow:0 1px 3px rgba(15,23,42,.05);
  scroll-margin-top:80px;
  transition:box-shadow .18s, transform .18s;
}
.cities-letter-card:hover{box-shadow:0 6px 20px rgba(15,23,42,.08)}

.cities-letter-hdr{
  background:linear-gradient(135deg,#0a1628 0%,#0d1f3c 100%);
  color:#fff;padding:10px 14px;
  font-size:18px;font-weight:800;letter-spacing:.5px;
  display:flex;align-items:center;gap:8px;
  border-bottom:3px solid #00b4d8;
}
.cities-letter-hdr::before{
  content:"";width:24px;height:24px;border-radius:6px;
  background:linear-gradient(135deg,#00b4d8,#0077b6);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;
}

/* color rotation per card */
.cities-letter-card:nth-child(6n+1) .cities-letter-hdr{border-bottom-color:#00b4d8}
.cities-letter-card:nth-child(6n+1) .cities-letter-hdr::before{background:linear-gradient(135deg,#00b4d8,#0077b6)}
.cities-letter-card:nth-child(6n+2) .cities-letter-hdr{border-bottom-color:#10b981}
.cities-letter-card:nth-child(6n+2) .cities-letter-hdr::before{background:linear-gradient(135deg,#10b981,#047857)}
.cities-letter-card:nth-child(6n+3) .cities-letter-hdr{border-bottom-color:#f59e0b}
.cities-letter-card:nth-child(6n+3) .cities-letter-hdr::before{background:linear-gradient(135deg,#f59e0b,#d97706)}
.cities-letter-card:nth-child(6n+4) .cities-letter-hdr{border-bottom-color:#8b5cf6}
.cities-letter-card:nth-child(6n+4) .cities-letter-hdr::before{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.cities-letter-card:nth-child(6n+5) .cities-letter-hdr{border-bottom-color:#ec4899}
.cities-letter-card:nth-child(6n+5) .cities-letter-hdr::before{background:linear-gradient(135deg,#ec4899,#be185d)}
.cities-letter-card:nth-child(6n) .cities-letter-hdr{border-bottom-color:#06b6d4}
.cities-letter-card:nth-child(6n) .cities-letter-hdr::before{background:linear-gradient(135deg,#06b6d4,#0891b2)}

.cities-letter-list{list-style:none;margin:0;padding:8px 6px;max-height:none}
.cities-letter-list li{margin:0;padding:0}
.cities-letter-list a{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:7px;
  color:#334155;text-decoration:none;
  font-size:13.5px;font-weight:500;
  transition:background .14s, color .14s, transform .14s;
  line-height:1.3;
}
.cities-letter-list a:hover{
  background:linear-gradient(90deg,#ecfeff 0%,#f0f9ff 100%);
  color:#0077b6;transform:translateX(2px);
}
.cities-letter-list a i{color:#00b4d8;font-size:11px;flex-shrink:0;width:14px;text-align:center}
.cities-letter-list a:hover i{color:#0077b6}

.cities-empty{
  text-align:center;padding:48px 24px;
  background:#f8fafc;border:2px dashed #cbd5e1;border-radius:14px;
  color:#64748b;
}
.cities-empty i{font-size:42px;color:#94a3b8;margin-bottom:12px;display:block}
.cities-empty p{font-size:15px;margin:0}

@media(max-width:480px){
  .cities-az-nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .cities-az-link{flex-shrink:0}
}

/* prc-cities-hub-center-v1 - centers hero text + content */
.cities-hero{text-align:center}
.cities-hero-inner{max-width:1100px;margin:0 auto;padding:0 20px}
.cities-hero-badge{margin-left:auto;margin-right:auto}
.cities-hero h1{margin-left:auto;margin-right:auto;max-width:900px}
.cities-hero-sub{margin-left:auto;margin-right:auto;max-width:780px}
.cities-stats-row{justify-content:center}