/* DESTINATION SLIDER — INFINITE SCROLL OVERRIDES
   rAF-driven smooth right-to-left, 3 cards at FULL size
   Slider panel is WIDER to eliminate dead space */

/* ── HERO GRID: Give slider more room (40/60 split) ── */
.hero-section .hero-container {
  grid-template-columns: 55% 1fr !important;
  gap: 2vw !important;
  padding-left:  max(3vw, 1.5rem) !important;
  padding-right: max(3vw, 1.5rem) !important;
}

/* ── REMOVE BACKGROUND BOX FROM SLIDER ── */
.dest-slider {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Remove CSS transition — rAF drives movement now */
.ds-track {
  transition: none !important;
  flex-shrink: 0 !important;
  /* Allow cards to flow outside horizontally slightly if needed */
}

/* Viewport clips the infinite track horizontally */
.ds-viewport {
  overflow: hidden !important;
  overflow-y: visible !important;
  flex: 1 !important;
  cursor: grab !important;
  padding: 40px 0 !important;
  /* Fade out edges so cards do not cut sharply */
  -webkit-mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent) !important;
  mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent) !important;
}
.ds-viewport:active { cursor: grabbing !important; }

/* Hide dots — not meaningful for infinite scroll */
.ds-dots { display: none !important; }

/* Cards: margin handles the gap between cards */
.ds-card {
  flex-shrink: 0 !important;
  margin-right: 14px !important;
}

/* ── STRICT 1:1 RATIO ENFORCEMENT ── */
.ds-track {
  align-items: center !important; /* Prevent cards from stretching vertically */
}

.ds-card {
  height: auto !important; /* Let content dictate height */
}

.ds-card-img {
  flex: none !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important; /* Use aspect ratio instead of flex or height */
}