:root{
  --brass:#B08D57;
  --brass-dark:#9c7a45;
  --ivory:#f6f1e7;
  --charcoal:#2a2a24;
  --ink-soft:#6b5842;
  --moss:#3a4a3ee4;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter', sans-serif;
  background:var(--ivory);
  color:var(--charcoal);
}

/* ---------- hero ---------- */
.rooms-hero{
  position:relative;
  text-align:center;
  padding:64px 24px;
  height:150%;
  overflow:hidden;
}
.rooms-hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.5);
  z-index:0;
}
.rooms-hero h1,
.rooms-hero p{
  position:relative;
  z-index:1;
  color:var(--ivory);
}
.rooms-hero h1{
  font-size:2.2rem;
  margin-bottom:8px;
}
.rooms-hero p{
  font-size:1.05rem;
  opacity:0.9;
}

/* ---------- grid ---------- */
.rooms-grid{
  display:grid;
  background:var(--moss);
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  padding:48px 32px 64px;
  width:100%;
  margin:0 auto;
}

/* ---------- real room card ---------- */
.room-card{
  background:white;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 6px 18px -8px rgba(0,0,0,0.18);
  display:flex;
  flex-direction:column;
}

.room-image{
  position:relative;
  width:100%;
  min-height:220px;
  overflow:hidden;
}
.room-image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.rating-chip{
  position:absolute;
  left:16px; bottom:16px;
  background:var(--brass);
  color:var(--ivory);
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  border-radius:999px;
  z-index:2;
}
.rating-cover{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  background:white;
}
.rating-score{color:black; font-size:0.95rem; font-weight:600;}
.rating-max{color:black; font-size:0.65rem;}

.room-info{
  padding:18px 20px 22px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.room-info h3{
  margin:0 0 6px;
  font-size:1.15rem;
  color:var(--charcoal);
}
.room-info p{
  margin:0 0 14px;
  font-size:0.92rem;
  color:var(--ink-soft);
  flex:1;
}
.room-meta{
  display:flex;
  justify-content:space-between;
  font-size:0.88rem;
  color:var(--brass);
  font-weight:600;
  margin-bottom:14px;
}

.card-cta{
  display:block;
  text-align:center;
  text-decoration:none;
  background-color:var(--brass);
  color:var(--ivory);
  padding:10px 0;
  border-radius:4px;
  font-size:0.95rem;
  cursor:pointer;
  transition:background-color 0.2s ease;
}
.card-cta:hover,
.card-cta:focus-visible{
  background-color:var(--brass-dark);
}

/* ---------- skeleton loading state ---------- */
.room-card.skeleton{
  height:340px;
  background:linear-gradient(90deg, #e8e3d8 25%, #f2efe6 50%, #e8e3d8 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  box-shadow:none;
}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

.rooms-error, .rooms-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:40px;
  color:var(--ink-soft);
}
.rooms-error button{
  margin-top:12px;
  background:var(--brass);
  color:var(--ivory);
  border:none;
  padding:10px 20px;
  border-radius:4px;
  cursor:pointer;
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .rooms-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:600px){
  .rooms-grid{grid-template-columns:1fr;}
  .rooms-hero{padding:48px 20px;}
  .rooms-hero h1{font-size:1.7rem;}
}
.rh-focusable:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}