/*
 * Carousel: a horizontally scrolling row that snaps to each slide.
 * assets/js/carousel.js wires the arrow buttons and fills the dots.
 *
 *   <div class="yb-carousel">
 *     <ul class="yb-carousel__track"><li class="yb-carousel__slide">…</li>…</ul>
 *     <div class="yb-carousel__nav">
 *       <button class="yb-carousel__prev" type="button" aria-label="Eelmine">…</button>
 *       <div class="yb-carousel__dots"></div>
 *       <button class="yb-carousel__next" type="button" aria-label="Järgmine">…</button>
 *     </div>
 *   </div>
 */
.yb-carousel__track {
  display: flex;
  gap: var(--yb-space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.yb-carousel__track::-webkit-scrollbar {
  display: none;
}

.yb-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.yb-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--yb-space-s);
  margin-top: var(--yb-space-m);
}

.yb-carousel__prev,
.yb-carousel__next {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--yb-color-surface);
  color: var(--yb-color-primary);
}

.yb-carousel__prev:hover,
.yb-carousel__next:hover {
  background: var(--yb-color-primary);
  color: var(--yb-color-accent);
}

.yb-carousel__prev .yb-svg,
.yb-carousel__next .yb-svg {
  width: 18px;
  height: 18px;
}

.yb-carousel__dots {
  display: flex;
  gap: 6px;
}

.yb-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--yb-color-border);
}

.yb-carousel__dot[aria-current="true"] {
  background: var(--yb-color-primary);
}