/* ==================================================================
   FORMULARZ KONTAKTU, KTORY PROWADZI KROK PO KROKU
   Duze pole "w czym mozemy pomoc" na gorze, reszta pol czeka wygaszona i pojawia sie
   po kilku znakach. Wypelnione pole przygasa i dostaje znak potwierdzenia, komplet
   obowiazkowych uruchamia pulsowanie przycisku, a po wyslaniu zostaje podziekowanie.
   Wspolpracuje z js/emedia-kontakt.js. Cofniecie: usunac plik i jego enqueue.
   ================================================================== */

/* --- 1. Telefon i mail: ikona i tekst w jednej linii --- */

.introContentLeft .wp-block-media-text {
  align-items: center;
}

.introContentLeft .wp-block-media-text .wp-block-media-text__content p {
  margin: 0;
}

/* --- 2. Kolejnosc pol: wiadomosc pierwsza --- */

.introContentRight form.wpcf7-form {
  display: flex;
  flex-direction: column;
}

.introContentRight form.wpcf7-form > label:has(textarea[name="wiadomosc"]),
.introContentRight form.wpcf7-form > label.em-pole-glowne {
  order: 1;
}

.introContentRight form.wpcf7-form > label:has(input[name="firmadomena"]) { order: 2; }
.introContentRight form.wpcf7-form > label:has(input[name="imienazwisko"]) { order: 3; }
.introContentRight form.wpcf7-form > label:has(input[name="mail"]) { order: 4; }
.introContentRight form.wpcf7-form > label:has(input[name="tel"]) { order: 5; }
.introContentRight form.wpcf7-form > span.wpcf7-form-control-wrap { order: 6; }
.introContentRight form.wpcf7-form > .submit { order: 7; }
.introContentRight form.wpcf7-form > .wpcf7-response-output { order: 8; }

/* --- 3. Duze pole na tresc zapytania --- */

.introContentRight form.wpcf7-form textarea[name="wiadomosc"] {
  /* Na wejsciu wieksze niz pozostale pola, ale nie na cala karte: zbyt duze pole
     wyglada, jakby trzeba bylo napisac wypracowanie. */
  min-height: 232px;
  transition: min-height .65s cubic-bezier(.4, 0, .2, 1);
}

.introContentRight form.wpcf7-form.em-odsloniete textarea[name="wiadomosc"] {
  min-height: 132px;
}

/* --- 4. Pola, ktore czekaja na swoja kolej --- */

.introContentRight form.wpcf7-form .em-pole {
  position: relative;
  display: block;
}

/* Ukryte tak, zeby nie zajmowaly miejsca: pole glowne moze wtedy wypelnic cala karte,
   a po odslonieciu pola wyrastaja jedno po drugim. Samo `opacity` nie wystarczy, bo audyt
   dostepnosci widzi wtedy plywajace etykiety motywu o kontrascie 1,23:1. */
.introContentRight form.wpcf7-form .em-pole-dalsze {
  max-height: 0;
  /* takze margines, inaczej cztery ukryte pola zostawiaja 80 px pustki pod polem tresci */
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: max-height .5s ease, opacity .5s ease, transform .5s ease,
              margin-top .5s ease, visibility 0s linear .5s;
}

.introContentRight form.wpcf7-form .em-pole-dalsze.em-widoczne {
  max-height: 96px;
  margin-top: 20px;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: max-height .5s ease, opacity .5s ease, transform .5s ease,
              margin-top .5s ease, visibility 0s;
}

/* Po animacji zdejmujemy ograniczenie wysokosci, zeby komunikat walidacji mial miejsce. */
.introContentRight form.wpcf7-form .em-pole-dalsze.em-rozwiniete {
  max-height: none;
  overflow: visible;
}

/* --- 4b. Decyzja CEO 7.09.2026: zwykly formularz, wszystkie pola widoczne od razu (ludzie znaja taka forme
   i sie jej nie boja). Odslanianie po czterech znakach zostaje w skrypcie, ale te reguly je wylaczaja;
   kolejnosc pol (wiadomosc pierwsza), ptaszki, pulsujacy przycisk i podziekowanie dzialaja dalej.
   Cofniecie: usunac ten blok. --- */
.introContentRight form.wpcf7-form .em-pole-dalsze,
.introContentRight form.wpcf7-form .em-pole-dalsze.em-widoczne {
  max-height: none;
  margin-top: 20px;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
/* pole na wiadomosc o polowe nizsze (CEO 7.09): dawniej wypelnialo cala karte, gdy reszta pol byla schowana */
.introContentRight form.wpcf7-form textarea[name="wiadomosc"],
.introContentRight form.wpcf7-form.em-odsloniete textarea[name="wiadomosc"] {
  height: 116px;
  min-height: 116px;
}

/* --- 5. Znak potwierdzenia przy wypelnionym polu --- */

.introContentRight form.wpcf7-form .em-ptaszek {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%) scale(.5);
  color: #15803d;
  font-size: 34px;
  line-height: 1;
  opacity: 0;
  /* pojawia sie chwile po uzupelnieniu, zeby bylo widac, ze to potwierdzenie */
  transition: opacity .3s ease .45s, transform .4s cubic-bezier(.34, 1.4, .64, 1) .45s;
  pointer-events: none;
}

/* Przy duzym polu znak jest odpowiednio wiekszy. */
.introContentRight form.wpcf7-form .em-pole-glowne .em-ptaszek {
  font-size: 64px;
  right: 26px;
}

.introContentRight form.wpcf7-form .em-pole.em-gotowe .em-ptaszek {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* --- 6. Wypelnione pole wtapia sie w tlo karty --- */

.introContentRight form.wpcf7-form .em-pole.em-gotowe input,
.introContentRight form.wpcf7-form .em-pole.em-gotowe textarea {
  background-color: #f4f6f8;
  border-color: #dfe3e8;
  transition: background-color .45s ease, border-color .45s ease;
}

/* --- 7. Przycisk gotowy do wyslania --- */

.introContentRight form.wpcf7-form .wpcf7-submit.em-gotowy,
.introContentRight form.wpcf7-form .wp-block-button__link.em-gotowy {
  /* motyw stylizuje przycisk jako .wp-block-button__link i daje mu pomaranczowy outline */
  background-color: #15803d !important;
  border-color: #15803d !important;
  outline-color: #15803d !important;
  animation: em-puls 1.7s ease-in-out infinite;
}

@keyframes em-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, .45); }
  50% { box-shadow: 0 0 0 10px rgba(21, 128, 61, 0); }
}

/* --- 8. Podziekowanie po wyslaniu --- */

.em-podziekowanie {
  text-align: center;
  padding: 26px 6px 12px;
  animation: em-wejscie .5s ease both;
}

.em-podziekowanie__zdjecie {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
  display: block;
  border: 3px solid #f4f6f8;
}

.em-podziekowanie__naglowek {
  font-size: 24px;
  font-weight: 600;
  color: #1c2840;
  margin: 0 0 10px;
}

.em-podziekowanie__tresc {
  font-size: 15px;
  line-height: 1.55;
  color: #2a3445;
  margin: 0 0 14px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.em-podziekowanie__podpis {
  font-size: 13px;
  color: #586477;
  margin: 0;
}

@keyframes em-wejscie {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* --- 9. Kto prosi o mniej ruchu, dostaje mniej ruchu --- */

@media (prefers-reduced-motion: reduce) {
  .introContentRight form.wpcf7-form .em-pole-dalsze,
  .introContentRight form.wpcf7-form .em-ptaszek,
  .introContentRight form.wpcf7-form .em-pole.em-gotowe input,
  .introContentRight form.wpcf7-form .em-pole.em-gotowe textarea,
  .em-podziekowanie {
    transition: none;
    animation: none;
  }
  .introContentRight form.wpcf7-form .wpcf7-submit.em-gotowy {
    animation: none;
  }
}

/* Zgoda nie moze przylegac do ostatniego pola, ktore dopiero co wyroslo. */
.introContentRight form.wpcf7-form > span.wpcf7-form-control-wrap {
  margin-top: 14px;
}

/* Przyklady, ktore same sie wpisuja. Etykieta motywu (.floating-label) lezy na wierzchu
   pola i zaslania placeholder, wiec przyklad ma wlasne miejsce tuz pod nia. */
.introContentRight form.wpcf7-form .em-pole-glowne .em-przyklad {
  position: absolute;
  /* dokladnie tam, gdzie pojawi sie tekst piszacego: pole ma padding 22px z gory */
  top: 22px;
  left: 16px;
  right: 46px;
  font-size: 14px;
  line-height: 1.5;
  color: #2a3445;
  pointer-events: none;
  /* Dluzszy przyklad ma sie zawijac, a nie uciekac poza pole. */
  white-space: normal;
  overflow-wrap: break-word;
  transition: opacity .3s ease;
}

.introContentRight form.wpcf7-form .em-pole-glowne .em-przyklad::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  margin-left: 2px;
  background: #2a3445;
  vertical-align: -2px;
  animation: em-kursor 1s steps(1) infinite;
}

@keyframes em-kursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.introContentRight form.wpcf7-form .em-pole-glowne .em-przyklad.em-znika {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .introContentRight form.wpcf7-form .em-pole-glowne .em-przyklad::after {
    animation: none;
    opacity: 0;
  }
}


/* Kreska pod naglowkiem karty jest zbedna: pole ma wlasna ramke i samo dzieli tresc. */
.introContentRight h2.wp-block-heading {
  /* motyw ustawia te kreske z selektora z identyfikatorem, wiec trzeba ja wymusic */
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Zdjecie w kolku po prawej od naglowka karty. Naglowek lamie sie na dwa wiersze,
   wiec po prawej zostaje na nie miejsce. */
.introContentRight {
  position: relative;
}

.introContentRight .em-autor-foto {
  position: absolute;
  top: 44px;
  right: 40px;
  margin: 0;
  z-index: 2;
}

.introContentRight .em-autor-foto img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Naglowek nie moze wchodzic pod zdjecie. */
.introContentRight h2.wp-block-heading {
  padding-right: 124px;
}

@media screen and (max-width: 560px) {
  .introContentRight .em-autor-foto {
    top: 30px;
    right: 22px;
  }
  .introContentRight .em-autor-foto img {
    width: 68px;
    height: 68px;
  }
  .introContentRight h2.wp-block-heading {
    padding-right: 96px;
  }
}

/* ==================================================================
   TELEFON: dzial kontaktu ma sie czytac jak aplikacja, nie jak strona.
   Wieksze cele dotykowe (min 48 px), zwarta typografia, wiersze kontaktowe
   klikalne na calej szerokosci, przyciski pelnej szerokosci.
   Cofniecie: usunac ten blok.
   ================================================================== */

@media screen and (max-width: 1000px) {

  /* Przycisk wysylki jak w aplikacji: pelna szerokosc, wygodna wysokosc. */
  .introContentRight form.wpcf7-form .submit {
    width: 100%;
  }

  .introContentRight form.wpcf7-form .wpcf7-submit {
    width: 100%;
    min-height: 54px;
    font-size: 17px;
    border-radius: 14px;
  }

  /* Pola tez wygodniejsze w dotyku. */
  .introContentRight form.wpcf7-form input[type="text"],
  .introContentRight form.wpcf7-form input[type="email"],
  .introContentRight form.wpcf7-form input[type="tel"] {
    min-height: 58px;
    border-radius: 12px;
  }

  .introContentRight form.wpcf7-form textarea[name="wiadomosc"] {
    border-radius: 12px;
  }

  .introContentRight form.wpcf7-form .em-pole-dalsze.em-widoczne {
    max-height: 108px;
  }

  /* Karta formularza: mniej marginesu wewnetrznego, wiecej miejsca na tresc. */
  .introContentRight {
    padding: 28px 20px 26px !important;
    border-radius: 18px;
  }

  /* Opis nad punktami: zwarty, nie rozstrzelony. */
  .introContentLeft > p {
    line-height: 1.5;
    font-size: 15px;
  }

  /* Punkty i wiersze kontaktowe jako kafle z wypelnieniem, nie cienkie ramki. */
  .introContentLeft .wp-block-list li,
  .introContentLeft .wp-block-media-text {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .10);
    border-radius: 14px;
  }

  .introContentLeft .wp-block-list li {
    line-height: 1.45;
  }

  /* Telefon i mail: caly kafel jest celem dotykowym, bez webowych podkreslen. */
  .introContentLeft .wp-block-media-text {
    position: relative;
    padding: 0 18px;
    min-height: 66px;
    align-items: center;
  }

  .introContentLeft .wp-block-media-text a {
    display: block;
    padding: 20px 0;
    text-decoration: none !important;
    font-size: 17px;
  }

  /* Powiekszenie celu na caly kafel, bez zmiany kodu strony. */
  .introContentLeft .wp-block-media-text a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
  }

  .introContentLeft .wp-block-media-text .wp-block-media-text__content p {
    margin: 0;
  }

  /* Wiersze kontaktowe w sekcji "Dane kontaktowe" tak samo wygodne.
     Ikona siedzi w tle linku po lewej, wiec ruszamy tylko gore i dol,
     inaczej tekst wchodzi na ikone. */
  #daneKontaktowe .kontakt_box p.tel a,
  #daneKontaktowe .kontakt_box p.mail a {
    display: block;
    padding-top: 16px;
    padding-bottom: 16px;
    text-decoration: none !important;
    font-size: 17px;
  }

  #daneKontaktowe .kontakt_box p.gps a {
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 12px;
    text-decoration: none !important;
  }

  /* Ikony spolecznosciowe: wieksze cele. */
  .introContentLeft .wp-block-gallery.social figure {
    margin: 0;
  }

  .introContentLeft .wp-block-gallery.social a {
    display: block;
    padding: 10px;
  }

  /* Naglowki sekcji nie moga wchodzic pod przycisk menu. */
  #content .wp-block-group h2.wp-block-heading,
  #daneKontaktowe h2.wp-block-heading {
    padding-right: 74px;
  }

  /* Dane rejestrowe zwarte, numer konta w jednej linii. */
  #daneKontaktowe .wp-block-columns p {
    line-height: 1.6;
    font-size: 14px;
  }
}

@media screen and (max-width: 1000px) {

  /* Naglowki sekcji: mniejsze i wyrownane do lewej, jak ekrany w aplikacji.
     Wyśrodkowane i bardzo duze wchodzily pod przycisk menu i lamaly sie w pol slowa. */
  #daneKontaktowe h2.wp-block-heading,
  #content > .wp-block-group > h2.wp-block-heading {
    font-size: 26px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    padding-right: 68px;
  }

  #daneKontaktowe > .wp-block-columns > .wp-block-column > p:first-of-type {
    text-align: left !important;
    font-size: 17px !important;
  }

  /* Karuzela krokow: karta miesci sie w ekranie, a nastepna wystaje na tyle,
     zeby bylo widac, ze mozna przewinac. */
  #content .swiper-wrapper,
  #content .wp-block-columns.is-style-fit {
    scroll-snap-type: x mandatory;
  }

  #content .wp-block-columns.is-style-fit > .wp-block-column {
    scroll-snap-align: start;
  }
}

@media screen and (max-width: 1000px) {

  /* Naglowek strony: mniejszy i w dwoch wierszach. Dopisek "tak, jak Ci wygodnie!"
     zostaje w kodzie (widoczny na komputerze), na telefonie sie nie miesci. */
  h1.introHeader {
    font-size: 30px !important;
    line-height: 35px !important;
  }

  .em-h1-dopisek {
    display: none;
  }

  /* Pole tresci nizsze, zeby bylo widac, ze konczy sie tam, gdzie zaczyna kolejne. */
  .introContentRight form.wpcf7-form textarea[name="wiadomosc"] {
    min-height: 116px;
  }

  .introContentRight form.wpcf7-form.em-odsloniete textarea[name="wiadomosc"] {
    min-height: 94px;
  }

  /* Zgoda marketingowa: dwa wiersze i przycisk, ktory rozwija reszte. */
  /* Skracamy od pierwszego malowania, a nie dopiero po uruchomieniu skryptu,
     inaczej tresc przeskakuje i rosnie CLS. */
  .introContentRight form.wpcf7-form .wpcf7-list-item-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .introContentRight form.wpcf7-form .em-zgoda-tekst {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Miejsce na przycisk rezerwujemy z gory na kontenerze, ktory faktycznie sie przesuwa
     (span.wpcf7-list-item), inaczej dolozenie przycisku przez skrypt spycha przycisk
     wysylki i rosnie CLS. */
  .introContentRight form.wpcf7-form .wpcf7-list-item {
    display: block;
    min-height: 78px;
  }

  /* Kwadracik po lewej, tekst obok, przycisk pod spodem. */
  .introContentRight form.wpcf7-form .wpcf7-list-item label {
    /* motyw ustawia tu wlasny uklad, stad wymuszenie */
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 0 10px;
    text-align: left !important;
  }

  .introContentRight form.wpcf7-form .wpcf7-list-item label input[type="checkbox"] {
    /* motyw daje polom szerokosc 100%, przez co kwadracik rozpychal sie na cala
       linie i tekst spadal pod niego */
    flex: 0 0 auto !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 !important;
    position: static !important;
  }

  .introContentRight form.wpcf7-form .wpcf7-list-item-label {
    flex: 1;
    min-width: 0;
  }

  /* "wiecej" w ostatnim wierszu tekstu zgody, nie pod nim. */
  .introContentRight form.wpcf7-form .wpcf7-list-item-label {
    position: relative;
    padding-right: 52px;
  }

  .introContentRight form.wpcf7-form .em-zgoda-wiecej {
    position: absolute;
    right: 0;
    /* rowno z linia pisma ostatniego wiersza, nie z dolna krawedzia bloku */
    bottom: 4px;
    margin: 0;
    padding: 0 0 0 18px;
    background: linear-gradient(to right, rgba(255,255,255,0), #fff 14px);
    font-size: 13px;
    line-height: 1.5;
  }

  .introContentRight form.wpcf7-form .em-zgoda-tekst.em-rozwinieta {
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .introContentRight form.wpcf7-form .wpcf7-list-item:has(.em-rozwinieta) {
    min-height: 0;
  }

  .introContentRight form.wpcf7-form .em-zgoda-wiecej {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 0;
    background: none;
    border: 0;
    color: #b83a11;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
  }
}

@media screen and (max-width: 1000px) {

  /* Ikony spolecznosciowe sa juz w stopce, w naglowku tylko doladowywaly sie
     po fakcie i przesuwaly tresc (0,07 CLS). */
  .introContentLeft .wp-block-gallery.social {
    /* uklad galerii ma wlasne display: flex, wiec ukrycie trzeba wymusic */
    display: none !important;
  }

  /* Punkty obietnic obok siebie, przewijane palcem, bez widocznego paska. */
  .introContentLeft > ul.wp-block-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0;
    margin: 0 0 18px;
  }

  .introContentLeft > ul.wp-block-list::-webkit-scrollbar {
    display: none;
  }

  .introContentLeft > ul.wp-block-list li {
    flex: 0 0 82%;
    scroll-snap-align: start;
    margin: 0;
    box-sizing: border-box;
  }

  /* Telefon i mail bez ramek, sam tekst z ikona. */
  .introContentLeft .wp-block-media-text {
    background: none;
    border: 0;
    padding: 0 4px;
    min-height: 56px;
  }

  /* Kroki wspolpracy obok siebie, przewijane palcem, bez widocznego paska. */
  #rozpoczecieWspolpracy .wp-block-columns.is-style-fit {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  #rozpoczecieWspolpracy .wp-block-columns.is-style-fit::-webkit-scrollbar {
    display: none;
  }

  /* Karty mialy 40 px odstepu wewnetrznego u gory i u dolu, przez co wisialy nisko
     pod naglowkiem i sekcja zajmowala wiecej miejsca niz potrzeba. */
  #rozpoczecieWspolpracy .wp-block-columns.is-style-fit {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #rozpoczecieWspolpracy h2.wp-block-heading {
    margin-bottom: 10px !important;
  }

  #rozpoczecieWspolpracy .wp-block-columns.is-style-fit > .wp-block-column {
    flex: 0 0 84% !important;
    width: 84% !important;
    max-width: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }

  #rozpoczecieWspolpracy {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }

  #rozpoczecieWspolpracy h2.wp-block-heading {
    margin-bottom: 18px !important;
  }
}

/* Naglowek karty ma docelowo dwa wiersze, ale w foncie zastepczym lamie sie na trzy
   i po podmianie fontu cala karta kurczy sie o 29 px, spychajac tresc (0,07 CLS).
   Rezerwacja wysokosci trzyma uklad w miejscu od pierwszego malowania. */
.introContentRight h2.wp-block-heading {
  min-height: 68px;
}

@media screen and (max-width: 1000px) {
  .introContentRight h2.wp-block-heading {
    /* stala wysokosc, nie minimalna: w foncie zastepczym naglowek lamie sie na trzy
       wiersze i po podmianie fontu karta kurczy sie o 29 px */
    height: 78px;
    overflow: hidden;
    font-size: 27px !important;
    line-height: 34px !important;
  }

  /* Przycisk "wiecej" dokladany skryptem potrzebuje 5 px ponad dotychczasowa rezerwacje. */
  .introContentRight form.wpcf7-form .wpcf7-list-item {
    /* przycisk "wiecej" siedzi teraz w wierszu tekstu, wiec nie trzeba juz na niego
       rezerwowac osobnego miejsca pod spodem */
    min-height: 44px;
  }

  /* Przycisk wysylki blizej zgody. */
  .introContentRight form.wpcf7-form .submit {
    padding-top: 12px !important;
  }
}

@media screen and (max-width: 1000px) {

  /* Opis w banerze zgody skrocony do trzech wierszy, reszta po klknieciu "wiecej".
     Baner jest tu najwiekszym elementem strony i wjezdza po lancuchu skryptow,
     wiec dopoki byl dlugi, wyznaczal wynik szybkosci calej podstrony. */
  /* Skracamy od pierwszego malowania, nie po uruchomieniu skryptu: przegladarka
     zapisuje najwiekszy element zanim skrypt zdazy cokolwiek zmienic. */
  .cky-notice-des p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cky-notice-des p.em-baner-tekst {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cky-notice-des p.em-baner-tekst.em-rozwiniety {
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  /* "wiecej" siedzi w ostatnim wierszu opisu, a nie pod nim: dzieki temu przyciski
     zgody sa wyzej i baner zajmuje mniej miejsca. */
  .cky-notice-des {
    position: relative;
  }

  .cky-notice-des .em-baner-wiecej {
    position: absolute;
    right: 0;
    bottom: 3px;
    padding: 0 0 0 22px;
    background: linear-gradient(to right, rgba(255,255,255,0), #fff 16px);
    border: 0;
    color: #b83a11;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: underline;
    cursor: pointer;
  }
}

@media screen and (max-width: 1000px) {

  /* Opis nad punktami zajmowal piec wierszy i powtarzal to, co mowi naglowek. */
  .introContentLeft > p:first-of-type {
    display: none;
  }

  /* Telefon i mail obok siebie, przewijane palcem, ikona i tekst w jednej linii. */
  .em-kontakt-pas {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-bottom: 6px;
  }

  .em-kontakt-pas::-webkit-scrollbar {
    display: none;
  }

  .em-kontakt-pas .wp-block-media-text {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex !important;
    align-items: center;
    gap: 10px;
    grid-template-columns: none !important;
    white-space: nowrap;
    padding: 0 2px;
    min-height: 52px;
  }

  .em-kontakt-pas .wp-block-media-text__media {
    flex: 0 0 auto;
    margin: 0;
    width: 34px;
  }

  .em-kontakt-pas .wp-block-media-text__content {
    padding: 0;
  }

  .em-kontakt-pas .wp-block-media-text a {
    padding: 14px 0;
    font-size: 16px;
  }

  /* Punkty: tekst do lewej, w pionie do srodka kafla. */
  .introContentLeft > ul.wp-block-list li {
    display: flex;
    align-items: center;
    text-align: left;
    min-height: 84px;
    padding: 12px 16px;
  }

  /* Oddzialy i adresy: bez ramek, ciasniej. */
  #daneKontaktowe .kontakt_box {
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
  }

  #daneKontaktowe .kontakt_box p.gps {
    line-height: 1.5;
    margin-bottom: 6px;
  }

  #daneKontaktowe .kontakt_box p.tel a,
  #daneKontaktowe .kontakt_box p.mail a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #daneKontaktowe .wp-block-columns {
    gap: 8px;
  }

  #daneKontaktowe > .wp-block-columns > .wp-block-column {
    padding: 4px 0;
  }
}


/* Po wyslaniu zostaje jedno zdjecie, to w podziekowaniu. Gorne bylo duplikatem. */
.introContentRight.em-po-wyslaniu .em-autor-foto {
  display: none;
}

/* ==================================================================
   KOMPUTER: te same porzadki co na telefonie, ale delikatniej.
   Adresy i dane kontaktowe bez ramek, bez webowych podkreslen, ciasniej.
   Ukladu nie zmieniamy, bo na szerokim ekranie kolumny maja sens.
   Cofniecie: usunac ten blok.
   ================================================================== */

@media screen and (min-width: 1001px) {

  /* Telefon, mail i adresy bez ramek: same dane z ikona. */
  #daneKontaktowe .kontakt_box {
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 18px !important;
  }

  .introContentLeft .wp-block-media-text {
    border: 0 !important;
    padding: 2px 0 !important;
  }

  /* Bez podkreslen, wieksze pole klikalne. */
  .introContentLeft .wp-block-media-text a,
  #daneKontaktowe .kontakt_box p.tel a,
  #daneKontaktowe .kontakt_box p.mail a,
  #daneKontaktowe .kontakt_box p.gps a {
    text-decoration: none !important;
  }

  .introContentLeft .wp-block-media-text a:hover,
  #daneKontaktowe .kontakt_box p.tel a:hover,
  #daneKontaktowe .kontakt_box p.mail a:hover,
  #daneKontaktowe .kontakt_box p.gps a:hover {
    text-decoration: underline !important;
  }

  /* Przycisk wysylki blizej zgody, jak na telefonie. */
  .introContentRight form.wpcf7-form .submit {
    padding-top: 14px !important;
  }

  /* Dane rejestrowe ciasniej. */
  #daneKontaktowe .wp-block-columns p {
    line-height: 1.65;
  }

  #daneKontaktowe .kontakt_box p.gps {
    margin-bottom: 4px;
  }
}

@media screen and (min-width: 1001px) {

  /* Ikony spolecznosciowe sa w stopce, w naglowku sa zbedne. */
  .introContentLeft .wp-block-gallery.social {
    display: none !important;
  }

  /* Telefon i mail w jednej linii, ikona i tekst rowno wzgledem siebie. */
  .em-kontakt-pas {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-top: 6px;
  }

  .em-kontakt-pas .wp-block-media-text {
    display: flex !important;
    align-items: center;
    gap: 12px;
    grid-template-columns: none !important;
    margin: 0 !important;
    white-space: nowrap;
  }

  .em-kontakt-pas .wp-block-media-text__media {
    flex: 0 0 auto;
    margin: 0;
    width: 38px;
  }

  /* Bez tego obrazek w srodku kurczy sie do kropki. */
  .em-kontakt-pas .wp-block-media-text__media img {
    width: 38px;
    height: 38px;
    max-width: none;
    display: block;
  }

  .em-kontakt-pas .wp-block-media-text__content {
    padding: 0;
  }

  .em-kontakt-pas .wp-block-media-text__content p {
    margin: 0;
  }

  .em-kontakt-pas .wp-block-media-text a {
    font-size: 17px;
    padding: 0;
  }
}

/* Ikona telefonu i maila stala przyklejona do dolu swojego pojemnika, ktory jest
   wyzszy od niej samej, wiec srodek ikony nie zgadzal sie ze srodkiem tekstu
   (14 px rozjazdu na komputerze). Pojemnik i obrazek centrujemy jawnie. */
.em-kontakt-pas .wp-block-media-text__media {
  align-self: center !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.em-kontakt-pas .wp-block-media-text__content {
  align-self: center !important;
  display: flex;
  align-items: center;
}

/* Dane firmy w trzech kolumnach: kontaktowe, lokalizacyjne, rejestrowe. */
.em-dane-firmy {
  margin-top: 26px;
}

.em-dane-firmy h3.wp-block-heading {
  font-size: 17px;
  margin: 0 0 12px;
  color: #2a3445;
}

.em-dane-firmy .em-rejestrowe p {
  line-height: 1.9;
}

@media screen and (max-width: 1000px) {
  .em-dane-firmy {
    gap: 18px;
    margin-top: 18px;
  }

  .em-dane-firmy h3.wp-block-heading {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .em-dane-firmy .em-rejestrowe p {
    line-height: 1.8;
    font-size: 14px;
  }
}

/* Trzecia kolumna dziedziczyla po kontakt_box biale tlo z cieniem i odstawala
   od dwoch pozostalych. */
.em-dane-firmy .em-rejestrowe {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Motyw robil z tej sekcji jedna biala karte, wiec ostatnia kolumna dostawala
   biale tlo z cieniem i odstawala od pozostalych. */
.em-dane-firmy > .wp-block-column {
  /* rowna wysokosc, zeby pionowe linie konczyly sie na jednym poziomie */
  align-self: stretch;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Nazwa spolki pod naglowkiem sekcji, rowno do lewej (struktura sekcji sie zmienila,
   wiec stary selektor juz jej nie obejmuje). */
#daneKontaktowe > p {
  text-align: left !important;
  margin-top: 6px;
}

/* ------------------------------------------------------------------
   Dane firmy: ten sam kontener co reszta strony, pionowe linie miedzy kolumnami,
   ciasniejszy odstep u gory. Po rozbiciu sekcji na kolumny zgubila kontener
   i rozciagala sie od krawedzi do krawedzi okna.
   ------------------------------------------------------------------ */

#daneKontaktowe {
  padding-top: 44px !important;
  padding-bottom: 56px !important;
}

#daneKontaktowe > h2,
#daneKontaktowe > p,
#daneKontaktowe > .em-dane-firmy {
  max-width: 1650px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 43px;
  padding-right: 43px;
  box-sizing: border-box;
}

#daneKontaktowe > h2 {
  padding-top: 0 !important;
}

/* Pionowe linie miedzy kolumnami. */
.em-dane-firmy > .wp-block-column + .wp-block-column {
  border-left: 1px solid rgba(42, 52, 69, .14);
  padding-left: 34px !important;
}

@media screen and (max-width: 1000px) {
  #daneKontaktowe {
    padding-top: 30px !important;
    padding-bottom: 34px !important;
  }

  #daneKontaktowe > h2,
  #daneKontaktowe > p,
  #daneKontaktowe > .em-dane-firmy {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* W pionie linia oddziela poziomo, nie pionowo. */
  .em-dane-firmy > .wp-block-column + .wp-block-column {
    border-left: 0;
    border-top: 1px solid rgba(42, 52, 69, .14);
    padding-left: 0 !important;
    padding-top: 18px !important;
    margin-top: 4px;
  }
}