/* Location map (bt#8) -- the "Where we are" block on /visit/. Behaviour
   lives in static/js/map-embed.js; colour, type and spacing tokens all come
   from site.css, nothing is redefined here.

   The block holds a prompt until the visitor asks for the map, then the
   iframe takes the same box -- so the section never changes height on load
   and nothing below it jumps. */

.map-embed {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(16rem, 42vw, 26rem);
  margin: 1rem 0 .8rem;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
}

.map-prompt {
  max-width: 34rem;
  margin: 0;
  padding: clamp(1rem, 4vw, 2rem);
  text-align: center;
}

/* [hidden] loses to the display rules above -- and to .btn's inline-block --
   so both hidden states have to be spelled out. Otherwise the prompt sits on
   top of the map it just loaded, and a JS-off visitor is shown a button that
   could never do anything. */
.map-prompt[hidden] { display: none; }
.map-load[hidden] { display: none; }

.map-prompt-note {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.map-prompt-link {
  margin: 1rem 0 0;
  font-size: var(--step--1);
}

.map-frame {
  display: block;
  width: 100%;
  height: clamp(16rem, 42vw, 26rem);
  border: 0;
}