/* Poprawki widoku na telefonach. Wygląd na komputerach zostaje bez zmian: reguły dla treści
   działają do 767 px (próg „phone” Live Composera), a menu mobilne pojawia się tylko na
   telefonach i tabletach. Style Live Composera stoją w <body> za tym plikiem, stąd !important. */

/* --- Menu mobilne --- */

/* Podstrony usług widoczne od razu (w oryginale rozwijały się tylko po najechaniu myszą). */
.lcmenupro-mobile-menu .sub-menu {
  display: block !important;
  padding: 0 0 6px 14px !important;
}
.lcmenupro-mobile-menu .menu-item-1524 > a {
  display: none !important;
}
.lcmenupro-mobile-menu .menu-item-1524 > .sub-menu {
  padding: 0 !important;
}
.lcmenupro-mobile-navigation .lcmenupro-mobile-menu a {
  display: inline-block;
  padding: 9px 0;
}
.lcmenupro-mobile-navigation .lcmenupro-mobile-menu .lg-menu-cta {
  margin-top: 22px;
}
.lcmenupro-mobile-navigation .lcmenupro-mobile-menu .lg-menu-cta a {
  padding: 13px 18px;
  border-radius: 4px;
  background-color: #a1c627;
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
}
.lcmenupro-mobile-navigation .lcmenupro-mobile-menu .lg-menu-cta a:active {
  background-color: #56aee3;
}

/* Statyczny nagłówek strony głównej zamiast slidera (patrz niżej). */
.lg-mobile-hero {
  display: none;
}

@media only screen and (max-width: 767px) {
  /* --- Szerokość treści --- */

  /* Motyw zwęża treść do 280 px (do 479 px) i 420 px (480–767 px); na współczesnych telefonach
     zostawało to ponad 50 px pustego miejsca z każdej strony. */
  .dslc-modules-section .dslc-modules-section-wrapper {
    width: 100% !important;
  }
  .dslc-modules-section:not(.dslc-full) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Telefon trzymany poziomo: bez ograniczenia kafelki usług byłyby wyższe niż ekran. */
  @media (min-width: 480px) {
    .dslc-modules-section:not(.dslc-full) .dslc-modules-section-wrapper {
      max-width: 480px;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }

  /* Bloki z dużym wcięciem po bokach: nagłówki stron usług, „Usługi”, „Wybór oprogramowania”. */
  #dslc-module-15286 .dslc-text-module-content,
  #dslc-module-9 .dslc-text-module-content,
  #dslc-module-6335 .dslc-text-module-content,
  #dslc-module-15435 .dslc-info-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Nagłówki --- */

  #dslc-module-5aa5c3836d9 h1,
  #dslc-module-b75d0beb36d h1,
  #dslc-module-fcb13319c5e h1 {
    font-size: 32px !important;
    line-height: 38px !important;
  }
  #dslc-module-15320 h2,
  #dslc-module-70 h2,
  #dslc-module-15476 h2,
  #dslc-module-15561 h2 {
    font-size: 28px !important;
    line-height: 34px !important;
  }

  /* --- Strona główna: slider --- */

  /* Slider skaluje się proporcjonalnie (1200×360 px), więc na telefonie miał 117 px wysokości,
     a napisy na ekranie komputera po 4 px. Zamiast niego: ten sam tekst i grafika w HTML. */
  .dslc-module-LBMN_MasterSlider {
    display: none !important;
  }
  .lg-mobile-hero {
    display: block;
    overflow: hidden;
    padding: 34px 20px 0;
    background-color: #088ada;
  }
  .lg-mobile-hero-title {
    max-width: 440px;
    margin: 0 auto 26px;
    color: #fff;
    font-size: 31px;
    font-weight: 300;
    line-height: 36px;
    letter-spacing: -0.5px;
  }
  @media (max-width: 379px) {
    .lg-mobile-hero-title {
      font-size: 27px;
      line-height: 32px;
    }
  }
  /* Układ grafik jak na slajdzie: wycinek 574×324 px płótna slidera, pozycje w procentach. */
  .lg-mobile-hero-art {
    position: relative;
    max-width: 440px;
    margin: 0 auto;
    aspect-ratio: 574 / 324;
  }
  .lg-mobile-hero-art img {
    position: absolute;
    max-width: none;
    height: auto;
  }
  .lg-mobile-hero-art .lg-mh-imac {
    left: 37.1%;
    top: 0;
    width: 62.9%;
  }
  .lg-mobile-hero-art .lg-mh-macbook {
    left: 0;
    top: 38%;
    width: 56.4%;
  }
  .lg-mobile-hero-art .lg-mh-graph {
    left: -37.1%;
    top: 7.1%;
    width: 143.7%;
  }
  .lg-mh-tags {
    position: absolute;
    top: 24%;
    right: 3.5%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
  }
  .lg-mh-tags span {
    padding: 2px 5px;
    border: 2px solid rgba(255, 255, 255, 0.46);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    line-height: 13px;
    white-space: nowrap;
  }

  /* --- Odstępy --- */

  /* Puste kolumny służą na komputerze do wcięć; po ułożeniu jedna pod drugą zostawiały po 30 px. */
  .dslc-modules-area:not(:has(.dslc-module-front)) {
    display: none !important;
  }
  /* „Nasz zespół pomoże Ci…” nad formularzem „Opowiedz nam”. */
  #dslc-module-15320 .dslc-text-module-content {
    margin-bottom: 20px !important;
  }

  /* --- Stopka --- */

  #dslc-module-1049 .dslc-image img {
    width: 200px !important;
  }
  #dslc-module-2339 .dslc-text-module-content {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
  }
  #dslc-footer .dslc-modules-section:has(#dslc-module-2373) {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }
  /* Godziny pracy w jednej linii z adresem e-mail i „zadaj pytanie” pod nimi (ikona na tej samej
     wysokości co tekst i w tej samej kolumnie co pozostałe ikony). */
  #dslc-module-2373 .dslc-info-box {
    padding: 13px 0 !important;
    margin-bottom: 20px !important;
  }
  #dslc-module-2373 .dslc-info-box-image,
  #dslc-module-2373 .dslc-info-box-image-inner {
    width: 17px !important;
    height: 20px !important;
  }
  #dslc-module-2373 .dslc-info-box-image {
    margin: 0 19px 0 18px !important;
  }
  #dslc-module-2373 .dslc-icon {
    line-height: 20px !important;
  }
  #dslc-module-2373 .dslc-info-box-content {
    margin-bottom: 0 !important;
  }
  #dslc-module-2373 .dslc-info-box-content p {
    line-height: 20px !important;
  }

  /* --- Formularze --- */

  /* 16 px w polach: iOS nie powiększa wtedy strony przy wpisywaniu. */
  .nf-form-content input:not([type="submit"]):not([type="button"]):not([type="hidden"]),
  .nf-form-content textarea {
    font-size: 16px !important;
  }
  .nf-form-content input[type="submit"] {
    min-height: 46px;
    padding: 0 30px !important;
    font-size: 16px !important;
  }

  /* --- Strona 404 --- */

  .lg-404 {
    padding: 70px 20px 90px !important;
  }
  .lg-404 h1 {
    font-size: 34px !important;
  }
}