/* Snaps T Travel: mobile-only responsive repair, load AFTER snaps-homepage-fixed.css.
   Keeps the same PHP markup, image and province click handlers. */
@media (max-width: 1000px) {
  .hero { min-height: 0 !important; height: auto !important; padding: 46px 4% 44px !important; overflow: visible !important; }
  .hero > .hero-slideshow { inset: 0 !important; overflow: hidden !important; border-radius: inherit; }
  .hero > .hero-copy { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 650px !important; height: auto !important; transform: none !important; margin: 0 auto 24px !important; z-index: 5 !important; }
  .hero > .sa-map.proper-map {
    position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important;
    width: min(100%, 470px) !important; height: auto !important; aspect-ratio: 1340 / 1174 !important;
    max-width: 100% !important; margin: 16px auto 0 !important; transform: none !important;
    display: block !important; z-index: 6 !important; overflow: visible !important;
  }
  .hero > .sa-map.proper-map > img.proper-map-img {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    display: block !important; object-fit: fill !important; opacity: 1 !important; visibility: visible !important;
    max-width: none !important; z-index: 1 !important;
  }
  .hero > .sa-map.proper-map > button.province {
    position: absolute !important; transform: translate(-50%, -50%) !important;
    z-index: 3 !important; min-width: 36px !important; min-height: 36px !important;
    padding: 0 !important; margin: 0 !important; touch-action: manipulation;
    font-size: 0 !important; line-height: 1 !important; white-space: nowrap;
  }
  .hero > .sa-map.proper-map > button.province::before {
    content: '' !important; display: block !important; width: 12px !important; height: 12px !important;
    margin: auto !important; background: #ff7518 !important; border: 2px solid white !important;
    border-radius: 50% !important; box-shadow: 0 1px 7px #002a !important;
  }
  .hero > .sa-map.proper-map > button.province:focus-visible { outline: 3px solid #ffb65e !important; outline-offset: 2px !important; border-radius: 50%; }
  .hero > .province-panel { display: none !important; }
  .hero > .pop, .hero > .province-pop {
    position: relative !important; inset: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: min(100%, 470px) !important; max-width: 100% !important; margin: 14px auto 0 !important;
    z-index: 20 !important; box-sizing: border-box !important;
  }
  .hero .hero-copy h1 { font-size: clamp(36px, 8vw, 58px) !important; }
  .hero .hero-copy h2 { font-size: clamp(23px, 5vw, 32px) !important; }
  .hero .hero-copy p { font-size: 15px !important; }
  .hero .hero-copy .orange { min-height: 44px; }
}
@media (max-width: 480px) {
  .hero { padding: 30px 4% 34px !important; }
  .hero > .hero-copy { margin-bottom: 18px !important; }
  .hero > .sa-map.proper-map { width: 100% !important; margin-top: 10px !important; }
  .hero > .sa-map.proper-map > button.province { min-width: 34px !important; min-height: 34px !important; }
  .header { max-width: 100%; }
  .nav.mobile-open { max-width: calc(100vw - 24px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-slide { animation: none !important; }
  .hero .slide-cape-town { opacity: 1 !important; }
}