/* ==========================================================================
   /vili/ map view (task t_126deb3c, Phase 2.3). No tile server, no external
   JS: one server-rendered SVG (lib/map.js) with the country outline and one
   pin per result villa. Tokens come from lux.css; visual layer only.
   ========================================================================== */

.sronly2{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- grid / map tabs ---------- */
.viewtabs{display:inline-flex;gap:.25rem;margin-left:auto}
.vtab{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.45rem .9rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);
  font-size:.85rem;font-weight:600;color:var(--ink-2);
  text-decoration:none;cursor:pointer;
  transition:color var(--t-micro) ease,border-color var(--t-micro) ease,
    background var(--t-micro) ease,box-shadow var(--t-micro) ease;
}
.vtab svg{color:var(--accent-2)}
.vtab:hover{border-color:var(--accent-2);color:var(--ink);box-shadow:var(--shadow-sm)}
.vtab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.vtab.on svg{color:var(--accent-2)}
.sortbar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}

/* ---------- the map panel ---------- */
.mapwrap{display:none;margin:0 0 var(--s5)}
.mapwrap.on{display:block;animation:resIn 220ms ease both}
.mapwrap{scroll-margin-top:calc(var(--hdr-h) + 12px)}
.mapwrap.on .mapsvg{
  width:100%;height:auto;aspect-ratio:780/560;max-height:68vh;
  display:block;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.mapsvg .mborder{
  fill:var(--accent-soft);stroke:var(--accent-2);stroke-width:1.5;
  stroke-linejoin:round;
}
/* pins: a numbered destination cluster. The badge is always drawn; the
   name label appears on hover/focus only, so a dense coast does not read as a
   wall of text (Booking map pattern). */
.mapsvg .mpin{cursor:pointer;outline:none}
.mapsvg .mpdot{fill:var(--accent);stroke:var(--bg);stroke-width:1.6}
.mapsvg .mpn{
  fill:#fff;font-size:10.5px;font-weight:700;text-anchor:middle;
  dominant-baseline:central;pointer-events:none;
}
.mapsvg .mpin:hover .mpdot,.mapsvg .mpin:focus .mpdot{fill:var(--accent-2)}
.mapsvg .mpin.on .mpdot{fill:var(--accent-2);stroke:var(--bg);stroke-width:3}
.mapsvg .mplbl{opacity:0;pointer-events:none;transition:opacity var(--t-micro) ease}
.mapsvg .mplbl rect{fill:var(--ink);opacity:.94}
.mapsvg .mplbl text{
  fill:#fff;font-size:11px;font-weight:600;text-anchor:middle;
  dominant-baseline:middle;
}
.mapsvg .mpin:hover .mplbl,
.mapsvg .mpin:focus .mplbl{opacity:1}
.mapcredit{font-size:.72rem;color:var(--ink-3);margin:.4rem 0 0}
.mapnote{font-size:.78rem;color:var(--ink-3);margin:.15rem 0 0}

/* grid pane hidden while map is on (JS toggles; `hidden` attr is the
   no-JS/server-rendered equivalent) */
.gridpane.off{display:none}

/* keyboard focus: SVG <a> needs the same visible focus ring as HTML links */
.mapsvg .mpin:focus .mpdot{stroke:var(--accent-2);stroke-width:3}

@media (max-width:900px){
  .viewtabs{margin-left:0}
  .mapwrap.on .mapsvg{max-height:none;aspect-ratio:auto;height:auto}
  .mapwrap.on{margin-bottom:var(--s4)}
  .sortbar{gap:var(--s2)}
}