/* Endlos-scrollender Bild-Marquee (zwei Zeilen, gegenläufig).
   Wird per gallery-strip.js direkt vor den Footer auf jeder Seite injiziert.
   Pause-on-hover, edge-fade-mask, prefers-reduced-motion-Support. */

.gallery-strip {
  position: relative;
  background-color: var(--color-off-white);
  padding-block: var(--space-2xl);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .gallery-strip {
    padding-block: var(--space-3xl);
  }
}

.gallery-strip__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;

  /* Sanftes Ausblenden an den Rändern, damit's nicht hart abgeschnitten wirkt */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.gallery-strip__row {
  display: flex;
  width: max-content;
  /* Inhaltsfluss: jede Reihe hat einen Track der per Animation horizontal
     verschoben wird. Reduzierte Motion = keine Animation, statisch. */
}

.gallery-strip__track {
  display: flex;
  gap: 16px;
  /* Wir duplizieren die Items 1× im DOM. Bei translateX(-50%) ist der
     zweite Block exakt an der Stelle, wo der erste angefangen hat —
     dadurch ist der Loop unsichtbar. */
  animation: gallery-scroll-left 70s linear infinite;
}

.gallery-strip__row--reverse .gallery-strip__track {
  animation-name: gallery-scroll-right;
}

@keyframes gallery-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes gallery-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-strip__track {
    animation: none;
    transform: translateX(0);
  }
}

/* Einzelne Bild-Kacheln. Querformat-Cards mit weichen Ecken. Größe
   responsiv: kleinere Kacheln auf Mobile. */
.gallery-strip__tile {
  flex: 0 0 auto;
  width: 220px;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--color-baby-pink);
  position: relative;
}

@media (min-width: 768px) {
  .gallery-strip__tile {
    width: 280px;
    border-radius: 22px;
  }
}

@media (min-width: 1280px) {
  .gallery-strip__tile {
    width: 320px;
  }
}

.gallery-strip__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}