@layer components {

.kn-case-carousel { position: relative; }
.kn-case-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(360px, 84vw); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; }
.kn-case-carousel__track::-webkit-scrollbar { display: none; }
.kn-case-carousel__track a { cursor: inherit; -webkit-user-drag: none; }
.kn-case-carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.kn-case-carousel__track > * { scroll-snap-align: start; }
.kn-case-carousel__nav { display: flex; gap: 8px; margin-top: 12px; }
.kn-case-carousel__btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 1rem; font-weight: 700; line-height: 1; color: var(--text-primary); background: transparent; border: 2px solid var(--border-strong); border-radius: 0; cursor: pointer; }
.kn-case-carousel__btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.kn-case-carousel__btn:disabled { opacity: 0.4; cursor: default; border-color: var(--border); box-shadow: none; }
.kn-case-carousel.is-static .kn-case-carousel__nav { display: none; }

@media (max-width: 900px) {
  .kn-case-carousel__track { grid-auto-columns: min(300px, 86vw); }
}

@media (prefers-reduced-motion: reduce) {
  .kn-case-carousel__track { scroll-behavior: auto; }
}

}