/* ==========================================
GALLERY PAGE
========================================== */

.gallery-page{
    padding:100px 20px 80px;
    background:#f8f9fb;
}

.page-title{
    text-align:center;
    font-size:36px;
    color:#1E2D8F;
    margin-bottom:40px;
}

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

.gallery-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

@media(max-width:768px){

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .page-title{
        font-size:28px;
        margin-bottom:25px;
    }

}

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

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:10px;
    cursor:pointer;
    background:#fff;
}

.gallery-item img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}

@media(max-width:768px){

    .gallery-item img{
        height:150px;
    }

}

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

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

.gallery-overlay{
    position:absolute;
    inset:0;

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

    display:flex;
    justify-content:center;
    align-items:center;

    padding:15px;
    text-align:center;

    opacity:0;
    transition:.3s;

    pointer-events: none;  /* ← add this line */
}

.gallery-overlay p{
    color:#fff;
    font-size:15px;
    line-height:1.5;
    margin:0;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

.gallery-item.active .gallery-overlay{
    opacity:1;
}

/* ==========================================
POPUP
========================================== */

.gallery-popup{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

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

    z-index:99999;

}

.gallery-popup.active{

    display:flex;

}

.gallery-popup img{

    max-width:90%;
    max-height:90%;

    cursor:grab;

    user-select:none;
    -webkit-user-drag:none;

    transition:transform .15s;

}

/* ==========================================
CLOSE BUTTON
========================================== */

.close-btn{

    position:absolute;

    top:20px;
    right:30px;

    color:#fff;

    font-size:42px;

    cursor:pointer;

    z-index:100000;

}

.close-btn:hover{

    color:#F17C2E;

}