/* ==========================================================================
   Wodzilla.pl — sekcja "prawne i ofertowe": polityka-prywatnosci, regulamin,
   rodo, oferta-a, oferta-b. Wartosci przeniesione z produkcyjnego arkusza
   zrodla/css/a2ecf5e77c6e948e4a9efad2c7d5bebe.css (klasy .legal-page,
   .navigation-hero, .c-breadcrumb, .b-best-solutions, .image-text, ktore nie
   byly jeszcze uzyte na stronie glownej, wiec nie ma ich w public/styles.css).
   Ladowany TYLKO na stronach z tego folderu (layout.njk -> extraCss).
   ========================================================================== */

/* -------------------------------------------------- siatka: brakujace klasy --- */
/* .row / .container / col-lg-2..7 juz sa w styles.css (strona glowna).
   Strony prawne/ofertowe uzywaja dodatkowo col-lg-10 i justify-content-center,
   ktorych tam nie ma - dogrywamy je tutaj (nie dotyka globalnego pliku). */
.justify-content-center { justify-content: center; }
@media (min-width: 992px) {
  .row > .col-lg-10 { width: 83.3333333%; }
}

/* -------------------------------------------------------- strony prawne --- */
.legal-page { margin-top: 80px; margin-bottom: 80px; }
.legal-page .wp-block-heading { font-size: 20px; font-weight: 700; line-height: 25px; margin-top: 40px; margin-bottom: 0; }
.legal-page h1 { margin: 0; }
.legal-page p { font-size: 16px; font-weight: 400; line-height: 28px; margin-top: 4px; }
.legal-page a { color: #204884; font-weight: 500; }
.legal-page ol, .legal-page ul { margin-left: 0; margin-top: 24px; }

/* ------------------------------------------- navigation-hero (oferta-a/b) --- */
.navigation-hero {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; height: 100%;
}
.navigation-hero__wrapper {
  background: radial-gradient(56.12% 226.85% at 81.58% 103.92%, #054FC7 0%, #003FA5 100%);
  height: 369px; position: relative;
}
.navigation-hero__wrapper .container { position: relative; height: 100%; z-index: 5; }
/* Kontrast bialego tekstu (breadcrumb + h1) na zdjeciu tla (oferta-a/b): zmierzone
   punkty na jasniejszych fragmentach zdjecia dawaly 2.71:1-2.96:1 przy wymaganych
   min. 3:1 (h1, duzy tekst) i 4.5:1 (breadcrumb, maly tekst) - przyciemnienie .37
   nie wystarczalo. Podniesione do .58 (ten sam mechanizm, tylko mocniejszy) -
   zmierzone po zmianie: najciemniejszy przypadek >=4.5:1 (patrz audyt kontrastu). */
.navigation-hero__wrapper.is-bg-img::after {
  content: ""; position: absolute; inset: 0; background-color: rgb(0 0 0 / .58); z-index: 2;
}
.navigation-hero__bg-image {
  position: absolute; inset: 0; width: 100%; height: 100% !important;
  object-fit: cover; object-position: center; z-index: 1;
}
.navigation-hero__title {
  color: #fff; font-size: 46px; font-weight: 700; line-height: normal;
  white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis;
  padding: 0 16px; margin: 0; width: 100%; text-align: center; margin-bottom: 30px;
}
.navigation-hero__icon-bg { position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 0; line-height: 1; }
.navigation-hero__icon-bg svg { width: 135px; height: auto; }
.navigation-hero__cutout-bg { position: absolute; bottom: 0; right: 100px; z-index: 3; font-size: 0; line-height: 1; }
.navigation-hero__cutout-bg svg { width: 50px; height: auto; }
@media (max-width: 767.98px) {
  /* Ponizej 992px naglowek fabryki (.c-header__middle--mobile + .c-header-top)
     jest position:fixed i zajmuje ~162px (patrz .c-mobile-menu__nav padding-top:
     161.33px w styles.css) - bez tego odstepu caly navigation-hero chowa sie pod
     nim. Produkcyjne 141px dzialalo na starym (nie-fixed) headerze WP. */
  .navigation-hero__wrapper { height: 250px; padding-top: 162px; box-sizing: border-box; }
  .navigation-hero__cutout-bg { right: 15px; bottom: 0; }
  .navigation-hero__icon-bg { bottom: 0; }
}
@media (max-width: 992px) {
  .navigation-hero__title { font-size: 30px; margin-bottom: 10px; }
}

/* --------------------------------------------------------- c-breadcrumb --- */
.c-breadcrumb {
  overflow-x: hidden; white-space: nowrap; font-size: 13px; font-weight: 400;
  line-height: normal; text-decoration: none; color: var(--navy); text-overflow: ellipsis;
}
.c-breadcrumb > a { transition: all .2s ease-out; color: #505050; text-decoration: none; }
.c-breadcrumb > a:hover { color: var(--navy); }
.c-breadcrumb__separate { display: inline-block; vertical-align: middle; padding: 0 4px; margin-bottom: 4px; }
.c-breadcrumb__big-wrap.white-all .c-breadcrumb { color: #fff; }
.c-breadcrumb__big-wrap.white-all .c-breadcrumb > a { color: #fff; }
.c-breadcrumb__big-wrap.white-all .c-breadcrumb > a:hover { color: var(--blue); }
.c-breadcrumb__big-wrap.white-all .c-breadcrumb__separate { color: #fff; }

/* --------------------------------------------------------- b-best-solutions --- */
.b-best-solutions { overflow: hidden; }
.b-best-solutions__title { margin-bottom: 50px; font-weight: 700; font-size: 46px; line-height: 1; text-align: center; color: var(--navy); }
.b-best-solutions__icons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 27px; }
.b-best-solutions .swiper-slide { width: auto; flex-shrink: 0; }
.b-best-solutions__link {
  padding: 20px 50px; display: flex; flex-direction: row; align-items: center;
  border: 1px solid var(--line); border-radius: 60px; cursor: pointer; gap: 10px;
  transition: all .2s ease-out; text-decoration: none;
}
.b-best-solutions__link:hover { background-color: var(--line); }
.b-best-solutions__link-icon { flex-shrink: 0; }
.b-best-solutions__link-text { font-size: 16px; line-height: 24px; color: var(--navy); }
@media (max-width: 767.98px) {
  .b-best-solutions__title { margin-bottom: 15px; font-size: 26px; }
}

/* --------------------------------------------------------------- image-text --- */
.image-text { position: relative; overflow: hidden; background-color: var(--blue-dark); }
.image-text--bg-icon { font-size: 0; position: absolute; top: 0; left: 0; display: none; }
.image-text__row { position: relative; display: flex; flex-wrap: wrap; }
.image-text__text-container { padding-top: 103px; padding-bottom: 83px; padding-right: 50px; display: flex; flex-direction: column; 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; }
.image-text__title { margin: 0; font-size: 30px; font-weight: 700; line-height: 43px; color: #fff; }
.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__row { gap: 20px; flex-direction: column-reverse; }
  .image-text__text-container { padding: 14px 0 15px; }
  .image-text__image-container { padding: 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;
  }
}

/* ---------------------------------------- tytul wewnatrz formularza kontaktowego --- */
.contact__form-title { font-size: 20px; font-weight: 700; line-height: normal; }
.contact__form-title--bigger { color: var(--navy); font-size: 26px; line-height: 32px; }
.contact__form-title--bigger p { margin-top: 0; }
@media (max-width: 991.98px) {
  .contact__form-title--bigger { font-size: 22px; line-height: 28px; }
}

/* ------------------------------------------------- wariant "short-inf" --- */
.short-inf--blue { color: var(--ink); }

/* ------------------------------------- baner CTA "Zamow bez zobowiazan" --- */
/* Zdjecie lifestylowe po prawej (src/sekcje/b-cta-2.njk) bylo w markupie
   pustym divem bez <img> - dogrywamy je i style 1:1 z produkcji (te same
   liczby co .image-text__image-container powyzej, ale bez radius z lewej
   strony bo tu obrazek jest po prawej). */
.b-cta-2__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 10px; }
@media (max-width: 991.98px) { .b-cta-2__image { min-height: 235px; object-position: top; } }
.b-cta-2__object--2 { bottom: -10px; right: 0; z-index: 2; }