/* ============================================
   POSIŁKI REGENERACYJNE - LANDINGI REGIONALNE
   Style specyficzne dla /posilki-regeneracyjne/<region> - reużywa hero,
   subnav, checklist, proces-steps, przepisy i faq z posilki-regeneracyjne.css
   ============================================ */

/* Sekcje docelowe anchorów tej strony, których nie ma w bazowym pliku
   (ten sam wzorzec: margines pod sticky nagłówkiem + subnav). */
#korzysci, #region, #miasta { scroll-margin-top: 140px; }

/* Wariant "Jak zapewniamy posiłki" na 4 kroki (bazowa strona ma 5) - te same
   klasy potomne (.proces-step), tylko inna liczba kolumn na desktopie. */
.proces-steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .proces-steps-4 { grid-template-columns: 1fr; } }

/* Lista miast - pigułki z ikoną pinezki, ostatnia (inne lokalizacje)
   wyróżniona jako informacyjna, nie konkretne miasto. */
.region-cities { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.region-city-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 10px 18px; font-size: 15px; color: var(--dark); box-shadow: var(--shadow-sm);
}
.region-city-chip svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }
.region-city-chip.is-other { color: var(--text-muted); font-style: italic; background: var(--surface); box-shadow: none; }

/* Sekcje tekst+zdjęcie (region lokalny, przepisy) - dwie kolumny, zdjęcie
   w zaokrąglonej karcie. "-reverse" odwraca kolejność na desktopie, żeby
   zdjęcia nie stały zawsze po tej samej stronie w kolejnych sekcjach. */
.region-media-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.region-media-grid-reverse .region-media { order: -1; }
.region-media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 4/3; background: var(--surface); }
.region-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .region-media-grid { grid-template-columns: 1fr; gap: 28px; }
  .region-media-grid-reverse .region-media { order: 0; }
}