/* Photo slider for project pages. The dots wear the shared
   .glass.on-photo material from topbar.css; only layout lives here.

   Markup is just:
     <div class="slider"><img src="…" alt=""><img src="…" alt=""></div>
   slider.js wraps the images and builds the dots. */

.slider {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--surface-border-subtle);
  background: var(--surface-secondary);
}

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar {
  display: none;
}

.slider-track img {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  scroll-snap-align: center;
}

.slider .slider-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 9999px;
}

.slider-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s ease;
}
.slider-dot.active {
  width: 18px;
  background: #fff;
}

/* One photo needs no controls. */
.slider.single .slider-dots {
  display: none;
}