/* Mobile-first refinements */

@media (max-width: 767px) {
  :root {
    --header-h: 56px;
    --map-h: min(62vh, 520px);
  }

  .hero {
    min-height: clamp(380px, 68vh, 560px);
  }

  .hero__content {
    padding: 4.5rem 1.15rem 2.5rem;
  }

  .hero__title {
    font-size: clamp(2.35rem, 11vw, 3.2rem);
  }

  .hero__compass {
    width: 56px;
    height: 56px;
    right: 5%;
    top: 14%;
    opacity: 0.3;
  }

  .map-section,
  .places-section,
  .routes-section {
    padding: 2.25rem 1rem;
  }

  .em-marker {
    width: 40px;
    height: 40px;
  }

  .em-marker__inner {
    font-size: 15px;
  }

  .place-panel__actions .btn {
    flex: 1 1 calc(50% - 0.5rem);
  }

  .discovery-badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}

@media (max-width: 380px) {
  .brand__text {
    font-size: 1.15rem;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}