/* ==========================================================================
   Lazy-loaded Google Maps embed.
   Used on des-moines.html, granger.html, and contact.html.
   Saves ~1.4MB on initial page load until the user clicks to load the map.
   ========================================================================== */

.map-lazy {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-mist);
  cursor: pointer;
  border: 0;
  padding: 0;
  font-family: inherit;
}

@media (max-width: 640px) {
  .map-lazy {
    aspect-ratio: 4 / 3;
  }
}

.map-lazy__static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.92);
}

.map-lazy__placeholder {
  position: absolute;
  inset: 0;
  background:
    /* faint grid — mimics map tiles */
    repeating-linear-gradient(
      0deg,
      rgba(11, 95, 255, 0.08) 0,
      rgba(11, 95, 255, 0.08) 1px,
      transparent 1px,
      transparent 32px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(11, 95, 255, 0.08) 0,
      rgba(11, 95, 255, 0.08) 1px,
      transparent 1px,
      transparent 32px
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(230, 239, 255, 1) 0%,
      rgba(229, 233, 240, 1) 100%
    );
}

/* Stylized pin marker inside the placeholder */
.map-lazy__pin {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 36px;
  height: 48px;
}

.map-lazy__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-signal);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.map-lazy__pin::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: var(--c-paper);
  border-radius: 50%;
}

.map-lazy__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0.15) 0%,
    rgba(17, 17, 17, 0.55) 100%
  );
  transition: background-color var(--motion-base) var(--easing);
}

.map-lazy:hover .map-lazy__overlay,
.map-lazy:focus-visible .map-lazy__overlay {
  background: linear-gradient(
    180deg,
    rgba(11, 95, 255, 0.25) 0%,
    rgba(9, 65, 184, 0.65) 100%
  );
}

.map-lazy__btn {
  background: var(--c-paper);
  color: var(--c-ink);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-5);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-lift);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-body);
}

/* Once loaded: iframe takes over the whole wrapper */
.map-lazy.is-loaded {
  cursor: default;
}

.map-lazy.is-loaded .map-lazy__placeholder,
.map-lazy.is-loaded .map-lazy__overlay {
  display: none;
}

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