/* ==================================================
   FRONT-MOSAICO.CSS
   Tipo: Zona específica de portada
   Ámbito: Solo portada activa
   Define: Layout y estilos de la zona Mosaico.
           Grid de cards con imagen pequeña + texto.
           Clases: lavoz-zona-mosaico, lavoz-mosaico-*
   Depende de: front-portada-estructura.css
   ================================================== */

.lavoz-zona-mosaico {
    position: relative;
}

.lavoz-mosaico-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lavoz-card-gap);
}

/* Impar: primera card a ancho completo */
.lavoz-mosaico-layout.impar .lavoz-mosaico-destacada {
    grid-column: 1 / -1;
}

.lavoz-mosaico-card {
    display: flex;
    flex-direction: column;
    background: var(--lavoz-color-bg);
    overflow: hidden;
}



/* ==================================================
   RESPONSIVE MOSAICO
   Mobile: principal grande, secundarias en lista
   compacta (imagen pequeña izq + título der).
   ================================================== */

/* 768px — tablet portrait: mantener 2 columnas */

/* 480px — mobile */
@media (max-width: 480px) {
    /* Todas las cards a 1 columna */
    .lavoz-mosaico-layout {
        grid-template-columns: 1fr;
    }

    /* Destacada: imagen a ancho completo */
    .lavoz-mosaico-layout.impar .lavoz-mosaico-destacada {
        grid-column: 1 / -1;
    }

    .lavoz-mosaico-layout.impar .lavoz-mosaico-imagen-destacada img {
        aspect-ratio: var(--lavoz-img-ratio-landscape);
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Cards no destacadas: imagen a ancho completo, texto debajo */
    .lavoz-mosaico-card:not(.lavoz-mosaico-destacada) .lavoz-card-link {
        display: block;
    }

    .lavoz-mosaico-card:not(.lavoz-mosaico-destacada) .lavoz-mosaico-imagen img {
        width: 100%;
        height: auto;
        aspect-ratio: var(--lavoz-img-ratio-landscape);
        object-fit: cover;
    }
}