/**
 * BannerCarouselV2 - Integração com a página principal
 * Estilos de integração e ajustes específicos para o hero banner
 */

/* Container do hero banner */
.tp-hero-3__area {
    position: relative;
    background-color: transparent;
}

#hero-banner-v2-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Remove qualquer margem/padding indesejado */
.tp-hero-3__area .bc-v2 {
    margin: 0;
    padding: 0;
}

/* Ajuste do espaçamento abaixo do banner */
.tp-hero-3__area + .tp-feature-5__area,
.tp-hero-3__area .tp-feature-5__area {
    margin-top: 0;
    position: relative;
    z-index: 1;
}

/* Responsividade específica para o hero */
@media (max-width: 1199px) {
    #hero-banner-v2-container .bc-v2__slides--21-9,
    #hero-banner-v2-container .bc-v2__slides--16-9 {
        aspect-ratio: 16 / 9; /* Força 16:9 em todas as resoluções menores */
    }
}

@media (max-width: 991px) {
    /* Tablet: mantém 16:9 para evitar bordas */
    #hero-banner-v2-container .bc-v2__slides--21-9,
    #hero-banner-v2-container .bc-v2__slides--16-9 {
        aspect-ratio: 16 / 9 !important;
    }
}

@media (max-width: 767px) {
    /* Mobile: mantém 16:9 para banners com conteúdo estratégico */
    #hero-banner-v2-container .bc-v2__slides--21-9,
    #hero-banner-v2-container .bc-v2__slides--16-9 {
        aspect-ratio: 16 / 9 !important;
    }
    
    /* Controles menores em mobile */
    #hero-banner-v2-container .bc-v2__control {
        width: 32px;
        height: 32px;
    }
    
    #hero-banner-v2-container .bc-v2__control svg {
        width: 14px;
        height: 14px;
    }
}

/* Garantir que o banner seja full-width */
.tp-hero-3__area.fix {
    overflow: visible;
}

/* Animação de entrada suave */
@keyframes fadeInHero {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#hero-banner-v2-container .bc-v2 {
    animation: fadeInHero 0.8s ease-out;
}

/* Preloader do banner */
#hero-banner-v2-container .bc-v2--loading {
    min-height: 500px;
}

@media (max-width: 767px) {
    #hero-banner-v2-container .bc-v2--loading {
        min-height: 300px;
    }
}