/* =========================================================
   Slideshow component
   Two presentations sharing one engine (see js/slideshow.js):
   - .slideshow--gallery : full plaque + filmstrip, for the
     Sculpture / Installation / Making-Of pages
   - .slideshow--hero    : quiet ambient crossfade, for the
     homepage banner
   ========================================================= */

.slideshow{
  position:relative;
}

.slideshow-stage{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--bg-elevated);
  border:1px solid var(--line);
}

.slideshow--gallery .slideshow-stage{
  min-height:340px;
  height:64vh;
  max-height:640px;
}

.slideshow--hero .slideshow-stage{
  aspect-ratio:700/466;
  border:none;
  background:transparent;
}

.slideshow-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 550ms ease;
  pointer-events:none;
}

.slideshow-slide.is-active{
  opacity:1;
  pointer-events:auto;
}

.slideshow--gallery .slideshow-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.slideshow--hero .slideshow-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* prev / next controls */

.slideshow-nav{
  position:absolute;
  top:0;
  bottom:0;
  width:15%;
  min-width:44px;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease, background .2s ease;
  display:flex;
  align-items:center;
  font-size:0;
}

.slideshow-stage:hover .slideshow-nav,
.slideshow-nav:focus-visible{
  opacity:1;
}

.slideshow-nav--prev{ left:0; justify-content:flex-start; }
.slideshow-nav--next{ right:0; justify-content:flex-end; }

.slideshow-nav:hover{
  background:linear-gradient(to var(--fade-dir,right), rgba(0,0,0,0.35), transparent);
}
.slideshow-nav--next:hover{ --fade-dir:left; }

.slideshow-nav svg{
  width:28px;
  height:28px;
  margin:0 14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
}

/* caption plate, gallery mode only */

.slideshow-caption{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin-top:18px;
  padding:14px 18px;
  background:var(--bg-elevated);
  border-left:3px solid var(--accent);
}

.slideshow-caption__text{
  min-width:0;
}

.slideshow-caption__title{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.15rem;
  color:var(--text);
  margin-bottom:2px;
  transition:opacity .25s ease;
}

.slideshow-caption__medium{
  display:block;
  font-size:0.78rem;
  letter-spacing:0.05em;
  color:var(--text-muted);
  transition:opacity .25s ease;
}

.slideshow-caption__count{
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  font-size:0.78rem;
  letter-spacing:0.08em;
  color:var(--text-dim);
  white-space:nowrap;
}

/* filmstrip, gallery mode only */

.slideshow-strip{
  display:flex;
  gap:10px;
  margin-top:14px;
  padding-bottom:4px;
  overflow-x:auto;
  scrollbar-width:thin;
}

.slideshow-thumb{
  flex:0 0 auto;
  width:64px;
  height:64px;
  padding:0;
  border:0;
  border-bottom:2px solid transparent;
  background:var(--bg-elevated-2);
  cursor:pointer;
  opacity:0.55;
  transition:opacity .2s ease, border-color .2s ease;
}

.slideshow-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.slideshow-thumb:hover{ opacity:0.85; }

.slideshow-thumb.is-active{
  opacity:1;
  border-bottom-color:var(--accent);
}

/* hero dots, hero mode only */

.slideshow-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}

.slideshow-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  border:0;
  padding:0;
  background:var(--line);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

.slideshow-dot.is-active{
  background:var(--accent);
  transform:scale(1.2);
}

@media (max-width:640px){
  .slideshow-caption{ flex-direction:column; align-items:flex-start; gap:4px; }
  .slideshow--gallery .slideshow-stage{ height:48vh; }
}