/* ==========================================================
   TygerLabs.ai · Locations (hub and city pages)
   Page-only composition, prefixed location-. Components come
   from ui-kit.css; the proof row and closing band from
   service.css and case.css.
   ========================================================== */

.location-distance {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
}
.location-distance .ph { color: var(--tiger); }

.location-lede { margin-top: var(--s-4); color: var(--ink-2); }

/* A picture of the place beside its industries */
.location-figure { margin: 0; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--r-xl); background: var(--surface-1); }

.location-industries { display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.location-industries li {
  display: grid;
  gap: 2px;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.location-industries strong { font-family: var(--ff-display); color: var(--ink); font-size: var(--text-lg); }
.location-industries span { color: var(--ink-2); }

/* Neighborhoods as chips */
.location-areas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.location-areas li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: 99px;
  background: var(--surface-1);
  color: var(--ink);
  font-weight: var(--fw-semi);
}
.location-areas .ph { color: var(--tiger); }

/* City cards: the hub's grid and the "other cities" row */
.location-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin-bottom: var(--section-y); }
.location-cards.is-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.location-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-bottom: var(--s-5);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  color: var(--ink-2);
  text-decoration: none;
  transition: transform var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.location-card:hover { transform: translateY(-2px); background: var(--surface-2); color: var(--ink-2); }
.location-card-map { display: block; aspect-ratio: 16 / 9; margin-bottom: var(--s-3); overflow: hidden; background: var(--surface-1); }
.location-card > .location-card-map { padding-inline: 0; }
.location-card > span { padding-inline: var(--s-5); }
.location-card-name { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--ink); }
.location-card-meta { font-size: var(--text-sm); color: var(--tiger-2); }
.location-card-text { font-size: var(--text-sm); }
.location-card .link-arrow { margin-top: auto; padding-top: var(--s-3); }

@media (max-width: 991.98px) {
  .location-cards, .location-cards.is-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .location-figure { aspect-ratio: 16 / 9; }
}
@media (max-width: 575.98px) {
  .location-cards, .location-cards.is-hub { grid-template-columns: 1fr; }
}

/* ---------- City maps: dark OpenStreetMap images (tools/gen-location-maps.py) ---------- */
.location-figure, .location-card-map { position: relative; }
.location-map { display: block; width: 100%; height: 100%; object-fit: cover; }
.location-map-credit {
  position: absolute;
  right: var(--s-2);
  bottom: var(--s-2);
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(10, 10, 11, 0.75);
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.5;
}
.location-map-credit a { color: inherit; }