/* ==================================================
   FRONT-VIDEO-LATERAL.CSS
   Tipo: Zona específica de portada
   Ámbito: Solo portada activa (columna derecha)
   Define: Layout y estilos de la zona Vídeo Lateral.
           Zona con fondo gris, título accent, player
           nativo HTML5 con play/pause. El caption
           hereda estilos de front-base.css (19px).
           Clases: lavoz-video-lateral-*
   Depende de: front-portada-estructura.css
   ================================================== */

/* ── Zona contenedora — fondo gris claro ── */
.lavoz-video-lateral-zona {
    background: var(--lavoz-color-bg-light);
    margin-bottom: var(--lavoz-gap-md);
    border-bottom: 4px solid var(--lavoz-color-accent);
    overflow: hidden;
}

/* ── Título — mismo estilo que lavoz-sidebar-titulo ── */
.lavoz-video-lateral-titulo {
    display: inline-block;
    position: relative;
    background: var(--lavoz-color-accent);
    color: var(--lavoz-color-bg);
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 var(--lavoz-gap-md) 0;
}

.lavoz-video-lateral-titulo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 200vw;
    height: 1px;
    background: var(--lavoz-color-accent);
}

/* ── Wrap del vídeo — padding para ver el fondo gris ── */
.lavoz-video-lateral-wrap {
    padding: 0 var(--lavoz-gap-md) var(--lavoz-gap-md);
}

/* ── Player ── */
.lavoz-video-lateral-player {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--lavoz-img-radius);
    background: #000;
    cursor: pointer;
}

.lavoz-video-lateral-video {
    display: block;
    width: 100%;
    height: auto;
}

/* Play — sin override, sigue el sistema global (top:12px left:12px) */

/* Ocultar play cuando reproduce */
.lavoz-video-lateral-player.is-playing {
    cursor: auto;
}

.lavoz-video-lateral-player.is-playing::after {
    display: none;
}

/* Pie — texto descriptivo del vídeo */
.lavoz-video-lateral-caption {
    margin: 6px 0 0;
}

.lavoz-video-lateral-caption,
.lavoz-video-lateral-caption a {
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Firma de autor del vídeo — reutiliza .lavoz-autor global */
.lavoz-video-lateral-wrap .lavoz-autor {
    margin-top: 4px;
    margin-left: var(--lavoz-gap-xs);
    padding: 0;
}

@media (max-width: 768px) {
    .lavoz-video-lateral-wrap {
        padding: 0 var(--lavoz-gap-sm) var(--lavoz-gap-sm);
    }
}