/* Inline filmstrip slideshow — shared by galleries and case studies that
   want a single-image-at-a-time viewer instead of a static grid. */

.slideshow {
  padding: 96px 32px 80px;
  max-width: 1400px;
  margin: 0 auto;
}
.slideshow.slideshow-stacked { padding-top: 0; }

.slideshow-section-label {
  max-width: 1400px; margin: 64px auto 0; padding: 0 32px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim);
}

.slideshow-nav {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 28px;
}
.slideshow-navlink {
  background: none; border: none; cursor: pointer; padding: 6px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mid); transition: color .2s;
  justify-self: start;
}
.slideshow-navlink.slideshow-next { justify-self: end; }
.slideshow-navlink:hover { color: var(--text); }
.slideshow-title {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); text-align: center;
}

.slideshow-filmstrip {
  display: flex; align-items: center; justify-content: center; gap: 24px;
}
.slideshow-peek {
  flex: 0 0 14%;
  aspect-ratio: 4/3;
  overflow: hidden; cursor: pointer; border-radius: 4px;
  background: var(--card); border: none; padding: 0;
  opacity: .4; transition: opacity .3s;
}
.slideshow-peek:hover { opacity: .75; }
.slideshow-peek img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(45%); }

.slideshow-stage {
  position: relative; flex: 1 1 auto;
  max-width: 68vw; max-height: 68vh;
  aspect-ratio: 16/10;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.slideshow-stage:has(.slideshow-video) { background: var(--card); }
.slideshow-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.slideshow-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.slideshow-pager {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 28px;
}
.slideshow-pager-num {
  background: none; border: none; cursor: pointer; padding: 4px;
  font-size: 13px; color: var(--text-dim); transition: color .2s;
}
.slideshow-pager-num:hover { color: var(--text-mid); }
.slideshow-pager-num.is-active { color: var(--text); font-weight: 700; }

.slideshow-count {
  text-align: center; margin-top: 10px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
}

@media(max-width: 900px){
  .slideshow-peek { display: none; }
  .slideshow-stage { max-width: 90vw; }
}
@media(max-width: 600px){
  .slideshow { padding: 72px 20px 60px; }
  .slideshow-nav { grid-template-columns: auto auto auto; gap: 8px; }
  .slideshow-title { font-size: 11px; }
}