/* ==================================================
   FRONT-PORTADA-ESTRUCTURA.CSS
   Tipo: Estructura de página
   Ámbito: Solo portada activa (es_portada = true)
   Define: Grid macro de portada (.lavoz-portada-wrap),
           layout de dos columnas (.lavoz-portada-two-columns),
           cabecera de portada, publicidad, responsive
           del contenedor (1024px, 768px, 480px)
   Depende de: front-base.css
   ================================================== */

/* --------------------------------------------------
   2.1 Contenedor Principal
   -------------------------------------------------- */
.lavoz-portada-wrap {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--lavoz-gap-md);
    background: var(--lavoz-color-bg);
}

.lavoz-portada-wrap > *:first-child {
    margin-top: 0;
}

.lavoz-portada-wrap > *:last-child {
    border-bottom: none;
}

@media only screen and (max-width: 992px) {
    .lavoz-portada-wrap { width: 95%; }
}
@media only screen and (max-width: 600px) {
    .lavoz-portada-wrap { width: 90%; width: calc(90% + 1em); }
}

/* --------------------------------------------------
   2.2 Header de Portada
   -------------------------------------------------- */
.lavoz-portada-header {
    padding: var(--lavoz-gap-xl) 0 var(--lavoz-gap-xl);
}

.lavoz-portada-titulo {
    font-size: var(--lavoz-title-size-lg);
    letter-spacing: -1px;
}

.lavoz-portada-fecha {
    font-family: var(--lavoz-font-body);
    font-size: 0.95em;
    color: var(--lavoz-color-meta);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* --------------------------------------------------
   2.3 Layout 2 Columnas (sin margin-bottom)
   -------------------------------------------------- */
.lavoz-portada-two-columns {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--lavoz-card-gap);
    border-bottom: 1px solid var(--lavoz-color-border);
    padding-bottom: var(--lavoz-card-gap);
    margin-bottom: var(--lavoz-card-gap);
}

.lavoz-portada-column-left {
    display: flex;
    flex-direction: column;
    gap: var(--lavoz-card-gap);
}

.lavoz-portada-column-right {
    display: flex;
    flex-direction: column;
}


/* ==================================================
   Responsive
   ================================================== */

/* 1024px — tablet landscape */
@media (max-width: 1024px) {
    /* Dos columnas colapsa a una: barralateral baja bajo el contenido */
    .lavoz-portada-two-columns {
        grid-template-columns: 1fr;
    }

    .lavoz-zona-barralateral {
        position: static;
    }

    /* Publicidad horizontal: ancho completo */
    .lavoz-portada-two-columns .lavoz-publicidad-horizontal {
        width: 100%;
    }
}

/* 768px — tablet portrait */
@media (max-width: 768px) {
    .lavoz-portada-wrap {
        padding: 0 var(--lavoz-gap-sm);
    }

    .lavoz-portada-titulo {
        font-size: clamp(1.8rem, 5vw, 3rem);
    }
}

/* 480px — mobile */
@media (max-width: 480px) {
    .lavoz-portada-wrap {
        padding: 0 var(--lavoz-gap-xs);
    }

    .lavoz-portada-header {
        padding: var(--lavoz-gap-md) 0 var(--lavoz-gap-lg);
    }

    .lavoz-portada-titulo {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
        letter-spacing: -0.5px;
    }

    /* Publicidad: márgenes más ajustados en mobile */
    .lavoz-publicidad {
        margin: var(--lavoz-gap-md) 0;
    }
}