/**
 * Video Embeds - Responsive YouTube/Invidious Embed Styles
 * 
 * Provides responsive 16:9 aspect ratio for embedded videos
 */

/* Main wrapper - ensures max width and spacing */
.video-embed {
    max-width: 100%;
    margin: 1.5rem 0;
    width: 100%;
}

/* Responsive inner container - maintains 16:9 aspect ratio */
.video-embed-inner {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Iframe - fills the container */
.video-embed-inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}

/* Optional: Add some spacing on mobile */
@media (max-width: 768px) {
    .video-embed {
        margin: 1rem 0;
    }
    
    .video-embed-inner {
        border-radius: 4px;
    }
}

/* Optional: Center align if needed (uncomment if desired) */
/*
.video-embed {
    margin-left: auto;
    margin-right: auto;
}
*/