/* rooms.css — Rooms page (Luxury / Clean, mobile-first)
   - Subtle motion: hover image zoom, micro-lift
   - Pricing toggle: segmented control with clear active state
*/

.page-hero--rooms .page-hero__media{
  /* Replace with real photo:
     /assets/rooms/standard.jpg
  */
  background-image:url("../assets/rooms/standard1.jpg");
}

/* Pricing toggle */
.pricing-toggle{
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.pricing-toggle__label{
  font-size: .92rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.56);
}
.pricing-toggle__hint{
  font-size: .9rem;
  color: rgba(0,0,0,.56);
}

.segmented{
  display:inline-flex;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.70);
  gap: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.segmented__btn{
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 40px;
  cursor:pointer;
  font-weight: 500;
  color: rgba(0,0,0,.72);
  transition: background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.segmented__btn:hover{ transform: translateY(-1px); }
.segmented__btn.is-active{
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb), .14), rgba(var(--primary-rgb), .06));
  color: rgba(0,0,0,.92);
  border: 1px solid rgba(var(--primary-rgb), .30);
}

/* Rooms grid */
.rooms-grid{
  display:grid;
  gap: var(--space-5);
}

/* Room card */
.room-card{
  overflow:hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.room-card:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--primary-rgb), .22);
  box-shadow: var(--shadow);
}
.room-card__media{
  height: 240px;
  background-size: cover;
  background-position: center;
  filter: saturate(1.03) contrast(1.01);
  transform: scale(1.02);
  transition: transform .7s var(--ease), filter .7s var(--ease);
}
.room-card:hover .room-card__media{
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.02);
}
.room-card__body{
  padding: var(--space-5);
}
.room-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.70);
  font-size: .86rem;
  color: rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.badge--soft{
  background: rgba(255,255,255,.55);
  color: rgba(0,0,0,.60);
}

.room-card__specs{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin: 10px 0 14px;
}
.spec{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  font-size: .88rem;
  color: rgba(0,0,0,.66);
}

.room-card__price{
  display:flex;
  align-items:baseline;
  gap: 10px;
  margin: 10px 0 14px;
}
.price__value{
  font-size: clamp(1.65rem, 2.4vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: rgba(0,0,0,.96);
}
.price__currency{
  font-size: .92rem;
  color: rgba(0,0,0,.56);
}

/* Checklist */
.checklist{
  list-style:none;
  padding:0;
  margin: 0 0 16px;
  display:grid;
  gap: 8px;
}
.checklist li{
  position:relative;
  padding-left: 20px;
  font-size: .95rem;
  color: rgba(0,0,0,.70);
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0; top:.65em;
  width:10px; height:10px;
  border-radius: 999px;
  border:1px solid rgba(var(--primary-rgb), .40);
  background: rgba(var(--primary-rgb), .10);
  transform: translateY(-50%);
}

/* Actions: full width on mobile */
.room-card__actions{
  display:grid;
  gap: 10px;
}
.room-card__actions .btn{ width: 100%; }

/* On-request card */
.room-card--request .room-card__price{ margin-top: 6px; }

/* Extra bed note */
.info-note{
  margin-top: var(--space-6);
  padding: var(--space-5);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.info-note__title{
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.9rem;
  color: rgba(0,0,0,.72);
}
.info-note__text{
  color: rgba(0,0,0,.62);
  font-size: 1rem;
}

@media (max-width: 640px){
  .pricing-toggle{ padding:12px; align-items:flex-start; }
  .segmented{ width:100%; justify-content:space-between; }
  .segmented__btn{ flex:1; text-align:center; padding:10px 10px; min-height:44px; }

  .rooms-grid{ gap: var(--space-4); }
  .room-card__media{ height: 200px; }
  .room-card__body{ padding: var(--space-4); }
  .room-card__top{ flex-direction:column; align-items:flex-start; }
  .badge{ margin-top:8px; }
  .room-card__specs{ gap:6px; }
  .spec{ font-size:.85rem; }
  .checklist{ gap:6px; }
  .checklist li{ font-size:.92rem; }

  .info-note{ padding: var(--space-4); flex-direction:column; align-items:flex-start; }
  .info-note .btn{ width:100%; }
}

/* Responsive */
@media (min-width: 768px){
  .rooms-grid{ grid-template-columns: repeat(2, 1fr); }
  .room-card__media{ height: 240px; }
  .room-card__actions{ grid-template-columns: 1fr 1fr; }
  .room-card__actions .btn{ width:auto; }
}
@media (min-width: 1024px){
  .rooms-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .room-card, .room-card__media, .segmented__btn{ transition:none; }
}