/* ─────────────────────────── El mapa del local ────────────────────────────

   Lived inside relojes.css until the rest of the site asked for the same map.
   It is a block of its own now: nothing here depends on the watches landing,
   and every colour it needs has a literal fallback behind the token, because
   outside that landing the --rl-* custom properties do not exist.

   The tint is baked into the image file rather than applied here. That is the
   whole reason this replaced Google's embed: on our own image a curve can
   separate the white roads from the fill they sit on, and on a cross-origin
   frame it cannot — see includes/mapa-local.php for the long version.        */

.hm-mapa {
  --hm-oro: var(--rl-gold-display, var(--color-gold, #9e8121));
  --hm-papel: #fdfbf5;
  --hm-base: #f7f1e4;
  --hm-rotulo: #6b5227;
  --hm-sitio: #85703f;

  position: relative;
  overflow: hidden;
  min-height: 34rem;
  background: var(--hm-base);
}

/* Bricks gave its map element the site's corner radius. Kept as an exception
   so the landing, where the panel meets the card square, is unaffected. */
.hm-mapa[data-radio] {
  border-radius: var(--radius, 8px);
}

.hm-mapa__enlace {
  position: absolute;
  inset: 0;
  display: block;
}

.hm-mapa__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The panel is tall and narrow on desktop, short and wide on mobile, and the
     local sits dead centre in the source. Anchoring the crop to the centre is
     what keeps it on screen in both. */
  object-position: center;
  transition: transform .5s ease;
}

.hm-mapa__enlace:hover .hm-mapa__imagen,
.hm-mapa__enlace:focus-visible .hm-mapa__imagen {
  transform: scale(1.03);
}

/* The link fills the panel, so its focus ring has to sit inside or the panel's
   own overflow clips it away. */
.hm-mapa__enlace:focus-visible {
  outline: 2px solid var(--hm-oro);
  outline-offset: -4px;
}

/* Pin and name, stacked over the centre of the crop. Translated up by half its
   own height so the point of the pin lands on the centre, not its middle. */
.hm-mapa__marca {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: .6rem;
  transform: translate(-50%, -60%);
  color: var(--hm-oro);
  pointer-events: none;
}

/* Both lines sit on a pale map with no plate behind them. A soft halo of the
   map's own cream keeps them readable wherever the crop lands them. */
.hm-mapa__rotulo,
.hm-mapa__sitio {
  font-family: Montserrat, system-ui, sans-serif;
  white-space: nowrap;
  text-shadow: 0 0 4px var(--hm-papel), 0 0 8px var(--hm-papel);
}

.hm-mapa__rotulo {
  font-size: var(--text-s, 1.4rem);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hm-rotulo);
}

/* The shop hangs off the building rather than sitting beside it. The arrow is
   what carries that: it says "inside", which two stacked lines alone would not. */
.hm-mapa__sitio {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .1rem;
  padding-left: 1.4rem;
  font-size: var(--text-xs, 1.2rem);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--hm-sitio);
}

.hm-mapa__flecha {
  flex: none;
  opacity: .75;
}

/* ODbL asks for a visible credit. Small and quiet, but never hidden. It lives
   in the markup instead of the image because the panel is cropped tall on
   desktop and short on mobile, and inside the file a crop ate it. */
.hm-mapa__credito {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: .4rem .8rem;
  background: rgb(253 251 245 / .82);
  border-radius: 3px 0 0 0;
  font-size: var(--text-xs, 1.2rem);
  line-height: 1;
  color: var(--hm-rotulo);
}

.hm-mapa__credito a {
  color: inherit;
  text-decoration: none;
}

.hm-mapa__credito a:hover,
.hm-mapa__credito a:focus-visible {
  text-decoration: underline;
}

/* ── Fallback: the embed, while a local has no rendered image ──────────────

   Google's embed is a cross-origin document — no stylesheet of ours reaches
   inside it. What does reach it is `filter`, which the browser applies to the
   composited frame the way it would to an image. So the map gets the site's
   beiges and browns without an API key, a Map ID, or a line of Google's JS.

   Two values do the work here, and both run against the instinct.

   `saturate` goes below 1. Sepia is itself a yellow, so saturating it does not
   enrich the browns — it drives the flat areas to canary and the whole map
   reads as mustard. Pulling saturation down leaves the base a quiet beige and
   puts the browns and golds where they belong: labels, POIs, road casings.

   `brightness` also goes below 1, and this is the one that is easy to get
   backwards. A beige map sounds like it wants more light, but Google's base is
   already near-white: roads are white on a barely grey fill, maybe 4% apart.
   Brighten that and both clip to the same value — the street network vanishes
   and the panel reads as blown out. Darkening first creates the room in which
   contrast can separate them again.

   The cost, worth stating: the filter is indiscriminate. The pin stops being
   red and the water goes beige. Neither carries meaning the address block
   beside it doesn't already carry in words.                                  */

.hm-mapa[data-fallback='embed'] {
  background: #e3d9c4;
}

.hm-mapa__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(1) saturate(.8) hue-rotate(-10deg) brightness(.84) contrast(1.15);
}

/* Someone who asked the OS for more contrast is the last person who should be
   handed a tinted map with dimmed labels. Give them Google's own, untouched.
   Only the embed: the still image is already drawn at its final colours. */
@media (prefers-contrast: more) {
  .hm-mapa__frame {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-mapa__imagen,
  .hm-mapa__enlace:hover .hm-mapa__imagen,
  .hm-mapa__enlace:focus-visible .hm-mapa__imagen {
    transition: none;
    transform: none;
  }
}

@media (max-width: 900px) {
  .hm-mapa {
    min-height: 26rem;
  }
}