/* ========================================
   CAROUSEL.CSS - Horizontal Scrolling Image Carousel
   ======================================== */

.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-dark);
  cursor: grab;
  /* Fading edges effect - dramatic focus on center */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 5%,
    rgba(0, 0, 0, 0.15) 15%,
    rgba(0, 0, 0, 0.5) 30%,
    rgba(0, 0, 0, 1) 45%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.15) 85%,
    transparent 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 5%,
    rgba(0, 0, 0, 0.15) 15%,
    rgba(0, 0, 0, 0.5) 30%,
    rgba(0, 0, 0, 1) 45%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.15) 85%,
    transparent 95%,
    transparent 100%
  );
}

.carousel:active {
  cursor: grabbing;
}

/* ===== CAROUSEL TRACK ===== */
.carousel-track {
  display: flex;
  gap: var(--spacing-md);
  will-change: transform;
  padding: var(--spacing-md) calc(50% - 200px);
}

/* ===== CAROUSEL SLIDES ===== */
.carousel-slide {
  flex: 0 0 400px;
  min-width: 400px;
  height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  user-select: none;
  background-color: var(--color-bg-secondary);
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.carousel-slide:hover .carousel-img {
  transform: scale(1.02);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
  .carousel-track {
    padding: var(--spacing-md) calc(50% - 175px);
  }

  .carousel-slide {
    flex: 0 0 350px;
    min-width: 350px;
    height: 262px;
  }
}

@media (max-width: 767px) {
  .carousel-track {
    padding: var(--spacing-sm) calc(50% - 125px);
    gap: var(--spacing-sm);
  }

  .carousel-slide {
    flex: 0 0 250px;
    min-width: 250px;
    height: 187px;
  }
}

@media (max-width: 480px) {
  .carousel-track {
    padding: var(--spacing-sm) calc(50% - 100px);
  }

  .carousel-slide {
    flex: 0 0 200px;
    min-width: 200px;
    height: 150px;
  }
}