/* 00-base.css — Fundament: zmienne breakpointow, html/body, .container */

/* ---------- zmienne globalne ---------- */

/*
 UWAGA: --screen-width to SZTYWNA szerokosc, nie procent. Uzywaj jej zawsze
 przez min(var(--screen-width), 100% - 80px), nigdy samej.

 Wartosc przeskakuje na progach 1200 i 1500 px, a progi te sa rowne nowej
 szerokosci. Przy oknie 1200 px pasek przewijania zabiera ~15 px, wiec na
 tresc zostaje 1185 px — a blok dostaje pelne 1200 i wychodzi poza ekran.
 Zmierzone na stronie glownej: nadmiar 15 px przy oknie 1200 i 1500 px,
 5 px przy 1210 i 1510, zero poza tymi pasmami. Stad usterka byla trudna
 do zauwazenia: widac ja tylko w waskich pasmach tuz nad progiem.
*/
@media screen and (min-width: 1025px){
    :root{
        --screen-width: 1000px;
    }
}
@media screen and (min-width: 1200px){
    :root{
        --screen-width: 1200px;
    }
}
@media screen and (min-width: 1500px){
    :root{
        --screen-width: 1500px;
    }
}
html{
    scroll-behavior: smooth;
}

/* ---------- desktop (>= 1025px) ---------- */
@media screen and (min-width: 1025px) {
    body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-size: 16px;
    }
    .container{
        width: 100%;
        height: 100vh;
        position: relative;
        box-sizing: border-box;
    }
}

/* ---------- mobile (<= 1024px) ---------- */
@media screen and (max-width: 1024px) {
    html, body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-size: 1rem;
    }
    .container{
        position: relative;
        margin: 0;
        padding: 0;
    }
}