/* ==================================================
   FRONT-DESTACADA2.CSS
   Tipo: Zona específica de portada
   Ámbito: Solo portada activa
   Define: Layout y estilos de la zona Destacada 2.
           Cards solapadas con imagen de fondo.
           Clases: lavoz-zona-destacada2, lavoz-destacada2-*
   Depende de: front-portada-estructura.css
   ================================================== */

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

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

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

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

/* count-3+ */
.lavoz-destacada2-layout.count-3,
.lavoz-destacada2-layout.count-4,
.lavoz-destacada2-layout.count-5,
.lavoz-destacada2-layout.count-6 { grid-template-columns: 1fr 1fr; }

/* count-1: 40% texto solapado | 60% imagen */
.lavoz-destacada2-layout.count-1 .lavoz-destacada2-card-solapada {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-areas: "content imagen";
    min-height: 350px;
    position: relative;
    align-items: center;
}

.lavoz-destacada2-content-solapada {
    grid-area: content;
    background: var(--lavoz-color-bg);
    padding: var(--lavoz-gap-lg) var(--lavoz-gap-xl);
    margin: auto 0;
    position: relative;
    z-index: 2;
    box-shadow: var(--lavoz-shadow-card);
    border: 1px solid var(--lavoz-color-border);
    transform: translateX(60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 280px;
}

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

.lavoz-destacada2-imagen-solapada {
    grid-area: imagen;
    border-radius: 0;
    overflow: hidden;
    min-height: 350px;
}

.lavoz-destacada2-imagen-solapada .lavoz-card-link {
    display: block;
    height: 100%;
    min-height: 350px;
}

.lavoz-destacada2-imagen-solapada .lavoz-img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    object-fit: cover;
    display: block;
}

.lavoz-destacada2-titulo-solapada {
    letter-spacing: -0.5px;
    transition: opacity 0.3s ease;
}

.lavoz-destacada2-content-solapada .lavoz-card-link:hover .lavoz-destacada2-titulo-solapada {
    opacity: 0.7;
}

/* count-3+: principal (50%) + lista (50%) */
.lavoz-destacada2-principal {
    display: flex;
    flex-direction: column;
}

/* Lista de secundarias */
.lavoz-destacada2-lista-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--lavoz-card-gap);
}

.lavoz-destacada2-lista-item .lavoz-card-link {
    display: flex;
    flex-direction: row;
    gap: var(--lavoz-content-pad);
    align-items: flex-start;
}

.lavoz-destacada2-lista-item .lavoz-destacada2-imagen-lista {
    flex: 0 0 150px;
}

.lavoz-destacada2-lista-item .lavoz-destacada2-titulo-lista,
.lavoz-destacada2-lista-item .lavoz-autor {
    /* gestionados por el wrapper de texto */
}

.lavoz-destacada2-lista-texto {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
}

.lavoz-destacada2-lista-item .lavoz-destacada2-titulo-lista {
    margin-bottom: 2px;
}

.lavoz-destacada2-imagen-lista {
    width: 150px;
    overflow: hidden;
    border-radius: var(--lavoz-img-radius);
    border: 1px solid var(--lavoz-color-border-light);
}

.lavoz-destacada2-content-lista {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Responsive */
@media (max-width: 992px) {
    .lavoz-destacada2-layout.count-1 .lavoz-destacada2-card-solapada {
        grid-template-columns: 1fr;
        grid-template-areas: "imagen" "content";
        min-height: auto;
    }

    .lavoz-destacada2-content-solapada {
        margin-right: 0;
        margin-top: -30px;
        padding: 25px;
        min-height: auto;
    }

    .lavoz-destacada2-layout.count-2,
    .lavoz-destacada2-layout.count-3,
    .lavoz-destacada2-layout.count-4,
    .lavoz-destacada2-layout.count-5,
    .lavoz-destacada2-layout.count-6 {
        grid-template-columns: 1fr;
    }

    .lavoz-destacada2-imagen-lista {
        width: 120px;
    }
}



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

/* 768px — tablet portrait */
@media (max-width: 768px) {
    .lavoz-destacada2-content-solapada {
        transform: translateX(0);
        margin-top: 0;
        padding: var(--lavoz-gap-md);
        min-height: auto;
    }
}

/* 480px — mobile */
@media (max-width: 480px) {
    /* count-1 solapado: imagen arriba, texto abajo sin solapamiento */
    .lavoz-destacada2-layout.count-1 .lavoz-destacada2-card-solapada {
        grid-template-columns: 1fr;
        grid-template-areas: "imagen" "content";
        min-height: auto;
    }

    .lavoz-destacada2-content-solapada {
        transform: translateX(0);
        box-shadow: none;
        border: 1px solid var(--lavoz-color-border-light);
        min-height: auto;
        padding: var(--lavoz-gap-md);
    }

    /* Principal: imagen a ancho completo */
    .lavoz-destacada2-principal .lavoz-destacada2-imagen img {
        aspect-ratio: var(--lavoz-img-ratio-landscape);
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Items de lista: imagen a ancho completo, texto debajo */
    .lavoz-destacada2-lista-item .lavoz-card-link {
        display: block;
    }

    .lavoz-destacada2-imagen-lista {
        width: 100%;
        flex: none;
    }

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