/**
 * DIX Theme - YouTube Player Styles
 *
 * Player YouTube responsive avec ratio 16:9
 *
 * @package Dix
 */

/* ==========================================================================
   YouTube Wrapper - Ratio 16:9 responsive
   ========================================================================== */

.dix-youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    margin: var(--spacing-6, 24px) 0;
    border-radius: var(--radius-lg, 12px);
    background-color: var(--color-bg-secondary, #f5f5f5);
}

.dix-youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-lg, 12px);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

[data-theme="dark"] .dix-youtube-wrapper {
    background-color: var(--color-bg-tertiary, #1a1a1a);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .dix-youtube-wrapper {
        margin: var(--spacing-4, 16px) 0;
        border-radius: var(--radius-md, 8px);
    }

    .dix-youtube-wrapper iframe {
        border-radius: var(--radius-md, 8px);
    }
}