/* =============================================
   MEMORIES SECTION — pas zdjec „Wspomnienia"
   Used on: o-nas.html (JEDYNA strona)

   Zyczenie klienta: „ma dzialac i wygladac tak samo jak sekcja z opiniami,
   tylko bez tekstu — same zdjecia, i ma leciec w DRUGA strone".

   Dlatego wszystkie wymiary, tempo, maska krawedzi i cien kafla sa PRZEPISANE
   co do wartosci z `testimonials.css` (wariant `--single`): kafel 415×499 na
   desktopie, 363×499 na tablecie, 320×410 na telefonie i 296px ponizej 360px,
   gap 24/16px, animacja 168s (mobile 122s). Zmiana tamtych wartosci NIE
   przenosi sie tutaj automatycznie — to kopia, nie wspoldzielone reguly
   (o-nas.html nie laduje testimonials.css i nie ma powodu, zeby ladowal caly
   arkusz kart tekstowych dla samych zdjec).

   DWIE rzeczy, ktore odrozniaja te sekcje od opinii i ktorych nie „ujednolicaj":

   1. KIERUNEK. `@keyframes memories-right` idzie z `translateX(-50%)` do `0`,
      czyli tasma plynie od LEWEJ do PRAWEJ. Odpowiednik `marquee-right`
      z testimonials.css — nie da sie go tu reuzyc, bo tamten arkusz nie jest
      na tej stronie ladowany; kopia keyframes jest wiec konieczna, a nie
      przeoczeniem.

   2. REVEAL idzie przez WSPOLNY system `/o-nas` (`data-reveal` + `.eo-reveal`
      z o-nas.css), a nie przez wlasne tokeny jak w testimonials. Dlatego w tym
      pliku NIE MA regul stanu ukrytego — jest tylko korekta kierunku na
      telefonie (na koncu pliku).
   ============================================= */
.memories {
  background-color: var(--white);
  padding: 40px 0 80px;
  position: relative;
  overflow: hidden;
}

/* Naglowek — grid 1fr 1fr, jak `.testimonials__container`:
   label w 1. wierszu, naglowek i podtytul obok siebie w 2. */
.memories__container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-wide);
  margin: 0 auto 56px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
}

.memories__label {
  display: inline-block;
  color: var(--dark-gray);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  margin-bottom: 20px;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.memories__label::before { content: "// "; }

.memories__heading {
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--dark-gray);
  grid-column: 1;
  grid-row: 2;
}

.memories__subheading {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gray-500);
  margin: 0;
  max-width: 380px;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
}

/* ---- Pas ----
   Maska wygasza oba konce, zeby kafle nie ucinaly sie twarda krawedzia. */
.memories__marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.memories__track {
  display: flex;
  width: max-content;
  gap: 24px;
  will-change: transform;
  /* CZAS JEST POCHODNA LICZBY KAFLI, nie wartoscia przepisana z opinii.
     Pas opinii: zestaw 6 × (415 + 24) = 2634px w 168s = 15,7 px/s.
     Tutaj zestaw ma 14 zdjec: 14 × (415 + 24) = 6146px, wiec zeby tasma plynela
     w TYM SAMYM tempie, czas musi urosnac proporcjonalnie: 6146 / 15,7 ≈ 392s.
     **Dodajac lub usuwajac zdjecie, przelicz te liczbe** — inaczej pas
     przyspiesza (kafli przybylo, czas ten sam) i zaczyna migac. */
  animation: memories-right 392s linear infinite;
  /* Wstrzymane do czasu wejscia sekcji w kadr — klase `.in-view` nadaje modul
     „Animation Viewport Pause" w common.js (v69 dopisal tam `.memories`).
     Bez tego wpisu pas NIGDY by nie ruszyl. */
  animation-play-state: paused;
}

.memories.in-view .memories__track {
  animation-play-state: running;
}

/* Pauza na wcisnieciu (desktop) — jak w pasie opinii */
@media (min-width: 769px) {
  .memories__marquee {
    cursor: grab;
  }

  .memories__marquee:active {
    cursor: grabbing;
  }

  .memories__marquee:active .memories__track,
  .memories__marquee:has(:active) .memories__track {
    animation-play-state: paused;
  }
}

/* ---- Kafel ---- */
.memories__item {
  flex-shrink: 0;
  width: 415px;
  height: 499px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  position: relative;
}

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

/* ---- Keyframes: od LEWEJ do PRAWEJ ----
   Odwrotnosc `marquee-left` z pasa opinii. Tasma zawiera zestaw zdjec DWA
   razy, wiec przesuniecie o dokladnie 50% domyka petle bez przeskoku —
   dokladajac kafel, dolóz go w OBU zestawach. */
@keyframes memories-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .memories__container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .memories__heading {
    font-size: 36px;
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 12px;
  }

  .memories__subheading {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    max-width: none;
  }

  .memories__item {
    width: 363px;
    height: 499px;
  }
}

@media (max-width: 768px) {
  .memories {
    padding: 24px 0 56px;
  }

  .memories__container {
    padding: 0 20px;
    margin-bottom: 40px;
  }

  .memories__heading {
    font-size: 32px;
    /* Bez tego naglowek lamie sie 2 + 1 i ostatnia linia to samo „Lat" — ta sama
       sierotka, ktora byla juz naprawiana na hero /o-nas (o-nas.css v299–v302).
       `balance` wyrownuje dlugosci linii; brak wsparcia = dzisiejsze lamanie,
       czyli lagodny zjazd. **Po kazdej zmianie tekstu naglowka przemierz to
       na 390 / 360 / 320px.** */
    text-wrap: balance;
  }

  .memories__subheading {
    font-size: 16px;
  }

  .memories__item {
    width: 320px;
    height: 410px;
  }

  .memories__track {
    gap: 16px;
    /* Ta sama arytmetyka co na desktopie, z mobilnymi wymiarami:
       zestaw 14 × (320 + 16) = 4704px przy tempie pasa opinii (2016 / 122
       ≈ 16,5 px/s) daje ≈ 285s. */
    animation-duration: 285s;
  }
}

/* Najwezsze telefony (iPhone SE 1. gen i pochodne) — kafel 320px dotykalby obu
   krawedzi ekranu i pas przestalby czytac sie jak karuzela. Ta sama liczba co
   w pasie opinii. */
@media (max-width: 359px) {
  .memories__item {
    width: 296px;
  }
}

/* ---- TELEFON: etykieta + naglowek wjezdzaja Z LEWEJ ----
   Wspolna regula calego serwisu (base.css v142): na telefonie NAGLOWEK sekcji
   wchodzi Z BOKU, a TRESC (tu: pas zdjec) Z DOLU. Kierunku nie da sie ustawic
   atrybutem `data-reveal="left"` w HTML, bo ten dziala na KAZDEJ szerokosci
   i przestawilby takze desktop.
   Specyficznosc (0,2,0) jest rowna regule bazowej `.eo-reveal [data-reveal]`
   z o-nas.css, wiec ta regula wygrywa WYLACZNIE kolejnoscia w zrodle — dlatego
   `memories.css` MUSI byc linkowany PO `o-nas.css`. Reguly odslaniajace maja
   o klase wiecej (`.is-revealed`), wiec dalej przebijaja obie.
   Warunek `no-preference` chroni blok reduced-motion w o-nas.css. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .eo-reveal .memories__label,
  .eo-reveal .memories__heading {
    transform: translateX(calc(-1 * var(--eo-shift)));
  }
}