/* ==========================================================================
   CALLA — Pillar "Rozwiązania"/"Dla kogo": galeria
   (template-pillar.php / template-pillar-dla-kogo.php)
   Full-bleed poza <main class="container"> (ta sama technika co
   .cooperation/.pillar-video). Desktop: siatka 3×2, gap 5px, rogi
   kwadratowe — świadomie inaczej niż reszta motywu (border-radius:0),
   zgodnie ze zrzutem referencyjnym. Zdjęcia bliżej 16:9 (na życzenie
   Mike'a, było 1:1).
   Mobile (<640px): karuzela AUTOMATYCZNA w ciągłym ruchu, BEZ paginacji
   (na wyraźne życzenie Mike'a — inaczej niż .features/.audience/
   .pillar-process, które mają manualny scroll-snap + kropki). Czysty CSS
   (@keyframes translateX na .pillar-gallery__grid), bez JS/data-carousel.
   Znacznik zapętlenia: PHP renderuje zestaw zdjęć DWA razy
   (.pillar-gallery__item--duplicate na drugiej kopii, ukryta na desktopie)
   — translateX(-50%) na całości daje bezszwową pętlę.
   ========================================================================== */

.pillar-gallery {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.pillar-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.pillar-gallery__item {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.pillar-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  /* Duplikat istnieje tylko dla pętli karuzeli mobile — na desktopie
     wracamy do zwykłej siatki 3×2 z oryginalnym zestawem. */
  .pillar-gallery__item--duplicate {
    display: none;
  }
}

@media (max-width: 639px) {
  .pillar-gallery {
    /* Track jest 2x szerszy niż viewport (dwie kopie zestawu) — bez tego
       strona dostałaby poziomy scrollbar/overflow od transformowanego
       .pillar-gallery__grid. */
    overflow: hidden;
  }

  .pillar-gallery__grid {
    display: flex;
    grid-template-columns: none;
    width: max-content;
    animation: pillar-gallery-marquee 30s linear infinite;
  }

  .pillar-gallery__item {
    flex: 0 0 auto;
    width: 70vw;
    aspect-ratio: 3 / 4;
  }
}

@keyframes pillar-gallery-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* Dokładnie połowa szerokości tracku = jedna pełna kopia zestawu —
       stąd bezszwowa pętla w nieskończoność. */
    transform: translateX(-50%);
  }
}

@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .pillar-gallery__grid {
    animation: none;
  }
}