/* map.css — the Netherlands with places on it: one component for every list of places on expato (parks, farms…).
   The outline is images/maps/nl.svg (paths #nb, #land, #lakes) used twice: the neighbours under a fading mask, then the
   land with its lakes. A point stands where its own coordinates put it — x = (lon − 3.30) / 4.00, y = (53.62 − lat) / 2.92
   of the frame, the outline's own frame — so no script places it. map.js only turns each label to the side where it
   overlaps nothing, shows the card of the point in hand, and hides the points the page's filters hid.

   <div class="nl-wrap">
     <div class="nl-map" aria-label="…">
       <svg class="nl-map-nb" viewBox="0 0 1000 1191" aria-hidden="true"><use href="/images/maps/nl.svg#nb"/></svg>
       <svg class="nl-map-land" viewBox="0 0 1000 1191" aria-hidden="true"><use class="land" href="/images/maps/nl.svg#land"/><use class="lake" href="/images/maps/nl.svg#lakes"/></svg>
       <span class="nl-city" style="--lon:4.9041;--lat:52.3676">Амстердам</span>
       <div class="nl-pts" data-gally-list="parks,">
         <a class="nl-pt" data-gally-item href="{{@url}}" style="--lon:{{Долгота}};--lat:{{Широта}}" data-pick-meta="…" data-pick-line="…"><i></i><b>{{Имя}}</b><img class="nl-pt-pic" src="{{Фото}}" alt="" hidden loading="lazy"></a>
       </div>
       <span class="nl-scale">50 км</span>
     </div>
     <a class="nl-pick" href="#"><img alt="" width="84" height="84"><span class="nl-pick-txt"><em></em><b></b><span></span></span></a>
   </div> */

.nl-wrap { position: relative; }
.nl-map { --nl-dot: #1F3327; --nl-halo: rgba(201, 163, 196, .6); position: relative; width: 100%; aspect-ratio: 1000 / 1191; }
:root.dark .nl-map { --nl-dot: #D9E6DE; --nl-halo: rgba(201, 163, 196, .45); }
.nl-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.nl-map-nb { fill: var(--s2); -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.nl-map-land .land { fill: var(--s1); stroke: rgba(var(--ink), .2); stroke-width: 1.4; stroke-linejoin: round; }
.nl-map-land .lake { fill: var(--bg); stroke: rgba(var(--ink), .14); stroke-width: 1.2; stroke-linejoin: round; }

/* Where a place stands: its corner of the frame, a box of no size; the dot and the label hang from it. */
.nl-pt, .nl-city { position: absolute; left: calc((var(--lon) - 3.3) / 4 * 100%); top: calc((53.62 - var(--lat)) / 2.92 * 100%); width: 0; height: 0; }
.nl-pts { position: absolute; inset: 0; }
.nl-pt[hidden] { display: none; }
.nl-pt i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--nl-dot); box-shadow: 0 0 0 2px var(--s1); transition: transform .2s ease, box-shadow .2s ease; }
/* The dot is small to the eye and large to the finger. */
.nl-pt i::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.nl-pt b { position: absolute; left: 11px; top: 0; transform: translateY(-50%); white-space: nowrap; font: 500 13px/1.1 Geologica, system-ui, sans-serif; letter-spacing: -.005em; color: var(--txt);
  text-shadow: 0 0 2px var(--s1), 0 0 3px var(--s1), 0 0 4px var(--s1); transition: color .2s; }
.nl-pt[data-side="l"] b { left: auto; right: 11px; }
.nl-pt[data-side="t"] b { left: 0; top: -10px; transform: translate(-50%, -100%); }
.nl-pt[data-side="b"] b { left: 0; top: 10px; transform: translate(-50%, 0); }
.nl-pt:hover b, .nl-pt:focus-visible b, .nl-pt.is-on b { color: var(--acc); }
.nl-pt.is-on b { font-weight: 600; }
.nl-pt:hover i, .nl-pt:focus-visible i, .nl-pt.is-on i { transform: scale(1.35); box-shadow: 0 0 0 2px var(--s1), 0 0 0 9px var(--nl-halo); }
.nl-pt:focus-visible { outline: none; }
.nl-pt:focus-visible i { outline: 2px solid var(--acc); outline-offset: 4px; }

/* Cities, for the eye only: a grey dot and a grey name. */
.nl-city { pointer-events: none; }
.nl-city::before { content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.nl-city span, .nl-city { font: 400 12px/1 Geologica, system-ui, sans-serif; color: var(--mut); }
.nl-city > span { position: absolute; left: 7px; top: 0; transform: translateY(-50%); white-space: nowrap; }
.nl-city.is-covered { visibility: hidden; }

/* 50 km: 183 of the frame's 1000. */
.nl-scale { position: absolute; right: 4%; bottom: 3.6%; width: 18.34%; height: 6px; border: 1.5px solid var(--mut); border-top: 0; font: 500 11px var(--mono); color: var(--mut); pointer-events: none; }
.nl-scale > span { position: absolute; left: 0; bottom: 10px; white-space: nowrap; }

/* The card of the point in hand: on a phone under the map, wider over Belgium — the corner no park stands in. */
.nl-pick { display: none; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; margin: -4px 0 0; padding: 10px 14px 10px 10px; border-radius: 20px; background: var(--s1); box-shadow: 0 0 0 1px rgba(var(--ink), .1), 0 24px 44px -30px rgba(0, 0, 0, .5); color: var(--txt); }
.nl-pick.is-on { display: grid; }
.nl-pick img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; background: var(--s2); }
.nl-pick-txt { min-width: 0; }
.nl-pick em { display: block; font: 500 11px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.nl-pick b { display: block; margin-top: 3px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; transition: color .2s; }
.nl-pick-txt > span { display: -webkit-box; margin-top: 5px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.35; color: var(--txt2); }
.nl-pick::after { content: ""; width: 18px; height: 18px; background: currentColor; opacity: .5; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.nl-pick:hover { color: var(--txt) !important; }
.nl-pick:hover b { color: var(--acc); }

/* The small map of one place (data-nl-alone): every place a faint dot, this one large, no names. */
.nl-map.is-mini .nl-pt i { left: -3px; top: -3px; width: 6px; height: 6px; background: rgba(var(--ink), .22); box-shadow: none; }
.nl-map.is-mini .nl-pt.is-here i { left: -6px; top: -6px; width: 12px; height: 12px; background: var(--nl-dot); box-shadow: 0 0 0 2px var(--s1), 0 0 0 7px var(--nl-halo); transform: none; }
.nl-map.is-mini .nl-map-land .land { stroke-width: 3; }

@media (min-width: 700px) {
  .nl-pt b { font-size: 13.5px; }
  .nl-pick { position: absolute; left: 0; bottom: 3%; width: min(320px, 48%); grid-template-columns: 84px 1fr; padding: 10px 16px 10px 10px; margin: 0;
    display: grid; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .nl-pick::after { display: none; }
  .nl-pick.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .nl-pick img { width: 84px; height: 84px; }
}
/* On a phone only the one city every reader knows; the rest crowd the parks. */
@media (max-width: 699px) {
  .nl-city.is-minor { display: none; }
  .nl-pt b { font-size: 11.5px; }
  .nl-pt i { left: -4.5px; top: -4.5px; width: 9px; height: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-pt i, .nl-pt b, .nl-pick { transition: none !important; }
}