/*
 * LAYOUT: Containers - Single Source of Truth
 * 
 * Este archivo define TODOS los contenedores base del sistema.
 * NO redefinir .informe-container en otros archivos.
 * Solo se permiten ajustes contextuales documentados (ej: .page-single .informe-container)
 * 
 * Phase PR4: Creado como única fuente de verdad para .informe-container
 * Compatible con: OLS, Cloudflare, LiteSpeed Cache, Redis
 */

/* ==========================================================
   CONTENEDOR PRINCIPAL (.informe-container)
   
   Usar en: Home, Archives, Single, y cualquier página
   Ancho máximo: 1320px
   Padding responsive: 20px desktop, 16px mobile
========================================================== */

.informe-container {
    max-width: var(--max-width-container); /* 1320px */
    margin: 0 auto;
    padding-left: var(--container-padding-desktop); /* 20px */
    padding-right: var(--container-padding-desktop); /* 20px */
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .informe-container {
        padding-left: var(--container-padding-mobile); /* 16px */
        padding-right: var(--container-padding-mobile); /* 16px */
    }
}

/* ==========================================================
   CONTENEDORES ESPECIALIZADOS
========================================================== */

/* Contenedor de contenido (Single article) */
.informe-single-container {
    max-width: var(--max-width-single); /* 900px */
    margin: var(--space-8) auto var(--space-16);
    padding: 0 var(--container-padding-desktop);
}

@media (max-width: 768px) {
    .informe-single-container {
        padding: 0 var(--container-padding-mobile);
    }
}

/* Contenedor de contenido editorial (artículo) */
.informe-single-article {
    max-width: var(--max-width-content); /* 825px */
    margin: 0;
}

/* Wrapper Single (página completa) */
.informe-single-wrapper {
    width: 100%;
    max-width: var(--max-width-container); /* 1320px */
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}

@media (max-width: 768px) {
    .informe-single-wrapper {
        padding: 0 var(--container-padding-mobile);
        overflow-x: hidden; /* Prevenir scroll horizontal con elementos full-bleed (hero, videos) */
    }
}

/* Wrapper Archive */
.informe-archive-wrapper {
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}

@media (max-width: 768px) {
    .informe-archive-wrapper {
        padding: 0 var(--container-padding-mobile);
    }
}

/* Wrapper Page */
.informe-page-wrapper {
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}

@media (max-width: 768px) {
    .informe-page-wrapper {
        padding: 0 var(--container-padding-mobile);
    }
}

/* ==========================================================
   UTILITY: Full-Bleed en Mobile (PR4b)
   
   Patrón reutilizable para elementos que deben ocupar
   el ancho completo de la pantalla en mobile, escapando
   del padding del contenedor padre.
   
   Uso típico: Imágenes hero, videos destacados, sliders
   
   Solo activo en mobile (≤768px)
========================================================== */

@media (max-width: 768px) {
    /**
     * FULL-BLEED MOBILE
     * 
     * Hace que un elemento dentro de un contenedor con padding
     * se extienda hasta los bordes de la pantalla.
     * 
     * Funcionamiento:
     * - Margin negativo cancela el padding del contenedor (16px)
     * - Width compensa el espacio quitado por los margins negativos
     * - Previene overflow horizontal con max-width controlado
     * 
     * Aplicar a: wrapper del elemento, no al elemento mismo
     */
    .informe-bleed-mobile {
        margin-left: calc(-1 * var(--container-padding-mobile)); /* -16px */
        margin-right: calc(-1 * var(--container-padding-mobile)); /* -16px */
        width: calc(100% + (2 * var(--container-padding-mobile))); /* 100% + 32px */
        max-width: calc(100% + (2 * var(--container-padding-mobile))); /* Prevenir overflow */
    }
}