/* =============================================================================
   VIVEIRO VILLA GARDEN - CORREÇÕES MOBILE
   Desenvolvido por: Jay C Designer
   Website: jaycdesigner.com.br
   Copyright © 2025 Jay C Designer
   
   Correções específicas para problemas de responsividade mobile
============================================================================= */

/* Garante que nenhum elemento ultrapasse a largura da viewport */
html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    position: relative !important;
}

/* Correção específica para o loader */
.loader {
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
}

/* Correções específicas para elementos principais apenas em mobile */
@media (max-width: 768px) {
    * {
        box-sizing: border-box !important;
    }
}

/* Correções específicas para mobile */
@media (max-width: 768px) {
    /* Força layout em coluna única para o hero */
    .hero .container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
        align-items: center !important;
    }
    
    .hero-content {
        order: 1 !important;
        grid-column: 1 !important;
    }
    
    .hero-image {
        order: 2 !important;
        grid-column: 1 !important;
    }
    
    /* Correção crítica para o menu mobile */
    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 320px !important;
        height: 100vh !important;
        background: var(--white) !important;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15) !important;
        z-index: 999 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 0 !important;
    }
    
    .nav-menu.active {
        right: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Mobile Menu Overlay */
    .nav-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(3px) !important;
        z-index: 998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    .nav-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .nav-toggle {
        display: flex !important;
        z-index: 1000 !important;
    }
    
    .nav-toggle span {
        background: var(--secondary-color) !important;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
    
    /* Prevenção de overflow */
    .hero,
    .services,
    .about,
    .species,
    .contact,
    .footer {
        overflow-x: hidden !important;
    }
    
    /* Correção para evitar que o menu sobreponha o texto do hero */
    .hero .container {
        padding-top: calc(var(--header-height, 90px) + var(--safe-padding, 15px) * 2) !important;
        position: relative !important;
        z-index: 10 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    .hero-content {
        order: 1 !important;
    }
    
    .hero-image {
        order: 2 !important;
    }
    
    .hero-title {
        position: relative !important;
        z-index: 15 !important;
    }
    
    /* Proteção automática para seções em mobile */
    section[id]:not(.hero)::before {
        height: calc(var(--header-height, 90px) + var(--safe-padding, 15px)) !important;
        margin-top: calc(-1 * (var(--header-height, 90px) + var(--safe-padding, 15px))) !important;
    }
    
    /* Correções para imagens e mídia */
    img,
    video,
    iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Correções para elementos de largura fixa */
    .hero-title,
    .section-title,
    .hero-subtitle {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

@media (max-width: 480px) {
    /* Força layout em coluna única para o hero em telas pequenas */
    .hero .container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        text-align: center !important;
        align-items: center !important;
        padding-top: calc(var(--header-height, 80px) + var(--safe-padding, 12px) * 2) !important;
    }
    
    .hero-content {
        order: 1 !important;
        grid-column: 1 !important;
    }
    
    .hero-image {
        order: 2 !important;
        grid-column: 1 !important;
    }
    
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }
    
    /* Correção extra para telas muito pequenas */
    .hero .container {
        padding-top: calc(var(--header-height, 80px) + var(--safe-padding, 12px) * 2) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        text-align: center !important;
    }
    
    .hero-content {
        order: 1 !important;
    }
    
    .hero-image {
        order: 2 !important;
    }
    
    section[id]:not(.hero)::before {
        height: calc(var(--header-height, 80px) + var(--safe-padding, 12px)) !important;
        margin-top: calc(-1 * (var(--header-height, 80px) + var(--safe-padding, 12px))) !important;
    }
    
    /* Força quebra de linha em textos longos */
    h1, h2, h3, h4, h5, h6, p, span, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Garante que botões não excedam a tela */
    .btn,
    .filter-btn,
    .contact-actions .btn {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Correção para elementos que podem causar overflow horizontal específicos */
.nav-list,
.hero-buttons,
.filter-buttons,
.contact-actions,
.footer-content,
.about-stats {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Prevenção contra elementos com posicionamento que podem sair da tela */
[style*="position: absolute"],
[style*="position: fixed"] {
    max-width: 100vw !important;
}

/* Força responsividade em elementos inline */
.hero-title span,
.section-title span {
    display: inline !important;
    max-width: 100% !important;
}

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

/* Correção para grid de espécies em mobile */
@media (max-width: 768px) {
    .species-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        margin-bottom: 40px !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .species-card {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 auto !important;
    }
}

/* Correção para grid de parceiros em mobile */
@media (max-width: 768px) {
    .partners-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 15px !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .partner-item {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        min-width: auto !important;
    }
}

/* Correção específica para telas muito pequenas */
@media (max-width: 480px) {
    .species-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
        margin: 0 0 30px 0 !important;
    }
    
    .partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    
    .partner-item {
        padding: 15px 10px !important;
        height: 100px !important;
        max-width: none !important;
    }
}

/* Correção para rodapé em mobile */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .footer-brand,
    .footer-links,
    .footer-contact {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        text-align: left !important;
    }
    
    .footer-bottom {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}