/* ==================================================
   FRONT-APERTURA2.CSS
   Tipo: Zona específica de portada
   Ámbito: Solo portada activa
   Define: Layout y estilos de la zona Apertura 2.
           Grid de noticias en columnas. Clases:
           lavoz-zona-apertura2, lavoz-apertura2-grid,
           lavoz-apertura2-horiz-*
   Depende de: front-portada-estructura.css
   ================================================== */

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

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

.lavoz-apertura2-layout.count-1 { grid-template-columns: 1fr; }
.lavoz-apertura2-layout.count-2 { grid-template-columns: 1fr; }

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

/* Principal: título grande + centrado */
.lavoz-zona-apertura2 .lavoz-apertura2-principal .lavoz-apertura2-titulo {
    font-size: var(--lavoz-title-size-lg);
    text-align: center;
}

.lavoz-zona-apertura2 .lavoz-apertura2-principal .lavoz-apertura2-subtitulo {
    display: block;
    text-align: center;
}

/* Autor en principal: centrado como el título */
.lavoz-apertura2-principal .lavoz-autor {
    text-align: center;
}

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

/* Grid de secundarias */
.lavoz-apertura2-grid {
    display: grid;
    gap: var(--lavoz-card-gap);
}

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

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

/* Links */
.lavoz-zona-apertura2 .lavoz-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* count-2: secundaria horizontal */
.lavoz-apertura2-secundaria-horiz {
    background: var(--lavoz-color-bg);
}

.lavoz-apertura2-horiz-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
}

.lavoz-apertura2-secundaria-horiz .lavoz-apertura2-imagen {
    display: block;
    aspect-ratio: var(--lavoz-img-ratio-landscape);
    overflow: hidden;
}

.lavoz-apertura2-secundaria-horiz .lavoz-apertura2-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lavoz-apertura2-horiz-texto {
    padding: var(--lavoz-gap-sm) var(--lavoz-gap-md);
}

.lavoz-apertura2-secundaria-horiz .lavoz-apertura2-subtitulo {
    display: block;
    padding: 0 var(--lavoz-gap-xs);
}



/* ==================================================
   RESPONSIVE APERTURA 2
   En mobile: todas las noticias son principales.
   Imagen grande + título grande, una tras otra.
   ================================================== */

/* 1024px — tablet landscape */
@media (max-width: 1024px) {
    .lavoz-apertura2-layout.count-4 .lavoz-apertura2-grid { grid-template-columns: repeat(2, 1fr); }
    .lavoz-apertura2-layout.count-5 .lavoz-apertura2-grid { grid-template-columns: repeat(3, 1fr); }
    .lavoz-apertura2-layout.count-6 .lavoz-apertura2-grid { grid-template-columns: repeat(3, 1fr); }
}

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

/* 480px — mobile: todas las noticias son principales */
@media (max-width: 480px) {
    /* Secundaria horizontal (count-2): pasa a columna */
    .lavoz-apertura2-horiz-grid {
        grid-template-columns: 1fr;
    }
    .lavoz-apertura2-horiz-texto {
        padding: var(--lavoz-gap-sm) 0;
    }

    /* Todas las secundarias a 1 columna */
    .lavoz-apertura2-layout.count-3 .lavoz-apertura2-grid,
    .lavoz-apertura2-layout.count-4 .lavoz-apertura2-grid,
    .lavoz-apertura2-layout.count-5 .lavoz-apertura2-grid,
    .lavoz-apertura2-layout.count-6 .lavoz-apertura2-grid {
        grid-template-columns: 1fr;
    }

    /* Imagen a ancho completo en cada card */
    .lavoz-apertura2-card img,
    .lavoz-apertura2-card-sec img {
        aspect-ratio: var(--lavoz-img-ratio-landscape);
        width: 100%;
        height: auto;
    }
}