/* ==========================================================================
   PHOTOS MARQUEE SECTION
   ========================================================================== */

/* Mobile-First Marquee Styles */
.photos-marquee {
    position: relative;
    padding: 40px 0;
    overflow: hidden;
}

.marquee {
    overflow: hidden;
    width: 100%;
}

/* Efeito de fade nas laterais (Adaptado para o fundo escuro) */
.photos-marquee:before,
.photos-marquee:after {
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    content: "";
    z-index: 2;
}

.photos-marquee:before {
    left: 0;
    /* Gradiente escuro à esquerda */
    background: linear-gradient(to right, var(--color-neutral-100) 0%, rgba(21, 20, 19, 0) 100%);
}

.photos-marquee:after {
    right: 0;
    /* Gradiente escuro à direita */
    background: linear-gradient(to left, var(--color-neutral-100) 0%, rgba(21, 20, 19, 0) 100%);
}

.marquee-content {
    display: flex;
    gap: 16px; /* Espaço entre as fotos no mobile */
    margin: 0;
    padding: 0;
    list-style: none;
    width: max-content; /* Mantém os itens numa única linha reta */
}

/* Estilização dos cartões de imagem */
.marquee-content li {
    width: 180px; /* Tamanho da foto no mobile */
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0; /* Impede que a foto encolha no flexbox */
}

.marquee-content li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Leve zoom na foto ao passar o rato (opcional para dar vida) */
.marquee-content li:hover img {
    transform: scale(1.05);
}

/* Desktop Breakpoint */
@media (min-width: 768px) {
    .photos-marquee {
        padding: 32px 0;
    }
    
    .photos-marquee:before,
    .photos-marquee:after {
        width: 150px; /* Fade mais largo no desktop */
    }
    
    .marquee-content {
        gap: 24px;
    }
    
    .marquee-content li {
        width: 160px; /* Imagens maiores no desktop */
        height: 160px;
    }
}