/* =================================================================
   Map embed — a click-to-load Google Map. Until the visitor asks for
   it, the frame shows a drawn street plan and a button, so the page
   makes no request to Google (faster, and no third-party cookies).
   js/components/map-embed.js swaps in the iframe; without the script
   the "Open in Google Maps" link below the frame still works.
   ================================================================= */

.map-embed {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: #DCEBEE;
  box-shadow: var(--shadow-soft);
}

/* Stylised street plan (decorative, not a real map) */
.map-embed__preview {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 58% 44%, rgb(var(--color-amber-rgb) / 0.35) 0 4rem, transparent 4.1rem),
    linear-gradient(28deg, transparent 0 46%, var(--color-paper) 46% 49%, transparent 49%),
    linear-gradient(118deg, transparent 0 58%, var(--color-paper) 58% 60%, transparent 60%),
    linear-gradient(90deg, transparent 0 30%, rgb(255 255 255 / 0.7) 30% 31%, transparent 31% 72%, rgb(255 255 255 / 0.7) 72% 73%, transparent 73%),
    linear-gradient(0deg, transparent 0 22%, rgb(255 255 255 / 0.7) 22% 23%, transparent 23% 70%, rgb(255 255 255 / 0.7) 70% 71%, transparent 71%),
    linear-gradient(135deg, #D4E7EA, #C7E0C0);
}

.map-embed__pin {
  position: absolute;
  top: 44%;
  left: 58%;
  width: 6.4rem;
  height: 6.4rem;
  padding: 1rem;
  border-radius: 50% 50% 50% 0;
  background: var(--color-paper);
  box-shadow: var(--shadow-raised);
  transform: translate(-50%, -100%) rotate(-45deg);
}

.map-embed__pin-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(45deg);
}

.map-embed__load {
  position: absolute;
  inset-inline: 1.6rem;
  bottom: 1.6rem;
  z-index: 1;
  box-shadow: var(--shadow-soft);
}

.map-embed__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 481px) {
  .map-embed__load { inset-inline: auto; inset-inline-start: 1.6rem; }
}