/**
 * SIGEP - Lightbox — layout 2 colunas (Fase 19)
 * Coluna esquerda: imagem/vídeo
 * Coluna direita:  header fixo (like+contador) | scroll comentários | caixa comentário fixa
 */

/* ====== Overlay ====== */
.sigep-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 16, 15, .94);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}
.sigep-lightbox-overlay.show { display: flex; }

/* ====== Container 2 colunas ====== */
.sigep-lightbox-content {
    display: flex;
    align-items: stretch;
    width: min(1140px, 96vw);
    height: 88vh;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    position: relative;
}

/* ====== Coluna esquerda: imagem ====== */
.sigep-lightbox-media-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
}
.sigep-lightbox-media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sigep-lightbox-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.sigep-lightbox-media .ratio { width: 100%; }
.sigep-lightbox-caption {
    flex-shrink: 0;
    color: rgba(255,255,255,.6);
    font-size: .82rem;
    padding: .4rem 1rem;
    text-align: center;
    min-height: 28px;
    background: rgba(0,0,0,.3);
}

/* ====== Coluna direita: social ====== */
.sigep-lightbox-social-col {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;       /* header | scroll | footer */
    background: #1c1c1c;
    border-left: 1px solid rgba(255,255,255,.07);
    overflow: hidden;             /* impede overflow fora das 3 zonas */
}

/* Conteúdo social (preenchido via JS) — ocupa 100% da coluna */
.sigep-lightbox-social {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* -- HEADER FIXO: like + contagem de comentários -- */
.sigep-lightbox-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1rem .7rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* -- ÁREA DE SCROLL: comentários -- */
.sigep-lightbox-comments {
    flex: 1 1 0;           /* ocupa todo o espaço disponível */
    overflow-y: auto;
    overflow-x: hidden;
    padding: .6rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    /* Barra de scroll oculta mas funcional */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.sigep-lightbox-comments::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* -- FOOTER FIXO: caixa de comentário -- */
.sigep-lightbox-comment-form {
    flex-shrink: 0;
    display: flex;
    gap: .45rem;
    align-items: center;
    padding: .65rem .85rem;
    border-top: 1px solid rgba(255,255,255,.08);
    background: #1c1c1c;
}

/* ====== Elementos internos ====== */
.sigep-lightbox-comment {
    background: rgba(255,255,255,.05);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    color: rgba(255,255,255,.82);
    flex-shrink: 0;
}
.sigep-lightbox-comment strong {
    color: #fff;
    font-size: .83rem;
    display: inline;
    margin-right: .35rem;
}
.sigep-lightbox-comment span { vertical-align: middle; }
.sigep-lightbox-comment p { margin: .2rem 0 0; }

.sigep-no-comments {
    font-size: .82rem;
    color: rgba(255,255,255,.35);
    text-align: center;
    padding: 1rem 0;
}

/* Like button */
.sigep-lightbox-like-btn {
    background: none;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px;
    color: rgba(255,255,255,.7);
    padding: .3rem .85rem;
    font-size: .85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: all .15s ease;
}
.sigep-lightbox-like-btn:hover  { border-color: #ff5c7a; color: #ff5c7a; }
.sigep-lightbox-like-btn.liked  { border-color: #ff5c7a; color: #ff5c7a; background: rgba(255,92,122,.12); }

.sigep-lightbox-like-count {
    font-size: .8rem;
    color: rgba(255,255,255,.45);
    margin-left: auto;
}

/* Campo de comentário */
.sigep-guest-name,
.sigep-comment-text {
    flex: 1;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    border-radius: 20px;
    padding: .35rem .85rem;
    font-size: .83rem;
    outline: none;
    transition: border-color .15s;
    min-width: 0;
}
.sigep-guest-name { flex: 0 0 110px; }
.sigep-comment-text:focus,
.sigep-guest-name:focus  { border-color: rgba(255,255,255,.35); }
.sigep-comment-text::placeholder,
.sigep-guest-name::placeholder { color: rgba(255,255,255,.38); }

.sigep-comment-submit {
    background: none;
    border: none;
    color: rgba(255,255,255,.45);
    font-size: 1rem;
    cursor: pointer;
    padding: .2rem .35rem;
    flex-shrink: 0;
    transition: color .15s;
}
.sigep-comment-submit:hover:not(:disabled) { color: #fff; }
.sigep-comment-submit:disabled { opacity: .4; cursor: default; }

/* ====== Botões de navegação e fechar ====== */
.sigep-lightbox-close,
.sigep-lightbox-prev,
.sigep-lightbox-next {
    position: fixed;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(4px);
    border: none;
    color: #fff;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s;
    z-index: 2001;
}
.sigep-lightbox-close:hover,
.sigep-lightbox-prev:hover,
.sigep-lightbox-next:hover { background: rgba(255,255,255,.22); }

.sigep-lightbox-close { top: 1rem; right: 1rem; }
.sigep-lightbox-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.sigep-lightbox-next  { right: calc(300px + 1rem); top: 50%; transform: translateY(-50%); }

/* ====== Mobile: coluna única ====== */
@media (max-width: 767px) {
    .sigep-lightbox-content {
        flex-direction: column;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }
    .sigep-lightbox-media-col {
        flex: 0 0 52dvh;
    }
    .sigep-lightbox-social-col {
        flex: 1 1 0;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.07);
    }
    .sigep-lightbox-prev  { left: .6rem; }
    .sigep-lightbox-next  { right: .6rem; }
    .sigep-lightbox-close { top: .6rem; right: .6rem; }
}

/* ====== Cursor nas miniaturas clicáveis ====== */
[data-lightbox-group],
[data-lightbox-video] { cursor: pointer; }