/* =============================================================
   Villa Luna — palette override on top of villa.css
   Sister-villa to Selya: same architecture of components,
   but the warm bone/paper neutrals are replaced with the
   Luna sage (#D5D5AB) — and oxblood is kept as the dark anchor.
   ============================================================= */
.vs--luna {
  /* dark accents — inherited from the Selya family */
  --oxblood:       #2D1410;
  --burgundy:      #3A1A14;
  --burgundy-soft: #4A2620;
  --burgundy-deep: #1F0D0A;

  /* sage / olive — Luna's signature, derived from D5D5AB */
  --olive:         #A8A872;
  --olive-deep:    #6F6F3D;
  --olive-soft:    #D5D5AB;
  --olive-glow:    #E6E6C0;

  /* light neutrals — re-cast around the Luna sage */
  --bone:          #F2F2DE;  /* pale background — softer than Selya's bone */
  --paper:         #D5D5AB;  /* signature Luna sage */
  --paper-deep:    #BCBC8C;
  --cream:         #ECECCF;
  --ink:           #232318;
  --charcoal:      #2E2E20;
  --smoke:         #6B6852;
  --fog:           #A09D80;

  /* accents */
  --moss:          #5A6843;
  --rust:          #A8553B;
  --sky:           #7E8A6E;
}

/* ------- Luna-specific tweaks on top of the .vs- system ------- */

/* nav stays warm/sage even on hero scrim */
.vs--luna .vs-nav__cta {
  background: var(--olive-soft);
  color: var(--oxblood);
}
.vs--luna .vs-nav__cta:hover { background: var(--olive-glow); }

/* booking bar — sage paper instead of warm paper */
.vs--luna .vs-bookbar__inner {
  background: var(--olive-soft);
  box-shadow:
    0 30px 60px -20px rgba(45, 20, 16, 0.32),
    0 0 0 1px rgba(45, 20, 16, 0.06);
}
.vs--luna .vs-bookbar__label { color: var(--olive-deep); }
.vs--luna .vs-bookbar__field { border-color: rgba(31,26,22,0.18); }
.vs--luna .vs-bookbar__value { color: var(--oxblood); }

/* the dropcap in the intro — luna oxblood */
.vs--luna .vs-intro__body p:first-child::first-letter {
  color: var(--oxblood);
}

/* glance numerals: oxblood + olive em */
.vs--luna .vs-glance { background: var(--paper); }
.vs--luna .vs-glance__num { color: var(--oxblood); }
.vs--luna .vs-glance__num em { color: var(--olive-deep); }
.vs--luna .vs-glance__label { color: var(--charcoal); opacity: 0.75; }
.vs--luna .vs-glance__item { border-color: rgba(31,26,22,0.18); }

/* spaces section keeps oxblood; sub headlines glow sage */
.vs--luna .vs-spaces { background: var(--burgundy); }
.vs--luna .vs-space__label h3 em { color: var(--olive-soft); }
.vs--luna .vs-space__label small { color: var(--olive-soft); }

/* amenities cream — softer sage cream */
.vs--luna .vs-amen { background: var(--cream); }

/* reserve hero — sage CTA on bone */
.vs--luna .vs-reserve { background: var(--bone); }
.vs--luna .vs-reserve__title {
  /* extra breathing room below the title — at large sizes the italic WONK
     descenders ("skip the middlemen") were clipping into the sub paragraph */
  line-height: 1.04;
  margin-bottom: 2.2rem;
}
.vs--luna .vs-reserve__sub {
  margin-top: 0.4rem;
}
.vs--luna .vs-reserve__cta {
  background: var(--oxblood);
  color: var(--olive-soft);
}

/* footer slightly warmer */
.vs--luna .vs-foot { background: var(--burgundy-deep); }
.vs--luna .vs-foot__brand-name { color: var(--olive-soft); }

/* the sister-villa callout block */
.vs-sister {
  padding-block: clamp(4rem, 7vw, 6rem);
  background: var(--bone);
  border-block: 1px solid rgba(31,26,22,0.08);
}
.vs-sister__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}
.vs-sister__copy { padding-right: 1rem; }
.vs-sister__eyebrow {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 1.4rem;
}
.vs-sister__eyebrow::before {
  content: ""; width: 2rem; height: 1px; background: var(--olive-deep);
}
.vs-sister__title {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 350;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.2rem;
  max-width: 18ch;
}
.vs-sister__title em {
  font-style: italic;
  color: var(--olive-deep);
  font-variation-settings: "WONK" 1;
}
.vs-sister__body {
  color: var(--charcoal);
  max-width: 36rem;
  font-size: 1.02rem;
  line-height: 1.6;
}
.vs-sister__link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.8rem;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--oxblood);
  padding: 0.85rem 1.4rem;
  background: var(--olive-soft);
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.vs-sister__link:hover { background: var(--olive-glow); transform: translateY(-1px); }
.vs-sister__image {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--burgundy);
}
.vs-sister__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s ease;
}
.vs-sister:hover .vs-sister__image img { transform: scale(1.03); }
.vs-sister__chip {
  position: absolute; left: 1.1rem; top: 1.1rem;
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(244,239,230,0.92);
  color: var(--oxblood);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .vs-sister__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* unique-feature block: glass floor */
.vs-feature {
  padding-block: var(--section-pad);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.vs-feature__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
}
.vs-feature__copy { max-width: 36rem; }
.vs-feature__title {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--oxblood);
  margin: 1.2rem 0 1.4rem;
}
.vs-feature__title em {
  font-style: italic;
  font-variation-settings: "WONK" 1;
  color: var(--olive-deep);
}
.vs-feature__body {
  color: var(--charcoal);
  font-size: 1.05rem;
  line-height: 1.6;
}
.vs-feature__body p { margin: 0 0 1rem; }
.vs-feature__pill {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.4rem 0.85rem;
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--oxblood);
  color: var(--olive-soft);
  border-radius: 999px;
}
.vs-feature__image {
  border-radius: var(--r-l);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 80px -30px rgba(31, 13, 10, 0.4);
}
.vs-feature__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .vs-feature__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* gallery — sage tag accent instead of oxblood */
.vs--luna .vs-tag.is-active {
  background: var(--oxblood);
  color: var(--olive-soft);
  border-color: var(--oxblood);
}

/* hero title — slightly smaller than Selya's default so the longer SEO-tuned
   H1 reads comfortably on a single screen */
.vs--luna .vs-hero__title {
  font-size: clamp(2.4rem, 6.8vw, 6rem);
  letter-spacing: -0.03em;
  max-width: 18ch;
}

/* ============================================================
   Brand mark — the actual Villa Luna logo (PNG with transparency)
   Used in nav, footer and map pin. No circular crop, no ring.
   ============================================================ */
.vs--luna .vs-nav__brand-mark--bare,
.vs--luna .vs-foot__brand-mark--bare {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vs--luna .vs-nav__brand-mark--bare {
  width: 180px; height: 96px; flex-basis: 180px;
}
.vs--luna .vs-nav__brand-mark--bare img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* lift the cream wordmark off the hero photo with a layered shadow */
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,0.75))
    drop-shadow(0 2px 6px rgba(0,0,0,0.55))
    drop-shadow(0 4px 24px rgba(0,0,0,0.45));
}
.vs--luna .vs-foot__brand-mark--bare {
  width: 160px; height: 96px;
  margin-bottom: 0.4rem;
}
.vs--luna .vs-foot__brand-mark--bare img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* map pin — keep circular sage badge, but drop the actual logo on top */
.vs--luna .vs-loc__pin-logo {
  width: 40px; height: 40px;
  object-fit: contain;
  /* native ink-coloured PNG — sits on the sage pin without filtering */
}

/* real map iframe (OpenStreetMap) replaces the hand-drawn SVG */
.vs--luna .vs-loc__map {
  position: relative;
  background: var(--burgundy);
}
.vs--luna .vs-loc__map iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
  border-radius: var(--r-l);
  filter: contrast(0.96) saturate(0.85);
}
.vs-loc__bigmap {
  position: absolute; right: 0.9rem; bottom: 0.9rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  background: rgba(45, 20, 16, 0.92);
  color: var(--olive-soft);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background .2s, transform .2s;
  border: 1px solid rgba(213, 213, 171, 0.18);
}
.vs-loc__bigmap:hover {
  background: rgba(31, 13, 10, 0.95);
  transform: translateY(-1px);
}

/* reserve — small "also on Booking / Airbnb" footnote under the CTA */
.vs--luna .vs-reserve__alt {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 2rem auto 0;
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--smoke);
  letter-spacing: 0.02em;
}
.vs--luna .vs-reserve__alt-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-right: 0.2rem;
}
.vs--luna .vs-reserve__alt-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 26, 22, 0.25);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.vs--luna .vs-reserve__alt-link:hover {
  color: var(--oxblood);
  border-color: var(--oxblood);
}
.vs--luna .vs-reserve__alt-dot {
  color: var(--olive-deep);
  font-weight: 600;
}

/* ============================================================
   Gallery — tighter editorial mosaic on Luna
   ============================================================ */
.vs--luna .vs-gallery__grid {
  grid-auto-rows: 200px;
  gap: 0.6rem;
  grid-auto-flow: dense;
}
.vs--luna .vs-gallery__tile {
  border-radius: var(--r-m);
  position: relative;
  background: var(--paper);
}
.vs--luna .vs-gallery__tile::after {
  /* subtle inner border to define the tile on the sage background */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(31, 13, 10, 0.06);
  pointer-events: none;
}
@media (max-width: 900px) {
  .vs--luna .vs-gallery__grid { grid-auto-rows: 160px; gap: 0.5rem; }
}

/* ============================================================
   Booking modal — opens from any Reserve / Check availability CTA
   ============================================================ */
.vs-modal {
  position: fixed; inset: 0;
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 13, 10, 0.55);
  backdrop-filter: blur(6px);
  padding: 1.5rem;
  animation: vsModalFade .18s ease-out;
}
@keyframes vsModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.vs-modal__card {
  position: relative;
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--r-l);
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 2.4rem 2.2rem 2rem;
  box-shadow: 0 40px 80px -20px rgba(31, 13, 10, 0.55);
  animation: vsModalRise .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes vsModalRise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.vs-modal__close {
  position: absolute; top: 0.8rem; right: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none; background: transparent;
  font-size: 1.6rem; line-height: 1;
  color: var(--smoke);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vs-modal__close:hover { background: rgba(31, 13, 10, 0.06); color: var(--oxblood); }

.vs-modal__head { margin-bottom: 1.4rem; }
.vs-modal__eyebrow {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 0.6rem;
}
.vs-modal__title {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--oxblood);
  margin: 0 0 0.6rem;
}
.vs-modal__sub {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--charcoal);
  max-width: 38ch;
}

.vs-modal__form { display: flex; flex-direction: column; gap: 0.85rem; }
.vs-modal__row { display: grid; gap: 0.85rem; }
.vs-modal__row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) {
  .vs-modal__row--2 { grid-template-columns: 1fr; }
}
.vs-modal__form label {
  display: flex; flex-direction: column; gap: 0.32rem;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--smoke);
  text-transform: uppercase;
}
.vs-modal__form label > span {
  /* lock label height so optional/notes labels with <small> tags don't
     shift their input below siblings in the same row */
  min-height: 1.05rem;
  line-height: 1.2;
  display: flex; align-items: center; gap: 0.35rem;
  flex-wrap: wrap;
}
.vs-modal__form label small {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fog);
  margin-left: 0.25rem;
}
.vs-modal__form input,
.vs-modal__form select,
.vs-modal__form textarea {
  font: inherit;
  font-family: var(--body);
  font-size: 0.98rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(31, 13, 10, 0.14);
  border-radius: var(--r-m);
  padding: 0.7rem 0.85rem;
  height: 46px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.vs-modal__form textarea { resize: vertical; min-height: 70px; height: auto; }
.vs-modal__form input:focus,
.vs-modal__form select:focus,
.vs-modal__form textarea:focus {
  outline: none;
  border-color: var(--olive-deep);
  box-shadow: 0 0 0 3px rgba(168, 168, 114, 0.22);
}

.vs-modal__actions {
  display: flex; gap: 0.6rem; justify-content: flex-end;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.vs-modal__btn {
  font: inherit;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.vs-modal__btn--ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: rgba(31, 13, 10, 0.16);
}
.vs-modal__btn--ghost:hover { background: rgba(31, 13, 10, 0.05); }
.vs-modal__btn--solid {
  background: var(--oxblood);
  color: var(--olive-soft);
}
.vs-modal__btn--solid:hover { background: var(--burgundy-soft); transform: translateY(-1px); }

.vs-modal__fineprint {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--fog);
  line-height: 1.45;
}

.vs-modal__done {
  text-align: center;
  padding: 1rem 0 0.4rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.vs-modal__check {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--olive-soft);
  color: var(--oxblood);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.4rem;
}
.vs-modal__done .vs-modal__title { margin: 0; }
.vs-modal__done .vs-modal__sub { margin: 0 auto; }
.vs-modal__done .vs-modal__btn { margin-top: 1rem; }

/* phone field with country-code selector */
.vs-modal__phone {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  gap: 0.5rem;
}
.vs-modal__phone .vs-modal__dial {
  padding-left: 0.6rem;
  padding-right: 0.4rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.vs-modal__phone .vs-modal__dial:focus { z-index: 1; }

/* ============================================================
   Booking bar — make the values into real inputs while keeping
   the same display typography
   ============================================================ */
.vs--luna .vs-bookbar__field {
  /* the field is now a <label>, keep the column layout */
  cursor: pointer;
}
.vs--luna .vs-bookbar__input {
  font: inherit;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 350;
  letter-spacing: -0.01em;
  color: var(--oxblood);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.vs--luna select.vs-bookbar__input {
  /* keep the same look as text — add a small chevron */
  padding-right: 1.1rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%232D1410' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.05rem center;
  background-size: 9px 6px;
}
.vs--luna .vs-bookbar__input::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}
.vs--luna .vs-bookbar__input:focus {
  outline: none;
  color: var(--olive-deep);
}
.vs--luna .vs-bookbar__input:invalid { color: var(--fog); }