/* Plik wczytywany jako ostatni (glob css/*.css). Siatka Bootstrapa dziedziczy box-sizing:border-box
   na wszystkie elementy, a CSS strony liczy szerokosci z padding osobno - border-box tylko dla kolumn. */
*,::before,::after
{
    box-sizing:revert;
}
.col,[class*="col-"]
{
    box-sizing:border-box;
}

/* jquery.fit liczy rozmiar zdjecia w px raz, przy ladowaniu, wiec po zmianie szerokosci kolumny albo
   obrocie telefonu kadr by sie rozjechal. Ten sam kadr (cover, srodek) trzyma CSS - fit zostaje
   tylko od pojawiania sie przy ladowaniu. Klase nadaje js/thumbnails.js, a galerie laduje core. */
img.fit_cover,
div#gallery_show img
{
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    object-fit:cover;
}

/* Tablet: kolumny jedna pod druga */
@media (max-width:991.98px)
{
    html
    {
        -webkit-tap-highlight-color:rgba(231,120,19,.25);
    }
    body
    {
        padding-top:12px;
    }
    /* Jedno menu: gorne i srodkowe razem, jak na stronach szablonowych */
    html.menu_js ul#top_menu,
    html.menu_js ul#middle_menu
    {
        display:none;
    }
    html.menu_js button#menu_toggle
    {
        display:block;
    }
    html.menu_js ul#mobile_menu.open
    {
        display:block;
    }
    div#top
    {
        min-height:86px;
    }
    /* Bez JavaScriptu zostaja oba zwykle menu - gorne nie moze wejsc na logo */
    ul#top_menu
    {
        float:none;
        margin:0 12px 6px 72px;
    }
    ul#top_menu a
    {
        padding:5px 7px;
        font-size:14px;
    }
    ul#top_menu li.chosen a
    {
        padding:3px 7px;
    }
    div#top h1
    {
        margin:0 64px 0 72px;
        padding-top:12px;
        font-size:22px;
        line-height:1.2;
    }
    div#top h1 span
    {
        font-size:16px;
    }
    img#logo
    {
        left:10px;
        width:40px;
        padding:6px;
    }
    /* 16 px: ponizej tego iOS powieksza strone po wejsciu w pole */
    div#article_index select,
    div#application_form input
    {
        font-size:16px;
    }
    div#newsletter div
    {
        display:flex;
        align-items:center;
        gap:15px;
    }
    div#newsletter input
    {
        flex:1 1 auto;
        min-width:0;
        width:auto;
        margin-right:0;
        padding:8px;
        font-size:16px;
    }
    div#newsletter a
    {
        float:none;
        padding:6px 0;
    }
    div#main_content
    {
        padding:15px;
    }
    div#right
    {
        margin-top:0;
    }
    div#adverts_right ul
    {
        margin:15px auto;
    }
    ul#adverts_right_bottom img
    {
        max-width:100%;
        height:auto;
    }
    div#news
    {
        padding-bottom:15px;
    }
    ul#newest_galleries li
    {
        margin-bottom:12px;
    }
    div#footer_inner
    {
        padding:0 15px;
    }
    ul#pictures_bottom
    {
        float:none;
        margin:0 auto 20px;
        max-width:100%;
    }
    ul#pictures_bottom li
    {
        max-width:100%;
    }
    ul#pictures_bottom img
    {
        width:100%;
        height:auto;
    }
    div#footer_left
    {
        float:none;
    }
    div.content
    {
        overflow-wrap:break-word;
    }
    div.content img
    {
        max-width:calc(100% - 30px);
        height:auto !important;
    }
    div.content iframe
    {
        max-width:100%;
    }
    div.content iframe[src*="youtu"]
    {
        width:100% !important;
        height:auto !important;
        aspect-ratio:16/9;
    }
    div.content table
    {
        display:block;
        max-width:100%;
        overflow-x:auto;
    }
    p.signature,
    div#article_show p.signature
    {
        margin-right:0;
    }
    div#gallery_show table,
    div#gallery_index table
    {
        grid-template-columns:repeat(4,1fr);
    }
    div#gallery_cats ul
    {
        grid-template-columns:repeat(3,1fr);
        gap:0 20px;
    }
}

/* Tablet: prawa kolumna w dwoch kolumnach zamiast banerow na cala szerokosc */
@media (min-width:768px) and (max-width:991.98px)
{
    div#right
    {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:15px;
        align-items:start;
    }
    div#right > *
    {
        margin-top:0;
    }
    div#courses
    {
        grid-row:span 3;
    }
    ul#adverts_right_bottom
    {
        margin:0;
    }
}

/* Telefon: jedna kolumna, formularze */
@media (max-width:767.98px)
{
    /* Menu 3. stopnia w jednym przewijanym pasie: tresc zostaje na pierwszym ekranie */
    div.subpages_container
    {
        padding-bottom:22px;
    }
    ul.subpages
    {
        flex-wrap:nowrap;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }
    ul.subpages::-webkit-scrollbar
    {
        display:none;
    }
    ul.subpages li
    {
        flex:0 0 auto;
    }
    ul.subpages a
    {
        padding:9px 14px;
        white-space:nowrap;
    }
    div#events_slider ul.bullets li:only-child
    {
        display:none;
    }
    div#events_slider ul.bullets a
    {
        position:relative;
    }
    div#events_slider ul.bullets a::after
    {
        content:'';
        position:absolute;
        top:-14px;
        right:-5px;
        bottom:-14px;
        left:-5px;
    }
    a.more
    {
        padding:9px 12px;
    }
    div#footer_left a
    {
        margin-right:16px;
        padding:8px 0;
        font-size:12px;
    }
    /* Justowanie na waskiej kolumnie rozrywa wiersze */
    div.content p,
    div#article_index p,
    div#gallery p,
    ul#communities p
    {
        text-align:left;
    }
    div.content p[style*="justify"]
    {
        text-align:left !important;
    }
    div.content img
    {
        max-width:100%;
        margin:0 0 4px;
    }
    div#news li
    {
        min-height:0;
        margin-bottom:25px;
    }
    div#events_slider div.text
    {
        width:70%;
        bottom:10px;
    }
    div#events_slider h3
    {
        padding:6px 12px;
        font-size:20px;
    }
    div#events_slider p
    {
        padding:5px 12px;
        font-size:13px;
    }
    ul#communities li
    {
        min-height:0;
        padding-bottom:15px;
    }
    ul#communities a.img_outer,
    div.img_outer_show
    {
        float:none;
        display:block;
        margin:0 auto 10px;
    }
    div#article_show a.image
    {
        float:none;
        display:block;
        margin:0 0 10px;
        padding:0;
    }
    div#article_index div.img_outer
    {
        float:none !important;
        margin:0 0 10px;
    }
    div#article_index div.img_outer a
    {
        width:auto;
        height:auto;
        aspect-ratio:316/145;
    }
    div#gallery_show table,
    div#gallery_index table
    {
        grid-template-columns:repeat(3,1fr);
    }
    div#gallery_cats ul
    {
        grid-template-columns:repeat(2,1fr);
    }
    div#application_form label
    {
        float:none;
        display:block;
        width:auto;
        margin:0 0 4px;
        text-align:left;
    }
    div#application_form input
    {
        float:none;
        width:100%;
        box-sizing:border-box;
    }
    form.darowizna .form-group
    {
        display:block;
        margin:0 0 10px;
    }
    form.darowizna label
    {
        display:block;
        width:auto !important;
    }
    form.darowizna .form-control
    {
        width:100% !important;
    }
    body div#cookies_alert
    {
        left:10px;
        right:10px;
        bottom:10px;
        max-width:none;
    }
}

/* Waski telefon: tytul slidera pod obrazem, nie na nim */
@media (max-width:575.98px)
{
    div#events_list article
    {
        gap:14px;
    }
    div#events_list a.tile
    {
        flex-basis:68px;
    }
    div#events_list a.more
    {
        display:none;
    }
    div#events_slider
    {
        aspect-ratio:auto;
        height:calc(46vw + 66px);
    }
    div#events_slider div.img_outer
    {
        height:46vw;
    }
    div#events_slider div.text
    {
        bottom:0;
        width:100%;
        min-height:66px;
        background:url('../images/blue_bg.png');
    }
    div#events_slider ul.bullets
    {
        top:calc(46vw - 26px);
        bottom:auto;
    }
    div#gallery_show table,
    div#gallery_index table
    {
        grid-template-columns:repeat(2,1fr);
    }
}

/* Przegladarki bez aspect-ratio (Safari ponizej 15): wysokosc wynika tylko z tej wlasciwosci. */
@supports not (aspect-ratio:1/1)
{
    @media (min-width:576px)
    {
        div#events_slider
        {
            height:46vw;
            max-height:525px;
        }
    }
    div#news a.image,
    div#article_index div.img_outer a
    {
        height:145px;
    }
    ul#newest_galleries li a.image
    {
        height:131px;
    }
    div#gallery_cats li > a:first-child
    {
        height:155px;
    }
    div#gallery_show td a,
    div#gallery_index td a
    {
        height:190px;
    }
}