/*
 * The city list (cities/index). The feed's page and title (feed.css), with a
 * card per city.
 */

.ct-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.ct-city {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 12px;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  text-decoration: none;
}

.ct-city:hover { border-color: var(--cm-ink); }

.ct-city--on { border: 1.5px solid var(--cm-ink); background: var(--cm-card); }

.ct-city--soon { border-style: dashed; border-color: var(--cm-dashed); background: transparent; }

.ct-city__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--cm-ink);
}

.ct-city__note {
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-link);
}

.ct-city--soon .ct-city__note { color: var(--cm-ink-muted); }