/*
 * EMBED YOUTUBE: Estilos específicos para YouTube
 * 
 * Phase B3: Eliminar dependencias WPPM
 * 
 * Purpose: Estilos específicos para embeds de YouTube
 * Extiende embed-base.css
 * 
 * Clases soportadas:
 * - .informe-embed.informe-embed--youtube (nuevo, shortcode informe_embed_youtube)
 * - .informe-embed.informe-embed--youtube-short (shorts verticales)
 * - .embed-youtube (legacy, para contenido guardado con markup antiguo)
 */

/* ==========================================================
   NUEVO SISTEMA: .informe-embed--youtube
   ========================================================== */

.informe-embed--youtube {
    /* Hereda position: relative de .informe-embed */
    aspect-ratio: 16 / 9;
}

.informe-embed--youtube-short {
    aspect-ratio: 9 / 16;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================
   COMPATIBILIDAD LEGACY: .embed-youtube (inline styles)
   Para contenido guardado con el markup antiguo
   ========================================================== */

.embed-youtube {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: var(--space-6, 1.5rem) 0;
    overflow: hidden;
    /* El padding-bottom inline (56.25%) provee el aspect ratio */
}

.embed-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Neutralizar wrappers legacy de WPPM */
.wppm-post-wrap .informe-embed--youtube,
.wppm-post-wrap .informe-embed--youtube-short {
    margin: var(--space-6) 0;
}

.wppm-post-wrap .embed-wrap:has(.informe-embed--youtube),
.wppm-post-wrap .embed-wrap:has(.informe-embed--youtube-short) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: static !important;
    height: auto !important;
    aspect-ratio: unset !important;
}

/* Fallback para navegadores sin :has() */
.wppm-post-wrap .embed-wrap[data-ratio="16:9"]:has(.informe-embed--youtube),
.wppm-post-wrap .embed-wrap[data-ratio="9:16"]:has(.informe-embed--youtube-short) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: static !important;
    height: auto !important;
}

/* Responsive */
@media (max-width: 768px) {
    .informe-embed--youtube-short {
        max-width: 100%;
    }
}