/*=========================================================
ESBC 2.0
GALLERY.CSS
=========================================================*/

/*=========================================
GALLERY SECTION
=========================================*/

.gallery{

    background:#3f363a;

}

.gallery-grid{

    display:grid;

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

    gap:28px;

}

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

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-lg);

    background:var(--surface);

    box-shadow:var(--shadow-sm);

    cursor:pointer;

    transition:var(--transition);

    touch-action:manipulation;

}

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

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

.gallery-item img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    transition:transform .6s ease;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

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

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    background:linear-gradient(
        rgba(0,0,0,0),
        rgba(25,25,25,.85)
    );
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity .12s ease, transform .12s ease;
    will-change:opacity, transform;
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-within .gallery-overlay,
.gallery-item.is-active .gallery-overlay{

    opacity:1;
    pointer-events:auto;
    transform:translateY(0);

}

@media (hover: hover) and (pointer: fine){

    .gallery-overlay{
        opacity:0;
        pointer-events:none;
        transform:translateY(10px);
    }

    .gallery-item:hover .gallery-overlay,
    .gallery-item:focus-within .gallery-overlay,
    .gallery-item.is-active .gallery-overlay{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }

}

@media (hover: none) and (pointer: coarse){

    .gallery-overlay{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }

}

/*=========================================
TEXT
=========================================*/

.gallery-overlay h3{

    color:var(--heading);

    margin-bottom:8px;

    transform:translateY(20px);

    transition:.35s;

}

.gallery-overlay p{

    color:var(--text);

    transform:translateY(20px);

    transition:.45s;

}

.gallery-item:hover .gallery-overlay h3,

.gallery-item:hover .gallery-overlay p{

    transform:translateY(0);

}

/*=========================================
VIEW BUTTON
=========================================*/

.gallery-view{

    position:absolute;

    top:18px;

    right:18px;

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(12px);

    color:var(--white);

    opacity:0;

    transform:scale(.8);

    transition:opacity .18s ease, transform .18s ease, background-color .18s ease;

}

.gallery-item:hover .gallery-view,
.gallery-item:focus-within .gallery-view,
.gallery-item.is-active .gallery-view{

    opacity:1;

    transform:scale(1);

}

.gallery-view:hover{

    background:var(--accent);

    color:var(--bg-color);

}

/*=========================================
FILTERS
=========================================*/

.gallery-filter{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:55px;

}

.gallery-filter button{

    border:none;

    background:var(--surface);

    color:var(--heading);

    padding:14px 24px;

    border-radius:40px;

    cursor:pointer;

    transition:var(--transition);

    font-weight:500;

}

.gallery-filter button:hover,

.gallery-filter button.active{

    background:var(--accent);

    color:var(--bg-color);

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.gallery-grid{

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

}

}

@media(max-width:768px){

.gallery{

padding:80px 0;

}

.gallery-grid{

grid-template-columns:1fr;

gap:22px;

}

.gallery-overlay{

padding:22px;

}

.gallery-filter{

gap:10px;

}

.gallery-filter button{

padding:12px 18px;

font-size:.9rem;

}

}

@media(max-width:480px){

.gallery-overlay h3{

font-size:1.2rem;

}

.gallery-overlay p{

font-size:.95rem;

}

.gallery-view{

width:42px;

height:42px;

}

}