/*
 * Cari slider — scroll-snap based, CSS-driven.
 *
 * Set slides-per-view per breakpoint with --slides-tablet / --slides-desktop.
 * Override button colors with --cari-slider-btn-ink / --cari-slider-btn-ink-hover.
 * Override gap with --cari-slider-gap.
 */

.cari-slider {
  --slides: 1;
  --cari-slider-gap: var(--wp--preset--spacing--30, 1.5rem);
  --cari-slider-btn-ink: currentColor;
  --cari-slider-btn-ink-hover: var(--wp--preset--color--base, #fff);
  position: relative;
}

.cari-slider__track {
  display: flex;
  gap: var(--cari-slider-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cari-slider__track::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cari-slider__track {
    scroll-behavior: smooth;
  }
}

.cari-slider__track > * {
  flex: 0 0 calc(
    (100% - (var(--slides) - 1) * var(--cari-slider-gap)) / var(--slides)
  );
  scroll-snap-align: start;
  min-width: 0;
}

.cari-slider__track > * img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 600px) {
  .cari-slider {
    --slides: var(--slides-tablet, 2);
  }
}

@media screen and (min-width: 900px) {
  .cari-slider {
    --slides: var(--slides-desktop, 3);
  }
}

.cari-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.cari-slider__btn {
  appearance: none;
  background: transparent;
  color: var(--cari-slider-btn-ink);
  border: 1px solid var(--cari-slider-btn-ink);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s, color 0.2s;
}

.cari-slider__btn:hover {
  background-color: var(--cari-slider-btn-ink);
}

.cari-slider__btn:hover svg {
  stroke: var(--cari-slider-btn-ink-hover);
}

.cari-slider__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cari-slider__btn svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cari-slider__dots {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cari-slider__dot {
  appearance: none;
  background: transparent;
  border: 1px solid currentColor;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cari-slider__dot[aria-current="true"] {
  background-color: currentColor;
}

.cari-slider__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}