/* The /service-areas hub and the city pages (#492). Loaded only on those pages;
   the town-list link style shared with every "Where we work" section lives in
   sections.css. */

/* City pages run longer prose than a service band, so the column is wider. */
.band--city .band__body { max-width: 52ch; }
.band--city .band__body p a:not(.btn) { color: var(--coral-ink); font-weight: 600; }

/* Each service band's h2 is the link to that service page (#494). It keeps the
   heading's ink color, so it reads as a heading first, and shows an arrow and an
   underline so it is plainly clickable. */
.city__svc-head a { color: inherit; text-decoration: none; }
.city__svc-head a::after { content: " \2192"; color: var(--coral); }
.city__svc-head a:hover,
.city__svc-head a:focus-visible { text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 0.12em; }

.areas__list--short { columns: 1; max-width: 24rem; margin-top: var(--s-3); }
.city__others-head { margin-top: var(--s-5); font-size: var(--t-xl); }

/* ---------- hub: one card per city ---------- */
.cities { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.cities li { margin: 0; }
.city-card {
  display: grid;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out),
              border-color 200ms var(--ease-out);
}
.city-card:hover { transform: translateY(-2px); box-shadow: var(--lift-2); border-color: var(--gold); }
.city-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ink); }
.city-card__body { display: grid; gap: 0.35rem; padding: var(--s-3); align-content: start; }
.city-card__body b {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 72, "opsz" 30;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.city-card__body span { color: var(--on-paper-soft); font-size: var(--t-sm); }

@media (min-width: 54rem) {
  .cities { grid-template-columns: repeat(3, 1fr); }
}