/* ============================================================
   OPIEKA — sekcja: zaufali („Strony, które utrzymujemy")
   ------------------------------------------------------------
   Plik roboczy jednej sekcji, ładowany PO opieka.css, więc nadpisuje
   reguły z tamtego pliku bez !important. Powstał 2026-08-27.

   ⚠️ ZAKRES: reguły `.trusted-logos*` siedzą w opieka.css, który ładuje się
      TYLKO na szablonie page-opieka.php. Wariant `logos` sekcji trusted
      występuje wyłącznie tutaj, więc zmiany w nim NIE dotykają strony
      głównej ani innych podstron, mimo że plik PHP jest współdzielony
      (template-parts/home/trusted.php). Sprawdzone przed zmianą.

   POWÓD ZMIANY, 2026-08-27. Łukasz: „zrób większe".
   Kontekst: przy pułapie 40 px działają tylko logotypy, które są szerokim
   napisem o proporcji 3:1 albo 4:1, a takich jest pięć obecnych. Kandydaci
   z 27.08 mają inne proporcje i w 40 px stają się nieczytelni:
     - Pomoc ETUS   121x100, proporcja 1,22 (trzy twarze cienką kreską)
     - Aleja 12     612x432, proporcja 1,42 (podpis kursywą z ornamentem)
     - Ewa Szozda   logotyp pionowy, znana zaległość
   Wyrenderowane na ciemnym tle z filtrem sekcji, podglądy w scratchpadzie.
   Przy 64 px wszystkie trzy dają się przeczytać.
   ============================================================ */

/* Pułap logotypu 40 → 64 px. `max-height` na obrazie, a nie skalowanie
   kafla, bo logotypy są różnych proporcji: szeroki napis wypełni szerokość
   i nie dobije do pułapu wysokości, a kwadratowy dobije. Dzięki temu jedna
   liczba obsługuje oba kształty i nie trzeba dwóch wysokości kafla. */
.trusted-logos__item img {
  max-height: 64px;
}

/* Kafel musi urosnąć razem z logotypem, inaczej wyższy znak dotyka krawędzi.
   88 px mieściło 40 px znaku plus padding; przy 64 px potrzebne 112 px.
   Padding zostaje na --space-2: przy większym logotyp traci szerokość,
   a to był już raz naprawiony defekt (TaxVision renderował się jako pasek
   77x14, patrz komentarz w opieka.css). */
.trusted-logos__item {
  min-height: 112px;
}

/* ⚠️ NIE PODNOSIĆ minimalnej szerokości komórki. Próbowałem 168 px, licząc
   ją w głowie względem okna 1440, i to był BŁĄD: kontener strony ma 768 px,
   więc przy 168 px w wiersz weszły CZTERY kolumny, a piąty logotyp stanął sam
   w drugim wierszu. Dokładnie ten defekt opisuje komentarz przy oryginalnej
   regule w opieka.css. Zmierzone: 140 px to maksimum, przy którym pięć kolumn
   mieści się w 768 px razem z gap. Liczba jest wyliczona z kontenera, nie z okna.
   Kwadratowy logotyp wysoki na 64 px zajmuje w komórce 140 px około 78 px
   szerokości, czyli mieści się bez ściskania. Nic tu nie zmieniamy. */

/* ============================================================
   Taśma logotypów (marquee), 2026-09-08. Łukasz: „zeby jezdzila, wtedy
   wyglada jak by bylo wiecej".

   Siatka z reguł wyżej zamienia się w jeden poziomy rząd, który jedzie w
   pętli. Dlatego NIE obowiązuje tu ostrzeżenie o pięciu kolumnach w 768 px:
   szerokość kafla jest teraz stała, a rząd wychodzi poza kontener i jest
   przycinany przez .trusted-marquee.

   Pętla: PHP renderuje listę dwa razy, animacja przesuwa taśmę o -50%,
   czyli dokładnie o pierwszą kopię, więc powrót do 0 jest niewidoczny.
   ============================================================ */
.trusted-marquee {
  position: relative;
  overflow: hidden;
  /* Wygaszenie na krawędziach, żeby logotypy nie ucinały się twardo. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trusted-logos.trusted-marquee__track {
  display: flex;
  width: max-content;
  animation: trusted-marquee-scroll 45s linear infinite;
}
.trusted-marquee__track .trusted-logos__item {
  flex: 0 0 auto;
  /* Stała szerokość kafla: w gridzie dawał ją minmax(140px, 1fr), a we
     flexie trzeba ją podać, inaczej kafel zwęża się do samego logotypu. */
  width: 160px;
}
/* Zatrzymanie pod kursorem, żeby dało się wskazać konkretny logotyp
   (a na hoverze i tak wraca jego pełny kolor). */
.trusted-marquee:hover .trusted-logos.trusted-marquee__track,
.trusted-marquee:focus-within .trusted-logos.trusted-marquee__track {
  animation-play-state: paused;
}
@keyframes trusted-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .trusted-logos.trusted-marquee__track { animation: none; }
  /* Bez ruchu druga kopia byłaby tylko powtórzeniem tej samej listy. */
  .trusted-marquee__track .trusted-logos__item[aria-hidden="true"] { display: none; }
  .trusted-marquee { -webkit-mask-image: none; mask-image: none; }
  .trusted-logos.trusted-marquee__track { flex-wrap: wrap; width: auto; justify-content: center; }
}