/* Voyage gallery — shared template for all six voyage-*.html.
   Same sunny sky-and-sea world as the Voyages page (next-stops.html).
   Scoped to #vg-root so it can't leak into the shared header/footer. */

#vg-root{
  --vg-sky-deep:#2b4f82;
  --vg-sky-mid:#5c93c8;
  --vg-sky-pale:#a9d3f0;
  --vg-navy:#14304e;
  --vg-rust:#a8432a;
  --vg-teal:#2f8f86;
  --vg-sand:#ffe6ad;
  --vg-paper:#fffdf7;
  --vg-parch:#fbf4e6;
  min-height:100vh;
  background:#bfe0f5;
  padding:clamp(14px,3vw,30px) clamp(10px,3vw,22px) 60px;
}
#vg-root a{color:var(--vg-rust);text-decoration:none}
#vg-root a:hover{color:var(--vg-navy)}

/* The sheet — readable content capped like next-stops.html, scene stays full-bleed. */
#vg-sheet{
  margin:0 auto;max-width:1120px;width:100%;
  border-radius:14px;overflow:hidden;
  box-shadow:0 44px 90px -44px rgba(15,35,70,.6);
}

/* ---------- hero ---------- */
#vg-root .vg-hero-sec{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#2b4f82 0,#3a6699 150px,#5c93c8 320px,#89bfe6 500px,#a9d3f0 720px,#b8dbf3 100%);
}
#vg-root .vg-herogrid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(22px,3.2vw,44px);align-items:center;
}
#vg-root .vg-secpad{padding-left:clamp(22px,4vw,52px);padding-right:clamp(22px,4vw,52px)}

/* ---------- taped prints ---------- */
#vg-root .vg-lift{
  position:relative;display:block;background:var(--vg-paper);
  border:1px solid rgba(20,40,70,.14);
  box-shadow:0 16px 32px -18px rgba(15,35,70,.58);
  transition:transform .3s cubic-bezier(.34,1.1,.5,1),box-shadow .3s ease;
}
#vg-root .vg-frame,#vg-root .vg-hero{
  display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;
}
#vg-root .vg-frame:hover .vg-lift,
#vg-root .vg-hero:hover .vg-lift{
  transform:translateY(-6px) rotate(0deg);
  box-shadow:0 30px 50px -20px rgba(15,35,70,.62);
}
#vg-root .vg-frame:focus-visible,
#vg-root .vg-hero:focus-visible{outline:3px solid var(--vg-sand);outline-offset:4px}
#vg-root .vg-shot{
  display:block;width:100%;height:100%;object-fit:cover;
  border:1px solid #cdd7df;background:#dce6ec;
}

/* ---------- photo wall: ROW-MAJOR grid ----------
   A CSS-columns masonry would fill top-to-bottom (column-major), so the
   on-screen order would disagree with the lightbox order. Grid fills
   left-to-right, so frame N on screen is frame N in the viewer. */
#vg-root .vg-wall{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;align-items:start;
}
@media (max-width:1000px){#vg-root .vg-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  #vg-root .vg-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  #vg-root .vg-herogrid{grid-template-columns:1fr;gap:26px}
  #vg-root .vg-heroprint{max-width:440px;margin-left:auto;margin-right:auto}
}
@media (max-width:470px){#vg-root .vg-wall{grid-template-columns:1fr}}

/* ---------- other voyages ---------- */
#vg-root .vg-others{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:20px;
}
#vg-root .vg-other{
  position:relative;display:block;background:var(--vg-paper);
  border:1px solid rgba(20,40,70,.14);padding:10px 10px 14px;
  box-shadow:0 16px 32px -20px rgba(15,35,70,.5);
  transition:transform .28s ease,box-shadow .28s ease;
}
#vg-root .vg-other:hover{
  transform:translateY(-5px) rotate(0deg)!important;
  box-shadow:0 26px 44px -18px rgba(15,35,70,.5)!important;
}
#vg-root .vg-cta:focus-visible,#vg-root .vg-other:focus-visible{outline:3px solid var(--vg-sand);outline-offset:3px}

/* ---------- lightbox ---------- */
#vg-lightbox{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;padding:clamp(14px,4vw,40px);
}
#vg-lightbox.is-open{display:flex}
#vg-lightbox [data-lb-close]:focus-visible,
#vg-lightbox [data-lb-prev]:focus-visible,
#vg-lightbox [data-lb-next]:focus-visible,
#vg-lightbox [data-lb-zoom]:focus-visible{outline:3px solid var(--vg-sand,#ffe6ad);outline-offset:3px}
#vg-lightbox [data-lb-imgwrap]{overflow:hidden;cursor:zoom-in;line-height:0}
#vg-lightbox.is-zoomed [data-lb-imgwrap]{cursor:zoom-out}
#vg-lightbox [data-lb-img]{
  display:block;width:min(74vw,900px);height:min(58vh,600px);max-width:100%;
  object-fit:contain;background:#dce6ec;border:1px solid #cdd7df;
  transition:transform .35s ease;transform-origin:center;
}
#vg-lightbox.is-zoomed [data-lb-img]{transform:scale(1.6)}
body.vg-locked{overflow:hidden}

/* ---------- sky decor motion ---------- */
@keyframes vg-drift{0%{transform:translateX(-40px)}100%{transform:translateX(60px)}}
@keyframes vg-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(-4deg)}}
@keyframes vg-boat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes vg-twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes vg-beacon{0%,100%{opacity:1}50%{opacity:.2}}
#vg-root .vg-cloud{animation:vg-drift 26s ease-in-out infinite alternate}
#vg-root .vg-sat{animation:vg-bob 6s ease-in-out infinite}
#vg-root .vg-boat{animation:vg-boat 5s ease-in-out infinite}
#vg-root .vg-star{animation:vg-twinkle 4s ease-in-out infinite}
#vg-root .vg-beacon{animation:vg-beacon 1.6s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  #vg-root .vg-cloud,#vg-root .vg-sat,#vg-root .vg-boat,
  #vg-root .vg-star,#vg-root .vg-beacon{animation:none}
  #vg-root .vg-lift,#vg-root .vg-other,#vg-lightbox [data-lb-img]{transition:none}
}