/**
 * Slider com Thumbnail Navigation Lateral
 * Integrado com o Slideshow do YOOtheme
 */

/* Container principal quando lateral */
.blockio-slideshow-lateral {
    align-items: flex-start; /* Não estica os filhos para terem a mesma altura */
}

/* Container do slideshow principal - altura baseada no conteúdo quando lateral */
.blockio-slideshow-lateral .blockio-slideshow-main {
    flex-shrink: 0;
    height: auto;
    min-height: 0;
    align-self: flex-start; /* Não estica para ter a mesma altura do thumbnav */
}

/* Container do thumbnav lateral - scroll vertical */
.blockio-thumbnav-lateral {
    flex-shrink: 0;
    overflow: hidden; /* Esconde conteúdo que vaza */
    overflow-y: auto; /* Permite scroll vertical */
    overflow-x: hidden; /* Esconde scroll horizontal */
    max-height: 100%;
    height: 0; /* Será definido via JS */
    position: relative; /* Para garantir que o conteúdo não vaze */
    box-sizing: border-box; /* Inclui padding no cálculo de altura */
    min-height: 0; /* Permite que o container encolha se necessário */
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
    touch-action: pan-y; /* Permite scroll vertical no touch */
}

/* Thumbnav vertical quando lateral */
.blockio-thumbnav-lateral .uk-thumbnav {
    display: flex;
    flex-direction: column;
    margin: 0;
    flex-wrap: nowrap;
    width: 100%; /* Garante que não vaze horizontalmente */
    box-sizing: border-box; /* Inclui padding no cálculo de largura */
}

.blockio-thumbnav-lateral .uk-thumbnav > * {
    margin: 0 0 10px 0;
    flex-shrink: 0;
    width: 100%; /* Garante que não vaze horizontalmente */
    box-sizing: border-box; /* Inclui padding no cálculo de largura */
}

.blockio-thumbnav-lateral .uk-thumbnav > *:last-child {
    margin-bottom: 0;
}

/* Garante que imagens dentro do thumbnav não vazem */
.blockio-thumbnav-lateral .uk-thumbnav img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Custom scrollbar para thumbnav lateral */
.blockio-thumbnav-lateral::-webkit-scrollbar {
    width: 6px;
}

.blockio-thumbnav-lateral::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.blockio-thumbnav-lateral::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.blockio-thumbnav-lateral::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Ajustes para telas muito pequenas - mantém layout lateral mas ajusta tamanhos */
@media (max-width: 480px) {
    .blockio-thumbnav-lateral {
        /* Mantém layout lateral, apenas ajusta tamanhos menores */
        padding: 5px !important;
    }
    
    .blockio-thumbnav-lateral .uk-thumbnav > * {
        margin: 0 0 8px 0 !important;
    }
}