/* Global Styles */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap');

/* Director Grid UX */
.director-grid .video-item,
.featured-video {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
    will-change: transform;
}

.director-grid .video-item:hover,
.featured-video:hover {
    transform: scale(1.02);
    z-index: 20;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ensure iframe doesn't capture mouse events to allow the div hover to work */
/* BUT we need click events? No, the script targets the wrapper. */
.director-grid .video-item iframe,
.featured-video iframe {
    pointer-events: none;
}