/* ==============================================================================
   MAP BLOCK (doc/07): the map of Furnitor's contact-02, between the
   studio's details and the form, as a still picture drawn once by
   scripts/mapa.sh (templates/blocks/map.html). It takes the theme's
   container, the width of the details above it and no wider, so the
   1200 px map is never stretched past its own pixels: 1170 px at
   1440 px, where the demo's live map is 535 px tall and ours 585. Under
   it, the caption: the address, the two ways out to a full map and the
   credit to OpenStreetMap, 70 px over the form (50 on a phone), the
   demo's pb-10.
   ============================================================================== */

.page > .block-map {
  grid-column: full;
  justify-self: center;
  width: var(--plain-container);
  max-width: none;
  margin: 0;
  padding-bottom: 50px;
}

@media (min-width: 48em) {
  .page > .block-map {
    padding-bottom: 70px;
  }
}

.block-map__picture,
.block-map__picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* The map loads lazily: until it arrives, its box keeps the size its
   width and height give it and shows the footer's grey of the palette,
   close to the map's own pale grey in light and to its inverted grey in
   dark, not a hole of the wrong colour.

   On a dark paper the picture is inverted and turned back to its hues
   (--map-filter, palettes.css), so the streets are light lines on a dark
   map instead of a white slab on the page. The studio's marker is drawn
   into the picture by scripts/mapa.sh and would invert with it: a copy
   of the same marker (marcador.svg, the file mapa.sh drew it from) sits
   on top, out of the filter, exactly over the drawn one, so it stays a
   black pin with its white edge in both modes. */
.block-map__picture {
  position: relative;
}

.block-map__picture img {
  background: var(--paper-tertiary-bg);
  filter: var(--map-filter);
}

/* mapa.sh draws the marker 48 px wide with its tip on the centre of a
   1200 px map (4 % of its width) and of the 600 px close cut a phone gets
   (8 %); the tip is 61 of the marker's 62.4 px of height, hence the
   97.8 % it rises. A copy drawn over the drawn one in light changes
   nothing, so it is there in both modes and needs no rule per palette. */
.block-map__picture::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8%;
  aspect-ratio: 40 / 52;
  background: url("/static/images/contacto/marcador.svg") center / contain no-repeat;
  transform: translate(-50%, -97.8%);
  pointer-events: none;
}

@media (min-width: 48em) {
  .block-map__picture::after {
    width: 4%;
  }
}

/* The caption is one line on a wide screen, the address and the links
   on the left and the credit pushed to the right, and wraps into
   lines of its own on a phone. */
.block-map__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 30px;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: var(--lh-body);
}

/* <address> is italic in every browser's own sheet; the details above
   it are upright, and so is this line. */
.block-map__address {
  color: var(--text-primary);
  font-style: normal;
}

.block-map__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The demo's "Get Direction": ink, underlined, the underline thickening
   on hover as the links of the details above do (text.css). */
.block-map__links a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.block-map__links a:hover {
  text-decoration-thickness: 2px;
}

/* The credit the tiles' licence asks for: small and grey, but in
   --text-muted, which still gives 5.17:1 on white (doc/07), so it stays
   readable rather than being a smudge. */
.block-map__credit {
  margin: 0 0 0 auto;
  font-size: var(--fs-13);
}

.block-map__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}