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

/* Filters */
/* Masonry Grid */
.gl-masonry {
    column-count: 4;
    column-gap: var(--sp-sm);
}

.gl-item {
    break-inside: avoid;
    margin-bottom: var(--sp-sm);
}

/* Image Container & Overlay */
.gl-img-container {
    position: relative;
    width: 100%;
    border-radius: var(--rd-md);
    overflow: hidden;
    cursor: pointer;
    display: block;
}

.gl-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--tr-slow) ease;
}

.gl-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--tr-fast) ease;
}

.gl-overlay-icon {
    color: #fff;
    font-size: var(--fs-heading-xl);
    transform: scale(0.8);
    transition: transform var(--tr-fast) ease;
}

.gl-img-container:hover .gl-img {
    transform: scale(1.05);
}

.gl-img-container:hover .gl-overlay {
    opacity: 1;
}

.gl-img-container:hover .gl-overlay-icon {
    transform: scale(1);
}

/* Responsive Masonry */
@media (min-width: 1600px) {
    .gl-masonry {
        column-count: 5;
    }
}

@media (max-width: 1024px) {
    .gl-masonry {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .gl-masonry {
        column-count: 2;
    }
}


/* Page Wrapper */
.gl-page-wrapper {
    background-color: var(--clr-canvas);
    min-height: 100vh;
}
.gl-hero-section {
    background-color: var(--clr-surface-card);
    padding-bottom: var(--sp-section);
    text-align: center;
    padding-top: calc(var(--nav-height) + var(--sp-section));
}
.gl-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-gutter);
}
.gl-grid-section {
    padding-bottom: var(--sp-section);
}
.gl-empty-state {
    text-align: center;
    padding: var(--sp-xxl) 0;
}
.gl-empty-icon {
    font-size: var(--fs-display-md);
    margin-bottom: var(--sp-md);
    color: var(--clr-mute);
}
.gl-empty-text {
    color: var(--clr-mute);
}


.gl-mt-xl { margin-top: var(--sp-xl); }