.gallery-block {
    background: rgba(216, 216, 216, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* ADDED: iOS Safari prefix */
    background-clip: padding-box;
    border-radius: 10px;
    padding: 30px 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: white;
    max-height: 500px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* ADDED: smoother iOS momentum scroll */
    overscroll-behavior: contain; /* ADDED: keep scroll from rubber-banding into page */

    box-shadow: 0 20px 40px rgba(0,0,0,0.45);
    transform: translateZ(0);
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
    gap: 10px;
}

.thumb {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.45);
    transform: translateZ(0);
}

    .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

    .thumb:hover img {
        transform: scale(1.1);
    }

/* Lightbox overlay */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh; /* CHANGED: was 100vh; dvh fixes iOS browser chrome */
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); /* ADDED: iOS Safari prefix */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* ADDED: safe-area padding for iOS notch/home indicator */
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90dvh; /* CHANGED: use dynamic viewport height for consistency */
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    animation: fadeIn .3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fallback for browsers without dvh support */
@supports not (height: 100dvh) {
    .lightbox {
        height: 100vh; /* ADDED: fallback */
    }

    .lightbox-image {
        max-height: 90vh; /* ADDED: fallback */
    }
}