/* ------------------------------------------------------------------------
   mlhs-city.css — layout helpers for the service-area (city) landing pages.
   Extends mlhs-brand.css. Kept intentionally small: reuse brand classes
   wherever possible; only genuinely new patterns live here.
   ------------------------------------------------------------------------ */

/* Cream two-column hero (differs from the dark photo home-hero). */
.city-hero {
  background: var(--mlhs-cream);
  color: var(--mlhs-ink);
  min-height: 64vh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--mlhs-border);
}
.city-hero-inner {
  max-width: var(--container, 1200px);
  width: 100%;
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.city-hero-copy .mlhs-h1 { color: var(--mlhs-green); margin: 10px 0 18px; }
.city-hero-copy .mlhs-hero-sub { color: var(--mlhs-muted); max-width: 520px; }
.city-hero-media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 24px 60px -18px rgba(15, 37, 25, 0.42);
}
@media (max-width: 860px) {
  .city-hero-inner { grid-template-columns: 1fr; gap: 34px; padding: 52px 22px; }
  .city-hero-media { order: -1; }
  .city-hero-media img { max-height: 300px; }
}

/* Neighborhood chip band spacing */
.city-nbhd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Small info card row (service radius / response time) */
.city-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.city-info-card {
  background: var(--mlhs-white);
  border: 1px solid var(--mlhs-border);
  border-radius: 16px;
  padding: 22px 20px;
}
.city-info-card strong { display: block; color: var(--mlhs-green); font-size: 17px; margin-bottom: 6px; }
.city-info-card span { color: var(--mlhs-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 720px) { .city-info-grid { grid-template-columns: 1fr; } }

/* Recent-project tiles reuse .mlhs-tile; grid of 3 */
.city-proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .city-proj-grid { grid-template-columns: 1fr; } }