/* =========================================================================
   ZenWay – warstwa responsywna (RWD)

   Arkusz dokladany JAKO OSTATNI, celowo osobno od style.css.
   Bazowy CSS nie ma zadnego breakpointu ponizej 980px, przez co na
   telefonach layout wychodzil poza ekran. Zamiast modyfikowac 115 KB
   style.css (i ryzykowac desktop) korygujemy tu tylko to, co sie rozjezdza.

   Glowne przyczyny przepelnienia w bazowym CSS:
     .container  – padding 0 60px, nigdy nie redukowany
     .btn        – sztywne height/line-height 64px
     .btn-l      – padding 0 90px (btn-m: 0 52px)
   ========================================================================= */

/* ---------- PRZYCISKI: elastyczna wysokosc (WSZYSTKIE szerokosci) ----------
   .btn ma w bazowym CSS sztywne height:64px i line-height:64px. Gdy etykieta
   jest dluzsza niz szerokosc przycisku (np. "Uruchom serwer w 5 minut →"
   w kafelkach na stronie glownej), tekst zawija sie do dwoch linii = 128px
   i – przy display:flex z align-items:center – wylewa sie ZAROWNO NAD, JAK
   I POD ramke przycisku.

   To nie jest problem wylacznie mobilny: wystepuje na kazdej szerokosci,
   na ktorej etykieta nie miesci sie w jednej linii. Dlatego regula jest
   globalna, a nie w media query.

   min-height: 64px zachowuje dotychczasowy wyglad przyciskow jednoliniowych. */
.btn {
    height: auto;
    min-height: 64px;
    line-height: 1.3;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ---------- Zabezpieczenie przed poziomym przewijaniem ----------
   Dekoracyjne grafiki sa pozycjonowane absolutnie z ujemnymi offsetami
   (np. right: -275px) – maja wychodzic poza rodzica, ale nie poza ekran. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ================== <= 1100px ================== */
@media screen and (max-width: 1100px) {
    .container {
        padding: 0 40px;
    }
}

/* ================== <= 980px ==================
   Od tej szerokosci bazowy CSS chowa nav i pokazuje hamburger.
   Pilnujemy, zeby naglowek mial na niego miejsce. */
@media screen and (max-width: 980px) {
    .container {
        width: 100%;
        padding: 0 28px;
    }

    header .container {
        gap: 16px;
    }

    header .container .logo {
        min-width: 0;
        max-width: 160px;
        flex: 0 1 auto;
    }

    header .container .logo a img {
        max-width: 100%;
        height: auto;
    }

    /* Hamburger nie moze zostac scisniety ani wypchniety poza ekran. */
    header .container .menu {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    header .container .menu #hamburger {
        display: flex;
        flex: 0 0 24px;
    }

    /* Przyciski: zdejmujemy sztywna wysokosc i ogromne paddingi poziome,
       zeby tekst miescil sie w srodku zamiast wychodzic poza ramke. */
    .btn {
        height: auto;
        min-height: 56px;
        line-height: 1.35;
        padding: 14px 26px;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    .btn.btn-l {
        padding: 16px 30px;
    }

    .btn.btn-m {
        padding: 12px 24px;
    }

    /* Listy przyciskow ukladaja sie w pion i nie rozpychaja strony. */
    ul.btn-list {
        flex-wrap: wrap;
        max-width: 100%;
    }

    ul.btn-list > li {
        max-width: 100%;
    }
}

/* ================== <= 768px ================== */
@media screen and (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .btn {
        min-height: 52px;
        padding: 13px 22px;
        font-size: 13px;
    }

    .btn.btn-l {
        padding: 14px 24px;
    }

    .btn.btn-m {
        padding: 11px 18px;
    }

    /* Przyciski w listach na pelna szerokosc – wygodniejsze do kliknięcia
       i nigdy nie wychodza poza kontener. */
    ul.btn-list {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    ul.btn-list > li {
        width: 100%;
    }

    ul.btn-list > li > .btn {
        width: 100%;
    }

    /* Baner cookies – na waskich ekranach przyciski jeden pod drugim. */
    #cookie-consent,
    .cookie-consent {
        max-width: calc(100% - 24px);
    }
}

/* ================== <= 480px ================== */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    header {
        padding: 24px 0;
    }

    header .container .logo {
        max-width: 138px;
    }

    .btn {
        min-height: 50px;
        padding: 12px 18px;
        font-size: 13px;
    }

    .btn.btn-l,
    .btn.btn-m {
        padding: 12px 18px;
    }
}

/* ---------- Tresci, ktore lubia rozpychac strone ----------
   Tabele, bloki kodu i szerokie elementy przewijaja sie wewnatrz siebie,
   zamiast poszerzac cala strone. */
@media screen and (max-width: 980px) {
    pre,
    table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }

    .blog-post-body img,
    .co-product > img {
        max-width: 100%;
        height: auto;
    }

    /* Dlugie adresy/slowa bez spacji nie rozrywaja layoutu. */
    .blog-post-body,
    .co-addon-text,
    .blog-card-excerpt {
        overflow-wrap: anywhere;
    }
}

/* =========================================================================
   NAWIGACJA — naprawa rozjezdzajacego sie naglowka
   -------------------------------------------------------------------------
   Bazowy CSS przelacza menu na hamburger dopiero przy <=980px, ale pelne
   menu przestaje sie miescic juz ok. 1280px. Efekt: pozycje ("Inne gry",
   "Baza wiedzy", "O nas") lamia sie na dwie linie, a tekst przycisku
   "Panel klienta" wychodzi poza ramke, bo .btn ma sztywne height/line-height
   64px. Ponizej: (1) pozycje menu nigdy sie nie lamia, (2) hamburger
   wlacza sie odpowiednio wczesniej.
   ========================================================================= */

/* Pozycje menu i etykiety przyciskow nie lamia sie na dwie linie. */
header .container .menu nav ul > li > a,
header .container .menu ul.panel > li > .btn {
    white-space: nowrap;
}

/* Przycisk w naglowku dostaje elastyczna wysokosc zamiast sztywnych 64px,
   dzieki czemu tekst nigdy nie wychodzi poza tlo przycisku. */
header .container .menu ul.panel > li > .btn {
    height: auto;
    min-height: 64px;
    line-height: 1.25;
    padding-top: 8px;
    padding-bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ponizej 1200px pelne menu juz sie nie miesci – przechodzimy na hamburger.
   Bazowy CSS robil to dopiero przy 980px. */
@media screen and (max-width: 1200px) {
    header .container .menu nav {
        display: none;
    }

    header .container .menu ul.panel {
        display: none;
    }

    header .container .menu #hamburger {
        display: flex;
    }
}

/* ---------- MENU MOBILNE w przedziale 981–1200px ----------
   Bazowy CSS udostepnia #mobile-menu (stan bazowy + .visible) wylacznie
   wewnatrz @media (max-width: 980px). Powyzej hamburger byl ukryty, wiec
   nie bylo problemu. Skoro przelaczamy na hamburger juz przy 1200px,
   menu musi byc sterowalne w calym tym zakresie – inaczej klikniecie
   dodaje klase .visible, ale menu pozostaje display:none. */
@media screen and (max-width: 1200px) {
    #mobile-menu {
        display: block;
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        width: 100%;
        transition: width 0.4s ease, visibility 0.4s ease, opacity 0.4s ease;
    }

    #mobile-menu.visible {
        width: 100%;
        display: block;
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
        pointer-events: auto;
    }
}