/* /css/responsive.css */
@media (max-width: 768px) {
  .tabButton {
    flex: 1 1 45%;
    margin: 4px;
    padding: 6px 8px;
    font-size: 0.9rem;
  }
  #tabButtons { flex-wrap: wrap; gap: 6px; }
  #filters { flex-direction: column; align-items: stretch; }
  #filters input, #filters select { width: 100%; }
  #map {   
    height: 60vh;
    margin-top: 2rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
  h1 { font-size: 1.8rem; margin-top: 1rem; }
  #eventCards > div { width: 100%; }
  #popupCard { padding: 1em; max-width: 90%; }
}