/* =====================================================
   Sea Sky Samui Villas — villa detail pages
   Style direction: Oliver's Travels property pages
   (Snow Goose reference): cream ground, deep navy text,
   soft serif headings, coral booking CTA, sticky widget.
   ===================================================== */

/* Design tokens now live in ../tokens.css (loaded before this file on villa.html). */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  margin: 0;
}

/* ---------- top nav ---------- */

.vp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 4vw;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;   /* keep the header (with WhatsApp) pinned while scrolling */
  top: 0;
  z-index: 61;        /* above the section sub-nav (60) so it docks below */
}

.vp-brand a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vp-logo { height: 58px; width: auto; display: block; }

.vp-brand-mark {
  font-family: "Fraunces", serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
}

.vp-brand-sub {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-soft);
}

.vp-links {
  display: flex;
  gap: 28px;
}

.vp-links a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
}

.vp-links a:hover { color: var(--coral); }

.vp-nav-cta {
  background: #22b558;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 22px;
  border-radius: 999px;
}

.vp-nav-cta:hover { background: #1a9c4a; }

/* ---------- section nav (sticky, Oliver's style) ---------- */

.vp-sectionnav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  background: #232b3f;
  padding: 0 4vw 0 0;
}

.vp-sectionnav-links {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
}

.vp-sectionnav-links a {
  display: flex;
  align-items: center;
  padding: 18px 26px;
  text-decoration: none;
  color: #f2f4f8;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

.vp-sectionnav-links a:hover { background: #2e3850; }
.vp-sectionnav-links a.active { background: #39445e; }

.vp-sectionnav-cta {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #22b558;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 12px 24px;
  border-radius: 6px;
  white-space: nowrap;
}

.vp-sectionnav-cta:hover { background: #1a9c4a; }

.vp-sectionnav-cta .wa-icon {
  width: 17px;
  height: 17px;
  flex: none;
}

/* ---------- breadcrumb ---------- */

.vp-breadcrumb {
  padding: 18px 4vw 0;
  font-size: 0.8rem;
  color: var(--navy-soft);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vp-breadcrumb a { text-decoration: none; }
.vp-breadcrumb a:hover { color: var(--coral); }
.vp-breadcrumb strong { color: var(--navy); font-weight: 700; }

/* ---------- gallery: full-bleed, edge to edge ---------- */

.vp-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 0.78fr 1.02fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  height: min(78vh, 720px);
  background: #fff;
}

.gal-hero,
.gal-thumb {
  overflow: hidden;
  display: block;
  /* soft skeleton shown while the real photo loads (no broken-image flash) */
  background: linear-gradient(100deg, #eceeec 30%, #f4f5f3 50%, #eceeec 70%);
  background-size: 200% 100%;
  animation: gal-skeleton 1.4s ease-in-out infinite;
}

/* stop the shimmer once the photo is in */
.gal-hero:has(img.is-loaded),
.gal-thumb:has(img.is-loaded) { animation: none; background: #eceeec; }

@keyframes gal-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.gal-hero { grid-column: 1; grid-row: 1 / 3; }
.gal-pos-1 { grid-column: 2; grid-row: 1; }
.gal-pos-2 { grid-column: 2; grid-row: 2; }
.gal-pos-3 { grid-column: 3; grid-row: 1 / 3; }

.gal-hero img,
.gal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* reveal only once the real (or fallback) photo has actually loaded */
.gal-hero img.is-loaded,
.gal-thumb img.is-loaded { opacity: 1; }

.gal-hero:hover img,
.gal-thumb:hover img { transform: scale(1.03); }

.gal-count {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: "Manrope", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(17, 58, 79, 0.18);
}

/* ---------- layout ---------- */

.vp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
  gap: 48px;
  padding: 36px 4vw 60px;
  align-items: start;
}

/* ---------- title block ---------- */

.vp-region {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 10px;
}

.vp-titleblock h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
}

.vp-tagline {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--navy-soft);
  max-width: 620px;
  margin: 16px 0 24px;
}

.vp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.vp-facts div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vp-facts svg {
  width: 24px;
  height: 24px;
  color: var(--sea);
}

.vp-facts strong {
  font-size: 0.92rem;
  font-weight: 700;
}

.vp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.vp-tags span {
  background: #f0e9da;
  color: #7a5c1e;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 999px;
}

/* ---------- content sections ---------- */

.vp-section {
  margin-top: 44px;
}

.vp-section h2 {
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.vp-section > p,
#vd-story p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--navy-soft);
  margin: 0 0 14px;
  max-width: 640px;
}

/* what we love */

.vp-lovebox {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 28px;
}

.love-list,
.know-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.love-list li,
.know-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--navy-soft);
}

.love-list .heart {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--coral);
}

.know-list .info {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--sea);
}

/* amenities */

.amenity-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 24px;
}

.amenity-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--navy-soft);
}

.tick {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--sea);
}

/* distances */

.near-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}

.near-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.92rem;
}

.near-row .pin {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--coral);
}

.near-name { color: var(--navy); font-weight: 600; }
.near-dist { margin-left: auto; color: var(--navy-soft); }

/* review */

.vp-reviewbox {
  background: #10384d;
  color: #ecf3f5;
  border-radius: 0;
  padding: 32px;
}

.review-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}

.review-stars svg {
  width: 17px;
  height: 17px;
  color: #f3c14b;
}

.review-stars span {
  margin-left: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #bcd2da;
}

.vp-reviewbox blockquote {
  margin: 0 0 14px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
}

.vp-reviewbox cite {
  font-style: normal;
  font-size: 0.84rem;
  color: #9fbcc7;
}

/* ---------- booking sidebar ---------- */

.vp-side {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vp-book {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: 26px;
}

.vp-book-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
  margin: 0 0 8px;
}

.vp-book-title {
  font-size: 1.55rem;
  margin: 0 0 10px;
}

.vp-book-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--navy-soft);
  margin: 0 0 18px;
}

.vp-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #22b558;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.98rem;
  padding: 15px 22px;
  border-radius: 999px;
}

.vp-wa:hover { background: #1a9c4a; }

.vp-wa .wa-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.vp-wa-inline { display: inline-flex; }

.vp-book-note {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--navy-soft);
  text-align: center;
  margin: 12px 0 18px;
}

.vp-trust {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vp-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--navy-soft);
}

.vp-help {
  background: #eef4f0;
  border-radius: 0;
  padding: 22px 24px;
}

.vp-help-title {
  font-family: "Fraunces", serif;
  font-size: 1.15rem;
  margin: 0 0 8px;
}

.vp-help p:not(.vp-help-title) {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--navy-soft);
  margin: 0 0 12px;
}

.vp-help a {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--sea);
  text-decoration: none;
}

/* ---------- end CTA + footer ---------- */

.vp-endcta {
  text-align: center;
  padding: 70px 4vw;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.vp-endcta-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 10px;
}

.vp-endcta h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 26px;
}

.vp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px 4vw;
  background: #10384d;
  color: #bcd2da;
}

.vp-footer .vp-brand-mark { color: #fff; margin-right: 10px; }
.vp-footer .vp-brand-sub { color: #7fa2b0; }
.vp-footer-logo { display: block; height: 60px; width: auto; }

.vp-footer nav {
  display: flex;
  gap: 22px;
}

.vp-footer a {
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: #d7e5ea;
}

.vp-footer p { font-size: 0.78rem; margin: 0; }

/* ---------- villas hub (index) ---------- */

.hub-shell {
  padding: 48px 4vw 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.hub-shell h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 12px;
}

.hub-intro {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--navy-soft);
  max-width: 640px;
  margin: 0 0 36px;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.hub-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.hub-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.hub-body { padding: 18px 20px 22px; }

.hub-area {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 6px;
}

.hub-body h2 {
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.hub-meta {
  font-size: 0.84rem;
  color: var(--navy-soft);
  margin: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .vp-layout { grid-template-columns: 1fr; }
  .vp-side { position: static; }
  .hub-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .vp-links { display: none; }

  .vp-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 120px;
    height: auto;
  }
  .gal-hero { grid-column: 1 / 3; grid-row: 1; }
  .gal-pos-1 { grid-column: 1; grid-row: 2; }
  .gal-pos-2 { grid-column: 2; grid-row: 2; }
  .gal-pos-3 { display: none; }
  .vp-sectionnav-links a { padding: 14px 16px; font-size: 0.84rem; }

  .amenity-grid { grid-template-columns: 1fr 1fr; }
  .near-grid { grid-template-columns: 1fr; }
  .hub-grid { grid-template-columns: 1fr; }

  .vp-footer { flex-direction: column; text-align: center; }
}

/* ===== Gallery lightbox ===== */
.vp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 22, 30, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 3vw 116px;
}
.vp-lightbox[hidden] { display: none; }
.vpl-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 12px 16px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: safe center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.vpl-thumb {
  flex: 0 0 auto;
  width: 94px;
  height: 62px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition: opacity 150ms ease, border-color 150ms ease;
}
.vpl-thumb:hover { opacity: 0.85; }
.vpl-thumb.is-active { opacity: 1; border-color: #fff; }
.vpl-stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
}
.vpl-stage img {
  max-width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.vpl-count {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.vpl-close {
  position: absolute;
  top: 18px;
  right: 26px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.vpl-close:hover { opacity: 1; }
.vpl-nav {
  flex: 0 0 auto;
  margin: 0 12px;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease;
}
.vpl-nav:hover { background: rgba(255, 255, 255, 0.26); }
@media (max-width: 640px) {
  .vpl-nav { width: 42px; height: 42px; font-size: 1.5rem; margin: 0 4px; }
  .vpl-close { top: 10px; right: 14px; font-size: 2rem; }
  .vp-lightbox { padding: 4vh 2vw 84px; }
  .vpl-stage img { max-height: 64vh; }
  .vpl-strip { gap: 6px; padding: 8px 10px 10px; justify-content: safe flex-start; }
  .vpl-thumb { width: 64px; height: 44px; }
}

/* Anchor-scroll offset so the sticky sub-nav doesn't cover the section heading */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}