/* ==================================================
   FRONT-CIERRE.CSS
   Tipo: Zona específica de portada
   Ámbito: Solo portada activa
   Define: Layout y estilos de la zona Cierre.
           Grid de 4 noticias con imagen portrait.
           Clases: lavoz-zona-cierre, lavoz-cierre-*
   Depende de: front-portada-estructura.css
   ================================================== */

.lavoz-zona-cierre {
    position: relative;
    padding-top: var(--lavoz-card-gap);
    margin: var(--lavoz-card-gap) 0;
}

.lavoz-cierre-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lavoz-card-gap);
}

.lavoz-cierre-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--lavoz-card-gap);
}

.lavoz-cierre-card {
    display: flex;
    flex-direction: column;
    background: var(--lavoz-color-bg);
    overflow: hidden;
}

.lavoz-cierre-card .lavoz-card-link {
    display: block;
    position: relative;
    text-decoration: none;
}

/* Imagen: ratio 9/16, igual que mosaico en estructura */
.lavoz-cierre-imagen {
    width: 100%;
    aspect-ratio: 9 / 16;
    position: relative;
    overflow: hidden;
    border-radius: var(--lavoz-img-radius);
}

.lavoz-cierre-imagen .lavoz-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.lavoz-cierre-card:hover .lavoz-cierre-imagen .lavoz-img {
    transform: scale(1.04);
    transition: var(--lavoz-img-transition);
}

/* Overlay: 40% desde abajo, sobre la imagen */
.lavoz-cierre-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 33%;
    max-height: 33%;
    padding: 14px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0 0 var(--lavoz-img-radius) var(--lavoz-img-radius);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    box-sizing: border-box;
}

.lavoz-cierre-content .lavoz-cierre-titulo {
    color: #fff;
    margin: 0 0 4px 0;
}

.lavoz-cierre-content .lavoz-autor {
    display: block;
    font-family: var(--lavoz-font-body);
    font-size: 0.8rem;
    color: #fff;
}



/* ==================================================
   RESPONSIVE CIERRE
   ================================================== */

/* 1024px — 2 columnas, overlay reducido */
@media (max-width: 1024px) {
    .lavoz-cierre-grid-3,
    .lavoz-cierre-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lavoz-cierre-content {
        height: 20%;
        max-height: 20%;
    }
}

/* 480px — 1 columna */
@media (max-width: 480px) {
    .lavoz-cierre-grid-3,
    .lavoz-cierre-grid-4 {
        grid-template-columns: 1fr;
    }

    .lavoz-cierre-titulo {
        margin-top: 0;
    }
}