/* ============================================================
   style-cities-hub.min.css - The DJ Calendar
   Oct 17, 2026 - cities hub card-grid upgrade.
   Scoped to .cities-hub (verified: class not used on any page
   but /cities/). Load AFTER /style.css. Requires Orbitron +
   Rajdhani fonts already on site.
   ============================================================ */
/* ===== UPGRADE scoped to .cities-hub ===== */
.cities-hub .cities-grid{gap:18px}
.cities-hub .cities-card{
  position:relative;border-radius:12px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,box-shadow .35s;
}
.cities-hub .cities-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,#00d2ff,transparent);
  opacity:0;transition:opacity .35s;
}
.cities-hub .cities-card:hover{
  transform:translateY(-6px);border-color:rgba(0,210,255,.5);
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 26px rgba(0,210,255,.10),inset 0 0 0 1px rgba(0,210,255,.08);
}
.cities-hub .cities-card:hover::before{opacity:1}
.cities-hub .cities-card-image{height:190px;transition:transform .6s cubic-bezier(.2,.7,.3,1);z-index:1}
.cities-hub .cities-card:hover .cities-card-image{transform:scale(1.07)}
.cities-hub .cities-card-image::after{
  background:linear-gradient(to top,#0c0c0c 6%,rgba(6,8,10,.25) 45%,transparent 70%);
  transition:background .35s;
}
.cities-hub .cities-card:hover .cities-card-image::after{
  background:linear-gradient(to top,rgba(6,8,10,.92) 10%,rgba(0,60,90,.18) 55%,transparent 75%);
}
.cities-hub .cities-card-body{padding:16px 18px 18px}
.cities-hub .cities-card-name{
  font-size:1.02rem;letter-spacing:1.5px;transition:text-shadow .3s,color .3s;
}
.cities-hub .cities-card:hover .cities-card-name{
  color:#fff;text-shadow:0 0 16px rgba(0,210,255,.65),0 0 3px rgba(0,210,255,.8);
}
.cities-hub .cities-card-meta{margin-top:10px;gap:8px}
.cities-hub .cities-card-meta span{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid rgba(0,210,255,.22);
  background:rgba(0,210,255,.06);color:rgba(0,210,255,.85);
}
.cities-hub .cities-card-meta span+span{
  border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.65);
}
.cities-hub .cities-card{opacity:0;animation:citiesIn .5s ease-out forwards}
.cities-hub .cities-card:nth-child(1){animation-delay:.02s}
.cities-hub .cities-card:nth-child(2){animation-delay:.05s}
.cities-hub .cities-card:nth-child(3){animation-delay:.08s}
.cities-hub .cities-card:nth-child(4){animation-delay:.11s}
.cities-hub .cities-card:nth-child(5){animation-delay:.14s}
.cities-hub .cities-card:nth-child(6){animation-delay:.17s}
.cities-hub .cities-card:nth-child(7){animation-delay:.20s}
.cities-hub .cities-card:nth-child(8){animation-delay:.23s}
.cities-hub .cities-card:nth-child(9){animation-delay:.26s}
.cities-hub .cities-card:nth-child(n+10){animation-delay:.3s;animation-duration:.55s}
@keyframes citiesIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cities-hub .cities-card:hover{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){.cities-hub .cities-card{animation:none;opacity:1}}
@media (max-width:640px){.cities-hub .cities-card-image{height:150px}}