/* Strony miast (pageCity.php) — tylko to, czego nie ma w stylach kategorii,
   strony głównej i usług: siatka 4 kart bez panelu filtrów i linki do
   pozostałych miast. */
.city-page .city-products { margin: 56px 0 72px; }
.city-page .city-products h2 { margin: 0 0 24px; }
.city-page .city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.city-page .city-more { margin-top: 24px; text-align: center; }
.city-page .cat-seo-intro-text .cat-seo-benefits-list { margin: 16px 0; }

/* Mapki miast mają proporcje 1024×935, a nie 4:3 jak zdjęcia kategorii —
   przy 4:3 + cover obcinało górę i dół mapy. */
.city-page .cat-seo-intro-img {
  aspect-ratio: 1024 / 935;
  background-size: contain;
  background-repeat: no-repeat;
  /* Margines wokół mapy wewnątrz ramki — obraz mieści się w content-box. */
  padding: 5%;
  background-origin: content-box;
  background-clip: border-box;
  background-color: var(--white);
}

.city-others { padding: 64px 0; background: var(--white); }
.city-others h2 { margin: 0 0 24px; }
.city-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.city-chip {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--gray);
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.city-chip:hover,
.city-chip:focus-visible { border-color: var(--sea-blue); color: var(--sea-blue); }

/* Strona zbiorcza miast (pageCities.php) — kafle jak w katalogu, ale mapka
   cała (contain na białym tle), 4 kolumny. */
.cities-hub { padding: 0 0 80px; }
.cities-hub .catalog-hub-grid { grid-template-columns: repeat(4, 1fr); }
.cities-hub .catalog-tile-img {
  aspect-ratio: 1024 / 935;
  background-color: var(--white);
  background-size: contain;
  background-repeat: no-repeat;
  padding: 6%;
  background-origin: content-box;
}

@media (max-width: 1100px) {
  .cities-hub .catalog-hub-grid { grid-template-columns: repeat(3, 1fr); }
  .city-page .city-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cities-hub .catalog-hub-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 600px) {
  .city-page .city-grid { grid-template-columns: 1fr; }
  .city-page .city-products { margin: 40px 0 48px; }
  .city-others { padding: 48px 0; }
}