/**
 * TurboJet - Estilos para Galeria de Imagens
 * v2 - Estilos para setas horizontais e contenção.
 */

/* Wrapper Principal da Galeria */
.tj-galeria-imagens-wrapper {
    margin-bottom: 20px;
    position: relative; /* Necessário para posicionar as setas da galeria horizontal */
}

/* Formato Vertical (Grid) - Sem grandes alterações */
.tj-galeria-formato-vertical {
    display: grid;
    /* gap é definido inline via shortcode */
}
.tj-galeria-formato-vertical.tj-galeria-cols-1 { grid-template-columns: 1fr; }
.tj-galeria-formato-vertical.tj-galeria-cols-2 { grid-template-columns: repeat(2, 1fr); }
.tj-galeria-formato-vertical.tj-galeria-cols-3 { grid-template-columns: repeat(3, 1fr); }
.tj-galeria-formato-vertical.tj-galeria-cols-4 { grid-template-columns: repeat(4, 1fr); }
.tj-galeria-formato-vertical.tj-galeria-cols-5 { grid-template-columns: repeat(5, 1fr); }
.tj-galeria-formato-vertical.tj-galeria-cols-6 { grid-template-columns: repeat(6, 1fr); }

.tj-galeria-formato-vertical .tj-galeria-item img {
    width: 100%;
    height: auto; 
    object-fit: cover; 
    aspect-ratio: 1 / 1; 
    display: block;
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tj-galeria-formato-vertical .tj-galeria-item a:hover img {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Formato Horizontal (Scroll) */
.tj-galeria-imagens-wrapper.tj-galeria-formato-horizontal {
    overflow: hidden; /* Impede que o conteúdo interno (incluindo o scroll container) estique a página */
    padding-left: 40px; /* Espaço para o botão prev */
    padding-right: 40px; /* Espaço para o botão next */
}

.tj-galeria-formato-horizontal .tj-galeria-scroll-container {
    display: flex;
    overflow-x: auto;   /* Permite rolagem horizontal */
    overflow-y: hidden; 
    padding-bottom: 5px; /* Pequeno espaço se a barra de rolagem nativa aparecer */
    gap: var(--tj-galeria-espacamento-horizontal, 10px); 
    scrollbar-width: none; /* Para Firefox - esconde a barra de rolagem padrão */
    -ms-overflow-style: none;  /* Para IE e Edge - esconde a barra de rolagem padrão */
}
/* Esconde a barra de rolagem padrão para Webkit (Chrome, Safari, etc.) */
.tj-galeria-formato-horizontal .tj-galeria-scroll-container::-webkit-scrollbar {
    display: none;
}

.tj-galeria-formato-horizontal .tj-galeria-item {
    flex-shrink: 0; 
}
.tj-galeria-formato-horizontal .tj-galeria-item img {
    /* height é definido inline via shortcode */
    width: auto; 
    max-height: 100%; 
    display: block;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}
.tj-galeria-formato-horizontal .tj-galeria-item a:hover img {
    opacity: 0.85;
}

/* Setas de Navegação para Galeria Horizontal */
.tj-galeria-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.2em;
    line-height: 36px; /* Centraliza o ícone da seta */
    text-align: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    display: flex; /* Para centralizar o conteúdo da seta se for um SVG/ícone */
    align-items: center;
    justify-content: center;
}
.tj-galeria-nav-arrow:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
}
.tj-galeria-nav-prev {
    left: 5px;
}
.tj-galeria-nav-next {
    right: 5px;
}
.tj-galeria-nav-arrow.tj-galeria-nav-oculto { /* Classe para ocultar setas quando não há mais para onde rolar */
    opacity: 0.2;
    pointer-events: none;
    cursor: default;
}


/* Item da Galeria (Comum) */
.tj-galeria-item {
    position: relative;
    overflow: hidden; 
}
.tj-galeria-item a {
    display: block;
    line-height: 0; 
    cursor: pointer;
}


/* Lightbox Fullscreen (sem alterações significativas da v1) */
.tj-galeria-lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); z-index: 100000; 
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.tj-galeria-lightbox.tj-lightbox-ativo { opacity: 1; visibility: visible; }
.tj-lightbox-conteudo {
    position: relative; max-width: 90vw; max-height: 90vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tj-lightbox-imagem {
    display: block; max-width: 100%; max-height: calc(90vh - 60px); 
    object-fit: contain; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.5);
    transition: opacity 0.3s ease-in-out;
}
.tj-lightbox-imagem.tj-lightbox-loading { opacity: 0.5; }
.tj-lightbox-legenda {
    color: #fff; text-align: center; padding: 10px; font-size: 0.9em;
    max-width: 70vw; margin-top: 10px; background-color: rgba(0,0,0,0.3); border-radius: 3px;
}
.tj-lightbox-legenda:empty { display: none; }
.tj-lightbox-fechar {
    position: absolute; top: 15px; right: 20px; font-size: 2.5em; color: #fff;
    background: none; border: none; cursor: pointer; line-height: 1; padding: 5px;
    opacity: 0.8; transition: opacity 0.2s ease;
}
.tj-lightbox-fechar:hover { opacity: 1; }
.tj-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%); font-size: 3em; color: #fff;
    background-color: rgba(0,0,0,0.2); border: none; cursor: pointer; padding: 10px 15px;
    border-radius: 5px; opacity: 0.6; transition: opacity 0.2s ease, background-color 0.2s ease;
    user-select: none;
}
.tj-lightbox-nav:hover { opacity: 1; background-color: rgba(0,0,0,0.4); }
.tj-lightbox-prev { left: 15px; }
.tj-lightbox-next { right: 15px; }
.tj-lightbox-nav.tj-lightbox-nav-oculto { display: none !important; }

/* Responsividade (sem alterações significativas da v1) */
@media (max-width: 992px) {
    .tj-galeria-formato-vertical.tj-galeria-cols-5,
    .tj-galeria-formato-vertical.tj-galeria-cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .tj-galeria-formato-vertical.tj-galeria-cols-4,
    .tj-galeria-formato-vertical.tj-galeria-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .tj-lightbox-nav { font-size: 2em; padding: 8px 12px; }
    .tj-lightbox-fechar { font-size: 2em; }
    .tj-galeria-nav-arrow { width: 30px; height: 30px; line-height: 30px; font-size: 1em; }
    .tj-galeria-imagens-wrapper.tj-galeria-formato-horizontal { padding-left: 35px; padding-right: 35px; }
    .tj-galeria-nav-prev { left: 3px; }
    .tj-galeria-nav-next { right: 3px; }
}
@media (max-width: 480px) {
    .tj-galeria-formato-vertical.tj-galeria-cols-2 { grid-template-columns: 1fr; }
    .tj-lightbox-nav { display: none; } 
    .tj-galeria-nav-arrow { display: none; } /* Esconder setas em telas muito pequenas, focar no drag/swipe */
    .tj-galeria-imagens-wrapper.tj-galeria-formato-horizontal { padding-left: 0; padding-right: 0; }

}
/* --- Estilos da Legenda no Grid --- */
.tj-galeria-item {
    position: relative; /* Garante que a legenda seja posicionada em relação ao item */
}

.tj-galeria-legenda {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    font-size: 0.9em;
    text-align: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* Permite que o clique atravesse a legenda e atinja o link da imagem */
}

/* Comportamento da legenda baseado na classe do wrapper */
.tj-galeria-legenda-hover .tj-galeria-legenda {
    opacity: 0;
    visibility: hidden;
}

.tj-galeria-legenda-hover .tj-galeria-item:hover .tj-galeria-legenda {
    opacity: 1;
    visibility: visible;
}

.tj-galeria-legenda-sempre .tj-galeria-legenda {
    opacity: 1;
    visibility: visible;
}