/*
 * CORREÇÃO ALTURA HERO-SLIDER - SAVAS
 * Ajusta section hero-slider para ter exatamente a altura do banner
 * Remove sobras e garante padding 0 - colado ao menu
 */

/* ==================== CORREÇÃO ALTURA HERO-SLIDER ==================== */

/* DESKTOP - Altura exata do banner sem sobras */
.hero-slider {
    /* Altura específica para coincidir com banner */
    height: 500px !important; /* Altura exata do banner desktop */
    min-height: 500px !important;
    max-height: 500px !important; /* Evita sobras */
    
    /* Remove qualquer espaçamento */
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* Garante que não há overflow */
    overflow: hidden !important;
    
    /* Posicionamento preciso */
    position: relative !important;
    display: block !important;
}

/* Container do Swiper - sem espaçamentos */
.hero-swiper {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Wrapper do Swiper - altura exata */
.swiper-wrapper {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Slides individuais - altura exata */
.swiper-slide {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Hero slide - preenche toda a altura */
.hero-slide {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ==================== MOBILE (≤ 768px) ==================== */
@media (max-width: 768px) {
    .hero-slider {
        /* Altura específica para banner mobile */
        height: 400px !important; /* Altura exata do banner mobile */
        min-height: 400px !important;
        max-height: 400px !important; /* Evita sobras */
        
        /* Remove espaçamentos */
        margin: 0 !important;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Correção para imagem mobile - mostrar completa */
    .hero-slide {
        background-size: contain !important;
        background-color: #000 !important;
    }
}

/* ==================== MOBILE PEQUENO (≤ 480px) ==================== */
@media (max-width: 480px) {
    .hero-slider {
        /* Altura ajustada para telas pequenas */
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;
        
        /* Remove espaçamentos */
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==================== TABLET (769px - 1024px) ==================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-slider {
        /* Altura intermediária para tablet */
        height: 450px !important;
        min-height: 450px !important;
        max-height: 450px !important;
        
        /* Remove espaçamentos */
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==================== DESKTOP GRANDE (> 1024px) ==================== */
@media (min-width: 1025px) {
    .hero-slider {
        /* Altura máxima para desktop grande */
        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
        
        /* Remove espaçamentos */
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==================== ORIENTAÇÃO LANDSCAPE MOBILE ==================== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-slider {
        /* Altura reduzida para landscape */
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }
}

/* ==================== PWA / APLICATIVOS MÓVEIS ==================== */
@media (display-mode: standalone), 
       (display-mode: fullscreen),
       (display-mode: minimal-ui) {
    
    .hero-slider {
        /* Altura otimizada para apps */
        height: 350px !important;
        min-height: 350px !important;
        max-height: 350px !important;
        
        /* Remove espaçamentos */
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==================== CORREÇÃO PARA PRIMEIRO ELEMENTO ==================== */

/* Garante que hero-slider como primeiro elemento não tenha espaçamento */
.main-content > .hero-slider:first-child,
main > .hero-slider:first-child,
body > .hero-slider:first-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==================== CORREÇÃO DE NAVEGAÇÃO SWIPER ==================== */

/* Posicionamento correto dos controles */
.swiper-button-next,
.swiper-button-prev {
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.swiper-pagination {
    bottom: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==================== CORREÇÃO DE CONTEÚDO ==================== */

/* Hero content centralizado */
.hero-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 20px !important;
}

/* ==================== DEBUG (Remover em produção) ==================== */
/*
.hero-slider {
    border: 2px solid lime !important;
    box-sizing: border-box !important;
}

.hero-slide {
    border: 1px solid red !important;
}
*/