/* ==================================================
   FRONT-DESTACADA1.CSS
   Tipo: Zona específica de portada
   Ámbito: Solo portada activa
   Define: Layout y estilos de la zona Destacada 1.
           Noticia principal solapada + grid de cards.
           Clases: lavoz-zona-destacada1, lavoz-destacada1-*
   Depende de: front-portada-estructura.css
   ================================================== */

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

.lavoz-destacada1-layout {
    display: grid;
    gap: var(--lavoz-card-gap);
}

/* count-1 */
.lavoz-destacada1-layout.count-1 { grid-template-columns: 1fr; }

/* count-2 */
.lavoz-destacada1-layout.count-2 { grid-template-columns: repeat(2, 1fr); }

/* count-3 a count-5: principal ocupa ancho completo + secundarias en grid */
.lavoz-destacada1-layout.count-3 { grid-template-columns: repeat(2, 1fr); }
.lavoz-destacada1-layout.count-4 { grid-template-columns: repeat(3, 1fr); }
.lavoz-destacada1-layout.count-5 { grid-template-columns: repeat(4, 1fr); }

.lavoz-destacada1-principal {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "content imagen";
    gap: var(--lavoz-card-gap);
    align-items: center;
}

.lavoz-destacada1-content-principal {
    grid-area: content;
}

.lavoz-destacada1-content-principal .lavoz-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.lavoz-destacada1-imagen-principal .lavoz-card-link {
    display: block;
    height: 100%;
}

.lavoz-destacada1-imagen-principal .lavoz-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lavoz-destacada1-titulo-principal {
    transition: opacity 0.3s ease;
}

.lavoz-destacada1-subtitulo-principal {
    font-family: var(--lavoz-font-body);
    font-size: 0.95rem;
    color: var(--lavoz-color-text-light);
    margin: 4px 0 var(--lavoz-gap-xs);
    line-height: var(--lavoz-lh-body);
    padding: 0 var(--lavoz-gap-xs);
}

.lavoz-destacada1-content-principal .lavoz-card-link:hover .lavoz-destacada1-titulo-principal {
    opacity: 0.7;
}

/* Cards secundarias */
.lavoz-destacada1-card {
    display: flex;
    flex-direction: column;
}

/* Responsive */
@media (max-width: 992px) {
    .lavoz-destacada1-layout.count-2,
    .lavoz-destacada1-layout.count-3,
    .lavoz-destacada1-layout.count-4,
    .lavoz-destacada1-layout.count-5 {
        grid-template-columns: 1fr;
    }

    .lavoz-destacada1-principal {
        grid-template-columns: 1fr;
        grid-template-areas: "imagen" "content";
    }
}



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

/* 1024px — ya cubierto por el @media 992px existente */

/* 768px — tablet portrait */
@media (max-width: 768px) {
    .lavoz-destacada1-layout.count-3,
    .lavoz-destacada1-layout.count-4,
    .lavoz-destacada1-layout.count-5 {
        grid-template-columns: 1fr;
    }
}

/* 480px — mobile: principal grande, secundarias en lista compacta */
@media (max-width: 480px) {
    /* Principal: imagen arriba, texto abajo */
    .lavoz-destacada1-principal {
        grid-template-columns: 1fr;
        grid-template-areas: "imagen" "content";
    }

    /* Secundarias: imagen a ancho completo, texto debajo */
    .lavoz-destacada1-card .lavoz-card-link {
        display: block;
    }

    .lavoz-destacada1-card .lavoz-destacada1-imagen {
        width: 100%;
    }

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