/* ============================================================
   MAINE STAYS — property detail pages (assets-v2)
   Cinematic Midnight-Glass hero + clean light body + gallery/lightbox
   Loaded after base.css + theme.css.  ms-property-v1
   ============================================================ */

/* ---------- HERO ---------- */
.prop-hero{position:relative;overflow:hidden;min-height:clamp(360px,52vh,540px);
  display:flex;align-items:flex-end;background:var(--ink-deep);}
.prop-hero .band-bg{position:absolute;inset:0;}
.prop-hero .band-bg img{width:100%;height:100%;object-fit:cover;}
.prop-hero .band-bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 88% -8%, rgba(43,212,212,.20), transparent 58%),
    linear-gradient(180deg, rgba(9,13,17,.30) 0%, rgba(9,13,17,.72) 58%, rgba(9,13,17,.93) 100%);}
.prop-hero .section-inner{position:relative;z-index:1;width:100%;
  padding-top:clamp(5.5rem,12vh,8rem);padding-bottom:clamp(1.8rem,4vh,2.8rem);}
.prop-hero h1{font-family:var(--font-head);font-weight:600;color:#fff;
  font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.08;letter-spacing:-.015em;}
.prop-loc{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;
  font-family:var(--font-ui);font-weight:600;font-size:.9rem;color:var(--teal-glow);}
.prop-loc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;}

/* spec chips */
.prop-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem;}
.prop-chip{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-weight:600;
  font-size:.78rem;color:#eafeff;background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);padding:.48rem .9rem;border-radius:var(--radius-pill);}
.prop-chip svg{width:15px;height:15px;fill:none;stroke:var(--teal-glow);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

/* ---------- BODY ---------- */
.prop-body{background:var(--fog);padding:clamp(2.5rem,6vh,4rem) 0 clamp(3rem,7vh,5rem);}
.prop-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.6rem);
  max-width:1180px;margin:0 auto;}
@media(min-width:1000px){.prop-grid{grid-template-columns:minmax(0,1fr) 372px;align-items:start;}}

.prop-block{background:#fff;border:1px solid rgba(22,24,26,.06);border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);padding:clamp(1.3rem,2.6vw,2rem);margin-bottom:clamp(1.1rem,2vw,1.6rem);}
.prop-block h2{font-family:var(--font-head);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.75rem);
  letter-spacing:-.01em;color:var(--ink);margin-bottom:.9rem;}
.prop-block p{color:var(--ink-60);line-height:1.65;font-size:.95rem;margin-bottom:.8rem;}
.prop-block p:last-child{margin-bottom:0;}

/* amenities + rules */
.prop-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.65rem;}
.prop-item{display:flex;align-items:center;gap:.6rem;padding:.75rem .85rem;
  background:var(--fog);border:1px solid rgba(22,24,26,.05);border-radius:.85rem;
  font-family:var(--font-ui);font-size:.86rem;font-weight:500;color:var(--ink);}
.prop-item svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--teal);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

/* ---------- GALLERY ---------- */
.prop-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;}
@media(max-width:760px){.prop-gallery{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.prop-gallery{grid-template-columns:1fr;}}
.photo-slot{position:relative;aspect-ratio:4/3;border-radius:.9rem;overflow:hidden;cursor:pointer;
  background:var(--fog-deep);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;}
.photo-slot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.photo-slot:hover{transform:translateY(-3px);box-shadow:0 22px 44px -20px rgba(11,127,138,.45);}
.photo-slot:hover img{transform:scale(1.06);}
.photo-slot.hidden-photo{display:none;}
.btn-show-more{display:block;margin:1.1rem auto 0;font-family:var(--font-ui);font-weight:600;font-size:.88rem;
  color:var(--teal);background:transparent;border:1px solid rgba(14,154,167,.4);cursor:pointer;
  padding:.68rem 1.5rem;border-radius:var(--radius-pill);transition:background .25s,color .25s,border-color .25s;}
.btn-show-more:hover{background:var(--teal);color:#fff;border-color:var(--teal);}

/* ---------- LIGHTBOX ---------- */
.lightbox-overlay{position:fixed;inset:0;z-index:9999;background:rgba(6,9,12,.94);
  display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.lightbox-overlay.active{display:flex;}
.lightbox-img{max-width:92vw;max-height:86vh;border-radius:14px;object-fit:contain;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);}
.lightbox-close,.lightbox-nav{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);color:#fff;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:50%;
  transition:background .2s,transform .2s;}
.lightbox-close{top:18px;right:18px;width:44px;height:44px;font-size:1.5rem;line-height:1;}
.lightbox-nav{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:1.7rem;line-height:1;}
.lightbox-prev{left:18px;} .lightbox-next{right:18px;}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(43,212,212,.28);}
.lightbox-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-family:var(--font-ui);font-size:.85rem;color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:.4rem .9rem;border-radius:var(--radius-pill);}
@media(max-width:640px){
  .lightbox-nav{width:40px;height:40px;font-size:1.3rem;}
  .lightbox-prev{left:8px;} .lightbox-next{right:8px;}
}

/* ---------- MAP ---------- */
.prop-map iframe{width:100%;height:320px;border:0;border-radius:.9rem;display:block;}

/* ---------- BOOKING SIDEBAR ---------- */
.prop-aside{display:flex;flex-direction:column;gap:1.1rem;}
@media(min-width:1000px){.prop-aside{position:sticky;top:96px;}}
.book-card{background:var(--ink-deep);border-radius:var(--radius-card);overflow:hidden;
  border:1px solid rgba(43,212,212,.22);padding:1.35rem 1.4rem 1.5rem;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55), 0 0 46px -18px rgba(43,212,212,.35);}
.book-card h3{font-family:var(--font-head);font-weight:600;font-size:1.35rem;color:#fff;}
.book-card p{margin-top:.5rem;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.66);}
.book-price{margin-top:.9rem;font-family:var(--font-ui);font-weight:600;font-size:.82rem;color:var(--teal-glow);}
.btn-book-main,.btn-whatsapp{display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:.85rem;font-family:var(--font-ui);font-weight:600;font-size:.92rem;
  padding:.85rem 1.2rem;border-radius:var(--radius-pill);text-decoration:none;
  transition:transform .25s,box-shadow .25s,background .25s;}
.btn-book-main{background:var(--teal-glow);color:#04222a;box-shadow:0 0 30px -8px rgba(43,212,212,.6);}
.btn-book-main:hover{background:#7ff0ef;transform:translateY(-2px);box-shadow:0 0 44px -6px rgba(43,212,212,.85);}
.btn-whatsapp{background:#25D366;color:#04220f;}
.btn-whatsapp:hover{background:#3ee57c;transform:translateY(-2px);}
.btn-whatsapp svg{width:17px;height:17px;fill:currentColor;}

.calendar-card{background:#fff;border:1px solid rgba(22,24,26,.06);border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);padding:1.2rem 1.25rem 1.35rem;}
.calendar-card h3{font-family:var(--font-head);font-weight:600;font-size:1.2rem;color:var(--ink);margin-bottom:.8rem;}
.lodgify-section{margin-top:1.1rem;}

/* ---------- AVAILABILITY BANDS (Lodgify Book Now Box, top + bottom) ---------- */
/* Two instances per page. Lodgify's renderBookNowBox.js does
   querySelectorAll('#lodgify-book-now-box').forEach(...) — it mounts EVERY
   matching element and reads that element's own data-* attributes, so the
   duplicated id is required for a second widget, not a mistake. */
/* Lodgify renders the box as a fixed ~230px vertical stack, so a full-width
   card leaves a lot of dead white space. Keep the card hugging its content and
   sit the copy BESIDE the widget on desktop (same compaction as homepage
   #homes), stacking to one centred column on narrow screens. */
.prop-avail{padding:1.8rem 0 .2rem;}
.prop-avail--end{padding:.4rem 0 3.2rem;}
.avail-card{max-width:720px;margin:0 auto;background:var(--white);
  border:1px solid rgba(14,154,167,.16);border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);padding:1.15rem 1.3rem 1.25rem;
  display:grid;gap:.85rem;justify-items:center;}
.avail-head{text-align:center;margin:0;}
.avail-head h2{font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.12rem,2vw,1.4rem);color:var(--ink);margin:0 0 .25rem;}
.avail-head p{font-size:.85rem;line-height:1.5;color:var(--ink-60);margin:0;}
.avail-note{margin:0;text-align:center;font-size:.75rem;color:var(--ink-40);}
/* Stacked (narrow + tablet): don't let the box stretch the full card width. */
.avail-card > #lodgify-book-now-box{width:100%;max-width:340px;}

@media(min-width:860px){
  /* 300px keeps the widget's "Select dates to see total price" on one line —
     any narrower and it wraps, which makes the box TALLER, not smaller. */
  .avail-card{grid-template-columns:1fr 300px;column-gap:1.7rem;row-gap:.5rem;
    align-items:center;justify-items:stretch;padding:1.25rem 1.6rem;}
  .avail-head{text-align:left;grid-column:1;grid-row:1;align-self:end;}
  .avail-note{text-align:left;grid-column:1;grid-row:2;align-self:start;}
  /* widget spans both copy rows so it stays vertically centred */
  .avail-card > #lodgify-book-now-box{grid-column:2;grid-row:1/3;}
}

/* Recolour the widget's gold defaults to brand teal.
   These custom properties INHERIT into the widget's own DOM, so they must sit
   on an ANCESTOR of #lodgify-book-now-box. The old inline rule used
   `.calendar-card :root`, which never matches (:root is always <html>) — that
   is why the widget rendered in Lodgify gold instead of teal. */
.avail-card,.calendar-card{
  --ldg-bnb-background:#ffffff;
  --ldg-bnb-border-radius:0.42em;
  --ldg-bnb-box-shadow:none;
  --ldg-bnb-padding:14px;
  --ldg-bnb-input-background:#ffffff;
  --ldg-bnb-button-border-radius:3.58em;
  --ldg-bnb-color-primary:#0e9aa7;
  --ldg-bnb-color-primary-lighter:#d6eff1;
  --ldg-bnb-color-primary-darker:#0b7f8a;
  --ldg-bnb-color-primary-contrast:#ffffff;
  --ldg-component-calendar-cell-selection-bg-color:#0e9aa7;
  --ldg-component-calendar-cell-selection-color:#ffffff;
  --ldg-component-calendar-cell-selected-bg-color:#d6eff1;
  --ldg-component-calendar-cell-selected-color:#333333;
  --ldg-bnb-font-family:'Poppins',sans-serif;
}
#lodgify-book-now-box{width:100%;}