/* Custom styles for gallery images */
.gallery.style2 article .image {
    height: 30vh;
    width: 100%;
    overflow: hidden;
}

.gallery.style2 article .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Faster fade-in for gallery items */
.gallery.onscroll-fade-in article .image img {
    opacity: 0;
    transform: translateY(1rem);
}

.gallery.onscroll-fade-in.is-inactive article .image img {
    opacity: 0;
}

.gallery.onscroll-fade-in:not(.is-inactive) article .image img {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .gallery.style2 article .image {
        height: 20vh;
    }
}

/* Ensure lightbox images maintain aspect ratio */
.gallery.lightbox .modal .inner img {
    max-height: 90vh;
    width: auto;
    object-fit: contain;
}

/* Enhanced Calendar responsive styles */
#calendar iframe {
    max-width: 100%;
    width: 100%;
    min-height: 500px;
}

@media screen and (max-width: 980px) {
    #calendar iframe {
        height: 600px; /* Increased height for better mobile viewing */
    }
    
    /* Force larger text in calendar */
    #calendar {
        font-size: 16px !important;
    }
}

@media screen and (max-width: 736px) {
    #calendar iframe {
        height: 500px;
    }
}

/* Gallery mobile scrolling */
@media screen and (max-width: 736px) {
    .gallery {
        -webkit-overflow-scrolling: touch;
    }

    .gallery .inner {
        padding: 0;
        white-space: nowrap;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .gallery article {
        display: inline-block;
        vertical-align: top;
        width: 90%;
        margin-right: 1em;
        white-space: normal;
    }

    .gallery article:last-child {
        margin-right: 0;
    }
}

/* Ensure images maintain aspect ratio */
.gallery article .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}