/* City publication states (new destination, ongoing or recent invasion).
   Shared by the home page, /cities and /map/city/:id. Styled with the page
   tokens (--accent, --green, --glass, --rim, --text…) and fallbacks for the
   home page, whose variables use different names. Assets must stay CSP-safe:
   no data: URIs, no external hosts. */

/* ---- Badge ------------------------------------------------------------ */
.invasion-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.invasion-badge {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content; padding: 5px 11px 5px 9px;
  border: 1px solid rgba(34, 197, 94, .38); border-radius: 999px;
  background: rgba(34, 197, 94, .12); color: var(--green, #22C55E);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.3;
  text-transform: uppercase; white-space: nowrap;
}
.invasion-badge::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px;
  background: currentColor;
}
.invasion-badge.ongoing {
  border-color: rgba(255, 219, 0, .42); background: rgba(255, 219, 0, .12);
  color: var(--accent, #FFDB00);
}
.invasion-badge.ongoing::before {
  box-shadow: 0 0 10px rgba(255, 219, 0, .65);
  animation: invasion-pulse 1.6s ease-in-out infinite;
}
.invasion-badge.recent {
  border-color: rgba(255, 219, 0, .28); background: rgba(255, 219, 0, .06);
  color: var(--accent, #FFDB00);
}
@keyframes invasion-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .invasion-badge.ongoing::before { animation: none; } }

/* ---- Featured cities (home + /cities) --------------------------------- */
.city-highlights { margin: 40px 0 44px; }
.city-highlights h2 {
  margin: 0 0 14px; color: var(--text, #fff);
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
.city-highlights-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.city-highlight {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 16px 16px 18px;
  border: 1px solid var(--rim, var(--glass-border, rgba(255, 255, 255, .18)));
  border-radius: 24px;
  background: var(--glass, var(--glass-bg, rgba(255, 255, 255, .075)));
  color: var(--text, #fff); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.city-highlight:hover { border-color: rgba(255, 219, 0, .7); transform: translateY(-2px); }
.city-highlight:focus-visible { outline: 3px solid rgba(255, 219, 0, .45); outline-offset: 3px; }
.city-highlight-art {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  flex: 1; align-content: center;
}
.city-highlight-art img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 22%; background: #151719;
  outline: 1px solid rgba(255, 255, 255, .07); outline-offset: -1px;
}
.city-highlight-copy { margin-top: auto; min-width: 0; }
.city-highlight h3 {
  margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  overflow-wrap: anywhere;
}
.city-highlight p {
  margin: 3px 0 0; color: var(--secondary, var(--text-secondary, rgba(255, 255, 255, .68)));
  font-size: 13px; font-weight: 600;
}
@media (max-width: 720px) {
  /* One horizontal, snapping row on phones so the full city list stays close. */
  .city-highlights { --page-pad: 22px; margin: 32px 0 36px; }
  .city-highlights-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 300px);
    margin: 0 calc(-1 * var(--page-pad)); padding: 2px var(--page-pad) 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-pad);
    scrollbar-width: none;
  }
  .city-highlights-grid::-webkit-scrollbar { display: none; }
  .city-highlight { scroll-snap-align: start; }
  .city-highlight:hover { transform: none; }
}

/* ---- City cards on /cities -------------------------------------------- */
.city-name + .invasion-badges { margin: 8px 0 3px; }
.grid .invasion-badge { padding: 4px 9px 4px 8px; font-size: 10px; }
.grid a:has(.invasion-badge) {
  border-color: rgba(255, 219, 0, .32);
  background: linear-gradient(180deg, rgba(255, 219, 0, .07), transparent 62%), var(--glass, rgba(255, 255, 255, .075));
}
.grid a:has(.invasion-badge.new) {
  border-color: rgba(34, 197, 94, .32);
  background: linear-gradient(180deg, rgba(34, 197, 94, .07), transparent 62%), var(--glass, rgba(255, 255, 255, .075));
}
.grid a:has(.invasion-badge):hover { border-color: rgba(255, 219, 0, .7); }

/* ---- City page hero + preview strip ----------------------------------- */
.city-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.city-status .eyebrow { margin: 0; }
.invasion-note {
  margin: -20px 0 28px; max-width: 560px;
  color: var(--tertiary, rgba(255, 255, 255, .55)); font-size: 12.5px; line-height: 1.5;
}
.city-preview-strip { margin: 40px 0; }
.city-preview-strip h2 {
  margin: 0 0 14px; color: var(--text, #fff);
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
.city-preview-strip .guide-mosaics { gap: 10px; }
.city-preview-strip .guide-mosaics a { gap: 6px; }
.city-preview-strip .guide-mosaics img {
  border-radius: 22%; background: #151719;
  outline: 1px solid rgba(255, 255, 255, .07); outline-offset: -1px;
  transition: transform .15s ease;
}
.city-preview-strip .guide-mosaics a:hover img { transform: translateY(-2px); }
.city-preview-strip .guide-mosaics a span {
  color: var(--tertiary, rgba(255, 255, 255, .55));
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 700;
}