/* ==========================
   OD1 Carousel (Any Content)
   ========================== */

   /* NEW: frame that centers content between arrows */
  .kc-frame{
    display: flex;
    justify-content: center;
    width: 100%;
  }


   .kc-carousel{
    position: relative;
    --gap: 14px;
  }
  
  /* viewport */
  .kc-viewport{
    overflow: hidden;
    width: 100%;
  }
  
  /* track */
  .kc-track{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .kc-track::-webkit-scrollbar{ display:none; }
  
  /* slide */
  .kc-item{
    flex: 0 0 100%;
    scroll-snap-align: start;
    justify-content: center;
  }
  .kc-item > *{ width: 100%; }
  
  /* width rules */
  .kc-carousel.show-1 .kc-item{ width: calc(100% - var(--gap)); }
  .kc-carousel.show-2 .kc-item{ width: calc(50% - var(--gap)); }
  .kc-carousel.show-3 .kc-item{ width: calc(33.333% - var(--gap)); }
  .kc-carousel.show-4 .kc-item{ width: calc(25% - var(--gap)); }
  
  @media (min-width: 768px){
    .kc-carousel.show-md-2 .kc-item{ width: calc(50% - var(--gap)); }
    .kc-carousel.show-md-3 .kc-item{ width: calc(33.333% - var(--gap)); }
    .kc-carousel.show-md-4 .kc-item{ width: calc(25% - var(--gap)); }
  }
  
  @media (min-width: 1024px){
    .kc-carousel.show-lg-2 .kc-item{ width: calc(50% - var(--gap)); }
    .kc-carousel.show-lg-3 .kc-item{ width: calc(33.333% - var(--gap)); }
    .kc-carousel.show-lg-4 .kc-item{ width: calc(25% - var(--gap)); }
  }
  
  /* arrows */
  .kc-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--on-surface);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
  }
  .kc-btn.prev{ left: 6px; }
  .kc-btn.next{ right: 6px; }

.kc-btn{
  z-index: 5;
  pointer-events: auto;
}

/* Optional: keep arrows inside the padded area */
.kc-btn.prev{ left: 10px; }
.kc-btn.next{ right: 10px; }

/* Better hover/focus so it feels alive */
@media (hover:hover){
  .kc-btn:hover{
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover, var(--border-2));
    background: var(--surface-hover, var(--surface-2));
  }
}

.kc-btn:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-md);
}

/* --- Carousel arrows: visibility + centering --- */
.kc-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;          /* make arrow visible */
  font-weight: 600;
  line-height: 1;
  background: var(--surface);
}

/* fallback if --text is dark-on-dark */
[data-theme="dark"] .kc-btn {
  color: #fff;
}

/* ensure arrow is above slides */
.kc-btn {
  z-index: 10;
}

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