/* vacationpv self-contained enhancements (no external deps, no Squarespace runtime)
   Restores: accordion toggle, masonry gallery layout, image lightbox, scroll fade-ins,
   and a keyless Google Map. Progressive enhancement — everything degrades gracefully. */

/* ---------- Accordion ---------- */
.accordion-item__title-wrapper { cursor: pointer; }
.accordion-item__dropdown {
  display: grid !important;       /* single source of truth: height animates via grid-template-rows keyed on .vpv-open */
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1), opacity .38s ease;
}
.accordion-item__dropdown > * { min-height: 0; }   /* required so 0fr fully collapses */
.accordion-item.vpv-open > .accordion-item__dropdown {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* Draw our own +/- icon so it never depends on Squarespace's baked icon state */
.accordion-icon-container .plus { display: none !important; }
.accordion-icon-container {
  position: relative;
  width: 20px; height: 20px;
  flex: 0 0 20px;
}
.accordion-icon-container::before,
.accordion-icon-container::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor;
  transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.accordion-icon-container::before { width: 100%; height: 2px; transform: translate(-50%, -50%); }        /* horizontal bar (always) */
.accordion-icon-container::after  { width: 2px;  height: 100%; transform: translate(-50%, -50%); }        /* vertical bar (closed = +) */
.accordion-item.vpv-open .accordion-icon-container::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* ---------- Masonry gallery (override Squarespace's JS absolute positioning) ----------
   Two layers of progressive enhancement:
   1. Base (no-JS)  = CSS multi-column masonry. Degrades gracefully, images never overlap,
      but columns balance by height so the last rows can leave uneven gaps.
   2. .vpv-grid (JS) = a real CSS grid where masonry() gives each item a row-span derived
      from its intrinsic aspect ratio. Items flow into the shortest column, so the mosaic
      packs tightly with NO mid-grid gaps, correct left-to-right order, and no layout shift. */
.gallery-masonry-wrapper {
  height: auto !important;
  column-count: 3;
  column-gap: 12px;
}
@media (max-width: 991px) { .gallery-masonry-wrapper { column-count: 2; column-gap: 8px; } }
@media (max-width: 991px) { .gallery-masonry-item { margin-bottom: 8px !important; } }
@media (max-width: 380px)  { .gallery-masonry-wrapper { column-count: 1; } }
.gallery-masonry-item {
  position: static !important;
  width: 100% !important;
  transform: none !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 12px !important;
  display: block;
}

/* --- JS-enhanced grid packing --- */
.gallery-masonry-wrapper.vpv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 8px;      /* fine unit; JS spans each item to its image's height */
  column-gap: 12px;         /* horizontal gutter */
  row-gap: 0;               /* vertical gutter is baked into the JS span math */
}
@media (max-width: 991px) { .gallery-masonry-wrapper.vpv-grid { grid-template-columns: repeat(2, 1fr); column-gap: 8px; } }
@media (max-width: 380px)  { .gallery-masonry-wrapper.vpv-grid { grid-template-columns: 1fr; } }
.vpv-grid .gallery-masonry-item {
  break-inside: auto;
  margin: 0 !important;
  grid-row-end: span 34;    /* sane pre-JS placeholder; masonry() overrides per item */
}

.gallery-masonry-item-wrapper { height: auto !important; overflow: visible !important; }
.gallery-masonry-item img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  cursor: zoom-in;
  border-radius: 2px;
}

/* ---------- Scroll fade-in (250ms) ---------- */
.vpv-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1) !important;
  will-change: opacity, transform;
}
.vpv-fade.vpv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vpv-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Lightbox ---------- */
.vpv-lb {
  position: fixed; inset: 0; z-index: 2147483000;
  background: rgba(10,10,12,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
  touch-action: pan-y;
}
.vpv-lb.vpv-lb-open { opacity: 1; visibility: visible; }
.vpv-lb__img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 10px 60px rgba(0,0,0,.5);
  user-select: none; -webkit-user-drag: none;
  transition: opacity .18s ease;
}
.vpv-lb__btn {
  position: absolute; background: rgba(255,255,255,.12); color: #fff;
  border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; font-size: 26px; line-height: 1;
  transition: background .2s ease; -webkit-tap-highlight-color: transparent;
}
.vpv-lb__btn:hover { background: rgba(255,255,255,.24); }
.vpv-lb__close { top: 18px; right: 18px; font-size: 30px; }
.vpv-lb__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.vpv-lb__next { right: 18px; top: 50%; transform: translateY(-50%); }
.vpv-lb__count {
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.85); font: 500 14px/1 "Work Sans", sans-serif; letter-spacing: .04em;
}
@media (max-width: 640px) {
  .vpv-lb__prev, .vpv-lb__next { width: 44px; height: 44px; font-size: 22px; }
  .vpv-lb__prev { left: 8px; } .vpv-lb__next { right: 8px; }
  .vpv-lb__close { top: 10px; right: 10px; }
  .vpv-lb__img { max-width: 96vw; max-height: 82vh; }
}
body.vpv-lb-lock { overflow: hidden; }

/* ---------- Scaled headings ----------
   The visible scaled span is display:inline-block; give the container text-align:center
   so it (and its text) is centered on both mobile and desktop. */
.sqsrte-scaled-text-container { text-align: center !important; }
/* Keep scaled headings hidden until JS has sized them, so they never flash at the wrong
   (baked desktop) size first. JS adds .vpv-sized; a 1.5s safety timeout reveals regardless. */
.sqsrte-scaled-text-container:not(.vpv-sized) { visibility: hidden; }
/* Elements carry inline `transition-duration:.6s` with default transition-property:all,
   so our font-size recompute would animate ("expand/reduce"). Make sizing instant. */
.sqsrte-scaled-text,
.sqsrte-scaled-text h1, .sqsrte-scaled-text h2, .sqsrte-scaled-text h3,
.sqsrte-scaled-text h4, .sqsrte-scaled-text h5, .sqsrte-scaled-text p,
.sqsrte-scaled-text a, .sqsrte-scaled-text strong {
  transition: none !important;
}

/* ---------- Regular headings: size to screen WIDTH ----------
   Squarespace sizes h1/h2/h3 from min(100vh,900px) (viewport HEIGHT) → oversized long
   headings on both desktop and mobile. Cap them to width-based clamps. Scaled-text headings
   are unaffected (more-specific `... .sqsrte-scaled-text h2 {font-size:inherit!important}` wins). */
.sqs-html-content h1 { font-size: clamp(1.75rem, 1.3875rem + 1.547vw, 2.625rem) !important; }   /* 28 → 42px */
.sqs-html-content h2 { font-size: clamp(1.4375rem, 1.1786rem + 1.105vw, 2.0625rem) !important; } /* 23 → 33px */
.sqs-html-content h3 { font-size: clamp(1.3125rem, 1.0536rem + 1.105vw, 1.9375rem) !important; } /* 21 → 31px */

/* ---------- Map (interactive Leaflet, keyless CARTO Voyager tiles) ---------- */
.sqs-block-map .sqs-block-content { height: 100%; }
.vpv-map-wrap { position: relative; width: 100%; height: 100%; min-height: 380px; overflow: hidden; }
.vpv-map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Keep the required attribution credit small and unobtrusive */
.vpv-map .leaflet-control-attribution { font-size: 10px; opacity: .7; }
/* Custom SVG pin */
.vpv-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* ---------- Fluid Engine MOBILE grid fix (root cause of text overflow on phones) ----------
   Every Fluid Engine section sizes its columns from --cell-max-width / --grid-gutter, but those
   custom properties are ONLY defined inside each section's inline `@media (min-width: 768px)`
   block. Below 768px they're undefined, so the mobile `grid-template-columns` (which is
   `minmax(--grid-gutter,1fr) repeat(8, minmax(0,--cell-max-width)) minmax(--grid-gutter,1fr)`)
   is invalid — blocks fall into oversized implicit columns wider than the screen and the
   section's `overflow-x: clip` shears the content (e.g. the hero heading) at the viewport edge.
   Defining sane mobile values makes the 8-column grid collapse to the viewport with real side
   gutters. This fixes overflow on ALL Fluid Engine sections (heroes, cards) site-wide. */
@media (max-width: 767px) {
  .fluid-engine {
    --grid-gutter: 0px;
    --cell-max-width: calc((100vw - 12vw) / 8);   /* 8 cells fill ~88vw → ~6vw gutter each side */
  }
}

/* ---------- Global overflow / wrap safety net ----------
   Belt-and-suspenders so no element can ever force a horizontal scrollbar or edge-clip,
   and any long word / URL wraps instead of pushing the layout wide. */
body { overflow-x: hidden; }
.sqs-html-content, .sqs-html-content p, .sqs-html-content li, .sqs-html-content a,
.sqs-html-content h1, .sqs-html-content h2, .sqs-html-content h3,
.sqs-html-content h4, .sqs-html-content h5, .sqsrte-scaled-text {
  overflow-wrap: break-word;
}