/* ===== Base (burgundy + polished gold theme) ===== */
:root{
  --bg:#1a0f11;
  --surface:#2a1417;
  --ink:#f7f7f7;
  --muted:#b9a9a9;

  --gold:#d9b85a;
  --ring:#3a1d20;

  --radius:16px;
  --shadow:0 18px 46px rgba(0,0,0,.58);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(217,184,90,.12), transparent 65%),
    linear-gradient(180deg, #1a0f11 0%, #1f1113 50%, #1a0f11 100%);
  line-height:1.65;
}

/* Utilities */
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.center{text-align:center}
.muted{color:var(--muted)} .small{font-size:.9rem}
.title{font-size:1.8rem;margin:0 0 6px}

/* Nav */
.nav{
  position:sticky; top:0; z-index:30;
  background:rgba(26,15,17,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ring);
}
.nav-inner{display:flex;align-items:center;gap:16px;padding:14px 0}
.brand{font-weight:800;font-size:1.25rem;color:var(--ink);text-decoration:none}
.brand-sub{color:var(--gold);margin-left:.4rem}
.links{display:flex;gap:14px;flex:1}
.links a{color:var(--ink);opacity:.85;text-decoration:none}
.links a:hover{opacity:1;color:var(--gold)}
.btn{background:var(--gold);color:#111;border-radius:999px;padding:10px 14px;font-weight:700;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.08)}
.menu{display:none}
@media (max-width:900px){.links,.call{display:none}.menu{display:block;margin-left:auto}}

/* Drawer */
.drawer{position:fixed;inset:0 0 auto auto;top:58px;width:280px;background:#2a1417;border-left:1px solid var(--ring);transform:translateX(110%);transition:.25s;z-index:40}
.drawer.open{transform:translateX(0)}
.drawer-links{display:flex;flex-direction:column}
.drawer-links a{padding:14px 16px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ring)}

/* Hero */
.hero{position:relative;min-height:54vh;display:grid;place-items:center;border-bottom:1px solid var(--ring)}
.hero-bg{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(26,15,17,.35), rgba(26,15,17,.92));
}
.hero-body{position:relative;text-align:center;padding:44px 0;z-index:1}
.hero h1{font-size:2.5rem;margin:0 0 10px;color:var(--gold)}
.lead{max-width:720px;margin:0 auto;color:var(--muted)}
.cta{margin-top:18px;display:flex;gap:10px;justify-content:center}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--gold);box-shadow:inset 0 0 0 1px rgba(217,184,90,.18)}

/* Sections */
.section{padding:40px 0}
.section-alt{padding:40px 0;background:#211013;border-top:1px solid var(--ring);border-bottom:1px solid var(--ring)}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px}
@media (max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* Card */
.card{
  background:var(--surface);
  border:1px solid var(--ring); border-radius:var(--radius);
  overflow:hidden; transition:.2s; box-shadow:var(--shadow)
}
.card:hover{transform:translateY(-3px);border-color:var(--gold)}

/* Image version (Ruby) */
.thumb-img{
  width:100%;
  height:280px;            /* adjust height to your design */
  object-fit:cover;        /* neat cropping */
  display:block;
  border-bottom:1px solid var(--ring);
}

/* Placeholder version (others still using .thumb) */
.thumb{aspect-ratio:4/5;background:linear-gradient(135deg,#45131c,#2a1417)}

/* Card body */
.card-body{padding:14px}
.row{display:flex;align-items:center;justify-content:space-between}
.price{color:var(--gold)}
.badge{
  display:inline-block;margin-top:10px;font-size:.75rem;font-weight:700;
  padding:6px 12px;border-radius:999px;background:#1f1113;border:1px solid var(--ring)
}
.badge.available{color:#4ade80;border-color:#2b6b4a}
.badge.limited{color:#f59e0b;border-color:#7a4f09}
.badge.booked{color:#ef4444;border-color:#7a1e1e}

/* Rates */
.rate-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
@media (max-width:900px){.rate-cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.rate-cards{grid-template-columns:1fr}}
.rate{
  background:linear-gradient(180deg, rgba(109,29,42,.25), rgba(69,19,28,.12));
  border:1px solid var(--ring); border-radius:var(--radius);
  padding:16px; text-align:center; box-shadow:var(--shadow)
}
.amount{font-weight:800;font-size:1.3rem;color:var(--gold)}

/* Booking form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media (max-width:900px){.form{grid-template-columns:1fr}}
.form input,.form textarea{
  background:#1f1113;border:1px solid var(--ring);
  border-radius:12px;padding:12px 14px;color:var(--ink)
}
.form textarea{grid-column:1 / -1}
.form button{grid-column:1 / -1}

/* Footer */
.footer{border-top:1px solid var(--ring);background:#2a1417;color:var(--muted);padding:22px 0}
.foot{display:flex;flex-direction:column;gap:6px;text-align:center}

/* Clickable card link */
.card-link {
  display:block;
  color:inherit;
  text-decoration:none;
}
.card-link:hover .card { border-color: var(--gold); }

/* Profile page layout */
.profile-hero { padding-top: 28px; }
.profile-header {
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 900px){
  .profile-header { grid-template-columns: 1fr; }
}
.profile-cover{
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  border:1px solid var(--ring);
  box-shadow: var(--shadow);
}
.profile-meta h1{
  margin:0 0 6px;
  font-size: 2rem;
  color: var(--gold);
}
.profile-lead{ margin-top: 8px; }
.profile-cta{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

.pill{
  display:inline-block;
  font-size: .8rem;
  font-weight: 700;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid var(--ring);
  background:#1f1113;
  margin-right:6px;
}
.pill.success { color:#4ade80; border-color:#2b6b4a; }

/* Gallery */
.gallery{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px){
  .gallery{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .gallery{ grid-template-columns: 1fr; }
}
.gal{
  width:100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 12px;
  border:1px solid var(--ring);
  box-shadow: var(--shadow);
}

/* Details grid */
.profile-grid{
  display:grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px){
  .profile-grid{ grid-template-columns: 1fr; }
}
.profile-bio p{ margin-top:0 }
.profile-side .rate{ text-align: left; }

/* Clickable card link */
.card-link {
  display:block;
  color:inherit;
  text-decoration:none;
}
.card-link:hover .card { border-color: var(--gold); }

/* Profile page layout */
.profile-hero { padding-top: 28px; }
.profile-header {
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 900px){
  .profile-header { grid-template-columns: 1fr; }
}
.profile-cover{
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  border:1px solid var(--ring);
  box-shadow: var(--shadow);
}
.profile-meta h1{
  margin:0 0 6px;
  font-size: 2rem;
  color: var(--gold);
}
.profile-lead{ margin-top: 8px; }
.profile-cta{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

.pill{
  display:inline-block;
  font-size: .8rem;
  font-weight: 700;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid var(--ring);
  background:#1f1113;
  margin-right:6px;
}
.pill.success { color:#4ade80; border-color:#2b6b4a; }

/* Gallery */
.gallery{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px){
  .gallery{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .gallery{ grid-template-columns: 1fr; }
}
.gal{
  width:100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 12px;
  border:1px solid var(--ring);
  box-shadow: var(--shadow);
}

/* Details grid */
.profile-grid{
  display:grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px){
  .profile-grid{ grid-template-columns: 1fr; }
}
.profile-bio p{ margin-top:0 }
.profile-side .rate{ text-align: left; }