/* ==========================================================
   GALLERY
   Hardiyanto Theme v1.1
========================================================== */

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

.wp-block-gallery,
.blocks-gallery-grid{

    display:grid !important;

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

    gap:30px;

    margin:50px 0;

    padding:0;

}

/* ==========================================================
   CARD
========================================================== */

.wp-block-image,
.blocks-gallery-item{

    margin:0 !important;

    overflow:hidden;

    border-radius:14px;

    background:#ffffff;

    border:1px solid #eceff3;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

    transition:all .30s ease;

}

.wp-block-image:hover,
.blocks-gallery-item:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 38px rgba(0,0,0,.10);

}

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

.wp-block-image img,
.blocks-gallery-item img{

    display:block;

    width:100%;

    height:240px;

    object-fit:cover;

    transition:transform .35s ease;

}

.wp-block-image:hover img,
.blocks-gallery-item:hover img{

    transform:scale(1.03);

}

/* ==========================================================
   LINK
========================================================== */

.wp-block-image a{

    display:block;

    overflow:hidden;

}

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

.wp-element-caption,
.blocks-gallery-item figcaption{

    margin:0;

    padding:16px 18px;

    background:#ffffff;

    border-top:1px solid #f2f2f2;

    color:var(--text);

    font-size:15px;

    line-height:1.7;

    text-align:left;

    font-style:normal;

}

/* ==========================================================
   TITLE
========================================================== */

.gallery-title{

    margin-bottom:40px;

    text-align:center;

    font-size:42px;

    font-weight:800;

}

/* ==========================================================
   PAGE TITLE
========================================================== */

.page-template-page-gallery .entry-title{

    text-align:center;

    margin-bottom:50px;

}

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

@media (max-width:991px){

    .wp-block-gallery,
    .blocks-gallery-grid{

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

        gap:24px;

    }

}

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

@media (max-width:640px){

    .wp-block-gallery,
    .blocks-gallery-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .wp-block-image img,
    .blocks-gallery-item img{

        height:220px;

    }

    .wp-element-caption,
    .blocks-gallery-item figcaption{

        padding:14px 16px;

    }

}


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

.gallery-lightbox{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:99999;

    padding:40px;

}

.gallery-lightbox.open{

    display:flex;

}

.gallery-image{

    max-width:90%;

    max-height:80vh;

    border-radius:12px;

}

.gallery-caption{

    color:#fff;

    margin-top:24px;

    font-size:18px;

    text-align:center;

    max-width:900px;

}

.gallery-close,
.gallery-prev,
.gallery-next{

    position:absolute;

    background:none;

    border:none;

    color:#fff;

    cursor:pointer;

}

.gallery-close{

    top:25px;

    right:35px;

    font-size:44px;

}

.gallery-prev{

    left:30px;

    font-size:60px;

}

.gallery-next{

    right:30px;

    font-size:60px;

}