:root{
  --slr-bg:#f6f8fb;
  --slr-card:#fff;
  --slr-text:#0f172a;
  --slr-muted:#64748b;
  --slr-border:#e5e7eb;
  --slr-brand:#0ea5e9;
  --slr-brand-600:#0284c7;
  --slr-booked:#ef4444;
  --slr-pending:#f59e0b;
  --slr-select:#22c55e;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--slr-text); background:var(--slr-bg); line-height:1.45;
}
img{max-width:100%;display:block}

.container{width:min(1100px,92vw);margin-inline:auto}
.section-pad{padding:clamp(18px,3.5vw,36px) 0}
.card{background:#fff;border:1px solid var(--slr-border);border-radius:14px}

/* Hero – show more image, reduce crop */
.hero{
  position:relative; min-height:340px; background:#0b1120; color:#fff; overflow:hidden;
  display:grid; place-items:end start;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  object-position:center 25%; /* shift up to reveal lake/house */
  filter:brightness(.9);
}
.hero-title{
  position:relative; margin:0; padding:18px 22px;
  font-weight:800; font-size:clamp(26px,4vw,42px);
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}

/* Notice */
.notice{padding:16px;border:1px solid #dbeafe;background:#eef6ff;border-radius:12px;color:#0b3868}

/* Headings */
h2{font-size:clamp(22px,3vw,28px);margin:0 0 10px}
h3{font-size:clamp(18px,2.2vw,22px);margin:0 0 8px}

/* Accordion */
.accordion{display:grid;gap:10px}
.acc-item{border:1px solid var(--slr-border);border-radius:12px;overflow:hidden;background:#fff}
.acc-head{
  width:100%;text-align:left;padding:12px 14px;background:#f8fafc;border:0;cursor:pointer;
  display:flex;align-items:center;gap:10px;font-weight:700
}
.acc-body{padding:12px 16px;display:none}
/* Open state supports both legacy `.open` and `.is-open` */
.acc-item.open .acc-body,
.acc-item.is-open .acc-body { display:block }

/* Gallery */
.gallery-grid{
  display:grid;gap:12px;grid-template-columns:repeat(4,1fr)
}
@media (max-width:1100px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gallery-grid{grid-template-columns:1fr}}

.thumb{
  position:relative;border-radius:12px;overflow:hidden;background:#0b1120;
  aspect-ratio:1/1;border:1px solid var(--slr-border);cursor:zoom-in
}
.thumb img{width:100%;height:100%;object-fit:cover}
.cap{
  position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:.9rem;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 65%)
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;place-items:center;z-index:60}
.lightbox.open{display:grid}
.lightbox img{max-width:min(92vw,1200px);max-height:86vh;border-radius:8px}
.lb-ctrl{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;width:44px;height:44px;border-radius:50%
}
.lb-prev{left:22px}.lb-next{right:22px}
.lb-close{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;border:0;cursor:pointer}
.lb-cap{
  position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#fff;
  font-weight:600;padding:6px 10px;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)
}

/* Footer */
.footer{padding:22px 0;color:var(--slr-muted);font-size:.9rem;text-align:center}

/* Lightbox overlay */
#slr-lightbox{ position:fixed; inset:0; display:none; z-index: 1100; }
#slr-lightbox.open{ display:block; }
#slr-lightbox .lb-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
}
#slr-lightbox .lb-dialog{
  position:absolute; inset:0; margin:auto; max-width:min(92vw,1200px); max-height:min(92vh,800px);
  display:grid; grid-template-areas:
    "img img prev next"
    "cap cap cap cap";
  align-items:center; justify-items:center; gap:.75rem; padding:1rem;
}
#slr-lightbox .lb-img{
  grid-area: img; max-width:100%; max-height:80vh; object-fit:contain; border-radius:10px; background:#000;
}
#slr-lightbox .lb-cap{
  grid-area: cap; color:#fff; font-size:.95rem; text-align:center;
}
#slr-lightbox .lb-prev, #slr-lightbox .lb-next, #slr-lightbox .lb-close{
  position:absolute; top:8px; background:rgba(255,255,255,.9); border:0; border-radius:8px; padding:.4rem .6rem; cursor:pointer;
}
#slr-lightbox .lb-close{ right:8px; font-size:1.1rem; }
#slr-lightbox .lb-prev{ left:10px; top:50%; transform:translateY(-50%); font-size:1.4rem; }
#slr-lightbox .lb-next{ right:10px; top:50%; transform:translateY(-50%); font-size:1.4rem; }

/* Lightbox overlay */
#slr-lightbox{ position:fixed; inset:0; display:none; z-index: 1100; }
#slr-lightbox.open{ display:block; }
#slr-lightbox .lb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
#slr-lightbox .lb-dialog{
  position:absolute; inset:0; margin:auto; max-width:min(92vw,1200px); max-height:min(92vh,800px);
  display:grid; grid-template-areas:"img""cap"; justify-items:center; gap:.75rem; padding:1rem;
}
#slr-lightbox .lb-img{ max-width:100%; max-height:80vh; object-fit:contain; border-radius:10px; background:#000; }
#slr-lightbox .lb-cap{ color:#fff; font-size:.95rem; text-align:center; }
#slr-lightbox .lb-prev, #slr-lightbox .lb-next, #slr-lightbox .lb-close{
  position:absolute; background:rgba(255,255,255,.9); border:0; border-radius:8px; padding:.4rem .6rem; cursor:pointer;
}
#slr-lightbox .lb-close{ top:8px; right:8px; font-size:1.1rem; }
#slr-lightbox .lb-prev{ left:10px; top:50%; transform:translateY(-50%); font-size:1.4rem; }
#slr-lightbox .lb-next{ right:10px; top:50%; transform:translateY(-50%); font-size:1.4rem; }

/* --- Map card --- */
.map-card {
  padding: 16px;
}
.map-head {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:10px;
}
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--slr-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background:#f8fafc;
}
.map-embed iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.map-note { color:#64748b; font-size:.925rem; margin:.5rem 0 0; }

/* --- Buttons (outline) --- */
.btn.btn-outline {
  background:#fff; color:#0ea5e9; border:1px solid #0ea5e9;
  padding:.5rem .75rem; border-radius:.5rem; cursor:pointer;
}

/* --- Modal (fully non-interactive when closed) --- */
.modal {
  position: fixed;
  inset: 0;
  display: none;          /* not in layout */
  visibility: hidden;     /* not visible */
  opacity: 0;             /* transparent fallback */
  pointer-events: none;   /* can't eat clicks */
  z-index: 1000;
}
.modal.is-open {
  display: block;         /* in layout only when open */
  visibility: visible;
  opacity: 1;
  pointer-events: auto;   /* clickable only when open */
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.modal__content {
  position: relative;
  margin: 5vh auto;
  max-width: min(1100px, 92vw);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 24px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.modal__mapWrap {
  width: min(1100px, 92vw);
  height: min(70vh, 720px);
}