/**
 * Galerie-Seite – Figma: rote Section, grosses Bild (radius 8px),
 * Caption in Cream darunter, Pfeile auf dem Bild.
 */

.gallery-slider {
  background-color: var(--color-red);
  padding: var(--space-16) 0 var(--space-20);
}

.gallery-slider__track-wrap {
  position: relative;
  max-width: var(--container-inner);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

.gallery-slider__track {
  position: relative;
}

.gallery-slider__slide {
  display: none;
}

.gallery-slider__slide.is-active {
  display: block;
}

/* Clip-Wrapper: hält den Ken-Burns-Zoom sauber innerhalb der abgerundeten Ecken */
.gallery-slider__img-clip {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.gallery-slider__slide img {
  width: 100%;
  max-height: 72vh;
  object-fit: cover;
  display: block;
}

.gallery-slider__caption {
  padding: var(--space-4) 0 0;
  font-size: var(--text-sm);          /* 13px */
  color: var(--color-cream);
  text-align: left;
}

/* Pfeile auf dem Bild (Figma: ~100px vom Rand, vertikal mittig) */
.gallery-slider .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.gallery-slider .slider-arrow--prev { left: calc(var(--side-padding) + var(--space-16)); }
.gallery-slider .slider-arrow--next { right: calc(var(--side-padding) + var(--space-16)); }

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .gallery-slider .slider-arrow--prev { left: calc(var(--side-padding) + var(--space-2)); }
  .gallery-slider .slider-arrow--next { right: calc(var(--side-padding) + var(--space-2)); }

  .gallery-slider__slide img {
    max-height: 55vw;
  }
}