/* ===========================================
   Gallery Page
=========================================== */

.gallery-page {

    padding: 120px 0;

    background: linear-gradient(180deg, #f8fafc, #ffffff);

}

.gallery-page .container {

    width: min(1400px, 92%);

    margin: auto;

}

.page-title {

    text-align: center;

    margin-bottom: 60px;

}

.page-title h1 {

    font-size: 3rem;

    color: #111827;

    margin-bottom: 18px;

    font-weight: 800;

}

.page-title p {

    color: #6b7280;

    font-size: 1.05rem;

}

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 30px;

}

.gallery-item {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 22px;

    background: #fff;

    box-shadow: 0 15px 40px rgba(15, 23, 42, .08);

    transition: .35s;

}

.gallery-item:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(15, 23, 42, .16);

}

.gallery-item img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    transition: .5s;

}

.gallery-item:hover img {

    transform: scale(1.08);

}

.gallery-item::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top,

            rgba(15, 23, 42, .85),

            rgba(15, 23, 42, .15),

            transparent);

    opacity: 0;

    transition: .35s;

}

.gallery-item:hover::before {

    opacity: 1;

}

.overlay {

    position: absolute;

    right: 0;

    left: 0;

    bottom: 0;

    padding: 25px;

    color: #fff;

    transform: translateY(25px);

    opacity: 0;

    transition: .35s;

    z-index: 2;

}

.gallery-item:hover .overlay {

    transform: translateY(0);

    opacity: 1;

}

.overlay h3 {

    margin: 0;

    font-size: 1.2rem;

    font-weight: 700;

}

.empty-gallery {

    text-align: center;

    padding: 80px 20px;

    background: #fff;

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);

}

.empty-gallery h3 {

    color: #94a3b8;

    font-weight: 500;

}

@media(max-width:992px) {

    .gallery-grid {

        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

    }

}

@media(max-width:768px) {

    .gallery-page {

        padding: 90px 0;

    }

    .page-title h1 {

        font-size: 2.3rem;

    }

    .gallery-grid {

        grid-template-columns: 1fr;

    }

    .gallery-item img {

        height: 240px;

    }

}