/* ==================================================
   FRONT-FRISO.CSS
   Tipo: Zona específica de portada
   Ámbito: Solo portada activa
   Define: Layout y estilos de la zona Friso.
           Fila horizontal de noticias con imagen
           cuadrada e imagen pequeña + texto.
           Clases: lavoz-zona-friso, lavoz-friso-*
   Depende de: front-portada-estructura.css
   ================================================== */

.lavoz-zona-friso {
    position: relative;
    border-bottom: 1px solid var(--lavoz-color-border);
    margin: var(--lavoz-card-gap) 0;
    padding-bottom: var(--lavoz-card-gap);
}

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

.lavoz-friso-card {
    background: var(--lavoz-color-bg);
    overflow: hidden;
}



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

/* 1024px — 3 columnas */
@media (max-width: 1024px) {
    .lavoz-friso-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 768px — 2 columnas */
@media (max-width: 768px) {
    .lavoz-friso-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 480px — mobile: primera card a ancho completo, resto en lista */
@media (max-width: 480px) {
    .lavoz-friso-grid {
        grid-template-columns: 1fr;
    }

    /* Todas las cards: formato compacto imagen izq + título der */
    .lavoz-friso-card .lavoz-card-link {
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: var(--lavoz-gap-sm);
        align-items: flex-start;
    }

    .lavoz-friso-card .lavoz-friso-imagen {
        width: 90px;
        flex-shrink: 0;
    }

    .lavoz-friso-card .lavoz-friso-imagen img {
        width: 90px;
        height: 65px;
        object-fit: cover;
        aspect-ratio: auto;
    }
}