/**
 * Carousel Generic Styles
 * Styles de base pour le système de carousel générique
* Ce fichier contient les styles de base pour le carousel, indépendamment du thème ou de la configuration.
 * NE PAS RAJOUTER DE STYLES SPÉCIFIQUES À UN THÈME OU UNE CONFIGURATION PARTICULIÈRE ICI type .slider-testimonials, .slider-logos, etc.
 */

/* Container principal */
.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Track (conteneur des items) */
.slider-track {
  display: flex;
  transition: left 0.3s ease;
  position: relative;
  left: 0;
}

/* Item individuel */
.slider-item {
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Transitions douces pour les changements de slides */
.slider-item {
  transition: opacity 0.25s ease-in-out;
}

.slider-item.fade-out {
  opacity: 0;
}

/* Desktop mode - items cachés par défaut */
@media (min-width: 1025px) {
  .slider-track {
    display: block;
    width: 100% !important;
  }
  
  .slider-item {
    display: none;
    width: auto;
    opacity: 0;
    min-height: 100px;
  }
  
  .slider-item.active {
    display: block;
    opacity: 1;
  }
  
  /* Grid layout pour desktop */
  .slider-container[data-items-desktop="3"] .slider-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .slider-container[data-items-desktop="3"] .slider-item.active {
    display: block;
  }
  
  .slider-container[data-items-desktop="4"] .slider-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  .slider-container[data-items-desktop="2"] .slider-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Tablet mode */
@media (min-width: 641px) and (max-width: 1024px) {
  .slider-item {
    width: calc(50% - 10px);
    margin-right: 20px;
  }
}

/* Mobile mode */
@media (max-width: 640px) {
  .slider-item {
    width: 100%;
    margin-right: 20px;
  }
}

/* Navigation bullets */
.slider-bullets {
  display: flex;
  justify-content: center;
  margin: .8rem 0 0 0;
}

.slider-bullets ul {
  display: flex;
  gap: .8rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.slider-bullets li {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background-color: var(--color-ghost-dust);
  cursor: pointer;
  transition: all 0.3s ease;
  &.active{
    background-color: var(--color-red);
  }
}