/**
 * Hero Slider — plain CSS option (light DOM, no shadow)
 *
 * For cases where the Web Component (shadow DOM) is undesirable.
 * Pair with hero-slider.js "lite" behavior or your own carousel logic.
 *
 * All values use y888 design tokens. Requires css/tokens.css.
 */

hero-slider {
  display: block;
  margin-top: 0.1rem;
}

.hero-slider {
  display: block;
  margin: var(--y888-space-md, 0.2rem);
  margin-top: 0;
  position: relative;
  width: calc(100% - var(--y888-space-md, 0.2rem) * 2);
  height: 2.1rem;
  border-radius: 0.16rem;
  overflow: hidden;
  background-color: var(--y888-bg-card, #161616);
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.hero-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform var(--y888-transition-slow, 0.3s ease);
  will-change: transform;
}

.hero-slider__track--no-transition {
  transition: none;
}

.hero-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.hero-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.hero-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.06rem;
  z-index: 2;
  pointer-events: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-slider__dot {
  width: 0.1rem;
  height: 0.1rem;
  border-radius: 0.06rem;
  background-color: #fff;
  opacity: 0.5;
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity var(--y888-transition-fast, 0.15s ease);
}

.hero-slider__dot:hover {
  opacity: 0.8;
}

.hero-slider__dot--active {
  /* Reference: active dot is ELONGATED pill (original: width .24rem, opacity 1) */
  width: 0.24rem;
  opacity: 1;
}

.hero-slider__dot:focus-visible {
  outline: 2px solid var(--y888-primary, #EB05F2);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider__track {
    transition: none;
  }
}