/* =====================================================================
   RESPONSIVO — main.css é mobile-first.
   Ajustes pra telas maiores e preferências de SO.
   ===================================================================== */

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .map-box { height: 480px; }
}

@media (min-width: 900px) {
  :root { --max-w: 880px; }
  .section { padding: 48px 24px 16px; }

  /* Em telas maiores volta a nav horizontal lateral no topo e esconde bottom nav */
  .bottomnav { display: none; }
  body { padding-bottom: 32px; }

  .topbar {
    height: 64px;
  }
  .topbar-inner::after {
    content: "";
  }

  .hero-title { font-size: 56px; }
  .map-box { height: 520px; }
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    /* só aplica o esquema escuro se o usuário não escolheu explicitamente light */
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}