/* Fluid 2→3 room grid, compact cards, edge-to-edge carousel. Pagination unchanged. */

#roomCardsContainer.rooms-view-engine.is-grid,
#roomCardsContainer.rooms-view-grid,
#roomCardsContainer.rooms-grid-container.is-grid,
#roomCardsContainer.rooms-grid-container.rooms-view-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  scroll-snap-type: none !important;
  max-height: none !important;
  padding-bottom: 0 !important;
}

#roomCardsContainer.rooms-view-engine.is-grid .room-card:not(.is-filtered-out),
#roomCardsContainer.rooms-view-grid .room-card:not(.is-filtered-out),
#roomCardsContainer.rooms-grid-container.is-grid .room-card:not(.is-filtered-out) {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  scroll-snap-align: none !important;
}

#roomCardsContainer .room-card.is-filtered-out,
#roomCardsContainer.rooms-view-engine.is-grid .room-card.is-filtered-out,
#roomCardsContainer.rooms-view-grid .room-card.is-filtered-out,
#roomCardsContainer.rooms-grid-container .room-card.is-filtered-out {
  display: none !important;
}

@media (min-width: 768px) {
  #roomCardsContainer.rooms-view-engine.is-grid,
  #roomCardsContainer.rooms-view-grid,
  #roomCardsContainer.rooms-grid-container.is-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
  }
}

#roomCardsContainer.rooms-view-engine.is-grid .room-card-media,
#roomCardsContainer.rooms-view-grid .room-card-media,
#roomCardsContainer.rooms-grid-container.is-grid .room-card-media {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  border-radius: 12px 12px 0 0 !important;
  flex-shrink: 0 !important;
}

#roomCardsContainer.rooms-view-engine.is-grid .room-card-media img,
#roomCardsContainer.rooms-view-grid .room-card-media img,
#roomCardsContainer.rooms-grid-container.is-grid .room-card-media img,
#roomCardsContainer.rooms-view-engine.is-grid .room-card-media-fallback,
#roomCardsContainer.rooms-view-grid .room-card-media-fallback {
  background: #f8fafc !important;
}

.card-carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f8fafc;
  overflow: hidden;
}

.card-carousel-track {
  width: 100%;
  height: 100%;
}

.card-carousel-wrapper.is-multi .card-carousel-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.card-carousel-wrapper.is-multi .card-carousel-track::-webkit-scrollbar {
  display: none;
}

.card-carousel-wrapper.is-single .card-carousel-track {
  display: block;
  overflow: hidden;
}

.card-carousel-slide,
.image-viewport {
  overflow: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px 12px 0 0;
  background-color: #f8fafc;
}

.card-carousel-wrapper.is-multi .card-carousel-slide,
.card-carousel-wrapper.is-multi .image-viewport {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.image-viewport-img,
.card-carousel-slide img {
  width: 100%;
  height: 100%;
  max-width: none !important;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px 12px 0 0;
  background-color: #f8fafc;
}

.image-viewport.is-panning,
.image-viewport.is-panning img {
  cursor: grabbing;
  scroll-behavior: auto;
}

.card-carousel-dots,
.card-carousel-dot,
.card-carousel-wrapper [role="tablist"],
.card-carousel-wrapper .card-carousel-dots,
.card-carousel-wrapper .card-carousel-dot {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

#roomCardsContainer.rooms-view-engine .room-card,
#roomCardsContainer.rooms-view-grid .room-card {
  isolation: isolate;
  min-width: 0;
}

.room-card-media__gradient {
  pointer-events: none;
}

@media (max-width: 399px) {
  #roomCardsContainer.rooms-view-engine.is-grid,
  #roomCardsContainer.rooms-view-grid,
  #roomCardsContainer.rooms-grid-container.is-grid,
  #roomCardsContainer.rooms-grid-container.rooms-view-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    scroll-snap-type: none !important;
    max-height: none !important;
  }
}

@media (max-width: 767px) {
  #roomCardsContainer.rooms-view-engine.is-grid,
  #roomCardsContainer.rooms-view-grid,
  #roomCardsContainer.rooms-grid-container.is-grid,
  #roomCardsContainer.rooms-grid-container.rooms-view-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    scroll-snap-type: none !important;
    max-height: none !important;
    padding-bottom: 0 !important;
  }

  #roomCardsContainer.rooms-view-engine.is-grid .room-card,
  #roomCardsContainer.rooms-view-grid .room-card,
  #roomCardsContainer.rooms-grid-container.is-grid .room-card {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    scroll-snap-align: unset !important;
  }

  #roomCardsContainer.rooms-view-engine.is-grid .room-card,
  #roomCardsContainer.rooms-view-grid .room-card,
  #roomCardsContainer.rooms-grid-container.is-grid .room-card {
    border-radius: 12px !important;
    padding: 0 !important;
  }

  #roomCardsContainer.rooms-view-engine.is-grid .room-card-body,
  #roomCardsContainer.rooms-view-grid .room-card-body {
    padding: 8px 8px 4px !important;
  }

  #roomCardsContainer.rooms-view-engine.is-grid .room-card-price,
  #roomCardsContainer.rooms-view-grid .room-card-price {
    padding: 4px 8px 8px !important;
    gap: 6px !important;
  }

  #roomCardsContainer.rooms-view-engine.is-grid .room-card-body .font-heading,
  #roomCardsContainer.rooms-view-grid .room-card-body .font-heading {
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  #roomCardsContainer.rooms-view-engine.is-grid .room-card-meta,
  #roomCardsContainer.rooms-view-engine.is-grid .room-card-body p.text-\[11px\],
  #roomCardsContainer.rooms-view-grid .room-card-body p.text-\[11px\] {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  #roomCardsContainer.rooms-view-engine.is-grid .room-card-price-value,
  #roomCardsContainer.rooms-view-engine.is-grid .room-card-price .text-primary,
  #roomCardsContainer.rooms-view-grid .room-card-price-value,
  #roomCardsContainer.rooms-view-grid .room-card-price .text-primary {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  #roomCardsContainer.rooms-view-engine.is-grid .room-avail-pill,
  #roomCardsContainer.rooms-view-grid .room-avail-pill,
  #roomCardsContainer.rooms-view-engine.is-grid .room-card-media__count,
  #roomCardsContainer.rooms-view-grid .room-card-media__count,
  #roomCardsContainer.rooms-grid-container.is-grid .room-avail-pill {
    font-size: 9px !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
  }

  #roomCardsContainer.rooms-view-engine.is-grid .room-card-cta,
  #roomCardsContainer.rooms-view-grid .room-card-cta,
  #roomCardsContainer.rooms-grid-container.is-grid .room-card-cta,
  #roomCardsContainer.rooms-view-engine.is-grid .room-card-cta span,
  #roomCardsContainer.rooms-view-grid .room-card-cta span {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 11px !important;
    line-height: 34px !important;
    padding: 0 8px !important;
    margin-top: 4px !important;
  }
}

@media (min-width: 400px) and (max-width: 767px) {
  #roomCardsContainer.rooms-view-engine.is-grid,
  #roomCardsContainer.rooms-view-grid,
  #roomCardsContainer.rooms-grid-container.is-grid,
  #roomCardsContainer.rooms-grid-container.rooms-view-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow-x: hidden !important;
    flex-wrap: unset !important;
    flex-direction: unset !important;
    scroll-snap-type: none !important;
  }
}