/* ============================================================
   Pearl Voyages — homepage interactive map
   Self-contained component (own file, own class prefix .pv-map).
   No dependency on main.js / home.css — kept isolated so it can
   be lifted whole into an Elementor "HTML" widget later without
   rebuilding, unlike the scroll-animation system.
   Loaded on index.html only.
   ============================================================ */

.pv-map-sec{background:#fff}

.pv-map-wide{margin:0 auto;padding-inline:var(--gutter)}

.pv-map{
  display:grid;
  grid-template-columns:minmax(360px,1.3fr) minmax(220px,.8fr) minmax(340px,1.6fr);
  gap:clamp(1.5rem,3vw,2.75rem);
  align-items:stretch;margin-top:2.6rem;
}

.pv-map__svg-wrap{width:100%;align-self:start}
.pv-map__svg{width:100%;height:auto;display:block;overflow:visible}

.pv-map__island{
  fill:#E4EFF5;stroke:#BCD4E1;stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}

/* compass */
.pv-map__compass-ring{fill:#fff;stroke:#C9DCE7;stroke-width:1.3}
.pv-map__compass-tick{stroke:#9DBBCC;stroke-width:1.3}
.pv-map__compass-needle{fill:var(--sand)}
.pv-map__compass-n{
  font-family:var(--font-ui);font-size:10px;font-weight:700;
  letter-spacing:.05em;fill:var(--ink-soft);
}

/* leader lines: visible for their whole run (including over the land) so it's
   always clear which label belongs to which dot */
.pv-map__leader{
  fill:none;stroke:#6F8FA1;stroke-width:1.1;stroke-dasharray:2.5 3;
}

/* pin dot on the coastline */
.pv-map__pin{cursor:pointer;outline:none}
.pv-map__pin-hit{fill:transparent}
.pv-map__pin-ring{
  fill:none;stroke:var(--teal);stroke-width:1.4;opacity:0;
  transform-origin:center;transform-box:fill-box;
}
.pv-map__pin-dot{
  fill:var(--teal);stroke:#fff;stroke-width:2;
  transition:fill .25s ease,transform .25s ease;
  transform-origin:center;transform-box:fill-box;
}
.pv-map__pin:hover .pv-map__pin-dot,
.pv-map__pin:focus-visible .pv-map__pin-dot{transform:scale(1.25)}
.pv-map__pin:focus-visible .pv-map__pin-ring{opacity:1;stroke:var(--ink)}

.pv-map__pin.is-active .pv-map__pin-dot{fill:var(--sand);transform:scale(1.4)}
.pv-map__pin.is-active .pv-map__pin-ring{
  opacity:1;animation:pvMapPulse 1.8s ease-out infinite;
}
@keyframes pvMapPulse{
  0%{stroke-opacity:.65;transform:scale(1)}
  100%{stroke-opacity:0;transform:scale(2.3)}
}
@media (prefers-reduced-motion: reduce){
  .pv-map__pin.is-active .pv-map__pin-ring{animation:none;opacity:.5}
}

/* label boxes */
.pv-map__label{cursor:pointer;outline:none}
.pv-map__label-box{
  fill:#fff;stroke:#CFE0EA;stroke-width:1;
  filter:drop-shadow(0 1px 2px rgba(22,37,46,.08));
  transition:fill .2s ease,stroke .2s ease;
}
.pv-map__label-text{
  font-family:var(--font-ui);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;fill:var(--ink);
  transition:fill .2s ease;
}
.pv-map__label:hover .pv-map__label-box{stroke:var(--sand)}
.pv-map__label:focus-visible .pv-map__label-box{stroke:var(--ink)}
.pv-map__label.is-active .pv-map__label-box{fill:var(--sand);stroke:var(--sand)}
.pv-map__label.is-active .pv-map__label-text{fill:#fff}

.pv-map__text{display:flex;flex-direction:column;justify-content:flex-start}
.pv-map__head>.kicker{margin-bottom:.5rem}
.pv-map__head>h2{
  font-size:clamp(1.6rem,2.6vw,2.1rem);
  margin:0 0 2.2rem;padding-bottom:2rem;border-bottom:1px solid var(--line);
}
.pv-map__text-body h3{font-size:clamp(1.5rem,2.2vw,1.85rem);margin:.1rem 0 .35rem}
.pv-map__tagline{font-family:var(--font-body);font-style:italic;color:var(--ink)!important;font-size:1.08rem;margin:0 0 1rem}
/* reserves room for the longest place's blurb (measured across all 7) so the
   section doesn't grow or shrink as you click between places */
.pv-map__blurb{min-height:178px}
.pv-map__text-body p{color:var(--ink-soft)}

.pv-map__cta{margin-top:1.6rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sand);color:#fff;
  font-family:var(--font-ui);font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.6rem;border-radius:3px;
  transition:background .25s ease;
}
.pv-map__cta:hover{background:var(--teal)}

.pv-map__nav{display:flex;gap:.7rem;margin-top:2rem}
.pv-map__nav-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  cursor:pointer;transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.pv-map__nav-btn:hover{border-color:var(--sand);background:var(--sand);color:#fff}

/* fixed aspect ratio (not height:100%) so the section's height stays put
   as you cycle between places — it no longer depends on how many lines
   that place's description happens to wrap to. */
.pv-map__photo{
  border-radius:4px;overflow:hidden;background:var(--paper-2);
  aspect-ratio:3/2;align-self:start;
}
.pv-map__photo img{width:100%;height:100%;object-fit:cover;display:block}

.pv-map__hint{
  margin-top:1.4rem;font-size:.78rem;color:var(--ink-soft);
  font-family:var(--font-ui);letter-spacing:.02em;
}

@media (max-width:1199px){
  .pv-map{grid-template-columns:1fr}
  .pv-map__svg-wrap{max-width:560px;margin:0 auto}
  .pv-map__photo{width:100%;max-width:520px}
}

/* ---------- desktop: full-screen map section (modelled on trulysrilanka.com)
   The section fills the screen under the header; the map is sized by
   whichever runs out first, 36% of the width or the screen height. Heading
   sits in the text column and the photo stays landscape, as before. */
@media (min-width:1200px){
  .pv-map-sec{
    min-height:calc(100svh - 84px);
    display:flex;align-items:center;
    padding-block:clamp(2rem,4vh,3.5rem);
  }
  .pv-map-wide{width:100%}
  .pv-map{
    margin-top:0;align-items:start;
    grid-template-columns:auto minmax(260px,.8fr) minmax(0,1.4fr);
    grid-template-areas:"map head photo" "map text photo" "map . photo";
    /* spare height (the map is taller) goes to the empty last row, so the
       heading and place text stay together */
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(2rem,3.5vw,4.5rem);row-gap:0;
  }
  .pv-map__svg-wrap{
    grid-area:map;align-self:center;
    width:min(36vw,calc((100svh - 84px - 5rem) * 608 / 655));
  }
  .pv-map__head{grid-area:head}
  .pv-map__text{grid-area:text}
  /* the map scales up here, so keep label text close to its old on-screen size */
  .pv-map__label-text{font-size:11px}
  .pv-map__photo{grid-area:photo;width:100%}
}

/* place chips: phones only (leader labels are too cramped there) */
.pv-map__chips{display:none}
@media (max-width:600px){
  .pv-map__leader,.pv-map__label,.pv-map__compass{display:none}
  .pv-map__svg{max-width:280px;margin:0 auto}
  .pv-map__pin-dot{transform:scale(1.7)}
  .pv-map__pin.is-active .pv-map__pin-dot{transform:scale(2.1)}
  .pv-map__pin-hit{r:30px}
  .pv-map__chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.2rem}
  .pv-map__chip{
    font-family:var(--font-ui);font-size:.8rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:999px;padding:.6rem 1rem;min-height:44px;cursor:pointer;
  }
  .pv-map__chip.is-active{background:var(--sand);border-color:var(--sand);color:#fff}
  .pv-map__blurb{min-height:0}
  .pv-map__cta{margin-top:.6rem}
}