/**
 * Giromundo - Hero Banner Responsivo
 * Banner simples e responsivo usando imagem completa
 */

/* ========================================
   CONTAINER DO BANNER
======================================== */

.hero-banner-image {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 40px;
    overflow: hidden;
    background-color: #4fc3f7;
}

/* Imagem principal do banner */
.hero-full-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

/* ========================================
   DESKTOP GRANDE (1200px+)
======================================== */

@media (min-width: 1200px) {
    .hero-banner-image {
        margin-bottom: 60px;
    }
    
    .hero-full-image {
        max-height: 700px;
    }
}

/* ========================================
   DESKTOP (992px - 1199px)
======================================== */

@media (min-width: 992px) and (max-width: 1199px) {
    .hero-banner-image {
        margin-bottom: 50px;
    }
    
    .hero-full-image {
        max-height: 600px;
    }
}

/* ========================================
   TABLET (768px - 991px)
======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .hero-banner-image {
        margin-bottom: 40px;
    }
    
    .hero-full-image {
        max-height: 450px;
    }
}

/* ========================================
   MOBILE (até 767px)
======================================== */

@media (max-width: 767px) {
    .hero-banner-image {
        margin-bottom: 30px;
    }
    
    .hero-full-image {
        max-height: 350px;
    }
}

/* ========================================
   MOBILE SMALL (até 480px)
======================================== */

@media (max-width: 480px) {
    .hero-banner-image {
        margin-bottom: 20px;
    }
    
    .hero-full-image {
        max-height: 250px;
    }
}

/* ========================================
   MODO PAISAGEM EM MOBILE
======================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .hero-full-image {
        max-height: 280px;
    }
}

/* ========================================
   MELHORIAS DE PERFORMANCE
======================================== */

.hero-full-image {
    /* Hardware acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* Suaviza imagem redimensionada */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* Lazy loading */
    loading: lazy;
}

/* Animação de fade-in ao carregar */
.hero-full-image {
    opacity: 0;
    animation: fadeIn 0.6s ease-in forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ========================================
   ACESSIBILIDADE
======================================== */

/* Remove animação se usuário preferir movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .hero-full-image {
        animation: none;
        opacity: 1;
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    .hero-banner-image {
        border: 2px solid #003d5c;
    }
}

/* ========================================
   ESTADOS DE LOADING
======================================== */

/* Placeholder enquanto imagem carrega */
.hero-banner-image::before {
    content: '';
    display: block;
    padding-top: 50%;
    background: linear-gradient(135deg, #4fc3f7 0%, #81d4fa 50%, #b3e5fc 100%);
}

.hero-banner-image:has(img[src])::before {
    display: none;
}

/* ========================================
   PRINT
======================================== */

@media print {
    .hero-banner-image {
        page-break-inside: avoid;
    }
    
    .hero-full-image {
        max-height: none;
    }
}