/* All cities (/cities/, written by rides/listing.py): the home page's navy
   band and search, then the cities by continent and country as navy tiles
   (their rules are in home.css, which features some of them). */
.cities-hero { padding-bottom: clamp(36px, 6vw, 64px); }
.cities-hero h1 { max-width: none; }
.near-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0 0; min-height: 0; }
.near-me { min-height: 44px; padding: 0 18px; font: 700 1rem var(--body); color: var(--text); background: transparent; border: 1.5px solid var(--muted); border-radius: 999px; cursor: pointer; }
.near-me:hover { border-color: var(--text); text-decoration: underline; }
.near-me:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.near-me[aria-pressed="true"] { background: var(--text); color: var(--background); border-color: var(--text); }
.near-note { font-weight: 600; color: var(--muted); }
.near-note:empty { display: none; }

.cities .continent > h2 { margin: 0 0 8px; }
.cities section.country { padding-top: 0; }
.cities .country h3 { font: 650 1.5rem/1.2 var(--display); font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0; margin: 24px 0 14px; }
.cities .nearest h2, .cities .staging-cities h2 { margin-bottom: 16px; }
.cities .staging-cities .caption { margin: 0 0 16px; max-width: 70ch; }
.filter-none { margin: 32px 0 0; font-weight: 600; }
/* The filter and the views hide with the attribute, whatever the display. */
.cities [hidden], .cities-hero [hidden] { display: none !important; }

.cities-credit { margin-top: clamp(32px, 5vw, 56px) !important; }
.cities .soon-cities { padding-top: clamp(40px, 6vw, 72px); }

@media (max-width: 760px) {
  .cities-hero { padding-top: clamp(32px, 9vw, 64px); width: calc(100% - 32px); }
}