/*============================================================================*/
/*------------------------------ galeria_animation ---------------------------*/
/* includes/galerias/galeria_animation.blade.php - faixa horizontal de fotos
   que expande a foto sob o mouse (JS: public/js/components/galeria_animation.js
   só liga/desliga as classes .cms-galeria-animation-tem-hover/.cms-galeria-animation-hover,
   quem faz a animação de verdade é a transition abaixo). O clique abre em
   tela cheia pelo lightGallery (já global no site) - esse CSS não mexe em
   nada do modal/lightbox, só na faixa horizontal. */
.cms-galeria-animation-list {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 380px;
    width: 100%;
}

.cms-galeria-animation-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    transition: flex-grow 0.5s ease, flex-shrink 0.5s ease;
}

/* Itens além do 5º continuam no DOM (fazem parte do conjunto do lightGallery,
   pra anterior/próximo funcionar com a galeria inteira), só não aparecem na
   faixa - mesma convenção de includes/headers/galerias/grid.blade.php. */
.cms-galeria-animation-item.oculto {
    display: none;
}

.cms-galeria-animation-item.cms-galeria-animation-hover {
    flex-grow: 2.5;
}

.cms-galeria-animation-list.cms-galeria-animation-tem-hover .cms-galeria-animation-item:not(.cms-galeria-animation-hover) {
    flex-grow: 0.5;
}

.cms-galeria-animation-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.cms-galeria-animation-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cms-galeria-animation-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.25;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cms-galeria-animation-item.cms-galeria-animation-hover::after {
    opacity: 0;
}

@media screen and (max-width: 1024px) {
    .cms-galeria-animation-list {
        height: 280px;
    }
}

@media screen and (max-width: 767px) {
    .cms-galeria-animation-list {
        height: 220px;
        gap: 6px;
    }

    /* Sem hover de verdade no touch - cada item ocupa espaço igual sempre,
       sem tentar "encolher" os outros. */
    .cms-galeria-animation-item {
        flex: 1 1 0 !important;
    }
}
/*============================================================================*/