/* 50-slider.css — Slider glowny (slick): slajdy 1-4 */

/* ---------- desktop (>= 1025px) ---------- */
@media screen and (min-width: 1025px) {
    .first_slider-header{
        margin: 0 0 0 2%;
    }
    .first_slider-container{
        width: 100%;
        height: 100vh !important;
    }
    /*
     Tresc wysrodkowana w pionie, tak jak w testimonials.
     Bylo align-items: stretch — obie kolumny rozciagaly sie na cala wysokosc
     slajdu, wiec tresc zaczynala sie zawsze 100 px od gory, a nad dolna
     krawedzia zostawalo 370-542 px pustki, zaleznie od dlugosci slajdu
     (zmierzone przy oknie 1400x900). Teraz kolumny maja naturalna wysokosc
     i wspolna os w polowie slajdu: odstep od gory rowny odstepowi od dolu
     (235-321 px, w zaleznosci od slajdu).

     Kropki nawigacji stoja 60 px nad dolna krawedzia kontenera, czyli
     wewnatrz dolnego odstepu — nie zachodza na tresc.
    */
    .first_slider-content{
        width: min(var(--screen-width), 100% - 80px);
        margin: auto;
        height: 100vh !important;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        padding: 100px 0 100px 0;
        box-sizing: border-box;
    }
    .first_slider-slide{
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .first_slider-header img{
        width: 50%;
    }
    .first_slider-img-mobile{
        display: none !important;
    }
    .first_slider-header h2{
        font-size: var(--text-label); /* bylo 2.3vh= 21px */
        font-family: var(--font-display);
        letter-spacing: 1px;
    }
    .first_slider-text ol{
        font-size: var(--text-2xl); /* bylo 4.5vh= 40px */
        margin: 0;
        padding: 0 0 0 150px ;
    }
    .first_slider-text li{
        padding-left: 30px;
    }
    .slide-1{
        background-color: #5198f9;
        color: white;
    }
    .slide-2{
        background-color: #16488f;
        color: white;
    }
    .slide-3{
        background-color: #5198f9;
        color: #f2eee6;
    }
    .slide-4{
        background-color: #16488f;
        color: white;
    }
    .first_slider-mobile{
        display: none;
    }
}

/* ---------- mobile (<= 1024px) ---------- */
@media screen and (max-width: 1024px) {
    .first_slider-container{
        width: 100%;
        min-height: 100vh !important;
    }
    .first_slider-slide{
        width: 100%;
        min-height: 100vh !important;
        padding: 0;
        margin: 0;
        display: flex;
    }
    .slide-1{
        background-color: #5198f9;
        color: #f2eee6;
    }
    .slide-2{
        background-color: #16488f;
        color: #f2eee6;
    }
    .slide-3{
        background-color: #5198f9;
        color: #f2eee6;
    }
    .slide-4{
        background-color: #16488f;
        color: #f2eee6;
    }
    /*
     Tresc wysrodkowana w pionie, tak jak na desktopie.
     Samo margin: auto tu nie wystarczalo: slick nadaje slajdom
     .slick-initialized .slick-slide { display: block } o specyficznosci
     (0,2,0), co bije regule motywu .first_slider-slide { display: flex }
     (0,1,0). Slajd nie byl wiec kontenerem flex i auto-marginesy nie mialy
     czego wyrownywac — tresc stala 50 px od gory, a nad dolna krawedzia
     zostawalo 198-405 px pustki.

     Zamiast podnosic specyficznosc i walczyc ze slickiem o display slajdu,
     centrowanie robi sam kontener tresci: rozciaga sie na pelna wysokosc
     slajdu i ustawia dzieci na srodku osi pionowej.

     Zostaje 18 px roznicy, stale na kazdym slajdzie — to dolny margines
     listy <ol>, ktory wchodzi w rachubę przy centrowaniu. Przy odstepach
     rzedu 115-236 px jest niewidoczny.
    */
    .first_slider-content{
        width: 90%;
        margin: auto;
        min-height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        text-align: center;
        padding: 50px 0 50px 0;
    }
    .first_slider-img-desktop{
        display: none !important;
    }
    .first_slider-img-mobile{
        margin: auto;
    }
    .first_slider-header h2{
        font-size: 1.3rem;
        font-family: var(--font-display);
        text-align: center;
        letter-spacing: 2px;
    }
    .first_slider-text ol{
        list-style: none;
        padding-left: 0;
    }
    .first_slider-text{
        font-size: 1.1rem;
    }
}