/* ============================================================
   VILLA.CSS — the per-villa pages at /villas/<slug>, and the
   collection at /villas.

   Everything here borrows from styles.css: brand colours, the
   type scale, the nav, the buttons. What is added is only what a
   single-property page needs and the home page does not.
   ============================================================ */

/* The nav is see-through until you scroll, which is right over a
   photo and wrong over a page that starts with text. Same fix as
   the booking and terms pages: solid from the first pixel. */
.nav--solid{ background:#fff; }

.footer--slim{ padding:28px 0; }
.footer--slim .footer__base{ margin-top:0; padding-top:0; border-top:0; text-align:center; }


.villa{ padding:104px 0 90px; }

/* ============================================================
   THE QUESTIONS

   The same shape as the home page's FAQ, which people have
   already learned to read, rather than a second pattern that
   does the same job differently.
   ============================================================ */
.vfaq{ border-top:1px solid var(--line); }
.vfaq__item{ border-bottom:1px solid var(--line); }
.vfaq__q{
  cursor:pointer; list-style:none; position:relative;
  padding:20px 44px 20px 0; font-size:17px; font-weight:600;
  letter-spacing:-.01em; transition:color .18s;
}
.vfaq__q::-webkit-details-marker{ display:none; }
.vfaq__q:hover{ color:var(--brand); }
.vfaq__q::after{
  content:""; position:absolute; right:6px; top:27px;
  width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .22s; opacity:.5;
}
.vfaq__item[open] .vfaq__q::after{ transform:rotate(225deg); }
.vfaq__a p{ margin:0 0 22px; color:var(--ink-soft); font-size:15.5px; line-height:1.7; max-width:66ch; }

@media (max-width:640px){
  .vfaq__q{ font-size:15.5px; padding:17px 38px 17px 0; }
  .vfaq__q::after{ top:23px; }
  .vfaq__a p{ font-size:14.5px; }
}


/* ============================================================
   THE PRICE, ABOVE THE FOLD AND IN THE HTML

   Not a badge and not a banner: a sentence, because it is making
   a claim with conditions on it. "From ₹24,999" alone invites
   somebody to arrive at a Saturday quote feeling misled, so the
   line says what the number is the lowest OF, in the same breath
   and the same size as everything else they are reading.
   ============================================================ */
/* ============================================================
   THE PROSE ON A VILLA PAGE

   These pages were 160 words with an identical skeleton, which
   Google reads as one page eight times over. They carry a real
   description now — room by room, the pool, the garden, what is
   up the road — so the body copy needs to be readable at length
   rather than at a glance.
   ============================================================ */
.villa__para{
  margin:0 0 16px; font-size:16px; line-height:1.75;
  color:var(--ink-soft); max-width:68ch;
}
.villa__para b{ color:var(--ink); font-weight:650; }

/* The one line on the page that is a warning rather than a
   description. Marked, because a low ceiling over a staircase is
   the sort of thing a guest should meet here and not with their
   head. */
.villa__warn{
  background:#fdf6e6; border-left:3px solid #e3b85e;
  padding:12px 16px; border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:15px; color:#6b5316;
}

/* The equipment list. Two columns where there is room, because
   it is a list to scan rather than to read. */
.vfacts{
  list-style:none; margin:4px 0 0; padding:0;
  display:grid; gap:9px 28px; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  max-width:68ch;
}
.vfacts li{
  position:relative; padding-left:22px; font-size:15px;
  line-height:1.6; color:var(--ink-soft);
}
.vfacts li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:7px; height:7px; border-radius:50%; background:var(--brand); opacity:.55;
}

@media (max-width:640px){
  .villa__para{ font-size:15px; }
  .vfacts li{ font-size:14.5px; }
}


/* ============================================================
   THE COMPARISON TABLE

   Scrolls sideways inside its own box on a phone rather than
   stretching the page — seven columns do not fit 375px and never
   will. The first column is sticky, so the villa's name stays
   visible while the rest slides under it; without that, scrolling
   right leaves a row of numbers belonging to nothing.
   ============================================================ */
.vtable__wrap{ margin:48px 0 56px; }
.vtable__scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r);
  background:#fff;
}
.vtable{ width:100%; border-collapse:collapse; font-size:14.5px; }
.vtable th, .vtable td{
  padding:13px 16px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--line-2);
}
.vtable thead th{
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--tint); border-bottom:1px solid var(--line);
}
.vtable tbody tr:last-child th, .vtable tbody tr:last-child td{ border-bottom:0; }
.vtable tbody th{ font-weight:700; }
.vtable tbody th a{ color:var(--ink); text-decoration:none; }
.vtable tbody th a:hover{ color:var(--brand); text-decoration:underline; }
.vtable tbody tr:hover td, .vtable tbody tr:hover th{ background:var(--tint); }
.vtable__max{ color:var(--ink-soft); font-weight:400; }

@media (max-width:760px){
  .vtable{ font-size:13.5px; }
  .vtable th, .vtable td{ padding:11px 13px; }
  /* The name column stays put while the rest scrolls under it. */
  .vtable thead th:first-child,
  .vtable tbody th{
    position:sticky; left:0; background:#fff; z-index:1;
    box-shadow:1px 0 0 var(--line-2);
  }
  .vtable thead th:first-child{ background:var(--tint); }
  .vtable tbody tr:hover th{ background:var(--tint); }
  .vtable__max{ display:none; }
}


/* Where it is and how long it takes — the question this
   category is asked more than any other, answered above the
   fold and in the HTML rather than in a map nobody reads. */
.villa__drive{
  margin:16px 0 0; font-size:15px; line-height:1.65;
  color:var(--ink-soft); max-width:62ch;
}
.villa__drive strong{ color:var(--ink); font-weight:700; }

@media (max-width:640px){ .villa__drive{ font-size:14px; } }

.villa__from{
  margin:18px 0 0; padding:14px 18px;
  background:var(--tint); border:1px solid var(--line); border-radius:var(--r);
  font-size:14px; color:var(--ink-soft); line-height:1.6; max-width:62ch;
}
.villa__from strong{
  font-size:27px; font-weight:800; letter-spacing:-.035em; color:var(--ink);
  display:inline-block; margin:0 6px 0 2px; vertical-align:-1px;
}
.villa__from > span:first-child{
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  display:block; margin-bottom:2px;
}

@media (max-width:640px){
  .villa__from{ padding:12px 14px; font-size:13.5px; }
  .villa__from strong{ font-size:24px; }
}


/* ---- Breadcrumbs ----
   The only way back up to the collection from a page somebody
   landed on straight from a search result. */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 22px; font-size:13.5px; color:var(--ink-soft);
}
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--brand); }
.crumbs span[aria-hidden]{ opacity:.45; }
.crumbs [aria-current]{ color:var(--ink); font-weight:600; }


/* ============================================================
   THE HEADING
   ============================================================ */
.villa__head{ margin:0 0 26px; }

.villa__name{
  font-size:clamp(32px, 5vw, 54px);
  line-height:1.04; letter-spacing:-.035em; font-weight:800;
  margin:0 0 10px; text-wrap:balance;
}

.villa__where{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 18px;
  font-size:13px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand);
}

/* Grey and small beside the brand-orange locality: something to
   check, not something to do. Same treatment as the booking page. */
.villa__map{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--ink-soft); font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:none; text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .18s, border-color .18s;
}
.villa__map:hover{ color:var(--brand); border-bottom-color:var(--brand-mid); }
.villa__map svg{ width:13px; height:13px; flex:none; }

/* The four or five things somebody scans for before reading a
   word: bedrooms, how many it sleeps, pool, beach. */
.villa__facts{
  display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;
}
.villa__facts li{
  background:var(--tint); border:1px solid var(--line);
  border-radius:100px; padding:7px 16px;
  font-size:14px; font-weight:600; color:var(--ink-2);
}


/* ---- The one photograph that is in the HTML ---- */
.villa__hero{
  margin:0 0 34px; border-radius:var(--r-lg); overflow:hidden;
  background:var(--tint); box-shadow:var(--sh);
}
/* Capped. At the full width of the page a 3:2 photograph is
   nearly 800px tall, which is the whole first screen spent on one
   picture before a word about the villa. It crops rather than
   squashes, so the shape is still right on a phone. */
.villa__hero img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  max-height:min(52vh, 480px);
}


/* ============================================================
   THE DOCUMENT AND THE BOOKING BOX
   ============================================================ */
.villa__body{ display:grid; grid-template-columns:1fr 360px; gap:56px; align-items:start; }

.villa__intro{ margin:0 0 30px; font-size:19px; line-height:1.6; color:var(--ink-2); max-width:60ch; }

.villa__block{ margin:0 0 40px; }
.villa__block[hidden]{ display:none; }

.villa__h2{
  font-size:clamp(21px, 2.4vw, 27px);
  font-weight:800; letter-spacing:-.02em; margin:0 0 12px;
}
.villa__sub{ margin:0 0 16px; color:var(--ink-soft); }

/* ---- The photographs, once Stayflexi has answered ---- */
.villa__gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
/* height:auto matters. A width/height pair on the <img> arrives
   as a presentational hint, nothing here overrode it, and an
   825px height beat aspect-ratio outright — every tile came out
   825px tall in a three-across grid. The photographs are a mix of
   landscape and portrait, so the grid sets one shape and crops to
   it; the intrinsic size of any individual file is not wanted. */
.villa__gallery img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r); background:var(--tint);
}

/* ---- The other seven ---- */
.villa__siblings{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
  margin:0; padding:0; list-style:none;
}
.villa__siblings a{
  display:block; padding:14px 18px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; font-weight:650; color:var(--ink);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.villa__siblings a:hover{
  border-color:var(--brand-mid); transform:translateY(-2px); box-shadow:var(--sh-sm);
}
.villa__siblings span{ display:block; margin-top:3px; font-size:13px; font-weight:500; color:var(--ink-soft); }


/* ---- The booking box ---- */
.villa__side{ position:sticky; top:104px; }

.villa__box{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh);
}
.villa__price{ margin:0 0 2px; font-size:24px; font-weight:800; letter-spacing:-.02em; }
.villa__pricenote{ margin:0 0 18px; font-size:13px; color:var(--ink-soft); }

/* The three fields. Stacked rather than in a row: the box is
   360px wide on a desktop and narrower on a phone, and a date
   range squeezed into a third of that is unreadable. */
.vbox__field{
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 12px 5px; margin-bottom:9px;
  transition:border-color .18s;
}
.vbox__field:focus-within{ border-color:var(--brand-mid); }
.vbox__lbl{
  display:block; font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
}

.vbox__err{
  margin:10px 0 0; font-size:13px; font-weight:600; color:#c62f14; min-height:0;
}
.vbox__err:empty{ margin:0; }

.villa__box .btn{ margin-top:14px; }

.villa__assure{ margin:18px 0 0; padding:0; list-style:none; display:grid; gap:7px; }
.villa__assure li{
  position:relative; padding-left:22px; font-size:13.5px; color:var(--ink-soft);
}
.villa__assure li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--brand); font-weight:800; font-size:12px;
}


/* ============================================================
   THE COLLECTION AT /villas
   ============================================================ */
.vlist{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:22px; margin:36px 0 0; padding:0; list-style:none;
}
.vlist__card{
  display:block; height:100%;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.vlist__card:hover{
  transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--brand-mid);
}
.vlist__card img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--tint); }
.vlist__body{ padding:18px 20px 22px; }
.vlist__body h2{ margin:0 0 4px; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.vlist__meta{ margin:0 0 10px; font-size:13px; font-weight:600; color:var(--brand); }
.vlist__blurb{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-soft); }


/* ============================================================
   TABLET + PHONE
   ============================================================ */
@media (max-width:1000px){
  .villa__body{ grid-template-columns:1fr; gap:34px; }

  /* Sticky is worth nothing in one column, and it traps the box
     at the bottom of a long page. */
  .villa__side{ position:static; }
  .villa__siblings{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .villa{ padding:88px 0 70px; }
  .villa__gallery{ grid-template-columns:repeat(2, 1fr); }
  .villa__box{ padding:20px; }
}


/* ============================================================
   ON PAPER
   ============================================================ */
@media print{
  .nav, .wa, .footer, .villa__side, .stickybar{ display:none !important; }
  .villa{ padding:0; }
  .villa__body{ display:block; }
  .villa__hero{ box-shadow:none; }
  a{ text-decoration:none; color:#000; }
}