/* Map of the reviews — loaded only on /map, so the other 200 pages carry none
   of this. Inherits the site's tokens; adds nothing to the palette. */

.mapx {
  display: grid;
  gap: var(--gap);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 900px) {
  .mapx { grid-template-columns: minmax(0, 1fr) 23rem; align-items: start; }
  /* The map holds still while the list scrolls past it. 92px clears the
     sticky header. */
  .mapx__mapcol { position: sticky; top: 92px; }
}

/* ------------------------------------------------------------- the filters -- */
.mapx__filters {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-bottom: .9rem;
}
.mapx__filters .tag-pill {
  cursor: pointer; font: inherit;
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.mapx__filters .tag-pill.is-on {
  background: var(--accent); border-color: var(--accent); color: #241300;
}
.mapx__filters .tag-pill.is-on .n { opacity: .65; }

/* ----------------------------------------------------------------- the map -- */
.mapx__map {
  height: clamp(340px, 72vh, 760px);
  border-radius: var(--radius);
  border: 2px solid var(--rule);
  box-shadow: var(--shadow);
  background: var(--bg-sunk);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 899px) {
  /* Half the screen at most: the map must not swallow the page's scroll. */
  .mapx__map { height: min(46vh, 380px); }
}

.leaflet-container {
  font-family: var(--display);
  background: var(--bg-sunk);
}

/* OpenStreetMap's own rendering is bright and blue. Warming it a touch settles
   it into the cream palette without redrawing anybody's cartography — and the
   filter lands on the tile pane alone, so pins and popups keep their colour. */
.leaflet-tile-pane { filter: sepia(.16) saturate(.78) brightness(1.02) contrast(.94); }
@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.5) brightness(.88) contrast(.92); }
}

/* Controls, in the site's idiom rather than Leaflet's.
   Leaflet qualifies most of these with `.leaflet-container` or `.leaflet-touch`,
   so an unqualified override silently loses on specificity — hence the
   `.leaflet-container` prefixes below. */
.leaflet-container .leaflet-bar {
  border-radius: 10px;
  border: 2px solid var(--rule);
  box-shadow: var(--shadow);
}
.leaflet-container .leaflet-bar a {
  background: var(--bg-raise); color: var(--ink);
  width: 34px; height: 34px; line-height: 32px;
  border-bottom-color: var(--rule);
}
.leaflet-container .leaflet-bar a:first-child { border-radius: 8px 8px 0 0; }
.leaflet-container .leaflet-bar a:last-child { border-radius: 0 0 8px 8px; }
.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar a:focus { background: var(--accent); color: #241300; }
.leaflet-container .leaflet-bar a.leaflet-disabled { background: var(--bg-sunk); color: var(--ink-faint); }

.leaflet-container .leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg-raise) 88%, transparent);
  color: var(--ink-faint);
  font-family: var(--display); font-size: .66rem;
  padding: .15rem .5rem; border-radius: 8px 0 0 0;
}
.leaflet-container .leaflet-control-attribution a { color: var(--accent-ink); }

.mapx__noscript {
  padding: 1.4rem; color: var(--ink-soft); font-family: var(--display);
  font-size: .9rem; text-align: center;
}

.mapx__reset {
  margin-top: .7rem;
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  background: var(--bg-raise); color: var(--ink);
  border: 2px solid var(--rule); border-radius: 999px;
  padding: .45rem 1rem; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mapx__reset:hover { background: var(--accent); border-color: var(--accent); color: #241300; }

/* --------------------------------------------------------------- the pins -- */
.pinwrap { background: none; border: 0; }
.pin {
  --pin-bg: var(--accent);
  --pin-ink: #241300;
  position: relative;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--pin-bg);
  border: 2px solid var(--bg-raise);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease;
  transform-origin: 50% 130%;
}
/* The tail. It overlaps the circle's rim by a couple of pixels, in the pin's
   own colour, so the two read as one drop rather than a badge on a spike. */
.pin::after {
  content: ''; position: absolute;
  left: 50%; top: 22px; transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 13px solid var(--pin-bg);
}
.pin b {
  font-family: var(--display); font-weight: 800; font-size: .8rem; line-height: 1;
  color: var(--pin-ink);
}
/* Cakes and coffee get the ink pin, dinners the orange one — the same two
   categories the old WordPress map divided them into. */
.pin--sweet { --pin-bg: var(--ink); --pin-ink: var(--bg); }

/* Zoomed out, the four Helsinki pins sit on top of one another. Leaflet stacks
   markers by latitude, so the one you are pointing at has to be lifted out
   explicitly or the highlight happens underneath its neighbours. */
.pinwrap.is-near, .pinwrap.is-on { z-index: 1000 !important; }
.pinwrap.is-near .pin,
.pinwrap.is-on .pin { transform: scale(1.25); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.pinwrap.is-on .pin { outline: 3px solid var(--accent-glow); outline-offset: 2px; }

/* ------------------------------------------------------------- the popups -- */
.mapx-pop-wrap .leaflet-popup-content-wrapper {
  background: var(--bg-raise); color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  border: 2px solid var(--rule);
  padding: 0; overflow: hidden;
}
/* No `width: auto` here, however tempting: Leaflet measures the content and
   writes the width inline, and overriding it collapsed the popup to the
   narrowest column the text could be crammed into. */
.mapx-pop-wrap .leaflet-popup-content { margin: 0; line-height: 1.45; }
.mapx-pop-wrap .leaflet-popup-tip { background: var(--bg-raise); box-shadow: none; }
/* Leaflet's own rule is `.leaflet-container a.leaflet-popup-close-button`, so
   this has to match it element-for-element to win. Sized for a thumb. */
.leaflet-container .mapx-pop-wrap a.leaflet-popup-close-button {
  color: var(--ink); width: 34px; height: 34px;
  font: 20px/34px var(--display);
  /* It sits on the photograph, where a bare grey glyph disappears. */
  background: color-mix(in srgb, var(--bg-raise) 78%, transparent);
  backdrop-filter: blur(3px);
  border-radius: 0 calc(var(--radius) - 2px) 0 10px;
}
.leaflet-container .mapx-pop-wrap a.leaflet-popup-close-button:hover,
.leaflet-container .mapx-pop-wrap a.leaflet-popup-close-button:focus {
  color: #241300; background: var(--accent);
}

.mapx-pop__shot { display: block; }
.mapx-pop__shot img { width: 100%; height: 120px; object-fit: cover; }
.mapx-pop__body { padding: .7rem .85rem .85rem; }
.mapx-pop__kicker {
  font-family: var(--display); font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent-ink);
}
.mapx-pop__name {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.02rem; letter-spacing: -.02em; margin: .12rem 0 .18rem;
}
.mapx-pop__addr { font-family: var(--body); font-size: .82rem; color: var(--ink-soft); }
/* Prefixed, because Leaflet paints every link inside the map its own blue. */
.leaflet-container .mapx-pop__go {
  display: inline-block; margin-top: .5rem;
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.leaflet-container .mapx-pop__go:hover { color: var(--accent-ink); }

/* ----------------------------------------------------------- the clusters -- */
/* Stands in for several places too close together to draw apart. Deliberately
   a different shape from a pin — a circle that sits on the map rather than
   pointing at a doorway, because it is not one place. */
.clusterwrap { background: none; border: 0; }
.cluster {
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  border: 3px solid var(--bg-raise);
  /* The soft ring is what tells a group of five apart from the fifth place at a
     glance; without it a "5" bubble and a "5" pin are near enough identical. */
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--accent) 28%, transparent),
    0 3px 10px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cluster b {
  font-family: var(--display); font-weight: 800; font-size: .8rem; color: #241300;
}
.clusterwrap:hover .cluster { transform: scale(1.1); }

/* -------------------------------------------------------------- the list -- */
.mapx__listtop {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .8rem;
}
.mapx__listhead {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.03em; font-size: 1.1rem; margin: 0;
}
.mapx__count {
  margin: 0; font-family: var(--display); font-size: .72rem; color: var(--ink-faint);
}
.mapx__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.place {
  position: relative;
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--bg-raise);
  border: 2px solid var(--rule); border-radius: var(--radius);
  padding: .6rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.place.is-on { border-color: var(--accent); box-shadow: var(--shadow); }
.place__shot {
  flex: none; width: 84px; aspect-ratio: 4 / 3;
  border-radius: 9px; overflow: hidden; background: var(--bg-sunk);
}
.place__shot img { width: 100%; height: 100%; object-fit: cover; }
.noshot--sm span { font-size: .55rem; transform: none; }
.place__body { min-width: 0; }
.place__kicker {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint);
}
.place__n {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #241300; font-size: .62rem; letter-spacing: 0;
}
.place[data-kind="sweet"] .place__n { background: var(--ink); color: var(--bg); }
.place__name {
  font-family: var(--display); font-weight: 800; letter-spacing: -.025em;
  font-size: 1.02rem; line-height: 1.2; margin: .15rem 0 .1rem;
}
.place__name a { text-decoration: none; }
.place__name a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* The title's hit area is the whole card — a line of text is a mean target for
   a thumb. Same trick the recipe cards use. "Show on map" is lifted above it. */
.place__name a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.place__name a:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.place__addr { margin: 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.4; }
.place__approx {
  font-family: var(--display); font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 4px; padding: 0 .25rem;
  cursor: help;
}
.place__locate {
  display: none;              /* pointless without the map; shown when JS runs */
  position: relative; z-index: 1;
  margin-top: .4rem;
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  background: none; color: var(--ink-soft);
  border: 0; border-radius: 999px; padding: .3rem 0;
  cursor: pointer;
}
.has-js .place__locate { display: inline-block; }
.place__locate:hover { color: var(--accent-ink); }

.mapx__empty { color: var(--ink-faint); font-family: var(--display); font-size: .9rem; }

/* ------------------------------------------- the block under a review -- */
/* Sits inside .prose, so it inherits the measure and the centring. */
.placebox {
  display: grid;
  gap: 0;
  margin-block: clamp(2rem, 5vw, 3rem);
  background: var(--bg-raise);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
@media (min-width: 640px) { .placebox { grid-template-columns: 1fr 15rem; } }

.placebox__map {
  min-height: 200px;
  background: var(--bg-sunk);
}
/* A credit sized for a full-page map eats a small one. */
.placebox__map .leaflet-control-attribution { font-size: .56rem; padding: .1rem .4rem; }
@media (max-width: 639px) { .placebox__map { height: 200px; } }

.placebox__body { padding: 1.1rem 1.2rem 1.3rem; align-self: center; }
.placebox__kicker {
  font-family: var(--display); font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent-ink);
  margin-bottom: .35rem;
}
/* Prefixed throughout: the block sits inside .prose, whose `p` and `a` rules
   are more specific than a bare class and were adding paragraph margins and
   repainting the link. */
.placebox .placebox__addr {
  margin: 0; font-size: .92rem; line-height: 1.45; color: var(--ink);
}
.placebox .placebox__note {
  margin: .4rem 0 0; font-size: .78rem; color: var(--ink-faint); font-style: italic;
}
.placebox .placebox__more {
  display: inline-block; margin-top: .9rem;
  font-family: var(--display); font-size: .76rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.placebox .placebox__more:hover { color: var(--accent-ink); }

/* ---------------------------------------------------------------- touch -- */
@media (hover: none) and (pointer: coarse) {
  .place__locate { padding: .55rem .9rem; min-height: 44px; border: 2px solid var(--rule); }
  .mapx__filters .tag-pill { padding: .55rem 1rem; min-height: 44px; }
  .mapx__reset { min-height: 44px; }
  .mapx__filters .tag-pill:hover { transform: none; }
}

/* ---------------------------------------------------------------- print -- */
@media print {
  /* Tiles are a canvas of grey on paper and the pins mean nothing without
     them. The list carries every address, which is the useful part anyway. */
  .mapx__mapcol, .mapx__filters, .mapx__reset, .place__locate, .place__shot,
  .mapx__empty { display: none !important; }
  .mapx { display: block; }
  .mapx__list { gap: 0; }
  .place {
    border: 0; border-bottom: 1px solid #bbb; border-radius: 0;
    padding: .35cm 0; break-inside: avoid;
  }
  .place__name { font-size: 1rem; }
  .place__name a::after { content: " — foodemperor.com" attr(href); font-weight: 400; font-size: .72rem; }

  /* On a printed review, keep the address and drop the tiles. */
  .placebox__map { display: none !important; }
  .placebox { display: block; border: 1px solid #bbb; box-shadow: none; break-inside: avoid; }
  .placebox__more { display: none !important; }
  .place__addr { color: #222; }
}