/*======================================
GALERIA
======================================*/

.gallery-hero{

    padding:110px 0 70px;

    text-align:center;

    background:#f6faf6;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin:70px 0;

}

.gallery-card{

    overflow:hidden;

    border-radius:20px;

    background:#fff;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.gallery-card:hover{

    transform:translateY(-8px);

}

.gallery-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;

}

.gallery-card:hover img{

    transform:scale(1.08);

}

.gallery-caption{

    padding:25px;

    text-align:center;

}

.gallery-caption h3{

    margin:0;

}
/*======================================
FILTRO
======================================*/

.gallery-filter{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

    margin:50px 0;

}

.gallery-filter button{

    border:none;

    padding:12px 22px;

    border-radius:40px;

    background:#f2f2f2;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.gallery-filter button:hover{

    background:#2e7d32;

    color:#fff;

}

.gallery-filter button.active{

    background:#2e7d32;

    color:#fff;

}
/*======================================
ANIMAÇÕES
======================================*/

.gallery-show{

    opacity:1;

    transform:scale(1);

    transition:.35s;

}

.gallery-hide{

    opacity:0;

    transform:scale(.95);

    transition:.35s;

}
/*======================================
LIGHTBOX
======================================*/

.gallery-lightbox{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:rgba(0,0,0,.92);

    z-index:99999;

}

.gallery-lightbox.active{

    display:flex;

}

.gallery-lightbox-image{

    display:block;

    max-width:92%;

    max-height:90vh;

    width:auto;

    height:auto;

    object-fit:contain;

    border-radius:12px;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.gallery-lightbox-close{

    position:absolute;

    top:20px;

    right:30px;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:36px;

    line-height:1;

    cursor:pointer;

    transition:.3s;

}

.gallery-lightbox-close:hover{

    background:rgba(255,255,255,.22);

}

body.gallery-lightbox-open{

    overflow:hidden;

}

.gallery-card img{

    cursor:zoom-in;

}


/*======================================
RESPONSIVO
======================================*/

@media(max-width:600px){

    .gallery-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin:50px 0;

    }

    .gallery-card img{

        height:230px;

    }

    .gallery-lightbox{

        padding:18px;

    }

    .gallery-lightbox-image{

        max-width:100%;

        max-height:82vh;

    }

    .gallery-lightbox-close{

        top:12px;

        right:12px;

    }

}
/* ==========================================================================
   GALERIA - AJUSTE DE ESPAÇAMENTO
   ========================================================================== */

/* Reduz o espaço após o cabeçalho da página */
.gallery-page .gallery-content {
    padding-top: 35px;
}

/* Aproxima os filtros do título */
.gallery-page .gallery-filters {
    margin-top: 0;
    margin-bottom: 35px;
}

/* Caso a seção tenha padding próprio */
.gallery-page section.gallery {
    padding-top: 35px;
}

/* Mobile */
@media (max-width: 768px) {

    .gallery-page .gallery-content,
    .gallery-page section.gallery {
        padding-top: 25px;
    }

    .gallery-page .gallery-filters {
        margin-bottom: 25px;
    }

}