/* ================= Carousel Component =================
   Class prefix: carousel-
   Features:
   - Horizontal scroll with CSS scroll snapping
   - Prev/Next navigation (divs as buttons for requirement)
   - Dots indicator (clickable & keyboard accessible)
   - Supports variable image widths & multiple visible items
   - Captions optional & overlaid
   - Adjustable size via CSS variables: --carousel-width / --carousel-height / --carousel-bg
*/

.carousel { 
  --carousel-width: 100%;
  --carousel-height: 340px; /* user may override inline */
  --carousel-bg: rgba(0,0,0,.55); 
  --carousel-radius: 10px;
  --carousel-gap: 12px;
  --carousel-dot-size: 12px;
  --carousel-transition: 0.5s cubic-bezier(.55,.06,.27,.99);
  position: relative; 
  width: var(--carousel-width); 
  margin: 32px auto; 
  font-family: inherit; 
  user-select: none; 
}

.carousel-viewport { 
  overflow-x: auto; 
  overflow-y: hidden; 
  /* scroll-snap disabled for JS centering */
  display: flex; 
  gap: var(--carousel-gap); 
  background: var(--carousel-bg); 
  padding: 12px; 
  border-radius: var(--carousel-radius);
  height: var(--carousel-height);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.35) inset; 
  scroll-behavior: smooth; /* allow smooth when user drags with keyboard */
}

/* Hide native scrollbar but keep scroll functionality */
.carousel-viewport::-webkit-scrollbar { height: 0; }
.carousel-viewport { scrollbar-width: none; }
.carousel-viewport::-webkit-scrollbar-track { background: transparent; }
.carousel-viewport::-webkit-scrollbar-thumb { background: transparent; }

.carousel-track { 
  display: flex; 
  gap: var(--carousel-gap); 
  align-items: stretch; 
  height: 100%;
}

.carousel-item { 
  position: relative; 
  flex: 0 0 auto; 
  height: 100%; 
  /* scroll-snap-align removed for centered logic */
  border-radius: 8px; 
  overflow: hidden; 
  background: #000; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  min-width: 220px; /* base width; center logic independent */
}

.carousel-item img { 
  height: 100%; 
  width: auto; 
  min-width: 600px;
  display: block; 
  object-fit: contain; 
  pointer-events: none; 
}

/* Optional caption */
.carousel-caption { 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); 
  color: #fff; 
  padding: 8px 12px 10px; 
  font-size: 0.85rem; 
  line-height: 1.3; 
  letter-spacing: .5px; 
}

/* Navigation arrows (div as button) */
.carousel-nav { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 46px; 
  height: 46px; 
  border-radius: 50%; 
  background: rgba(0,0,0,.55); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  transition: background .3s, transform .3s; 
  z-index: 5; 
  color: #fff; 
  font-size: 26px; 
  line-height: 1; 
}
.carousel-nav:hover { background: rgba(0,0,0,.75); }
.carousel-nav:active { transform: translateY(-50%) scale(.9); }
.carousel-nav[aria-disabled="true"] { opacity: .35; cursor: default; }
.carousel-prev { left: 6px; }
.carousel-next { right: 6px; }

/* Simple arrow glyphs using pseudo (so inner text can be empty) */
.carousel-prev::before, .carousel-next::before { content: ''; display: block; width: 14px; height: 14px; border: 3px solid currentColor; border-top: 0; border-right: 0; }
.carousel-prev::before { transform: rotate(45deg) translateX(2px); }
.carousel-next::before { transform: rotate(-135deg) translateX(-2px); }

/* Dots */
.carousel-dots { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; 
  justify-content: center; 
  margin-top: 14px; 
  padding: 4px 4px 0; 
}

.carousel-dot { 
  width: var(--carousel-dot-size); 
  height: var(--carousel-dot-size); 
  border-radius: 50%; 
  background: rgba(255,255,255,.4); 
  cursor: pointer; 
  position: relative; 
  transition: background .35s, transform .35s; 
  flex: 0 0 auto; 
}
.carousel-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255,255,255,.6); transition: box-shadow .5s; }
.carousel-dot:hover { background: rgba(255,255,255,.7); }
.carousel-dot.is-active { background: #fff; transform: scale(1.25); }
.carousel-dot.is-active::after { box-shadow: 0 0 0 6px rgba(255,255,255,.18); }

/* Focus styles for accessibility */
.carousel-nav:focus-visible, .carousel-dot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Reduced motion handling */
@media (prefers-reduced-motion: reduce) {
  .carousel-viewport { scroll-behavior: auto !important; }
  .carousel-dot, .carousel-nav { transition: none !important; }
}

/* Responsive tweak */
@media (max-width: 640px){
  .carousel { --carousel-height: 260px; }
  .carousel-nav { width: 40px; height: 40px; }
  .carousel-prev { left: 2px; } 
  .carousel-next { right: 2px; }
}

/* ================= End Carousel Component ================= */