/* ==========================
   OD1 Carousel
   Centered Peek Version
   ========================== */

.kc-carousel {
  --per: 1;
  --gap: 14px;
  --peek: 40px;
  --kc-offset: 0px;
  --kc-drag: 0px;

  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0;
}

.kc-frame {
  width: 100%;
  overflow: hidden;
}

.kc-viewport {
  width: 100%;
  overflow: hidden;
  margin-inline: auto;
}

.kc-track {
  display: flex;
  gap: var(--gap);
  transition: transform 0.4s ease;
  transform: translate3d(calc(var(--kc-offset) + var(--kc-drag)), 0, 0);
  touch-action: pan-y;
  cursor: grab;
  will-change: transform;
  backface-visibility: hidden;
}

.kc-track:active {
  cursor: grabbing;
}

.kc-item {
  flex: 0 0 calc(100% / var(--per));
  box-sizing: border-box;
  padding: 0.5rem;
  backface-visibility: hidden;
}

.kc-item > * {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

/* Items per view */
.kc-carousel.show-1 { --per: 1; }
.kc-carousel.show-2 { --per: 2; }
.kc-carousel.show-3 { --per: 3; }
.kc-carousel.show-4 { --per: 4; }

@media (min-width: 768px) {
  .kc-carousel.show-md-2 { --per: 2; }
  .kc-carousel.show-md-3 { --per: 3; }
  .kc-carousel.show-md-4 { --per: 4; }
}

@media (min-width: 1024px) {
  .kc-carousel.show-lg-2 { --per: 2; }
  .kc-carousel.show-lg-3 { --per: 3; }
  .kc-carousel.show-lg-4 { --per: 4; }
}

/* Peek mode */
.kc-carousel.peek {
  overflow: hidden;
}

.kc-carousel.peek .kc-frame {
  overflow: hidden;
}

.kc-carousel.peek .kc-viewport {
  width: calc(100% - (var(--peek) * 2));
  overflow: visible;
}

.kc-carousel.peek .kc-item {
  flex: 0 0 calc(
    (100% - (var(--gap) * (var(--per) - 1))) / var(--per)
  );
}

/* Arrows */
.kc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--on-surface);
  cursor: pointer;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  font-weight: 600;
  padding: 0;
}

.kc-btn.prev { left: 10px; }
.kc-btn.next { right: 10px; }

@media (hover:hover) {
  .kc-btn:hover {
    background: var(--surface-2);
    transform: translateY(-50%) scale(1.05);
  }
}

[data-theme="dark"] .kc-btn {
  color: #fff;
}