/* ==================================================
   FRONT-APERTURA1.CSS
   Tipo: Zona específica de portada
   Ámbito: Solo portada activa
   Define: Layout y estilos de la zona Apertura 1.
           Noticia principal grande + secundarias en
           horizontal o fila. Clases: lavoz-zona-apertura1,
           lavoz-apertura1-principal, lavoz-apertura1-fila-*
   Depende de: front-portada-estructura.css
   ================================================== */

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

/* Principal: titular centrado, sin imagen */
.lavoz-apertura1-principal {
    width: 100%;
    padding: var(--lavoz-gap-md) var(--lavoz-gap-md);
    text-align: center;
    background: var(--lavoz-color-bg);
    border-bottom: 1px solid var(--lavoz-color-border);
    margin-bottom: var(--lavoz-card-gap);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Layout */

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

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

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

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

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

/* count-2: secundaria horizontal */

.lavoz-apertura1-secundaria-horiz {
    background: var(--lavoz-color-bg);
}

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

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

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

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

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

/* count-3+: fila de secundarias */

.lavoz-apertura1-fila-secundarias {
    display: grid;
    gap: var(--lavoz-card-gap);
}

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

.lavoz-apertura1-secundaria {
    display: flex;
    flex-direction: column;
    background: var(--lavoz-color-bg);
}

.lavoz-apertura1-secundaria:last-child {
    border-right: none;
}

.lavoz-apertura1-secundaria .lavoz-apertura1-imagen img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--lavoz-img-ratio-landscape);
    object-fit: cover;
    display: block;
}

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

.lavoz-zona-apertura1 .lavoz-card-link:hover .lavoz-apertura1-titulo,
.lavoz-zona-apertura1 .lavoz-card-link:hover .lavoz-apertura1-titulo-sec {
    text-decoration: none;
}



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

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

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

/* 480px — mobile: todas las noticias son principales */
@media (max-width: 480px) {
    /* Principal: sin cambios, ya es grande */

    /* Secundaria horizontal (count-2): pasa a columna */
    .lavoz-apertura1-horiz-grid {
        grid-template-columns: 1fr;
    }
    .lavoz-apertura1-horiz-texto {
        padding: var(--lavoz-gap-sm) 0;
    }

    /* Secundarias en fila: todas a 1 columna, imagen grande */
    .lavoz-apertura1-layout.count-3 .lavoz-apertura1-fila-secundarias,
    .lavoz-apertura1-layout.count-4 .lavoz-apertura1-fila-secundarias,
    .lavoz-apertura1-layout.count-5 .lavoz-apertura1-fila-secundarias,
    .lavoz-apertura1-layout.count-6 .lavoz-apertura1-fila-secundarias {
        grid-template-columns: 1fr;
    }

    /* Cada secundaria: imagen a ancho completo, aspecto paisaje */
    .lavoz-apertura1-secundaria .lavoz-apertura1-imagen img {
        aspect-ratio: var(--lavoz-img-ratio-landscape);
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}