/* pp-map — the pin tooltips on the location map.
   Loads after prie-parko.css, so it overrides the label rules there.

   The names used to be written straight onto the photograph in white type with
   a heavy text-shadow. Six of them, permanently, over an aerial: the map read
   as a page of captions rather than a place. Here nothing is written by
   default — you get the photograph and six dots. A name appears only when you
   ask for it (hover, focus, tap) or when the map introduces one itself, one at
   a time, on a slow beat. See src/scripts/widgets/maptips.js for the beat.

   The panel is the site's frosted glass, the same recipe as .hero-book-card
   (prie-parko.css) and .navigation-link-hover-wrap (styles.css): a translucent
   tint, a backdrop blur, a hairline light border, a soft shadow. It takes the
   dark tint of that family — the one .navigation-link-hover-wrap.dark uses —
   because this glass sits on an aerial photograph that runs from dark pine to
   bright sand, and only a dark pane keeps light type legible over both. */

/* ------------------------------------------------------------- placement --
   Each pin declares which way its tooltip opens through data-side. The card
   reads the four offsets and its two transforms from custom properties, so a
   side is one small block and a breakpoint can re-aim a single pin without
   repeating the card's own rules. */
.map-pins .map-pin {
  --tip-gap: 14px;
  --tip-travel: 6px;
  /* Default: out to the left, over the sea. */
  --tip-left: auto;
  --tip-right: calc(100% + var(--tip-gap));
  --tip-top: 50%;
  --tip-bottom: auto;
  --tip-from: translate(var(--tip-travel), -50%);
  --tip-to: translate(0, -50%);
}

.map-pins .map-pin[data-side="right"] {
  --tip-left: calc(100% + var(--tip-gap));
  --tip-right: auto;
  --tip-top: 50%;
  --tip-bottom: auto;
  --tip-from: translate(calc(var(--tip-travel) * -1), -50%);
  --tip-to: translate(0, -50%);
}

.map-pins .map-pin[data-side="top"] {
  --tip-left: 50%;
  --tip-right: auto;
  --tip-top: auto;
  --tip-bottom: calc(100% + var(--tip-gap));
  --tip-from: translate(-50%, var(--tip-travel));
  --tip-to: translate(-50%, 0);
}

.map-pins .map-pin[data-side="bottom"] {
  --tip-left: 50%;
  --tip-right: auto;
  --tip-top: calc(100% + var(--tip-gap));
  --tip-bottom: auto;
  --tip-from: translate(-50%, calc(var(--tip-travel) * -1));
  --tip-to: translate(-50%, 0);
}

/* ------------------------------------------------------------ the tooltip */
.map-pins .map-pin .map-pin-card {
  position: absolute;
  left: var(--tip-left);
  right: var(--tip-right);
  top: var(--tip-top);
  bottom: var(--tip-bottom);
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: max-content;
  max-width: 220px;
  padding: 10px 14px;
  text-align: left;
  /* The glass is a label, not a target: it must never steal the hover from the
     dot it belongs to, nor land under the cursor as the beat moves on. */
  pointer-events: none;

  border-radius: var(--spacing-radius-12);
  background-color: color-mix(in srgb, var(--colors-color-dark) 42%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid color-mix(in srgb, var(--colors-color-light) 34%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--colors-color-dark) 34%, transparent);
  color: var(--colors-color-light);
  text-shadow: none;

  /* prie-parko.css pins the old written-on label open with !important; these
     have to answer in kind. Same specificity, later sheet, so these win. */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: var(--tip-from) !important;
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

/* Open: on hover, on keyboard focus, or when the beat is showing this one. */
.map-pins .map-pin:hover .map-pin-card,
.map-pins .map-pin:focus-visible .map-pin-card,
.map-pins .map-pin.is-open .map-pin-card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: var(--tip-to) !important;
}

.map-pins .map-pin:hover,
.map-pins .map-pin:focus-visible,
.map-pins .map-pin.is-open { z-index: 3; }

/* ------------------------------------------------------------------- type */
.map-pins .map-pin-name {
  font-size: var(--text-text-body-font-size);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: var(--text-text-body-letter-spacing);
  color: var(--colors-color-light);
  text-shadow: none;
  white-space: nowrap;
}

.map-pins .map-pin-meta {
  display: block;
  font-size: var(--text-text-small-font-size);
  line-height: 1.3;
  color: color-mix(in srgb, var(--colors-color-light) 78%, transparent);
  font-variant-numeric: tabular-nums;
  text-shadow: none;
  white-space: nowrap;
}

.map-pins .map-pin.is-hotel .map-pin-name {
  font-size: var(--text-text-body-font-size);
  white-space: nowrap;
}

/* -------------------------------------------------------------- the dots --
   The dot the beat is showing lifts and warms, the same as a hovered one, so
   the eye can find which marker the glass belongs to. */
.map-pins .map-pin.is-open .map-pin-dot {
  transform: scale(1.35);
  background-color: var(--colors-color-bg-3);
}

.map-pins .map-pin.is-hotel.is-open .map-pin-dot { transform: scale(1.2); }

/* ------------------------------------------------------------ breakpoints */
@media screen and (max-width: 991px) {
  /* prie-parko.css drops the pins to position: relative down here so they can
     carry a 44px ::after hit area. That takes them out of absolute placement
     and the six of them fall into a row across the top of the frame. The hit
     area works perfectly well on an absolutely placed pin — it is the pin's
     own ::after, and the pin is its containing block either way. */
  .map-pins .map-pin { position: absolute; }

  .map-pins .map-pin .map-pin-card { max-width: 200px; }

  /* Narrow frames put the headline stack — heading, address, button — across
     the bottom third of the map, where two of the pins live. Both step aside
     rather than laying glass over type they would make unreadable.

     Gintaro muziejus sits level with the button, so its glass drops below it,
     onto the empty strip between the button and the foot of the frame. */
  .map-pins .map-pin[data-pin="gintaras"] {
    --tip-left: 50%;
    --tip-right: auto;
    --tip-top: calc(100% + var(--tip-gap));
    --tip-bottom: auto;
    --tip-from: translate(-50%, calc(var(--tip-travel) * -1));
    --tip-to: translate(-50%, 0);
  }

  /* Birutės parkas is 27px below the hotel and 100px east of the sea, so a
     centred card touches the heading below it and a level one covers the sea's
     marker. It hangs from the dot's west shoulder instead: down the page,
     clear of both. */
  .map-pins .map-pin[data-pin="birutes"] {
    --tip-left: auto;
    --tip-right: calc(100% + var(--tip-gap));
    --tip-top: 50%;
    --tip-bottom: auto;
    --tip-from: translate(var(--tip-travel), 0);
    --tip-to: translate(0, 0);
  }
}

@media screen and (max-width: 767px) {
  /* The hotel sits two thirds of the way across the frame and its name is the
     longest of the six, so east of it there stops being room at about 620px.
     It keeps opening east at 768, where east still fits; below the tablet
     breakpoint it goes to its south-west corner instead. Not due west: the
     sea's marker is 55px west at the same height, and the hotel's name is wide
     enough to reach it whatever the frame. Off the corner it clears both. */
  .map-pins .map-pin[data-pin="hotel"] {
    --tip-left: auto;
    --tip-right: calc(100% + var(--tip-gap));
    --tip-top: calc(100% + var(--tip-travel));
    --tip-bottom: auto;
    --tip-from: translate(var(--tip-travel), calc(var(--tip-travel) * -1));
    --tip-to: translate(0, 0);
  }
}

@media screen and (max-width: 479px) {
  /* A phone narrower than the design target still has to hold the widest name
     inside the frame, and the widest name is the hotel's own. */
  .map-pins .map-pin .map-pin-card { max-width: min(200px, 52vw); }
  /* Including the hotel's, which is the longest name of the six and the only
     one that would otherwise run out of its own pane. */
  .map-pins .map-pin-name,
  .map-pins .map-pin.is-hotel .map-pin-name { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  /* No beat at all (the widget checks the same query) and no travel: the
     tooltip is simply there or not there. */
  .map-pins .map-pin .map-pin-card {
    transition: none;
    transform: var(--tip-to) !important;
  }
  .map-pins .map-pin .map-pin-dot { transition: none; }
}