/* Villa detail page — 5-image hero gallery + identity bar.
   Reuses the existing design tokens (--ink, --gold, --muted, --line, --r-md,
   --display, --accent, --sans). No new fonts. */

/* ─── 5-image hero grid (1 large + 4 small) ─────────────────────────────── */
.lc-hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  margin-top: 1.25rem;
  height: 56vh;
  max-height: 560px;
  min-height: 360px;
  border-radius: var(--r-md);
}
.lc-hero-grid__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--tint);
}
.lc-hero-grid__tile > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease, cubic-bezier(.22,1,.36,1));
}
.lc-hero-grid__tile:hover > img { transform: scale(1.03); }
.lc-hero-grid__tile--main {
  grid-row: 1 / 3;
  border-top-left-radius: var(--r-md);
  border-bottom-left-radius: var(--r-md);
}
.lc-hero-grid__tile:nth-child(3) { border-top-right-radius: var(--r-md); }
.lc-hero-grid__tile:nth-child(5) { border-bottom-right-radius: var(--r-md); }

/* Bottom-left overlay on the main image (location + name + tagline) */
.lc-hero-grid__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.6rem 1.6rem;
  color: #f7f1e3;
  background: linear-gradient(180deg, rgba(20,16,10,0) 0%, rgba(20,16,10,.62) 78%, rgba(20,16,10,.8) 100%);
  pointer-events: none;
}
.lc-hero-grid__loc {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247,241,227,.85);
  margin-bottom: 0.5rem;
}
.lc-hero-grid__name {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1;
  margin: 0;
  color: #f7f1e3;
  letter-spacing: -0.005em;
}
.lc-hero-grid__badge {
  display: inline-block;
  margin-top: 0.65rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--gold);
}

/* "View all N photos" button on the last tile */
.lc-hero-grid__view-all {
  position: absolute;
  right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  border: 0;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20,16,10,.18);
  z-index: 2;
}
.lc-hero-grid__view-all:hover { background: #fff; }
.lc-hero-grid__view-all svg { width: 16px; height: 16px; }

/* Tighter layout on mobile: stack everything, one tall hero */
@media (max-width: 760px) {
  .lc-hero-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 120px 120px;
    height: auto;
    max-height: none;
  }
  .lc-hero-grid__tile--main { grid-column: 1 / -1; grid-row: 1 / 2; border-radius: var(--r-md); }
  .lc-hero-grid__tile:nth-child(2) { grid-column: 1; grid-row: 2; }
  .lc-hero-grid__tile:nth-child(3) { grid-column: 2; grid-row: 2; }
  .lc-hero-grid__tile:nth-child(4) { grid-column: 1; grid-row: 3; }
  .lc-hero-grid__tile:nth-child(5) { grid-column: 2; grid-row: 3; }
  .lc-hero-grid__overlay { padding: 1rem 1.1rem 1.2rem; }
}

/* ─── Identity bar (tagline · location | stats · rating) ────────────────── */
.lc-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.lc-identity__left { display: flex; flex-direction: column; gap: 0.5rem; }
.lc-identity__tag {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra, var(--gold-deep, #8c6a3d));
  font-weight: 600;
}
/* Tier pill sitting in the identity bar (replacing the old caps tagline) */
.lc-identity__chip { align-self: flex-start; margin-bottom: 0.2rem; }
.lc-identity__loc {
  margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-2);
}
.lc-identity__loc svg { color: var(--ink-2); }

.lc-identity__right {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.lc-stat { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 60px; }
.lc-stat__num {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 2.4vw, 2.3rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.lc-stat__label {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.lc-identity__rating {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--muted);
}
.lc-rating-pill {
  background: var(--ink);
  color: #f7f1e3;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}

@media (max-width: 760px) {
  .lc-identity { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .lc-identity__right { gap: 1.25rem; width: 100%; justify-content: flex-start; }
  .lc-stat { min-width: 56px; }
  .lc-stat__num { font-size: 1.7rem; }
  .lc-stat__label { font-size: 0.65rem; }
  .lc-identity__rating { font-size: 0.88rem; }
  .lc-rating-pill { font-size: 0.95rem; padding: 5px 11px; }
}

/* ════════════════════════════════════════════════════════════════════════
   STANDARD VILLA PAGE — mobile pass
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Sections eat 144px of vertical space per top/bottom on mobile by
     default — collapse to a tighter rhythm so the page feels less
     scroll-heavy. */
  .section { padding: clamp(2.6rem, 6vw, 4rem) 0; }

  /* H1 clamps down to 2.6rem (≈42px) which is still chunky on a 360px
     phone — give it a smaller floor + tighter leading. */
  h1 { font-size: clamp(2rem, 7.5vw, 3.2rem); line-height: 1.05; }
  h2 { font-size: clamp(1.55rem, 5.5vw, 2.3rem); }

  /* Booking widget on mobile: stop being sticky (it's below content now,
     not in a sidebar), tighten padding, give inputs the iOS-friendly
     16px font-size so Safari doesn't zoom on focus. */
  .lc-book {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 1.4rem 1.2rem;
    border-radius: 14px;
  }
  .lc-book__price { font-size: 1.7rem; }
  .lc-book__period { font-size: 0.82rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; }
  /* Date pair stacks vertically so each label has room to breathe */
  .lc-book__dates { grid-template-columns: 1fr; }
  .lc-book__dates label {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.85rem 1rem;
    font-size: 0.7rem;
  }
  .lc-book__dates label:last-child { border-bottom: 0; }
  /* 16px+ font-size on every editable input prevents the dreaded
     iOS Safari zoom-on-focus behaviour. */
  .lc-book__dates input,
  .lc-book__guests select,
  .lc-book__fields input,
  .lc-book__fields textarea {
    font-size: 16px;
  }
  .lc-book__guests { padding: 0.85rem 1rem; font-size: 0.7rem; }
  .lc-book__cta-row .btn {
    padding: 1rem 1rem;
    font-size: 1rem;
    min-height: 48px;          /* comfortable tap target */
  }

  /* Recap line on step 2 of the standard widget — keep all the info
     visible without truncating */
  .lc-recap-text { font-size: 0.82rem; }

  /* Tighter intro */
  .lc-intro { padding: 2rem 0 0; }
  .lc-desc { font-size: 1rem; line-height: 1.65; }

  /* Identity bar location line shouldn't push the stats too far down */
  .lc-identity { margin-top: 1rem; padding-bottom: 1.1rem; }
}

@media (max-width: 480px) {
  /* Hero secondary tiles get awkwardly small under ~400px — give the
     main shot more height and reduce the small-tile row */
  .lc-hero-grid { grid-template-rows: 280px 100px 100px; }
  .lc-hero-grid__overlay { padding: 0.85rem 1rem 1rem; }
  .lc-hero-grid__loc { font-size: 0.66rem; letter-spacing: 0.18em; }
  .lc-hero-grid__name { font-size: 1.5rem; }
  /* Trim section padding further on small phones */
  .section { padding: 2.2rem 0; }
  /* Identity bar stats: drop to 2 per row on very narrow screens */
  .lc-identity__right { gap: 1rem 1.5rem; flex-wrap: wrap; }
  .lc-stat { min-width: 0; flex: 0 0 calc(50% - 0.75rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   Rooms section — mobile carousel (one room per screen was eating the
   whole viewport; swipe horizontally now). Bleeds the rail to the
   screen edges so cards can slide in from off-screen.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .lc-rooms-scroll {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    gap: 12px;
    padding: 4px var(--gutter) 14px;
    margin: 0 calc(-1 * var(--gutter));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .lc-rooms-scroll::-webkit-scrollbar { display: none; }
  .lc-room {
    flex: 0 0 auto;
    width: 68vw;
    max-width: 240px;
    scroll-snap-align: start;
  }
  /* Slimmer image aspect so the card doesn't dominate the rail height */
  .lc-room__img { aspect-ratio: 5 / 4; }
  .lc-room__body { padding: 0.75rem 0.85rem 0.9rem; }
  .lc-room__body h4 { font-size: 0.92rem; }
  .lc-room__body p { font-size: 0.78rem; }
  .lc-room__body .lc-room__cap { font-size: 0.72rem; }
  .lc-room__icons { margin-top: 6px; gap: 6px; }

  /* Subtle "swipe me" affordance — a faded edge on the right of the rail
     hints there's more to discover on swipe. */
  .lc-rooms-wrap, .lc-sec:has(.lc-rooms-scroll) {
    position: relative;
  }

  /* Description text on mobile — slightly cosier line-height, tighter
     bottom rhythm, no awkward edge-bleed. The .container's gutter is
     already preserved by the outer wrap. */
  .lc-desc { line-height: 1.65; color: var(--ink-2); }
  .lc-desc p { margin: 0 0 0.9rem; }

  /* Section header — number eyebrow + title — tighter on mobile */
  .lc-sec__head { margin-bottom: 0.9rem; }
  .lc-sec__head h2 { font-size: clamp(1.4rem, 5.2vw, 1.8rem); line-height: 1.15; }
  .lc-sec__num { font-size: 0.78rem; letter-spacing: 0.2em; }
}

@media (max-width: 380px) {
  /* On the narrowest phones widen the room card a touch more so it
     dominates the rail (better tap target) */
  .lc-room { width: 74vw; }
}

/* ════════════════════════════════════════════════════════════════════════
   Photo gallery (.lc-photos) — mobile: horizontal swipe carousel instead
   of a 1-col stretched stack. Each tile stays clickable to open the
   existing data-lb lightbox.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .lc-photos {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding: 4px var(--gutter) 14px;
    margin: 0 calc(-1 * var(--gutter));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .lc-photos::-webkit-scrollbar { display: none; }
  .lc-photos__item {
    flex: 0 0 auto;
    width: 72vw;
    max-width: 280px;
    aspect-ratio: 5 / 4;
    scroll-snap-align: start;
    cursor: pointer;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Robust mobile scroll for the rooms carousel — explicit touch-action +
   neutralise any parent overflow constraints that might block the swipe.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .lc-rooms-scroll {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  /* Parent .lc-sec must not clip the scrollable rail */
  .lc-sec { overflow: visible; }
}

/* ════════════════════════════════════════════════════════════════════════
   Standard villa page — testimonials, schedule-a-call, good-to-know,
   surroundings, features — tighter mobile presentation.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Reviews — tighten padding, drop side margin */
  .lc-testimonials { gap: 1rem; }
  .lc-testimonial { padding: 1.4rem 1.3rem; border-radius: 12px; }
  .lc-testimonial p { font-size: 1rem; line-height: 1.45; margin-bottom: 0.8rem; }
  .lc-testimonial__meta { font-size: 0.78rem; padding-top: 0.7rem; }

  /* Schedule-a-call panel — slightly tighter on phones */
  .lc-cta-call { padding: 1.4rem 1.2rem; margin: 1.4rem 0; }

  /* Good to know — collapses from auto-fit to single column with
     comfortable card-style separators */
  .lc-gtk { grid-template-columns: 1fr; gap: 1rem; }
  .lc-gtk__item { padding: 1rem 1.1rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
  .lc-gtk__item h5 { font-size: 0.92rem; margin-bottom: 0.4rem; }
  .lc-gtk__item p { font-size: 0.88rem; line-height: 1.5; }

  /* Surroundings — map on top, list below */
  .lc-surroundings { grid-template-columns: 1fr; gap: 1.4rem; }
  .lc-surroundings__map { aspect-ratio: 5 / 4; height: auto; }
  .lc-surroundings__list { font-size: 0.92rem; }
  .lc-surroundings__list li { padding: 0.7rem 0; }

  /* Features grid — 2 columns max on phone */
  .lc-features { gap: 1.1rem; }

  /* Photos section header gets the same tightening as rooms */
  .lc-photos + p, .lc-sec__head + p { font-size: 0.92rem; }
}

/* ─── Ultra Luxury — premium refinements on hero + identity bar ────────── */

/* Hero overlay: thin gold rule above the villa name, brighter eyebrow */
body.theme-ultra .lc-hero-grid__tile { border: 1px solid rgba(212,175,55,.08); }
body.theme-ultra .lc-hero-grid__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.92) 100%);
}
body.theme-ultra .lc-hero-grid__loc { color: var(--gold); letter-spacing: 0.28em; }
body.theme-ultra .lc-hero-grid__name {
  /* a slim gold accent rule above the name */
  position: relative;
  padding-top: 0.55rem;
}
body.theme-ultra .lc-hero-grid__name::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 38px; height: 1px;
  background: var(--gold);
}
body.theme-ultra .lc-hero-grid__badge { color: var(--gold); letter-spacing: 0.06em; }
body.theme-ultra .lc-hero-grid__view-all {
  background: rgba(0,0,0,.6);
  color: var(--gold);
  border: 1px solid var(--gold);
  backdrop-filter: blur(6px);
}
body.theme-ultra .lc-hero-grid__view-all:hover { background: var(--gold); color: #15110c; }

/* Identity bar refinements */
body.theme-ultra .lc-identity { border-bottom-color: var(--line-2); padding-bottom: 1.75rem; }
body.theme-ultra .lc-identity__tag { color: var(--gold); letter-spacing: 0.28em; }
body.theme-ultra .lc-identity__loc { color: var(--ink-2); }
body.theme-ultra .lc-identity__loc svg { color: var(--gold); }
body.theme-ultra .lc-stat__num   { color: var(--ink); }
body.theme-ultra .lc-stat__label { color: var(--muted); letter-spacing: 0.22em; }
body.theme-ultra .lc-rating-pill {
  background: var(--gold);
  color: #15110c;
  letter-spacing: -0.005em;
  font-weight: 700;
}
body.theme-ultra .lc-rating-stays { color: var(--muted); }