/* =====================================================
   NDC Exclusive Partners Marquee Slider
   - Transparent background
   - Fade edges
   - 3 cards desktop
   - Prevent native drag/select behavior
===================================================== */

.ndc-featured-slider{
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  border-radius: 22px;
  background: transparent;
  cursor: grab;

  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.ndc-featured-slider.ndc-dragging{
  cursor: grabbing;
}

/* Fade edges */
.ndc-featured-slider::before,
.ndc-featured-slider::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 3;
  pointer-events: none;
}

.ndc-featured-slider::before{
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 100%);
}

.ndc-featured-slider::after{
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 100%);
}

/* Track */
.ndc-featured-track{
  display: flex;
  gap: 18px;
  padding: 14px 16px;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Slide card */
.ndc-featured-slide{
  flex: 0 0 auto;
  width: calc((100% - 36px) / 3);
  aspect-ratio: 505 / 315;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;

  outline: 2px solid rgba(255,255,255,0);
  transition: transform 0.18s ease, outline-color 0.18s ease;
}

.ndc-featured-slide:hover{
  transform: translateY(-2px);
  outline-color: rgba(255,255,255,0.35);
}

/* Images: don’t allow browser drag ghost */
.ndc-featured-slide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;

  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Tablet */
@media (max-width: 1024px){
  .ndc-featured-slide{ width: calc((100% - 18px) / 2); }
}

/* Mobile */
@media (max-width: 640px){
  .ndc-featured-slide{ width: 86vw; }
  .ndc-featured-slider::before,
  .ndc-featured-slider::after{ width: 44px; }
}