/* Warstwa responsywna. Od 1004 px strona wyglada jak dotad, ponizej szkielet przechodzi na plynny. */
button#menu_toggle, div#container nav#menuMobile
{
    display:none;
}

@media (max-width:1003.98px)
{
    html
    {
        -webkit-text-size-adjust:100%;
    }
    div#container
    {
        width:auto;
        max-width:none;
        margin:0;
        padding:0 24px 10px;
        overflow:visible;
    }
    div.bottom
    {
        width:auto;
        margin:0;
    }

    /* Naglowek: zielony pas na cala szerokosc, w nim przycisk menu */
    div#container > div:first-child
    {
        position:sticky;
        top:0;
        z-index:10;
        margin:0 -24px 14px;
    }
    #container > div > h1
    {
        float:none;
        min-height:56px;
        box-sizing:border-box;
        margin:0;
        padding:15px 64px 15px 24px;
        font-size:26px;
        line-height:1.15;
    }
    html.menu_js button#menu_toggle
    {
        display:block;
        position:absolute;
        top:0;
        right:0;
        width:56px;
        height:100%;
        padding:0;
        border:0;
        background:none;
        color:white;
        font-size:24px;
        cursor:pointer;
    }
    button#menu_toggle:focus-visible
    {
        outline:2px solid white;
        outline-offset:-6px;
    }

    /* Jedno menu w szufladzie mmenu, jak na szablonach: gorne i boczne razem */
    html.menu_js div#top_menu, html.menu_js div#side_menu
    {
        display:none;
    }
    nav#menuMobile .Selected a
    {
        font-weight:bold;
    }
    button#menu_close
    {
        position:absolute;
        top:0;
        right:0;
        z-index:3;
        width:50px;
        height:50px;
        padding:0;
        border:0;
        background:none;
        color:#666;
        font-size:20px;
        cursor:pointer;
    }

    /* Baner z herbem */
    div.top
    {
        display:flex;
        flex-direction:row-reverse;
        gap:12px;
        margin-bottom:20px;
    }
    div.banners_top
    {
        float:none;
        flex:0 0 56%;
        width:auto;
        height:auto;
        aspect-ratio:528 / 320;
    }
    div.banners_top img, div.about_us div.banner img
    {
        width:100%;
        height:100%;
        object-fit:cover;
    }
    div.top div.left
    {
        flex:1 1 0;
        width:auto;
        height:auto;
        margin:0;
        padding-bottom:64px;
    }
    div.top div.left img
    {
        width:auto;
        max-width:66%;
        max-height:100%;
    }
    div.top div.left div
    {
        font-size:18px;
    }

    /* Tresc przed menu bocznym, reszta lewej kolumny pod nia */
    div.columns
    {
        display:flex;
        flex-direction:column;
    }
    div.columns div.right
    {
        width:auto;
    }
    div.right div.right_inner
    {
        margin:0;
    }
    div.columns div.left
    {
        order:1;
        float:none;
        width:auto;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:20px;
        margin-top:20px;
    }
    div#side_menu, ul#adverts_left
    {
        grid-column:1 / -1;
    }
    div.quote
    {
        margin:0;
    }
    ul#adverts_left
    {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:12px;
    }
    ul#adverts_left li
    {
        margin:0;
    }

    /* Strona glowna */
    div.about_us
    {
        display:flex;
        flex-direction:row-reverse;
        gap:6px;
    }
    div.about_us div.banner
    {
        flex:0 0 51%;
        width:auto;
        height:auto;
        min-height:190px;
    }
    div.about_us div.text
    {
        float:none;
        flex:1 1 0;
        width:auto;
        height:auto;
    }
    div#news ul
    {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:0 20px;
    }
    div#news li, div#news li:nth-child(odd)
    {
        float:none;
        display:grid;
        grid-template-columns:minmax(0, 1fr);
        grid-template-rows:auto 1fr;
        width:auto;
        margin:0 0 25px;
    }
    div#news a.thumbnail
    {
        grid-area:1 / 1;
        width:100%;
        height:auto;
        aspect-ratio:333 / 170;
    }
    div#news div.date
    {
        grid-area:1 / 1;
        align-self:end;
        justify-self:end;
        position:relative;
        top:0;
    }
    div#news div.inner
    {
        grid-area:2 / 1;
        min-height:0;
        padding-bottom:6px;
    }

    /* Miniatury: jquery.fit liczy piksele raz, przy starcie, wiec kadrowanie przejmuje object-fit */
    div#news a.thumbnail img, div#gallery_show img, div#gallery_index img, div#gallery_cats img, div#article_cats img, ul#newest_galleries img
    {
        width:100%!important;
        height:100%!important;
        margin:0!important;
        object-fit:cover;
    }

    /* Galerie i kategorie */
    div#gallery_show table, div#gallery_index table
    {
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:2px;
    }
    div#gallery_show tbody, div#gallery_show tr, div#gallery_index tbody, div#gallery_index tr
    {
        display:contents;
    }
    div#gallery_show td, div#gallery_index td
    {
        padding:0;
        border:0;
    }
    div#gallery_index td
    {
        padding-bottom:16px;
    }
    div#gallery_show table a, div#gallery_index table a
    {
        width:100%;
        height:auto;
        aspect-ratio:1 / 1;
    }
    div#gallery_cats ul, div#article_cats ul
    {
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:20px;
        width:auto;
    }
    div#gallery_cats li, div#article_cats li
    {
        float:none;
        width:auto;
        margin:0;
    }
    div#gallery_cats li > a:first-child, div#article_cats li > a:first-child
    {
        width:100%;
        height:auto;
        aspect-ratio:206 / 150;
    }
    div#gallery_cats p, div#article_cats p
    {
        height:auto;
    }

    /* Stopka */
    ul#newest_galleries
    {
        display:grid;
        grid-template-columns:repeat(5, minmax(0, 1fr));
        gap:10px;
    }
    ul#newest_galleries li
    {
        margin:0;
    }
    ul#newest_galleries li a
    {
        box-sizing:border-box;
        width:100%;
        height:auto;
        aspect-ratio:1 / 1;
    }
    div#strony_parafialne
    {
        width:100%;
    }

    /* Tresc z edytora */
    div.view img, div.content iframe, div.content video
    {
        max-width:100%;
    }
    div.view img
    {
        height:auto;
    }
    div.content img
    {
        box-sizing:border-box;
    }
    div.content
    {
        overflow-wrap:break-word;
    }
    div.content table, div#documents table
    {
        display:block;
        max-width:100%;
        overflow-x:auto;
    }
    div#documents td, div#documents th
    {
        padding:10px 14px;
    }
    div#article_show a.image
    {
        width:45%;
        box-sizing:border-box;
    }
    div#article_show a.image img
    {
        width:100%;
    }
}

@media (max-width:767.98px)
{
    body
    {
        line-height:1.6;
    }
    div#container
    {
        padding:0 16px 10px;
    }
    div#container > div:first-child
    {
        margin:0 -16px 12px;
    }
    #container > div > h1
    {
        padding:16px 60px 16px 16px;
        font-size:21px;
    }
    div.top
    {
        display:block;
    }
    div.banners_top
    {
        width:100%;
    }
    div.top div.left
    {
        display:flex;
        align-items:stretch;
        padding:0;
    }
    div.top div.left img
    {
        flex:none;
        width:58px;
        max-width:none;
        margin:6px 12px;
    }
    div.top div.left div
    {
        position:static;
        flex:1 1 0;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:17px;
    }
    div.columns div.left
    {
        grid-template-columns:minmax(0, 1fr);
    }
    #main_content h2
    {
        font-size:24px;
    }
    div.about_us
    {
        flex-direction:column-reverse;
    }
    div.about_us div.banner
    {
        flex:none;
        min-height:0;
        aspect-ratio:350 / 190;
    }
    div.about_us div.text
    {
        flex:none;
    }
    div.content p, div#article_index p
    {
        text-align:left;
    }
    div.content img
    {
        float:none!important;
        display:block;
        margin:0 auto 10px;
    }
    div#article_show a.image, div.content a.image
    {
        float:none;
        display:block;
        width:auto;
        margin:0 0 14px;
        padding:0;
        border:0;
    }
    div#article_show a.image img, div.content a.image img
    {
        width:100%;
        margin:0;
        padding:0;
        border:0;
    }
    div#article_show p.date
    {
        float:none;
        margin:0 0 4px;
    }
    ul.subpages
    {
        float:none;
        display:flex;
        flex-wrap:wrap;
        gap:6px;
        padding:0;
    }
    ul.subpages li
    {
        float:none;
        margin:0;
        padding:0;
        border:0;
    }
    ul.subpages a
    {
        display:block;
        padding:6px 12px;
        background:#e2f7c0;
        line-height:1.4;
    }
    ul.subpages li.chosen a, ul.subpages a:hover
    {
        background:#316F01;
        color:white;
    }
    ul#newest_galleries
    {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
    ul#newest_galleries li:nth-child(n+4)
    {
        display:none;
    }
    div#strony_parafialne
    {
        float:none;
        margin-top:14px;
    }
    a.more
    {
        padding:4px 14px;
    }
    input, select, textarea
    {
        max-width:100%;
        font-size:16px;
    }
    body div#cookies_alert
    {
        left:10px;
        right:10px;
        bottom:10px;
        max-width:none;
    }
}

@media (max-width:575.98px)
{
    div#news ul
    {
        grid-template-columns:minmax(0, 1fr);
    }
    div#gallery_show table, div#gallery_index table
    {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    div#gallery_cats ul, div#article_cats ul
    {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px;
    }
}