/* Contenedor principal Grid CSS */
.insor-grid-container {
    display: grid;
    /* Divide 4 partes: la mitad para el primer item (2fr) y dos cuartos (1fr 1fr) */
    grid-template-columns: 2fr 1fr 1fr; 
    grid-template-rows: auto auto; 
    gap: 15px;
    width: 100%;
    margin: 0 auto;
}

/* Elemento del Grid */
.insor-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #e6e6e6; /* Gris muy claro parecido a la imagen */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sutil sombra premium */
}

/* -- ASIGNACIÓN BENTO BOX -- */
/* 1. Item más reciente (El más grande, a la izquierda) */
.insor-grid-item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3; /* Altura completa (ambas filas) */
}

/* 2. Segundo Item (Arriba a la derecha, ancho) */
.insor-grid-item:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

/* 3. Tercer Item (Abajo a la derecha, a la izquierda) */
.insor-grid-item:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* 4. Cuarto Item (Abajo a la derecha, a la derecha) */
.insor-grid-item:nth-child(4) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

/* Configuración de las Alturas Mínimas */
.insor-grid-item:nth-child(1) .insor-grid-img {
    min-height: 380px; /* Para que sea el doble de alto que los otros */
}
.insor-grid-item:nth-child(n+2) .insor-grid-img {
    min-height: 200px;
}

/* Contenedor de la Imagen */
.insor-grid-img {
    width: 100%;
    flex-grow: 1; /* Esto hace que la imagen ocupe todo el espacio que no ocupa el título */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #ccc;
}

/* Caja de Texto Inferior (Título) */
.insor-grid-title {
    background-color: #e5e5e5;
    color: #333;
    padding: 15px 20px;
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 500;
    margin: 0;
    min-height: 80px; /* Altura mínima consistente para la caja gris */
    display: flex;
    align-items: center;
}

/* -- RESPONSIVE -- */
@media (max-width: 900px) {
    .insor-grid-container {
        /* En tablet, pasa a 2 columnas */
        grid-template-columns: 1fr 1fr;
    }
    
    .insor-grid-item:nth-child(1) {
        grid-column: 1 / 3; /* Ancho completo arriba */
        grid-row: 1 / 2;
    }
    .insor-grid-item:nth-child(1) .insor-grid-img {
        min-height: 300px;
    }

    .insor-grid-item:nth-child(2) {
        grid-column: 1 / 3; /* Ancho completo en el medio */
        grid-row: 2 / 3;
    }
    
    .insor-grid-item:nth-child(3) {
        grid-column: 1 / 2; /* Mitad izquierda abajo */
        grid-row: 3 / 4;
    }
    .insor-grid-item:nth-child(4) {
        grid-column: 2 / 3; /* Mitad derecha abajo */
        grid-row: 3 / 4;
    }
}

@media (max-width: 600px) {
    .insor-grid-container {
        /* En teléfonos, todo se apila a 1 columna */
        grid-template-columns: 1fr;
    }
    
    .insor-grid-item,
    .insor-grid-item:nth-child(1),
    .insor-grid-item:nth-child(2),
    .insor-grid-item:nth-child(3),
    .insor-grid-item:nth-child(4) {
        grid-column: 1 / 2;
        grid-row: auto;
    }
    
    .insor-grid-item:nth-child(n) .insor-grid-img {
        min-height: 250px;
    }
}