/* =========================================
   GOLDEN CLUB PHOTO GALLERY
========================================= */


.golden-gallery {

    width:100%;
    max-width:1100px;

    margin:35px auto;

    --golden-columns:3;

    box-sizing:border-box;

}


/* Four columns gallery */

.gallery-four {

    --golden-columns:4;

}



/* =========================================
   GALLERY GRID
========================================= */


.golden-gallery-grid {

    display:grid;

    grid-template-columns:repeat(
        var(--golden-columns),
        minmax(0, 1fr)
    );

    gap:15px;

}



/* =========================================
   PHOTO ITEM
========================================= */


.golden-gallery-item {

    display:flex;

    align-items:center;

    justify-content:center;


    position:relative;

    overflow:hidden;


    min-height:180px;

    padding:8px;


    box-sizing:border-box;


    border-radius:8px;


    background:#f7f7f7;


    cursor:pointer;

    text-decoration:none;

}

.golden-gallery-last-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/* =========================================
   PHOTO IMAGE
========================================= */

.golden-gallery-item img {

    display: block;

    width: auto;
    height: auto;

    max-width: 300px;
    max-height: 300px;

    object-fit: contain;

    transition: transform .35s ease;
}


.golden-gallery-item:hover img {
    transform: scale(1.04);
}


/* =========================================
   HOVER EFFECT
========================================= */


.golden-gallery-item::after {

    content:"";


    position:absolute;


    left:0;

    right:0;

    top:0;

    bottom:0;


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


    transition:background .35s ease;


    pointer-events:none;

}



.golden-gallery-item:hover::after {

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

}





/* =========================================
   TABLET
========================================= */


@media(max-width:900px) {


    .golden-gallery,
    .gallery-four {

        --golden-columns:2;

    }


    .golden-gallery-grid {

        gap:12px;

    }


    .golden-gallery-item {

        min-height:180px;

    }


    .golden-gallery-item img {

        max-height:240px;

    }


}



/* =========================================
   MOBILE
========================================= */


@media(max-width:600px) {


    .golden-gallery {

        margin:25px auto;

    }


    .golden-gallery-grid {

        gap:8px;

    }


    .golden-gallery-item {

        min-height:140px;

        padding:5px;

    }


    .golden-gallery-item img {

        max-height:180px;

    }


}



/* =========================================
   SMALL MOBILE
========================================= */


@media(max-width:400px) {


    .golden-gallery,
    .gallery-four {

        --golden-columns:1;

    }


    .golden-gallery-grid {

        gap:10px;

    }


    .golden-gallery-item {

        min-height:0;

    }


    .golden-gallery-item img {

        max-height:300px;

    }


}






/* =========================================
   GOLDEN CLUB LIGHTBOX
========================================= */


#goldenLightbox {


    position:fixed;


    left:0;

    top:0;


    width:100%;

    height:100%;


    z-index:10000;


    display:flex;


    align-items:center;

    justify-content:center;



    opacity:0;

    visibility:hidden;



    transition:

        opacity .8s ease,

        visibility .8s ease;

}




#goldenLightbox.active {


    opacity:1;

    visibility:visible;

}





/* =========================================
   DARK OVERLAY
========================================= */


#goldenLightbox-overlay {


    position:absolute;


    left:0;

    top:0;


    width:100%;

    height:100%;


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



    opacity:0;


    transition:opacity .8s ease;

}



#goldenLightbox.active #goldenLightbox-overlay {


    opacity:1;

}




/* =========================================
   LIGHTBOX BOX
========================================= */


#goldenLightbox-box {


    position:relative;


    z-index:2;



    max-width:94vw;

    max-height:94vh;



    text-align:center;



    opacity:0;



    transform:scale(.97);



    transition:


        opacity .8s ease,

        transform .8s ease;


}




#goldenLightbox.active #goldenLightbox-box {


    opacity:1;


    transform:scale(1);


}




/* =========================================
   LARGE PHOTO
========================================= */


#goldenLightbox-photo {


    display:block;


    width:auto;

    height:auto;


    max-width:90vw;


    max-height:78vh;


    margin:0 auto;


    object-fit:contain;


}




/* =========================================
   CAPTION
========================================= */


#goldenLightbox-caption {


    margin-top:10px;


    color:#fff;


    font-family:Georgia,"Times New Roman",serif;


    font-size:16px;


    line-height:1.4;


}




/* =========================================
   COUNTER AND CLOSE
========================================= */


#goldenLightbox-bottom {


    display:flex;


    align-items:center;


    justify-content:center;


    gap:12px;


    margin-top:10px;


}




#goldenLightbox-counter {


    color:#fff;


    font-family:Arial,Helvetica,sans-serif;


    font-size:13px;


}




.golden-lightbox-button {


    min-width:70px;


    height:34px;


    padding:0 16px;



    border:none;


    border-radius:18px;



    background:#b8860b;


    color:#fff;



    font-family:Georgia,"Times New Roman",serif;


    font-size:13px;



    cursor:pointer;

}




.golden-lightbox-button:hover {


    background:#8b6508;


}




/* =========================================
   ARROWS
========================================= */


.golden-lightbox-arrow {


    position:fixed;


    top:50%;


    transform:translateY(-50%);



    z-index:3;



    width:46px;


    height:46px;



    border:none;


    border-radius:50%;



    background:rgba(184,134,11,.92);


    color:#fff;



    font-size:34px;


    line-height:42px;



    cursor:pointer;


}



.golden-lightbox-arrow:hover {


    background:#8b6508;


}




#goldenLightbox-prev {


    left:20px;


}



#goldenLightbox-next {


    right:20px;


}




/* =========================================
   LIGHTBOX MOBILE
========================================= */


@media(max-width:700px) {


    #goldenLightbox-photo {


        max-width:88vw;


        max-height:72vh;


    }



    .golden-lightbox-arrow {


        width:40px;


        height:40px;


        font-size:28px;


    }


    #goldenLightbox-prev {

        left:8px;

    }


    #goldenLightbox-next {

        right:8px;

    }


}




@media(max-width:450px) {


    #goldenLightbox-photo {


        max-width:86vw;


        max-height:65vh;


    }



    #goldenLightbox-caption {


        max-width:86vw;


        margin:8px auto 0;


        font-size:14px;


    }



    .golden-lightbox-arrow {


        width:36px;


        height:36px;


        font-size:25px;


    }


}