/*
 * CORREÇÃO MOBILE BANNERS - SAVAS
 * Arquivo específico para corrigir exibição cortada dos banners em dispositivos móveis
 * Problema: Banner 768x400px aparecendo apenas 284x400px (cortado horizontalmente)
 * Solução: background-size: contain para mostrar imagem completa
 */

/* ==================== CORREÇÃO GLOBAL MOBILE ==================== */
@media (max-width: 768px) {
    /* CORREÇÃO PRINCIPAL: Hero Slider */
    .hero-slider {
        height: 400px !important; /* Altura fixa para manter proporção 768x400 */
        min-height: 400px !important;
        margin: 0 !important; /* Remove margem para alinhar com menu */
        padding: 0 !important; /* Remove padding para alinhar com menu */
    }
    
    /* CORREÇÃO: Mostrar imagem inteira no mobile */
    .hero-slide,
    .banner-item,
    .banner-hero {
        background-size: contain !important; /* Mostrar imagem completa */
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #000 !important; /* Fundo preto para áreas não cobertas */
    }
    
    /* Melhorar contraste do texto sobre fundo escuro */
    .hero-title,
    .banner-hero .banner-title {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
        color: #fff !important;
    }
    
    .hero-subtitle,
    .banner-hero .banner-subtitle {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
        color: #fff !important;
    }
    
    /* Melhorar visibilidade do conteúdo */
    .hero-content,
    .banner-hero .banner-content {
        background: rgba(0, 0, 0, 0.4) !important;
        border-radius: 12px !important;
        backdrop-filter: blur(5px) !important;
    }
}

/* ==================== MOBILE PEQUENO ==================== */
@media (max-width: 480px) {
    .hero-slider {
        height: 320px !important; /* Proporção ajustada para telas menores */
        min-height: 320px !important;
    }
    
    .hero-slide,
    .banner-item,
    .banner-hero {
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #000 !important;
    }
    
    .hero-content,
    .banner-hero .banner-content {
        background: rgba(0, 0, 0, 0.5) !important; /* Fundo mais escuro para contraste */
        padding: 15px !important;
        margin: 0 10px !important;
    }
}

/* ==================== APLICATIVOS MÓVEIS (PWA/WebView) ==================== */
@media (display-mode: standalone), 
       (display-mode: fullscreen),
       (display-mode: minimal-ui) {
    
    .hero-slider {
        height: 350px !important;
        min-height: 350px !important;
    }
    
    .hero-slide,
    .banner-item,
    .banner-hero {
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #000 !important;
        border-radius: 8px !important;
    }
    
    .hero-content,
    .banner-hero .banner-content {
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(8px) !important;
    }
}

/* ==================== ORIENTAÇÃO LANDSCAPE MOBILE ==================== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-slider {
        height: 250px !important; /* Menor altura para landscape */
        min-height: 250px !important;
    }
    
    .hero-slide {
        background-size: contain !important;
        background-position: center center !important;
    }
}

/* ==================== DEBUG HELPER ==================== */
/* Adicionar borda temporária para debug (remover em produção) */
/*
@media (max-width: 768px) {
    .hero-slide {
        border: 2px solid red !important;
    }
}
*/