/* ==================================================
   FRONT-APERTURA3.CSS
   Tipo: Zona específica de portada
   Ámbito: Solo portada activa
   Define: Layout y estilos de la zona Apertura 3.
           Noticia principal con imagen + grid lateral.
           Clases: lavoz-zona-apertura3, lavoz-apertura3-grid,
           lavoz-apertura3-principal-*
   Depende de: front-portada-estructura.css
   ================================================== */

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

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

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

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

/* Principal horizontal (count-3+): 33% texto | 66% imagen */
.lavoz-apertura3-principal-horiz {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: stretch;
    gap: 0;
}

.lavoz-apertura3-principal-horiz .lavoz-apertura3-content-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    padding: var(--lavoz-content-pad) var(--lavoz-gap-md) var(--lavoz-content-pad) 0;
}

.lavoz-apertura3-principal-horiz .lavoz-apertura3-imagen-link {
    display: block;
    text-decoration: none;
}

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

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

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

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

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



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

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

/* 768px — tablet portrait */
@media (max-width: 768px) {
    /* Principal horizontal pasa a columna: imagen arriba, texto abajo */
    .lavoz-apertura3-principal-horiz {
        grid-template-columns: 1fr;
    }
    .lavoz-apertura3-principal-horiz .lavoz-apertura3-content-link {
        padding: var(--lavoz-gap-sm) 0;
    }

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

/* 480px — mobile: todas las noticias son principales */
@media (max-width: 480px) {
    /* Todas las secundarias a 1 columna */
    .lavoz-apertura3-layout.count-3 .lavoz-apertura3-grid,
    .lavoz-apertura3-layout.count-4 .lavoz-apertura3-grid,
    .lavoz-apertura3-layout.count-5 .lavoz-apertura3-grid,
    .lavoz-apertura3-layout.count-6 .lavoz-apertura3-grid {
        grid-template-columns: 1fr;
    }

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