/* =========================
   RESPONSIVE PATCH (legacy table layout)
   ========================= */

img { max-width: 100%; height: auto; }

/* Ne dozvoli da bilo šta gura stranu u širinu */
body, html { max-width: 100%; overflow-x: hidden; }

/* Glavni wrapper */
#site-layout { width: 98%; max-width: 1000px; }
#col-main { min-width: 0 !important; } /* ovo je ključno zbog inline min-width:600px */

/* Header/logo slike da ne “beže” */
@media (max-width: 900px){
    /* centriraj sadržaj i smanji padding gde treba */
    table[style*="max-width:1000px"] { width: 100% !important; }
}

/* 3 kolone -> stack */
@media (max-width: 900px){
    #site-layout,
    #site-layout > tbody,
    #site-layout > tbody > tr,
    #site-layout > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    #col-left, #col-main, #col-right{
        box-sizing: border-box;
    }

    #col-left, #col-right{
        padding-left: 10px;
        padding-right: 10px;
    }

    #col-main{
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Gornji meni + search da ne lomi */
@media (max-width: 700px){
    /* tabela menija (ona max-width 1000) */
    #list-nav{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 6px 0;
    }

    #list-nav li{
        float: none !important;
        display: inline-block;
    }

    /* search input da bude širi */
    .search_field{
        width: 100% !important;
        max-width: 220px;
    }
}

/* HOME: Slideshow - linkovi/sličice da budu fluidni */
@media (max-width: 900px){
    #slideshow a { display: block; }
    #slideshow img { width: 100%; height: auto; }
}

/* HOME: "Izdvajamo iz ponude" (4 kolone) -> 2 kolone -> 1 kolona */
@media (max-width: 900px){
    /* uhvati TD-ove koji nose kartice */
    td.news_naslov{
        width: 50% !important;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }

    /* table u td da bude 100% */
    .izdvajamo_table{ width: 100% !important; }
}

@media (max-width: 520px){
    td.news_naslov{
        width: 100% !important;
        display: block;
    }
}

/* Login forma inputi na mobilnom */
@media (max-width: 520px){
    .login_field{
        width: 90% !important;
        max-width: 280px;
    }
}