/* ============================================================
   The Green — booking map
   The interactive site plan in the Group Bookings map band.
   Loaded only on a page carrying [tg_booking_map]; see
   inc/booking-map.php for what to delete to remove the feature.
   ============================================================ */

.tg-bkmap{
  /* A space at rest is painted by a fill ATTRIBUTE in the asset itself, not
     from here, so the map still draws correctly if this file never arrives.
     A presentation attribute loses to any CSS rule, so the lit state below
     still wins. Only the lit colour is the stylesheet's to know. */
  --bkmap-space-on:var(--forest-dark);

  position:relative;
  width:100%;
  /* The frame draws the map 687x461 inside a 1168 content column. Holding the
     ratio on the wrapper is also what lets the JS convert a pointer position
     into viewBox units with a single scale factor. */
  max-width:687px;
  aspect-ratio:687/461;
  /* At rest the map has nowhere to pan to — the clamp pins it at the origin —
     so the page keeps the vertical swipe and a finger dragged over the map
     scrolls on past it, which on a phone is the behaviour that matters. Once
     zoomed there IS somewhere to go, and the map takes the gesture. The + and
     - buttons are unaffected either way, so zooming in is always reachable. */
  touch-action:pan-y;
}
.tg-bkmap.is-zoomed{touch-action:none;}

.tg-bkmap-svg{
  display:block;
  width:100%;
  height:100%;
  /* The outermost svg clips to its viewport, which is what keeps a zoomed map
     inside the band without a wrapper to hide the overflow. */
}

/* ---- pan and zoom ----
   A transform on the inner group rather than an animated viewBox: a CSS
   transform on an SVG element is compositable and transitionable, where
   viewBox is neither and would need a JS tween. transform-origin:0 0 makes
   the maths exact — a point p lands at translate + p * scale — which is what
   the JS clamp relies on. */
.tg-bkmap-pan{
  /* Both stated rather than left to the initial values: `view-box` is the
     default for an SVG element, but naming it keeps the origin pinned to the
     viewBox corner instead of the element's own bounding box, which is what
     the JS assumes. */
  transform-box:view-box;
  transform-origin:0 0;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
/* No easing while a finger or the mouse is down, or the map lags the hand. */
.tg-bkmap.is-panning .tg-bkmap-pan{transition:none;}

/* ---- the five bookable spaces ----
   The resting colour comes from the asset; this only adds the lit state and
   the ease between the two. Canopies is a group of two rects, so both the
   transition and the override have to reach descendants — the rects inherit
   the group's fill, but not its transition. */
.tg-bkmap-space,
.tg-bkmap-space *{transition:fill .18s ease;}
.tg-bkmap-space{cursor:pointer;}
.tg-bkmap-space.is-on,
.tg-bkmap-space.is-on *{fill:var(--bkmap-space-on);}

/* ---- the labels beside the map ----
   Native vc_custom_heading elements owned by the page; only the lit state is
   ours. The colour is set on descendants because WPBakery wraps the text in
   its own heading tag inside .tg-space-link. */
.tg-space-link{
  transition:color .18s ease;
  cursor:pointer;
}
.tg-space-link.is-on,
.tg-space-link.is-on *{color:var(--centralpark);}
.tg-space-link:focus-visible{
  outline:2px solid var(--centralpark);
  outline-offset:4px;
}

/* ---- eatery labels ----
   Drawn at 20.03px in a 2158-unit viewBox shown 687 wide, i.e. 6.4px on
   screen, so they only read once zoomed. Off by default: the frame draws them
   visible at rest, so hiding them is a departure from the design and is opted
   into per element ("Reveal the eatery labels on zoom"). */
.tg-bkmap[data-reveal-labels="yes"] .tg-bkmap-label-minor{
  opacity:0;
  transition:opacity .2s ease;
}
.tg-bkmap[data-reveal-labels="yes"][data-zoom-tier="in"] .tg-bkmap-label-minor{
  opacity:1;
}

/* ---- zoom control ----
   40x81, olive on a 1px cream-light hairline, drawn in every variant of the
   component. The file gives no coordinates for it, so the inset is a
   convention rather than a measurement — worth a look against the frame. */
.tg-bkmap-zoom{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:81px;
  display:flex;
  flex-direction:column;
  background:var(--olive);
  border:1px solid var(--cream-light);
}
.tg-bkmap-zoomrule{
  height:1px;
  background:var(--cream-light);
  opacity:.35;
}
.tg-bkmap-zoombtn{
  position:relative;
  flex:1 1 40px;
  margin:0;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.tg-bkmap-zoombtn[aria-disabled="true"]{opacity:.4;cursor:default;}
.tg-bkmap-zoombtn:focus-visible{
  outline:2px solid var(--cream-light);
  outline-offset:-4px;
}
/* The file's 14x2 and 2x14 bars, not Inter's plus and minus. */
.tg-bkmap-zoombtn::before,
.tg-bkmap-zoombtn::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:var(--cream-light);
  transform:translate(-50%,-50%);
}
.tg-bkmap-zoombtn::before{width:14px;height:2px;}
.tg-bkmap-zoombtn--in::after{width:2px;height:14px;}

/* ---- reduced motion ----
   The zoom still happens; it just arrives rather than travels. */
@media (prefers-reduced-motion:reduce){
  .tg-bkmap-pan{transition:none;}
  .tg-bkmap-space,
  .tg-bkmap-space *,
  .tg-space-link,
  .tg-bkmap[data-reveal-labels="yes"] .tg-bkmap-label-minor{transition:none;}
}

/* ---- mobile ----
   The band stacks at 900 in the page's own CSS; the map just fills the column.
   The zoom control keeps its 40px hit targets, so nothing shrinks. */
@media (max-width:900px){
  .tg-bkmap{max-width:none;}
}