/* assets/css/box.css v.2.3.4 PERUNEWS */
/* Inicio del Código Integrado v.2.3.4 */

/* 1. EL ANCLA: CONTENEDOR CERO (#cntn-0) */
#cntn-0 {
    display: block;
    width: 96%;           
    max-width: 1440px;    
    margin: 0 auto;       
    padding: 0 10px;
    box-sizing: border-box;
}

/* 2. NIVELES PRINCIPALES (3 COLUMNAS) */
.section-level-1, 
.section-level-2, 
.section-level-3 {
    display: flex;
    flex-direction: column; 
    width: 100%;
    margin-bottom: 40px;
    gap: 25px;
}

@media (min-width: 768px) {
    .section-level-1, 
    .section-level-2, 
    .section-level-3 {
        flex-direction: row !important;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* Columnas estándar */
    .box-left   { flex: 0 1 31%; max-width: 380px; }
    .box-center { flex: 0 1 38%; max-width: 466px; }
    .box-right  { flex: 0 1 31%; max-width: 380px; }
}

/* 3. CORRECCIÓN DEFINITIVA: SIMETRÍA 47.4% EN 5-2 Y 5-3 */
/* Forzamos que estos IDs ignoren el ancho restringido y se expandan como ROW */
@media (min-width: 768px) {
    #box-cntn-left-5-2, 
    #box-cntn-left-5-3 {
        display: flex !important;
        flex-direction: row !important; /* Forzado horizontal solicitado */
        flex-wrap: nowrap !important;   /* Prohibido bajar a la siguiente línea */
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;     /* Rompemos el límite de 380px para permitir el ROW */
        gap: 20px;
    }

    /* Las dos noticias internas al 47.4% exacto */
    #box-cntn-left-5-2 .grid5-item, 
    #box-cntn-left-5-3 .grid5-item {
        flex: 0 0 47.4% !important; 
        max-width: 47.4% !important;
        display: block;
    }

    /* Aseguramos que la imagen sea el 100% de ese 47.4% */
    .grid5-item img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;            /* Proporción limpia para simetría */
        object-fit: cover;
        border-radius: 4px;
    }
}

/* 4. ESTILOS EDITORIALES */
.level1-post {
    display: block;
    width: 100%;
    margin-bottom: 22px;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 15px;
}

.level1-title, .grid5-title {
    font-family: "Merriweather", serif;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a1a;
    margin-top: 10px;
}

/* Miniaturas laterales (Box 1 y 3 comunes) */
.thumb-left, .thumb-right {
    width: 42%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 4px;
}
.thumb-left  { float: left; margin-right: 14px; }
.thumb-right { float: right; margin-left: 14px; }

/* 5. RESPONSIVIDAD MÓVIL */
@media (max-width: 767px) {
    .box-left, .box-center, .box-right,
    #box-cntn-left-5-2 .grid5-item, 
    #box-cntn-left-5-3 .grid5-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Fin del Código Integrado v.2.3.4 */