/* 
 * BANNER OPTIMIZATION CSS
 * Otimiza os banners da tela inicial para Android, iPhone e PC
 * Resolve o problema de banners cortados em dispositivos móveis
 */

/* ===== BANNER PRINCIPAL - OTIMIZAÇÃO RESPONSIVA ===== */

/* Desktop - Telas grandes (992px e acima) */
@media (min-width: 992px) {
    .hm-secmainbnnr .carousel-inner .carousel-item a img {
        height: 600px !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    
    .hm-secmainbnnr {
        height: 600px !important;
        overflow: hidden !important;
    }
}

/* Tablet - Telas médias (768px a 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hm-secmainbnnr .carousel-inner .carousel-item a img {
        height: 400px !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    
    .hm-secmainbnnr {
        height: 400px !important;
        overflow: hidden !important;
    }
}

/* Mobile - Telas pequenas (576px a 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hm-secmainbnnr .carousel-inner .carousel-item a img {
        height: 300px !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    
    .hm-secmainbnnr {
        height: 300px !important;
        overflow: hidden !important;
    }
}

/* Mobile pequeno - Telas muito pequenas (até 575px) */
@media (max-width: 575.98px) {
    .hm-secmainbnnr .carousel-inner .carousel-item a img {
        height: 250px !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    
    .hm-secmainbnnr {
        height: 250px !important;
        overflow: hidden !important;
    }
}

/* ===== OTIMIZAÇÕES ESPECÍFICAS PARA DISPOSITIVOS ===== */

/* iPhone SE e dispositivos muito pequenos */
@media (max-width: 375px) {
    .hm-secmainbnnr .carousel-inner .carousel-item a img {
        height: 200px !important;
    }
    
    .hm-secmainbnnr {
        height: 200px !important;
    }
}

/* iPhone 12/13/14 Pro Max e dispositivos grandes */
@media (min-width: 428px) and (max-width: 767px) {
    .hm-secmainbnnr .carousel-inner .carousel-item a img {
        height: 280px !important;
    }
    
    .hm-secmainbnnr {
        height: 280px !important;
    }
}

/* Android - Orientação paisagem */
@media (max-height: 500px) and (orientation: landscape) {
    .hm-secmainbnnr .carousel-inner .carousel-item a img {
        height: 180px !important;
    }
    
    .hm-secmainbnnr {
        height: 180px !important;
    }
}

/* ===== MELHORIAS NO CARROSSEL ===== */

/* Indicadores do carrossel responsivos */
.hm-secmainbnnr .carousel-indicators {
    bottom: 10px !important;
}

.hm-secmainbnnr .carousel-indicators button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    margin: 0 3px !important;
}

/* Botões de navegação responsivos */
.hm-secmainbnnr .carousel-control-prev,
.hm-secmainbnnr .carousel-control-next {
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.hm-secmainbnnr .carousel-control-prev {
    left: 10px !important;
}

.hm-secmainbnnr .carousel-control-next {
    right: 10px !important;
}

/* Mobile - botões menores */
@media (max-width: 767px) {
    .hm-secmainbnnr .carousel-control-prev,
    .hm-secmainbnnr .carousel-control-next {
        width: 35px !important;
        height: 35px !important;
    }
    
    .hm-secmainbnnr .carousel-control-prev {
        left: 5px !important;
    }
    
    .hm-secmainbnnr .carousel-control-next {
        right: 5px !important;
    }
}

/* ===== OTIMIZAÇÕES DE PERFORMANCE ===== */

/* Suavização de transições */
.hm-secmainbnnr .carousel-item {
    transition: transform 0.6s ease-in-out !important;
}

/* Otimização para dispositivos touch */
@media (hover: none) and (pointer: coarse) {
    .hm-secmainbnnr .carousel {
        touch-action: pan-y !important;
    }
}

/* ===== CORREÇÕES ESPECÍFICAS ===== */

/* Garantir que as imagens não sejam cortadas */
.hm-secmainbnnr .carousel-inner .carousel-item {
    background-color: #3e3e3e !important;
    overflow: hidden !important;
}

/* Manter proporção das imagens */
.hm-secmainbnnr .carousel-inner .carousel-item a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* ===== SUPORTE PARA DARK MODE ===== */

@media (prefers-color-scheme: dark) {
    .hm-secmainbnnr .carousel-indicators button {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }
    
    .hm-secmainbnnr .carousel-indicators button.active {
        background-color: rgba(255, 255, 255, 0.9) !important;
    }
}

/* ===== IMPRESSÃO ===== */

@media print {
    .hm-secmainbnnr {
        display: none !important;
    }
}