/* =============================================
   VIDEO GALLERY SECTION
   Edge-to-edge 3-column video layout
   ============================================= */

.video-gallery-section {
    width: 100%;
    background: #000;
    overflow: hidden;
    /* No padding, no margin — full bleed */
}

.video-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    /* Thick separation line */
    width: 100%;
}

/* ── Each video item ── */
.video-gallery-item {
    position: relative;
    overflow: hidden;
    height: 85vh;
    /* Increased height */
    min-height: 650px;
    max-height: 1000px;
    background: #111;
    cursor: pointer;
}

.video-gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Subtle zoom on hover */
.video-gallery-item:hover video {
    transform: scale(1.04);
}

/* ── Overlay on hover (Removed per user request) ── */
.video-gallery-item .video-overlay {
    display: none;
}

/* ── Dividers between items (handled by grid gap now) ── */
.video-gallery-item:not(:last-child) {
    /* Removed border to use grid gap instead */
}

/* ── Loading skeleton ── */
.video-gallery-skeleton {
    height: 80vh;
    min-height: 600px;
    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {

    .video-gallery-item,
    .video-gallery-skeleton {
        height: 60vh;
        min-height: 350px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .video-gallery-section {
        margin-top: -4rem;
        margin-bottom: -1rem;
    }

    .video-gallery-item,
    .video-gallery-skeleton {
        height: 30vh;
        min-height: 160px;
        max-height: 220px;
    }
}