/* Mobile/Tablet overrides (loaded after styles.css) */

/* 1) Prevent horizontal scroll issues */
html, body { overflow-x: hidden; }

/* 2) Header/nav: make it wrap nicely on small screens */
@media (max-width: 820px){
  .nav{
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
  }
  .brand{
    width: 100%;
    justify-content: center;
  }
  .brand img{ height: 42px; }
  .menu{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
    font-size: 14px;
    gap: 8px;
  }
  .menu a{ padding: 6px 10px; }
}

/* 3) Sections/containers: more compact paddings */
@media (max-width: 520px){
  .container{ padding: 0 12px; }
  .section{ padding: 24px 0; }
}

/* 4) Modals (events/consent/terms): fit in viewport */
@media (max-width: 820px){
  .event-detail:target > .event-detail-inner,
  .consent-modal{
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
}

/* 5) Event detail grid: stack on phone */
@media (max-width: 760px){
  .event-detail-grid{ grid-template-columns: 1fr; }
}