/* _nearmap.css - HAND-WRITTEN, like _ours.css, _listing.css, _links.css and
   _square.css. Loaded through config('design.extras') on /listings/, after
   _shared.css and the page's own sheet, so it only adds.

   Location, on every listing (Jack, 9 September; deck at
   /design-2026/listing/whole.html and /attraction.html).

   Why the section is a map at all: of 168 places to stay, all 168 have a
   point and a region and NOT ONE has a street address or directions. What we
   own is a pin, a region and neighbours - a median of 65 published listings
   within fifteen miles, never none. So the map answers both questions and the
   six below it are the same set seen twice.

   The map takes the canvas and the height because it is the subject. The
   neighbours are small squares with their names underneath: they used to be
   the shelf card from _square.css, which is built to be the whole point of a
   shelf page, and next to a map it outweighed everything. */

/* ---- the introduction, the home page's own ---- */
.band[data-hs=nearby]{padding:0 0 clamp(72px,11vh,150px)}
/* The block before this one already carries its own bottom padding, so this
   is the second half of the gap and not the whole of it. */
.band[data-hs=nearby] .intro{background:none;padding:clamp(36px,4.5vh,64px) 0 0}
.band[data-hs=nearby] .intro .wl-text{width:46ch;max-width:100%;min-height:1px}
/* the phone's one column with a zero floor, as in _place.css (24 Sep) */
@media(max-width:1180px){.band[data-hs=nearby] .intro .wl-in{grid-template-columns:minmax(0,1fr)}}
.band[data-hs=nearby] .intro .wl-label{margin-top:6px}
.band[data-hs=nearby] .intro .sum{margin:0}
.band[data-hs=nearby] .intro .rest{font-family:var(--serif);font-weight:400;font-size:17.5px;
  line-height:1.72;color:var(--ink-75);margin:1.1em 0 0}
.band[data-hs=nearby] .intro .rest p + p{margin-top:1.1em}

/* ---- the map ---- */
.nearmap{width:100%;height:clamp(380px,54vh,620px);background:#EEEAE4;
  border:1px solid var(--stone-2);margin:clamp(40px,5.5vh,72px) 0 0}

/* The listing's own name on a gold chip over a soft ring. A dot the same
   shape as sixty other dots, only gold, is not obvious enough - Jack,
   9 September: "make it obvious where the accommodation is". */
.nearhere{position:absolute;transform:translate(-50%,-100%);pointer-events:none;z-index:5}
.nearhere b{display:block;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  background:#C08C3D;color:#fff;padding:7px 12px 6px;white-space:nowrap}
.nearhere i{display:block;width:0;height:0;margin:0 auto;border:6px solid transparent;
  border-top-color:#C08C3D;border-bottom:0}

/* A pin used to do nothing at all, which is the commonest fault a map has.
   It now opens that listing's own card above it - the shelf card, which here
   is the only thing on screen and can afford to be. */
.nearpeek{position:absolute;transform:translate(-50%,-100%);z-index:6;width:212px;margin-top:-16px;
  filter:drop-shadow(0 10px 26px rgba(65,64,66,.24))}
.nearpeek .c h3{font-size:17px}
.nearpeek .c .t{left:12px;right:12px;bottom:11px}
.nearpeek .c .t p{display:none}
.nearpeek .nib{position:absolute;left:50%;bottom:-7px;width:0;height:0;margin-left:-7px;
  border:7px solid transparent;border-top-color:var(--ink);border-bottom:0}
.nearpeek .shut{position:absolute;top:8px;right:8px;z-index:4;width:26px;height:26px;display:grid;place-items:center;
  background:rgba(14,13,18,.55);color:#fff;border:0;cursor:pointer;font-family:var(--sans);font-size:13px;line-height:1}
.nearpeek .card[data-near] .c .price{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;
  align-items:baseline;gap:6px;padding:6px 10px 7px;background:var(--tweed);color:var(--shell);
  font-family:var(--sans);font-weight:500;font-size:8px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.nearpeek .card[data-near] .c .price b{font-family:var(--face);font-weight:400;font-size:16px;line-height:1;letter-spacing:0}
.nearpeek .card[data-near] .c .price i{font-style:normal}

/* ---- the words that narrow the six ----
   A control, not a heading. The heading is Location, above the map. */
.nearby-head{display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,2.4vw,36px);padding:clamp(30px,4vh,50px) 0 clamp(22px,2.8vh,34px)}
.nearby-head .tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,2.4vw,36px);margin:0}
.nearby-head .tabs button{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-35);background:none;border:0;padding:4px 0;cursor:pointer;
  transition:color .3s var(--ease)}
.nearby-head .tabs button.on{color:var(--ink)}
.nearby-head .tabs button:hover{color:var(--ink-75)}

/* ---- the six ----
   Square, and the name under the picture rather than written across it, so
   nothing is set on a photograph and nothing shouts. */
.six{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.six a{display:block;text-decoration:none;color:inherit}
.six figure{margin:0;aspect-ratio:1;overflow:hidden;background:var(--stone)}
.six img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.six a:hover img{transform:scale(1.05)}
.six b{display:block;font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.3;margin-top:11px}
.six u{display:block;text-decoration:none;font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-35);margin-top:4px}
@media(max-width:1100px){.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.six{grid-template-columns:repeat(2,minmax(0,1fr))}}