/* ---------------------------------------------------------------
   DKR Solutions — warstwa mobilna (telefon / tablet w pionie)
-----------------------------------------------------------------
   Osobny plik zamiast dopisywania media queries do starego,
   desktopowego style.css (który jest pisany "na 1170px" i nie ma
   ani jednego @media). Wczytywany ostatni w <head>, więc przy tej
   samej specyficzności wygrywa z responsive.css i site.css.

   Jeden HTML dla obu wersji — bez duplikacji treści (i18n, a11y, SEO)
   i bez drugiej kopii do utrzymania. Reguły dotyczą wyłącznie
   szerokości ekranu, więc desktop >767px wygląda jak dotychczas.
----------------------------------------------------------------- */

@media (max-width: 767px) {

  /* ---------- Preloader: logo 575px wyjeżdżało poza ekran ---------- */
  #preloader { overflow: hidden; }
  #status {
    width: 190px;
    height: 68px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* ---------- Nagłówek: 120px -> 64px ---------- */
  .main-nav,
  .main-nav.sticky { height: 64px; }

  .main-nav .container {
    position: relative;
    height: 64px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .logo-light {
    float: left;
    display: flex;
    align-items: center;
    height: 64px;
    max-width: 62%;
  }

  .logo-light img { height: 30px; margin-top: 0; }

  .logo { height: 64px; }

  /* rev-slider.css daje .tp-banner-container margines 120px pod napis
     naglowka — przy zwiezonym naglowku trzeba go zmniejszyc,
     inaczej pod hero zostaje pusty bialy pas. */
  .tp-banner-container { margin-top: 64px; }

  .navbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 12px;
    width: 40px;
    height: 40px;
  }

  #lang-switch.head-lang {
    position: absolute;
    right: 58px;
    top: 14px;
    float: none;
    margin-top: 0;
  }

  /* ---------- Menu pełnoekranowe: bez ujemnych marginesów ---------- */
  nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 78px 18px 30px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  nav ul {
    position: static;
    left: auto;
    top: auto;
    margin: 0;
    width: 100%;
    max-width: 420px;
  }

  nav ul li { border-bottom: 1px solid rgba(0, 0, 0, .06); }

  nav ul li:last-child { border-bottom: 0; }

  nav ul li a {
    display: block;
    padding: 13px 6px;
    font-size: 1.35rem;
    line-height: 1.25;
    text-align: center;
  }

  /* ---------- Hero: proporcje 1170/400 dają na telefonie 123px ----------
     Warstwa tekstu jest pozycjonowana procentowo (data-y -> % wysokości
     w js/site.js), więc wyższy baner sam rozdziela nagłówek i podpis. */
  .tp-banner {
    height: clamp(240px, 56vh, 320px);
    aspect-ratio: auto;
  }

  .tp-banner .tp-caption { max-width: 92%; }

  .tp-banner .tp-caption.huge_white,
  .tp-banner .tp-caption.huge_black { font-size: clamp(21px, 7vw, 32px); }

  .tp-banner .tp-caption.medium_text,
  .tp-banner .tp-caption.medium_text_black { font-size: clamp(12px, 3.4vw, 16px); }

  /* ---------- Sekcje: mniejsze odstępy i czytelniejsze nagłówki ---------- */
  .section-wrap { padding: 54px 0; }

  .call-to-action { padding: 58px 0; }
  .call-to-action h2 { font-size: 26px; line-height: 34px; }
  .call-to-action h4 { font-size: 15px; line-height: 24px; }

  .intro-heading { font-size: 27px; line-height: 35px; }
  .intro-text { font-size: 15px; line-height: 26px; }

  .section-wrap h2 { font-size: 24px; }

  .mb-60 { margin-bottom: 32px; }
  .mt-40 { margin-top: 24px; }

  /* ---------- Karty projektów ---------- */
  .projects-item-box { padding: 24px 18px; }
  .projects-item-box h3 { font-size: 18px; line-height: 24px; margin-bottom: 12px; }
  .projects-item-box p { font-size: 14px; line-height: 23px; }

  /* ---------- Przyciski na całą szerokość (kciuk) ---------- */
  .call-to-action .btn,
  #kontakt .btn,
  .projects-item-box .btn { width: 100%; }

  /* ---------- Formularz: iOS nie przybliża strony dla font < 16px ---------- */
  #contact-form .form-control,
  #contact-form input,
  #contact-form textarea {
    font-size: 16px;
    line-height: 1.5;
  }

  #contact-form textarea { min-height: 130px; }

  /* ---------- Tabele (cookies.html) ---------- */
  .section-wrap table th,
  .section-wrap table td { padding: 8px 10px; font-size: 13px; }

  /* ---------- Partnerzy: niższe logo, żeby zmieściły się w 360px ---------- */
  .owl-carousel#owl-partners .dkr-partner-track .item img { max-height: 54px; }

  /* ---------- Powrót na górę ---------- */
  #back-to-top { width: 44px; height: 44px; font-size: 28px; }
  #back-to-top a { width: 44px; height: 44px; }
  #back-to-top.show { bottom: 14px; }

  /* ---------- Pasek ciasteczek ----------
     Wariant desktopowy trzyma ikone przez padding-left:90px + ujemny
     margines (float:left) — na telefonie zamieniamy to na zwykly
     przeplyw tekstu, inaczej tresc chowa sie pod ikona. */
  #cookies-message { font-size: 13px; line-height: 1.45; }
  .om-cookies-bar { padding: 12px 14px; }
  .om-cookies-bar .inner { padding-left: 0; }
  .om-cookies-bar .cookie-icon {
    float: none;
    display: inline-block;
    top: 0;
    margin: 0 8px 0 0;
    vertical-align: middle;
  }
  .om-cookies-bar p { display: block; margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
  .om-cookies-bar .policy-button { display: block; width: 100%; margin: 0 0 8px; text-align: center; }
  .om-cookies-bar .agree-button { display: block; width: 100%; margin: 0; text-align: center; }
}

@media (max-width: 400px) {
  .logo-light { max-width: 54%; }
  .logo-light img { height: 26px; }
  #lang-switch.head-lang { right: 54px; top: 16px; }
  .projects-item-box { padding: 20px 14px; }
  .section-wrap { padding: 46px 0; }
}

/* ---------- Szerokie tabele bez ramki: przewijanie poziome ---------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}