/* ============================================================
 * carousel.css — Carrusel horizontal de habitaciones
 * Se activa cuando property.units.length > 3
 * ============================================================ */

/* ── Wrapper del carrusel ── */
.unit-carousel {
  position: relative;
  padding-inline: 2.5rem;   /* espacio para los botones laterales */
}

/* ── Track deslizable ── */
.unit-carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;        /* Firefox: sin scrollbar visible */
  -ms-overflow-style: none;     /* IE/Edge: sin scrollbar */
  padding: 0.5rem 0.125rem 1.25rem;
  cursor: grab;
}
.unit-carousel__track::-webkit-scrollbar {
  display: none;                /* Chrome/Safari: sin scrollbar */
}
.unit-carousel__track.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;       /* desactivar snap mientras se arrastra */
  scroll-behavior: auto;
}

/* ── Cada card dentro del track ── */
.unit-carousel__track .unit-card,
.unit-carousel__track .feat-cards__card {
  flex: 0 0 calc((100% - 2.5rem) / 3);   /* 3 por vista */
  scroll-snap-align: start;
  min-width: 240px;
}

/* ── Botones prev / next ── */
.unit-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 0.75rem));   /* ajuste por padding del track */
  z-index: 10;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(26, 26, 46, 0.14);
  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a2e;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  padding: 0;
}
.unit-carousel__btn--prev { left: 0; }
.unit-carousel__btn--next { right: 0; }

.unit-carousel__btn svg {
  display: block;
  flex-shrink: 0;
}
.unit-carousel__btn:hover:not(:disabled) {
  background: #1832b2;
  color: #ffffff;
  border-color: #1832b2;
}
.unit-carousel__btn:disabled {
  opacity: 0.22;
  cursor: default;
  pointer-events: none;
}

/* ── Indicador de posición (dots) ── */
.unit-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
}
.unit-carousel__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(26, 26, 46, 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.unit-carousel__dot.is-active {
  background: #1832b2;
  transform: scale(1.35);
}

/* ── Responsive ── */
@media (max-width: 64rem) {
  .unit-carousel__track .unit-card,
  .unit-carousel__track .feat-cards__card {
    flex: 0 0 calc((100% - 1.25rem) / 2);   /* 2 por vista */
  }
}
@media (max-width: 36rem) {
  .unit-carousel {
    padding-inline: 0;    /* en móvil los botones se ocultan; swipe es suficiente */
  }
  .unit-carousel__track .unit-card,
  .unit-carousel__track .feat-cards__card {
    flex: 0 0 84%;         /* ~1.2 por vista — se asoma el siguiente */
  }
  .unit-carousel__btn {
    display: none;
  }
}