/* Melhorias para responsividade em diferentes dispositivos */

/* Ajustes gerais para mobile vertical */
@media (max-width: 767px) {
    /* Melhorias para a exibição de data no mobile - VERSÃO APRIMORADA */
    .event-meta-mobile {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin: 0.75rem 0 1.25rem;
        font-size: 0.95rem;
        color: var(--color-text);
        background-color: white;
        padding: 1rem;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        border-left: 5px solid var(--color-green);
        width: 100%; /* Garantir largura total */
        box-sizing: border-box; /* Incluir padding na largura */
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .event-meta-mobile-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    }
    
    .event-meta-mobile-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .event-meta-mobile i {
        color: var(--color-green);
        font-size: 1.1rem;
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(142, 225, 209, 0.15);
        border-radius: 50%;
        flex-shrink: 0;
    }
    
    /* Ajustes para o layout da página de evento */
    .event-title {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }
    
    .event-header {
        margin-bottom: 0.5rem;
        padding-bottom: 1rem;
    }
    
    .event-meta {
        display: none; /* Esconder a versão desktop dos metadados */
    }
    
    /* CORREÇÃO: Garantir que todos os cards ocupem toda a largura no mobile sem ultrapassar */
    .sidebar-section {
        width: 100% !important; /* Forçar largura total */
        margin-left: 0 !important; /* Remover margem esquerda */
        margin-right: 0 !important; /* Remover margem direita */
        box-sizing: border-box; /* Incluir padding na largura */
        max-width: 100vw !important; /* CORREÇÃO: Limitar à largura da viewport */
        overflow: hidden; /* CORREÇÃO: Esconder conteúdo que ultrapassa */
    }
    
    .sidebar-content {
        padding: 1.25rem;
        width: 100%; /* Garantir largura total */
        box-sizing: border-box; /* Incluir padding na largura */
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Melhorias para o mapa */
    .location-map {
        height: 200px;
        z-index: 1; /* Garantir que o mapa não sobreponha o menu fixo */
        width: 100%; /* Garantir largura total */
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Melhorias para os botões de ação */
    .action-buttons {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%; /* Garantir largura total */
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .action-button {
        width: 100%;
        justify-content: center;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Reordenação dos cards no mobile - NOVA ORDEM SOLICITADA */
    .event-content {
        display: flex;
        flex-direction: column;
        width: 100%; /* Garantir largura total */
        padding: 0; /* Remover padding */
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
        overflow: hidden; /* CORREÇÃO: Esconder conteúdo que ultrapassa */
    }
    
    /* Ordem específica para mobile: 
       1. Descrição (sempre primeiro)
       2. Localização
       3. Previsão do tempo
       4. Data e hora
       5. Organizador
    */
    .event-main {
        order: 0 !important; /* Descrição sempre primeiro */
        width: 100% !important; /* Garantir largura total */
        margin-bottom: 1rem; /* Adicionar espaço abaixo */
        max-width: 100% !important; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
        overflow: hidden; /* CORREÇÃO: Esconder conteúdo que ultrapassa */
    }
    
    .sidebar-section.location-section {
        order: 2; /* Localização segundo */
        width: 100% !important; /* Garantir largura total */
        margin-bottom: 1rem; /* Adicionar espaço abaixo */
        max-width: 100% !important; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .sidebar-section.weather-section {
        order: 3; /* Previsão do tempo terceiro */
        width: 100% !important; /* Garantir largura total */
        margin-bottom: 1rem; /* Adicionar espaço abaixo */
        max-width: 100% !important; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .sidebar-section.organizer-section {
        order: 5; /* Organizador quinto */
        width: 100% !important; /* Garantir largura total */
        margin-bottom: 1rem; /* Adicionar espaço abaixo */
        max-width: 100% !important; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Melhorias para o botão de calendário no mobile */
    .calendar-button-container {
        margin: 1rem 0;
        display: flex;
        justify-content: center;
        width: 100%; /* Garantir largura total */
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .calendar-button {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* CORREÇÃO: Garantir que o container principal não tenha padding excessivo */
    .container {
        padding: 0 1rem;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
        overflow: hidden; /* CORREÇÃO: Esconder conteúdo que ultrapassa */
    }
    
    /* CORREÇÃO: Garantir que a barra lateral ocupe toda a largura sem ultrapassar */
    .event-sidebar {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
        overflow: hidden; /* CORREÇÃO: Esconder conteúdo que ultrapassa */
    }
    
    /* CORREÇÃO: Ajustar a imagem do evento para não ultrapassar a largura */
    .event-image-container {
        max-width: 100% !important;
        overflow: hidden;
    }
    
    .event-image {
        max-width: 100% !important;
    }
    
    /* CORREÇÃO: Ajustar o container de descrição para não ultrapassar a largura */
    .event-description-container {
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 1.5rem;
    }
    
    .event-description {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* NOVO: Ajustes para celulares na horizontal */
@media (min-width: 568px) and (max-width: 896px) and (orientation: landscape) {
    /* Ajustes para o header em landscape */
    .site-header {
        padding: 0.5rem 0;
    }
    
    .event-title {
        font-size: 1.6rem;
        margin-bottom: 0.75rem;
    }
    
    /* Melhorar uso do espaço horizontal */
    .event-content {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Layout de duas colunas em landscape */
        gap: 1rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
        overflow: hidden; /* CORREÇÃO: Esconder conteúdo que ultrapassa */
    }
    
    /* Descrição ocupa toda a largura */
    .event-main {
        grid-column: 1 / -1;
        order: 0 !important;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Distribuir cards em duas colunas */
    .sidebar-section.location-section {
        grid-column: 1;
        grid-row: 2;
        order: 2;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .sidebar-section.weather-section {
        grid-column: 2;
        grid-row: 2;
        order: 3;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .sidebar-section.organizer-section {
        grid-column: 1 / -1;
        grid-row: 3;
        order: 5;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Ajustes para o mapa em landscape */
    .location-map {
        height: 150px;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Ajustes para a imagem do evento */
    .event-image {
        height: 250px;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Ajustes para o menu fixo em landscape */
    .mobile-nav {
        padding: 0.5rem 0;
    }
    
    .mobile-nav a {
        font-size: 0.8rem;
    }
    
    .mobile-nav i {
        font-size: 1.1rem;
        margin-bottom: 0.15rem;
    }
    
    /* Ajustes para o botão de calendário */
    .calendar-button-container {
        margin: 0.5rem 0 1rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
}

/* NOVO: Ajustes específicos para iPads e tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Layout híbrido para iPads */
    .event-content {
        display: grid;
        grid-template-columns: 3fr 2fr; /* Proporção ajustada para tablets */
        gap: 1.5rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
        overflow: hidden; /* CORREÇÃO: Esconder conteúdo que ultrapassa */
    }
    
    /* Ajustes para a barra lateral em iPads */
    .event-sidebar {
        position: sticky;
        top: 70px;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Ajustes para o tamanho da fonte */
    .event-title {
        font-size: 2rem;
    }
    
    .event-description {
        font-size: 1.05rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Ajustes para o mapa em iPads */
    .location-map {
        height: 220px;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Ajustes para a imagem do evento */
    .event-image {
        height: 350px;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Melhorias para os botões de ação */
    .action-buttons {
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .action-button {
        flex: 1;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    /* Ajustes para o botão de calendário */
    .calendar-button-container {
        margin: 0.5rem 0 1.5rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .calendar-button {
        padding: 0.7rem 1.2rem;
        font-size: 0.95rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
}

/* NOVO: Ajustes para iPads Pro e tablets maiores */
@media (min-width: 1025px) and (max-width: 1366px) {
    .container {
        max-width: 1100px;
    }
    
    .event-content {
        grid-template-columns: 2fr 1fr; /* Manter proporção desktop */
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .event-sidebar {
        position: sticky;
        top: 80px;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
}

/* NOVO: Ajustes para iPads em orientação landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .event-content {
        grid-template-columns: 2fr 1fr; /* Mais espaço para conteúdo principal */
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .event-image {
        height: 400px; /* Imagem maior em landscape */
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .location-map {
        height: 250px; /* Mapa maior em landscape */
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
}

/* Ajustes específicos para telas muito pequenas */
@media (max-width: 480px) {
    .event-tags {
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .event-tag {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
    
    .sidebar-content {
        padding: 1rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
    }
    
    .weather-icon {
        font-size: 2.5rem;
    }
    
    .weather-date {
        font-size: 0.8rem;
    }
    
    /* CORREÇÃO: Ajustar o padding do container para evitar overflow */
    .container {
        padding: 0 0.75rem;
        max-width: 100%; /* CORREÇÃO: Impedir que ultrapasse a largura da tela */
        overflow-x: hidden; /* CORREÇÃO: Esconder overflow horizontal */
    }
    
    /* CORREÇÃO: Ajustar os elementos para não ultrapassarem a largura da tela */
    body {
        overflow-x: hidden; /* CORREÇÃO: Esconder overflow horizontal do body */
        max-width: 100vw; /* CORREÇÃO: Limitar à largura da viewport */
    }
    
    /* CORREÇÃO: Remover margens negativas que podem causar overflow */
    .sidebar-section, 
    .event-main, 
    .event-meta-mobile,
    .event-sidebar {
        margin-left: 0;
        margin-right: 0;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        border-radius: var(--radius-md);
    }
    
    .sidebar-header {
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
    
    /* CORREÇÃO: Ajustar a imagem para não ultrapassar a largura */
    .event-image-container {
        max-width: 100%;
        overflow: hidden;
    }
}

/* Correção para o bug do mapa sobrepondo o menu fixo */
.mobile-nav {
    z-index: 1000 !important; /* Garantir que o menu tenha prioridade sobre o mapa */
}

.leaflet-map-pane {
    z-index: 1 !important; /* Reduzir o z-index do mapa */
}

.leaflet-top, .leaflet-bottom {
    z-index: 10 !important; /* Reduzir o z-index dos controles do mapa */
}