/* =========================================================
   RH CAROUSEL — swipeable room photo gallery
   Built on native scroll-snap: works without JS too (JS just
   adds the dots/arrows sync), so it degrades gracefully.
   ========================================================= */
.rh-carousel{
  position: relative;
  border-radius: var(--rh-radius, 14px);
  overflow: hidden;
  background: var(--rh-sand, #D4B396);
  margin: 24px 0;
}
.rh-carousel--single img{ width:100%; height:100%; display:block; aspect-ratio: 4/3; object-fit: cover; }

.rh-carousel__track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rh-carousel__track::-webkit-scrollbar{ display:none; }

.rh-carousel__slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 16/10;
}
.rh-carousel__slide img{
  width:100%; height:100%; object-fit: cover; display:block;
}

.rh-carousel__arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,0.92);
  border: none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size: 22px; line-height:1;
  color: var(--rh-brown-deep, #2C1603);
  box-shadow: 0 4px 14px rgba(44,22,3,0.18);
  transition: background .2s ease;
}
.rh-carousel__arrow:hover{ background: #fff; }
.rh-carousel__arrow--prev{ left:14px; }
.rh-carousel__arrow--next{ right:14px; }

.rh-carousel__dots{
  position:absolute; bottom:14px; left:0; right:0;
  display:flex; justify-content:center; gap:8px;
}
.rh-carousel__dot{
  width:9px; height:9px; border-radius:50%;
  border: none; padding:0; cursor:pointer;
  background: rgba(255,255,255,0.55);
  transition: background .2s ease, transform .2s ease;
}
.rh-carousel__dot.is-active{
  background: #fff;
  transform: scale(1.25);
}

@media (max-width: 640px){
  .rh-carousel__arrow{ width:36px; height:36px; font-size:18px; }
}