.gallery-container { margin: 20px 0; }

.gallery-grid {column-count: 4; column-gap: 15px; }

.gallery-item.hidden { display: none;}

/* Ensure the container is the reference point for the overlay */
.gallery-item a {
    position: relative;
    display: block;
    overflow: hidden;
}

.gallery-item { 
    display: inline-block; 
    width: 100%; 
    margin-bottom: 10px; 
    break-inside: avoid; 
}

.gallery-item img { 
    width: 100%; 
    height: auto; 
    display: block;
    transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);
}

.gallery-item img:hover {transform: scale(1.02); cursor: zoom-in;}

/* The Overlay Container */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    padding: 20px 10px 10px 10px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Allows clicks to pass through to the link */
}

/* Show overlay on hover */
.gallery-item:hover .gallery-overlay {opacity: 1;}

/* Title Styling */
.overlay-title {
    font-size: var(--font-small);
    font-weight: 600;
    display: block;
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.3s ease-in-out;
    line-height: 1.15;
}

.gallery-item:hover .overlay-title {transform: translateY(0);}






/* Filters */
.gallery-filters { 
    margin-bottom: 25px; 
    display: flex; 
    gap: 10px; 
    justify-content: center; 
}

.filter-btn { 
    border: none; 
    font-size: var(--font-small);
    background: var(--grey-lightest); 
    padding: 8px 20px; 
    border-radius: 30px; 
    cursor: pointer; 
    transition: 0.3s; 
}

.filter-btn:hover { 
    background: var(--red-main); 
    color: #fff; 
}

.filter-btn.active { 
    background: var(--grey-main); 
    color: #fff; 
}

/* Mobile */

@media (max-width: 800px) { 
    .gallery-grid {column-count: 3; column-gap: 10px; grid-row-gap: 10px;} 
    .gallery-item {margin-bottom: 5px;}
}

@media (max-width: 500px) { 
    .gallery-grid {column-count: 2; column-gap: 5px; grid-row-gap: 5px;} 
    .gallery-item {margin-bottom: 0px;}
}