/* Custom Styles for Modern Gallery */

/* Header Styling */
.gallery-main-title {
    color: #343a40;
    font-weight: 700;
}

/* Gallery Item Wrapper (The "Card") */
.gallery-item-wrapper {
    position: relative;
    height: 250px; /* Standardize image height for a clean grid */
    object-fit: fill;
    background-color: #f8f9fa; /* Light background for safety */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    display: block; /* Ensure it behaves like a container */
}

/* Image Styling */
.gallery-img {
    width: 100%;
    height: 300px;
    object-fit: cover; /* Ensures images cover the area without stretching */
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: brightness(0.95); /* Slight dimming for depth */
}

/* Overlay Styling (Hidden by default) */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 123, 255, 0.5); /* Semi-transparent primary blue overlay */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10; /* Ensure overlay is on top */
}

.gallery-overlay i {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Hover Effects */
.gallery-item-wrapper:hover {
    transform: translateY(-3px); /* Subtle lift effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.gallery-item-wrapper:hover .gallery-img {
    transform: scale(1.05); /* Gentle zoom */
    filter: brightness(0.7); /* Further dimming to emphasize the overlay */
}

.gallery-item-wrapper:hover .gallery-overlay {
    opacity: 1; /* Make the overlay visible */
}

.gallery-item-wrapper:hover .gallery-overlay i {
    opacity: 1; /* Show the zoom icon */
}

/* To remove the link underline */
.gallery-link-wrapper {
    text-decoration: none !important;
    display: block;
}