/* ============ Reusable auto-rotating image slider ============ */
/* Drop a .slider[data-slider] with .slider-slide children anywhere;
   slider.js handles rotation, arrows, and dots automatically. */
.slider{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  background:var(--panel);
}
.slider-viewport{ overflow:hidden; }
.slider-track{
  display:flex;
  transition:transform .6s cubic-bezier(.65,0,.35,1);
}
.slider-slide{
  min-width:100%;
  aspect-ratio:4/3;
}
.slider-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(10,10,10,.45);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
  z-index:2;
}
.slider-arrow:hover{ background:rgba(10,10,10,.7); border-color:var(--lime); }
.slider-arrow--prev{ left:14px; }
.slider-arrow--next{ right:14px; }

.slider-dots{
  position:absolute; bottom:16px; left:0; right:0;
  display:flex; justify-content:center; gap:8px;
  z-index:2;
}
.slider-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.4);
  border:none; padding:0; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.slider-dot.is-active{
  background:var(--lime);
  transform:scale(1.3);
}

.slider-playpause{
  position:absolute; bottom:12px; right:14px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(10,10,10,.55);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
  z-index:3;
}
.slider-playpause:hover{ background:rgba(10,10,10,.8); border-color:var(--lime); }

@media (max-width: 600px){
  .slider-slide{ aspect-ratio:1/1; }
  .slider-arrow{ width:36px; height:36px; font-size:18px; }
}