/* Theme variables */
:root{
  --bg: #0f1220;
  --panel: #151933;
  --text: #e9ecf1;
  --muted: #b4b9c7;
  --brand: #f6ad55;    /* warm accent */
  --accent: #fbd38d;   /* warm accent 2 */
  --radius: 14px;
  --maxw: 1120px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #1b2146, transparent 60%), var(--bg);
  line-height:1.5;
}
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(10,12,24,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding: .6rem 1rem;
}
.brand{display:flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--text); font-weight:700}
.nav{display:flex; gap:.9rem; align-items:center}
.nav a{color:var(--text); text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:var(--text); text-decoration:none; cursor:pointer
}
.btn-primary{background: linear-gradient(90deg,var(--brand),var(--accent)); border:0; color:#0b1020; font-weight:700}
.btn-plain{background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--text)}

.hero{display:grid; grid-template-columns: 1.2fr .9fr; gap:2rem; align-items:center; max-width:var(--maxw); margin: 2rem auto; padding: 0 1rem}
.hero-media img{width:100%; height:520px; object-fit:cover; border-radius: var(--radius); box-shadow: var(--shadow)}
.hero-text h1{margin:.2rem 0 0; font-size: clamp(1.8rem, 3.5vw, 3rem)}
.hero-text p{color:var(--muted); margin:.5rem 0 1rem}

.container{max-width:var(--maxw); margin: 3rem auto; padding: 0 1rem}
h2{font-size: clamp(1.4rem, 2.5vw, 2rem); margin:.2rem 0 1rem}
.muted{color:var(--muted)}
.features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* exactly 5 per row */
  gap: 0.75rem; /* space between items */
  margin: 0;
  padding: 0;
}

.features li {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 0.6rem; /* smaller padding so text/icons fit */
  font-size: 0.9rem; /* slightly smaller text */
  text-align: center; /* center everything inside */
}

.features .icon {
  font-size: 1.5rem; /* slightly smaller icon */
  display: block;
  margin-bottom: 0.3rem;
}

.features h3 {
  font-size: 1rem;
  margin: 0.3rem 0 0.2rem;
}

.features p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* Mobile & tablet: switch to 2 per row */
@media (max-width: 900px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Very small screens: 1 per row */
@media (max-width: 500px) {
  .features {
    grid-template-columns: 1fr;
  }
}
.grid{display:grid; grid-template-columns: repeat(3,1fr); gap:.8rem}
.gallery__item{display:block; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.gallery__item img{width:100%; height:240px; object-fit:cover; display:block}
dialog#lightbox{
  border:0; border-radius: 16px; background: #0b0f1f; padding: .5rem; max-width:min(96vw,1200px); box-shadow: var(--shadow)
}
#lightbox img{width:100%; height:auto; border-radius: 12px; display:block}
#lightbox .caption{color:var(--muted); margin:.6rem}
#lightbox-close{position:absolute; top:.6rem; right:.6rem}

.amenities{display:grid; grid-template-columns: repeat(2,1fr); gap:1rem}
.amenities ul{margin:0; padding:1rem; list-style:"– "; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius)}

.calendar-controls{display:flex; align-items:center; gap:1rem; justify-content:center}
.cal-title{min-width:14ch; text-align:center}
.calendar{display:grid; grid-template-columns: repeat(7, 1fr); gap:.4rem; margin-top: .6rem}
.calendar .cell{aspect-ratio: 1/1; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.calendar .dow{font-weight:600; background:transparent; border:0; opacity:.8}
.calendar .muted-day{opacity:.35}
.calendar .booked{background:linear-gradient(180deg, rgba(255, 0, 0, .2), rgba(255, 0, 0, .08)); border-color: rgba(255, 0, 0, .25)}

.rates{width:100%; border-collapse: collapse; overflow:hidden; border-radius: 12px; border:1px solid rgba(255,255,255,.08)}
.rates th,.rates td{padding:.7rem .8rem; text-align:left}
.rates thead{background: rgba(255,255,255,.06)}
.rates tbody tr:nth-child(odd){background: rgba(255,255,255,.03)}

.reviews{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem}
.reviews blockquote{margin:0; padding:1rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius)}

.map-embed iframe{width:100%; height:380px; border:0; border-radius: 12px}

.booking-form .form-grid{display:grid; grid-template-columns: repeat(2,1fr); gap:.8rem}
label{display:grid; gap:.3rem; font-weight:600}
input, textarea, select{
  width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:var(--text)
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--brand)}

.site-footer{padding:2rem 1rem; text-align:center; color:var(--muted)}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr; gap:1rem}
  .features{grid-template-columns: repeat(2,1fr)}
  .grid{grid-template-columns: repeat(2,1fr)}
  .reviews{grid-template-columns: 1fr}
}
@media (max-width: 560px){
  .amenities{grid-template-columns: 1fr}
  .booking-form .form-grid{grid-template-columns: 1fr}
}
.weather{display:grid; grid-template-columns: 1fr 2fr; gap:1rem; align-items:center}
.current{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:1rem}
.current-main{display:flex; gap:.8rem; align-items:baseline}
#wx-temp{font-size:2.4rem; font-weight:800}
.current-sub{color:var(--muted); margin-top:.3rem; display:flex; gap:1rem}
.forecast{display:grid; grid-template-columns: repeat(7,1fr); gap:.5rem}
.forecast .day{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:.5rem; text-align:center}
.forecast .hi{font-weight:700}
@media (max-width: 720px){ .weather{grid-template-columns:1fr} .forecast{grid-template-columns: repeat(4,1fr)} }