/*!
 * Image Gallery Enhancements
 * - Lazy load fade-in animation
 * - Load More button for long image galleries
 * - Better image loading experience
 */

/* Fade-in animation for lazy-loaded images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Placeholder background while loading */
img[loading="lazy"]:not(.loaded) {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Load More Button */
.load-more-container {
    text-align: center;
    margin: 30px 0;
    padding: 20px;
}

.load-more-btn {
    display: inline-block;
    padding: 12px 30px;
    font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color: #fed136;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.load-more-btn:hover,
.load-more-btn:focus {
    background-color: #fec503;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.load-more-btn:active {
    transform: translateY(0);
}

.load-more-btn.hidden {
    display: none;
}

/* Hide images after the threshold when load-more is active */
.gallery-item.hidden {
    display: none;
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Image grid improvements */
.row .col-md-4,
.row .col-sm-6 {
    margin-bottom: 15px;
}

.row .col-md-4 img,
.row .col-sm-6 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .load-more-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}