/**
 * Ajustes específicos para o carrossel na seção Hero
 * Corrige problemas de layout e mantém o design responsivo
 */

/* Ajustes para o container do carrossel no Hero */
.hero-image {
    flex: 1;
    position: relative;
    z-index: 2;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remover estilos conflitantes do grid */
.hero-image .hero-images-container {
    display: none;
}

/* Container do carrossel no hero */
#hero-carousel {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Ajustar altura do carrossel no hero */
#hero-carousel .sweet-tooth-carousel {
    height: 500px;
}

#hero-carousel .swiper-slide img {
    height: 500px;
    object-fit: cover;
}

/* Ajustar botões para combinar com o tema */
#hero-carousel .swiper-button-next,
#hero-carousel .swiper-button-prev {
    background: rgba(179, 142, 32, 0.9);
    /* #B38E20 com transparência */
    color: white;
}

#hero-carousel .swiper-button-next:hover,
#hero-carousel .swiper-button-prev:hover {
    background: #8C6C16;
}

/* Ajustar paginação */
#hero-carousel .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
}

#hero-carousel .swiper-pagination-bullet-active {
    background: #B38E20;
    border-color: white;
}

/* Responsividade específica para o hero */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }

    .hero-content {
        padding: 40px 20px;
        order: 2;
    }

    .hero-image {
        order: 1;
        padding: 20px;
        width: 100%;
    }

    #hero-carousel {
        max-width: 100%;
    }

    #hero-carousel .sweet-tooth-carousel,
    #hero-carousel .swiper-slide img {
        height: 300px;
    }
}

@media (max-width: 480px) {

    #hero-carousel .sweet-tooth-carousel,
    #hero-carousel .swiper-slide img {
        height: 250px;
    }
}

/* Ajustes para o carrossel de eventos */
#eventos-carousel {
    width: 100%;
    max-width: 100%;
}

/* Garantir que o carrossel de eventos não quebre o layout */
.event-types .container {
    overflow: visible;
}

/* Manter os cards de eventos visíveis abaixo do carrossel */
.event-grid {
    margin-top: 60px;
}

/* Ajuste de z-index para evitar sobreposições */
.sweet-tooth-carousel {
    z-index: 10;
}

.navbar {
    z-index: 1001;
    /* Garantir que o menu fique acima de tudo */
}