/**
 * YouTube Facade Styles
 * Lightweight styles for the YouTube lazy load facade
 */

.youtube-facade {
    position: relative;
    cursor: pointer;
    background-color: #000;
    aspect-ratio: 16 / 9;
    display: block;
}

/* Ensure the facade container is focusable */
.youtube-facade:focus {
    outline: 2px solid #ff0000;
    outline-offset: 2px;
}

/* Play button - standard YouTube style */
.youtube-facade-play-button {
    cursor: pointer;
    z-index: 10;
    background: none;
    border: none;
    padding: 0;
}

.youtube-facade-play-button svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s ease;
}

/* Hover: pill turns red */
.youtube-facade:hover .youtube-facade-play-button svg path:first-child,
.youtube-facade-play-button:hover svg path:first-child {
    fill: #f00;
    fill-opacity: 1;
}

.youtube-facade-play-button:focus {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* Loading state (optional - shows while iframe loads) */
.youtube-loaded {
    position: relative;
}

/* Fade-in animation for iframe */
.youtube-loaded iframe {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .youtube-facade-play-button svg {
        width: 56px;
        height: 40px;
    }
}