/*
 * EMBED BASE: Sistema nativo de embeds (Reemplazo de WPPM)
 * 
 * Phase B3: Eliminar dependencias WPPM
 * 
 * Purpose: Sistema base para embeds (YouTube, Twitter, etc.)
 * NO depende de WPPM ni plugins externos
 */

.informe-embed {
    position: relative;
    width: 100%;
    margin: var(--space-6) 0;
    overflow: hidden;
}

/* Aspect ratio 16:9 (videos normales) */
.informe-embed--16-9 {
    aspect-ratio: 16 / 9;
}

/* Aspect ratio 9:16 (Shorts verticales) */
.informe-embed--9-16 {
    aspect-ratio: 9 / 16;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Aspect ratio 4:3 (algunos videos) */
.informe-embed--4-3 {
    aspect-ratio: 4 / 3;
}

/* Aspect ratio 1:1 (cuadrados) */
.informe-embed--1-1 {
    aspect-ratio: 1 / 1;
}

/* Contenido del embed (iframe, video) */
.informe-embed iframe,
.informe-embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Embed sin aspect ratio (contenido flexible) */
.informe-embed--flexible {
    position: relative;
    height: auto;
    min-height: 200px;
}

.informe-embed--flexible iframe,
.informe-embed--flexible video {
    position: static;
    width: 100%;
    height: auto;
    min-height: 200px;
}

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

/* ==========================================================
   FACEBOOK & INSTAGRAM EMBEDS — Contención
   
   Problema: FB usa width=500 fijo, IG usa min-width:326px inline.
   Solución: forzar max-width:100% y contener overflow.
   
   Scoped a: .informe-single-content, .informe-article__content
========================================================== */

/* Contenedor genérico para cualquier iframe de redes sociales */
.informe-single-content iframe,
.informe-article__content iframe {
    max-width: 100%;
    display: block;
    border: 0;
}

/* --- FACEBOOK EMBEDS --- */
/* 
 * FB plugins traen width/height inline fijos.
 * NO forzar aspect-ratio ni height fijo para evitar cortes.
 * Solo limitar ancho para contener en mobile.
 */
.informe-single-content iframe[src*="facebook.com/plugins/"],
.informe-article__content iframe[src*="facebook.com/plugins/"],
.informe-single-content iframe[data-src*="facebook.com/plugins/"],
.informe-article__content iframe[data-src*="facebook.com/plugins/"] {
    display: block;
    max-width: 100%;
    margin: var(--space-6, 1.5rem) auto;
    /* No forzar width:100% ni height:auto para evitar cortes */
}

/* Wrapper .embed-facebook del shortcode */
.informe-single-content .embed-facebook,
.informe-article__content .embed-facebook {
    max-width: 100%;
    margin: var(--space-6, 1.5rem) auto;
    /* overflow: visible para evitar cortes */
    overflow-x: auto;
    overflow-y: visible;
}

.informe-single-content .embed-facebook iframe,
.informe-article__content .embed-facebook iframe {
    max-width: 100%;
}

/* --- INSTAGRAM EMBEDS --- */
/* 
 * IG embeds tienen inline styles con min-width:326px, max-width:540px
 * NO forzar height fijo. Dejar que IG determine la altura.
 */
.informe-single-content iframe[src*="instagram.com"],
.informe-article__content iframe[src*="instagram.com"],
.informe-single-content iframe[data-src*="instagram.com"],
.informe-article__content iframe[data-src*="instagram.com"] {
    display: block;
    max-width: 100%;
    margin: var(--space-6, 1.5rem) auto;
    /* Respetar altura del iframe original */
}

/* Wrapper .embed-instagram del shortcode */
.informe-single-content .embed-instagram,
.informe-article__content .embed-instagram {
    max-width: 100%;
    margin: var(--space-6, 1.5rem) auto;
    /* overflow: visible para evitar cortes */
    overflow-x: auto;
    overflow-y: visible;
}

.informe-single-content .embed-instagram iframe,
.informe-article__content .embed-instagram iframe {
    max-width: 100%;
}

/* --- MOBILE: Contención sin cortes --- */
@media (max-width: 768px) {
    /* FB: limitar ancho pero permitir scroll horizontal si es necesario */
    .informe-single-content iframe[src*="facebook.com/plugins/"],
    .informe-article__content iframe[src*="facebook.com/plugins/"],
    .informe-single-content iframe[data-src*="facebook.com/plugins/"],
    .informe-article__content iframe[data-src*="facebook.com/plugins/"] {
        max-width: 100%;
    }
    
    /* IG: neutralizar min-width inline (326px) pero no cortar */
    .informe-single-content iframe[src*="instagram.com"],
    .informe-article__content iframe[src*="instagram.com"],
    .informe-single-content iframe[data-src*="instagram.com"],
    .informe-article__content iframe[data-src*="instagram.com"] {
        min-width: 0;
        max-width: 100%;
    }
    
    /* Wrappers: scroll horizontal si es necesario, no cortar */
    .informe-single-content .embed-facebook,
    .informe-single-content .embed-instagram,
    .informe-article__content .embed-facebook,
    .informe-article__content .embed-instagram {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Contención de overflow en contenedores padre --- */
/* Usar overflow-x: auto en lugar de hidden para permitir scroll si necesario */
.informe-single-content > p:has(iframe),
.informe-single-content > figure:has(iframe),
.informe-single-content > div:has(iframe[src*="facebook.com"]),
.informe-single-content > div:has(iframe[src*="instagram.com"]) {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
}

/* --- Twitter blockquotes (ya manejado por sd-embeds-cleaner) --- */
.informe-single-content .twitter-tweet,
.informe-article__content .twitter-tweet {
    max-width: 100%;
    overflow: hidden;
}

/* ==========================================================
   AIRBAG: Iframes huérfanos (sin wrapper de aspect-ratio)
   
   Objetivo: Prevenir overflow en iframes YouTube/Vimeo que no
   tengan wrapper (.wp-block-embed, .informe-embed-wrapper, etc.)
   
   REGLA: Solo aplica si el iframe es hijo directo de:
   - <p> (embed pegado suelto)
   - <div> sin clases de wrapper conocidas
   - .informe-single-content directamente
   
   NO aplica si ya tiene wrapper (Gutenberg, nativo, legacy)
========================================================== */

/* Airbag para iframes YouTube/Vimeo huérfanos en el contenido */
.informe-single-content > p > iframe[src*="youtube.com"],
.informe-single-content > p > iframe[src*="youtube-nocookie.com"],
.informe-single-content > p > iframe[src*="vimeo.com"],
.informe-single-content > iframe[src*="youtube.com"],
.informe-single-content > iframe[src*="youtube-nocookie.com"],
.informe-single-content > iframe[src*="vimeo.com"],
.informe-article__content > p > iframe[src*="youtube.com"],
.informe-article__content > p > iframe[src*="youtube-nocookie.com"],
.informe-article__content > p > iframe[src*="vimeo.com"],
.informe-article__content > iframe[src*="youtube.com"],
.informe-article__content > iframe[src*="youtube-nocookie.com"],
.informe-article__content > iframe[src*="vimeo.com"] {
    display: block;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: var(--space-6, 1.5rem) 0;
    border: 0;
}

/* Neutralizar airbag si ya tiene wrapper padre conocido */
/* (Gutenberg, sistema nativo, legacy WPPM) */
.wp-block-embed iframe,
.wp-block-embed__wrapper iframe,
.informe-embed-wrapper iframe,
.informe-embed iframe,
.embed-wrap iframe,
.embed-youtube iframe,
.sd-embed {
    /* aspect-ratio controlado por el wrapper, no por airbag */
    aspect-ratio: unset;
}

/* Airbag para <video> huérfanos (Twitter videos, etc.) */
.informe-single-content > p > video,
.informe-single-content > video:not(.sd-embed),
.informe-article__content > p > video,
.informe-article__content > video:not(.sd-embed) {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: var(--space-6, 1.5rem) 0;
}