/*
|--------------------------------------------------------------------------
| MZG GALERIJA 2.0
|--------------------------------------------------------------------------
| Glavni stilovi galerije
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| OSNOVNO
|--------------------------------------------------------------------------
*/


.mzg_kontejner {

    width:100%;

    max-width:1400px;

    margin:0 auto;

}



.mzg_zaglavlje {

    text-align:center;

    margin-bottom:30px;

}



.mzg_zaglavlje h1 {

    margin:0;

    font-size:32px;

}



/*
|--------------------------------------------------------------------------
| ALBUM KONTEJNER
|--------------------------------------------------------------------------
*/


.mzg_album {

    background:#ffffff;

    padding:20px;

    margin-bottom:30px;

    border-radius:12px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.mzg_naslov_albuma {

    margin:0 0 20px 0;

    font-size:24px;

}




/*
|--------------------------------------------------------------------------
| GLAVNI GRID
|--------------------------------------------------------------------------
*/


.mzg_mreza {

    display:grid;

    grid-template-columns:

    repeat(
        auto-fill,
        minmax(180px,1fr)
    );


    gap:15px;

}




/*
|--------------------------------------------------------------------------
| KARTICA FOTOGRAFIJE
|--------------------------------------------------------------------------
*/


.mzg_kartica {

    overflow:hidden;

    cursor:pointer;

    background:#000000;

    border-radius:10px;

    transition:.3s ease;

}



.mzg_kartica:hover {

    transform:translateY(-4px);

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}



/*
|--------------------------------------------------------------------------
| SLIKA
|--------------------------------------------------------------------------
*/


.mzg_slika {

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

}



.mzg_slika img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.3s ease;

}



.mzg_kartica:hover img {

    transform:scale(1.06);

}



/*
|--------------------------------------------------------------------------
| NAZIV FOTOGRAFIJE
|--------------------------------------------------------------------------
*/


.mzg_naziv {

    padding:5px;

    text-align:center;

    font-size:9px;

    line-height:10px;

}





/*
|--------------------------------------------------------------------------
| UGRADJENA GALERIJA
|--------------------------------------------------------------------------
| Ne zavisi od stranice gde je ubačena
|--------------------------------------------------------------------------
*/


.mzg_ugradjena_mreza {


    display:grid !important;


    width:100%;


    gap:15px;


}



.mzg_ugradjena_kartica {


    width:100%;


    overflow:hidden;


    cursor:pointer;


    border-radius:10px;


    background:#fff;


    transition:.3s ease;


}



.mzg_ugradjena_kartica:hover {


    transform:translateY(-4px);


    box-shadow:0 8px 20px rgba(0,0,0,.15);


}



.mzg_ugradjena_slika {


    width:100%;


    aspect-ratio:1 / 1;


    overflow:hidden;


}



.mzg_ugradjena_slika img {


    width:100% !important;


    height:100% !important;


    object-fit:cover;


    display:block;


    transition:.3s ease;


}



.mzg_ugradjena_kartica:hover img {


    transform:scale(1.06);


}



.mzg_ugradjeni_naziv {


    padding:12px;


    text-align:center;


    font-size:14px;


}





/*
|--------------------------------------------------------------------------
| PORUKE
|--------------------------------------------------------------------------
*/


.mzg_poruka {


    padding:20px;


    text-align:center;


}





/*
|--------------------------------------------------------------------------
| LIGHTBOX
|--------------------------------------------------------------------------
*/


.mzg_lightbox {


    position:fixed;


    inset:0;


    display:none;


    align-items:center;


    justify-content:center;


    z-index:999999;


}



.mzg_lightbox.mzg_prikazan {


    display:flex;


}



.mzg_pozadina {


    position:absolute;


    inset:0;


    background:rgba(0,0,0,.92);


}




.mzg_sadrzaj {


    position:relative;


    z-index:2;


    display:flex;


    align-items:center;


    justify-content:center;


    max-width:95vw;


    max-height:95vh;


}




.mzg_okvir_slike img {


    max-width:90vw;


    max-height:85vh;


    object-fit:contain;


    border-radius:8px;


}





/*
|--------------------------------------------------------------------------
| ZATVARANJE
|--------------------------------------------------------------------------
*/


.mzg_dugme_zatvori {


    position:absolute;


    top:-50px;


    right:0;


    border:0;


    background:none;


    color:white;


    font-size:45px;


    cursor:pointer;


}





/*
|--------------------------------------------------------------------------
| STRELICE
|--------------------------------------------------------------------------
*/


.mzg_prethodna,

.mzg_sledeca {


    position:absolute;


    top:50%;


    transform:translateY(-50%);


    width:60px;


    height:80px;


    border:0;


    background:rgba(255,255,255,.15);


    color:white;


    font-size:55px;


    cursor:pointer;


    border-radius:8px;


}



.mzg_prethodna:hover,

.mzg_sledeca:hover {


    background:rgba(255,255,255,.35);


}



.mzg_prethodna {


    left:20px;


}



.mzg_sledeca {


    right:20px;


}




/*
|--------------------------------------------------------------------------
| INFO LIGHTBOX
|--------------------------------------------------------------------------
*/


.mzg_naziv_fotografije {


    position:absolute;


    bottom:25px;


    left:0;


    right:0;


    color:white;


    text-align:center;


    font-size:18px;


}



.mzg_brojac {


    color:#ddd;


    text-align:center;


}





/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/


@media(max-width:900px){


    .mzg_mreza {


        grid-template-columns:
        repeat(2,1fr);


    }



    .mzg_prethodna {


        left:10px;


    }



    .mzg_sledeca {


        right:10px;


    }


}



@media(max-width:500px){


    .mzg_mreza {


        grid-template-columns:
        repeat(1,1fr);


    }



    .mzg_okvir_slike img {


        max-width:95vw;


        max-height:75vh;


    }


}



/*
|--------------------------------------------------------------------------
| UGRAĐENA GALERIJA RESPONSIVE
|--------------------------------------------------------------------------
*/


@media(max-width:900px){


    .mzg_ugradjena_mreza {


        grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;


    }


}



@media(max-width:500px){


    .mzg_ugradjena_mreza {


        grid-template-columns:
        repeat(1,minmax(0,1fr)) !important;


    }


}