/*
 * sd-map — click-to-load map (Session 3.2 follow-up; Blueprint 5.5 location/map information)
 * Privacy (D-017): the Google map is not loaded until the visitor clicks "Show map" — no data transfer to Google
 * and no third-party cookies before that click. Until then a schematic vector map (not a real map) with the
 * address is shown. Without JavaScript a link opens the location in Google Maps instead of the button.
 * Map source: coordinates of the owner's map link (Owner Inputs 1), data-sd-map-src on the component.
 * Use: footer (model 1); later the Contact page.
 */

.sd-map {
  /* Own text colours: the map sits on light surfaces even inside the blue footer */
  --sd-color-text-muted: var(--sd-color-gray-600);
  --sd-color-text-default: var(--sd-color-text);
  --sd-color-link: var(--sd-color-brand-blue);
  --sd-color-link-hover: var(--sd-color-blue-hover);
  position: relative;
  overflow: hidden;
  min-height: 15rem;   /* 240px: the pin stays clear of the address at every width (Session 9.2; was 12.5rem) */
  border-radius: var(--sd-radius-md);
  background: #E7ECF2;   /* the illustration's base colour */
  color: var(--sd-color-text-default);
}

.sd-map__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sd-map__overlay {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: var(--sd-space-2);
  min-height: inherit;
  height: 100%;
  padding: var(--sd-space-4);
  background: linear-gradient(to top, rgb(255 255 255 / 0.95) 0, rgb(255 255 255 / 0.95) 46%, rgb(255 255 255 / 0) 62%);
}

.sd-map__address { font-weight: var(--sd-font-weight-medium); color: var(--sd-color-brand-blue); }

.sd-map__note { font-size: var(--sd-font-size-label); line-height: var(--sd-line-height-label); color: var(--sd-color-text-muted); }

.sd-map__note a { color: var(--sd-color-brand-blue); }

.sd-map__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}