/* Nur CSS, das nicht durch Tailwind-Klassen abgedeckt wird */

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.wgtl-slider__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-padding-inline: clamp(2.75rem, 8vw, 5.5rem);
  padding: 8px clamp(2.75rem, 8vw, 5.5rem) 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

@media (max-width: 639px) {
  .wgtl-slider__track {
    scroll-padding-inline: 20px;
    padding-inline: 20px;
    gap: 16px;
  }
}

.wgtl-slider__item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  position: relative;
  width: 85%;
  transition: opacity 0.3s ease;
}

@media (min-width: 640px) {
  .wgtl-slider__item {
    width: 60%;
  }
}

@media (min-width: 1024px) {
  .wgtl-slider__item {
    width: 40%;
  }
}

@media (min-width: 1280px) {
  .wgtl-slider__item {
    width: 30%;
  }
}

/* Bilder-Slider: Erstes Bild startet zentriert im Fokus. Das seitliche
   Padding entspricht (100% - Item-Breite) / 2 je Breakpoint, dadurch kann
   auch das erste/letzte Bild mittig stehen. Gilt nicht für Testimonials. */
.wgtl-slider:not([data-variant="cards"]) .wgtl-slider__track {
  padding-inline: 7.5%;
  scroll-padding-inline: 7.5%;
}

@media (min-width: 640px) {
  .wgtl-slider:not([data-variant="cards"]) .wgtl-slider__track {
    padding-inline: 20%;
    scroll-padding-inline: 20%;
  }
}

@media (min-width: 1024px) {
  .wgtl-slider:not([data-variant="cards"]) .wgtl-slider__track {
    padding-inline: 30%;
    scroll-padding-inline: 30%;
  }
}

@media (min-width: 1280px) {
  .wgtl-slider:not([data-variant="cards"]) .wgtl-slider__track {
    padding-inline: 35%;
    scroll-padding-inline: 35%;
  }
}

/* Item-Breite = Innenbereich des Tracks (100% minus Padding). Die
   Prozent-Paddings oben bestimmen damit allein die sichtbare Bildbreite. */
.wgtl-slider:not([data-variant="cards"]) .wgtl-slider__item {
  width: 100%;
}

/* Karten-Variante (Testimonials): Karten snappen am linken Rand statt
   mittig, Breiten gehen exakt auf (n Karten + Lücken = Sichtbereich),
   sonst "wackelt" der Snap nach jedem Scrollen nach. */
.wgtl-slider[data-variant="cards"] .wgtl-slider__track {
  padding-inline: 24px;
  scroll-padding-inline: 24px;
}

@media (max-width: 639px) {
  .wgtl-slider[data-variant="cards"] .wgtl-slider__track {
    padding-inline: 20px;
    scroll-padding-inline: 20px;
  }
}

.wgtl-slider__item--cards {
  scroll-snap-align: start;
  width: 85%;
}

@media (min-width: 640px) {
  .wgtl-slider__item--cards {
    width: calc((100% - 24px) / 2);
  }
}

/* Desktop: 3 volle Karten + ~30% der vierten als Anriss (signalisiert,
   dass weitergescrollt werden kann). Snap bleibt stabil auf Kartenkante. */
@media (min-width: 1024px) {
  .wgtl-slider__item--cards {
    width: calc((100% - 72px) / 3.3);
  }
}

/* Ruhige, einheitliche Darstellung: aktives Bild voll, Nachbarn leicht
   abgeschwächt. Gilt nicht für die Karten-Variante (Testimonials). */
.wgtl-slider:not([data-variant="cards"]) .wgtl-slider__item {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* Während des unsichtbaren Loop-Rücksprungs: keine Übergänge (Flacker-Schutz) */
.wgtl-slider[data-slider-normalizing] .wgtl-slider__item {
  transition: none;
}

.wgtl-slider:not([data-variant="cards"]) [data-slider-item][data-state="active"] {
  opacity: 1;
  transform: scale(1);
}

.wgtl-slider:not([data-variant="cards"]) [data-slider-item][data-state="near"] {
  opacity: 0.65;
  transform: scale(0.94);
}

.wgtl-slider:not([data-variant="cards"]) [data-slider-item][data-state="far"] {
  opacity: 0.45;
  transform: scale(0.94);
}

.wgtl-slider [data-slider-prev][disabled],
.wgtl-slider [data-slider-next][disabled] {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
}

.wgtl-slider__nav {
  touch-action: manipulation;
}

@media (max-width: 639px) {
  .wgtl-slider__nav--prev {
    left: 6px;
  }

  .wgtl-slider__nav--next {
    right: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wgtl-slider__track {
    scroll-behavior: auto;
  }

  .wgtl-slider__item {
    transition: none;
  }
}