/* =============================================================================
   Bildergalerie — Slideshow (ACF: acf/gallery)
   -----------------------------------------------------------------------------
   Grosses Bild mit scharfen Ecken + weichem Schatten, Punkte zentriert darunter.
   Slide-Wechsel steuert gallery.js ueber .is-active.
   ========================================================================== */

@scope (.gallery) {
  .gallery-slider {
    position: relative;
    margin-block-start: 3.5rem; /* Abstand zum Text darueber */
  }

  .gallery-track {
    position: relative;
    /* Galeriebilder sind 3:2; object-fit: cover croppt statt zu stauchen. */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
  }

  .gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
  }

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

  .gallery-slide img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  /* Duenne weisse Pfeile wie Swiper-Default (.swiper-button-white). */
  .gallery-nav {
    position: absolute;
    inset-block-start: 50%;
    z-index: 10;
    display: grid;
    place-items: center;
    inline-size: 27px;
    block-size: 44px;
    margin-block-start: -22px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-white);
    cursor: pointer;
  }

  .gallery-nav svg {
    inline-size: 27px;
    block-size: 44px;
    /* Garantiert Kontrast unabhaengig vom Fotomotiv dahinter. */
    filter: drop-shadow(0 0 3px rgb(0 0 0 / 60%));
  }

  .gallery-prev {
    inset-inline-start: 10px;
  }

  .gallery-next {
    inset-inline-end: 10px;
  }

  /* Auf Mobile wirken die Pfeile im Verhaeltnis zum schmalen Slider zu gross. */
  @media (width <= 767px) {
    .gallery-nav {
      inline-size: 18px;
      block-size: 30px;
      margin-block-start: -15px;
    }

    .gallery-nav svg {
      inline-size: 18px;
      block-size: 30px;
    }
  }

  .gallery-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-block-start: 2.5rem; /* groesserer Abstand zum Slider */
  }

  /* Bei vielen Bildern passen die Punkte auf schmalen Viewports nicht mehr in
     eine Zeile -> Breite auf ca. 8 Punkte gedeckelt, damit sie zuverlaessig auf
     zwei Zeilen umbrechen statt ueber den Rand zu laufen. */
  @media (width <= 767px) {
    .gallery-dots {
      max-inline-size: 13.75rem; /* 8 * (15px Punkt + 10px Gap) - 10px */
      margin-inline: auto;
    }
  }

  .gallery-dot {
    inline-size: 15px;
    block-size: 15px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* Punkte spiegeln den Sektions-Kontrast; Pfeile bleiben immer weiss. */
    background: var(--gallery-dot, var(--color-white));
    opacity: 0.25;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .gallery-dot.is-active {
    opacity: 1;
  }

  /* Kontrast-Spiegelung der Punkte je Hintergrund: auf weiss blau, auf blau weiss. */
  :scope.section-white {
    --gallery-dot: var(--color-blue);
  }

  :scope.section-blue {
    --gallery-dot: var(--color-white);
  }
}