/* =============================================
   EXPANDING GALLERY COMPONENT
   Hover to expand panels. Works with img & video.
   ============================================= */

.gallery-expand {
    display: flex;
    gap: 0.5rem;
    height: 450px;
    width: 100%;
}

.gallery-expand .panel {
    flex: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-expand .panel:hover {
    flex: 4;
}

.gallery-expand .panel img,
.gallery-expand .panel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s;
    filter: grayscale(0.6) brightness(0.7);
}

.gallery-expand .panel:hover img,
.gallery-expand .panel:hover video {
    transform: scale(1.05);
    filter: grayscale(0) brightness(1);
}

/* Optional overlay caption — revealed on hover */
.gallery-expand .panel .panel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s 0.15s, transform 0.4s 0.15s;
    z-index: 2;
}

.gallery-expand .panel:hover .panel-caption {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   MOBILE FALLBACK — vertical stack
   ============================================= */

@media (max-width: 768px) {
    .gallery-expand {
        flex-direction: column;
        height: auto;
        gap: 0.75rem;
    }

    .gallery-expand .panel {
        flex: none;
        height: 200px;
    }

    .gallery-expand .panel:hover {
        flex: none;
    }

    .gallery-expand .panel img,
    .gallery-expand .panel video {
        filter: grayscale(0) brightness(1);
    }

    .gallery-expand .panel .panel-caption {
        opacity: 1;
        transform: translateY(0);
    }
}