/* ==========================================================================
   Wodzilla.pl, strony miast (/gdansk/, /katowice/, /krakow/, /poznan/,
   /warszawa/, /wroclaw/): style dla komponentu "image-text" (hero + bloki
   "image-text--extra-wide"), którego w public/styles.css jeszcze nie ma
   (tylko warianty "image-text-button" były tam już przeniesione dla
   sekcji FAQ strony głównej). Wartości 1:1 z produkcyjnego arkusza
   zrodla/css/a2ecf5e77c6e948e4a9efad2c7d5bebe.css.
   ========================================================================== */

.image-text { position: relative; overflow: hidden; background-color: #0056d3; }
.image-text__row { position: relative; }
.image-text__text-container {
  padding: 103px 50px 83px 0; display: flex; flex-direction: column; color: #fff;
}
.image-text__text-container h2,
.image-text__text-container h3 { color: #fff; }
.image-text__title { margin: 0; font-size: 30px; font-weight: 700; line-height: 43px; color: #fff; }
.image-text__image-container { background-color: #fff; }
.image-text__image-container img {
  border-radius: 10px 0 0 0; height: 100%; width: 100%;
  object-fit: cover; object-position: center;
}

/* dekoracyjny "blob" w tle + biały pasek na styku kolumn (tylko desktop) */
.image-text--bg-icon { font-size: 0; position: absolute; top: 0; left: 0; }
/* Bialy pasek 28px na gornej krawedzi LEWEJ kolumny zostal wylaczony 2026-09-11
   (decyzja Nikodema). Powodowal, ze niebieski blok zaczynal sie 28px nizej niz
   zdjecie obok - gorna krawedz sekcji robila widoczny uskok. Regula i tak dzialala
   tylko na desktopie (ponizej 992px byla wylaczona), wiec zdjecie na mobile nigdy
   tego uskoku nie mialo; teraz jest tak samo na kazdej szerokosci.
   Zostawiam regule zamiast ja kasowac, zeby bylo widac, ze to swiadoma zmiana,
   a nie zgubiony kawalek stylu z produkcji. */
.image-text::after { content: none; }

/* wariant --extra-wide: zdjęcie po prawej "wychodzi" poza kolumnę na 50vw */
.image-text--extra-wide .image-text__image-container img {
  position: absolute; border-radius: 10px 0 0 0; height: 100%; width: 50vw; left: 50%;
  object-fit: cover; object-position: center;
}

@media (max-width: 991.98px) {
  .image-text--bg-icon { display: none; }
  .image-text::after { display: none; }
  .image-text__row { gap: 20px; flex-direction: column-reverse; }
  .image-text__text-container { padding: 14px 0 15px; }
  .image-text__image-container { padding: 0; }
  .image-text__image-container img { border-radius: 10px 10px 0 0; }
  .image-text__title { font-size: 26px; }
  .image-text--extra-wide .image-text__image-container img {
    position: relative; width: 100%; max-width: 100%; left: auto; height: auto;
    border-radius: 10px 10px 0 0;
  }
}

/* ---------------------------------------------------------------------
   Bloki "image-text-button" na stronach miast MAJĄ (w odróżnieniu od
   sekcji FAQ strony głównej, jedyna dotąd użytkowniczka tej klasy w
   public/styles.css) kolumnę ze zdjęciem obok tekstu (col-lg-6 + col-lg-6).
   public/styles.css definiuje dla .image-text-button__col--desc sztywne
   "width: 100%" (bo na stronie głównej FAQ nie ma zdjęcia), tutaj to
   nadpisujemy tylko dla dwukolumnowego układu; .image-text-button__col--image
   i .image-text-button__image w ogóle nie miały jeszcze stylów.
   ------------------------------------------------------------------- */
.image-text-button__col--desc { width: auto; padding-left: 60px; padding-inline: 0; }
.image-text-button__image-container { position: relative; }
.image-text-button__image {
  position: relative; height: auto; width: 100%;
  object-fit: cover; object-position: center; border-radius: 10px;
}

@media (max-width: 991.98px) {
  .image-text-button__col--desc { padding-left: 15px; padding-inline: 15px; }
  .image-text-button__col--image { margin-bottom: 20px; }
}