/* =============================================
   PARTNERS — Dual marquee (based on .brands)
   ============================================= */
.partners {
  padding: 0 0 96px;
  background: var(--white);
  overflow: hidden;
}

.partners__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 40px 0;
  text-align: center;
}

.partners__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
}

.partners__heading {
  font-size: 42px;
  font-weight: var(--heading-weight);
  color: var(--dark-gray);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.partners__tracks {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.partners__row {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.partners__track {
  display: flex;
  width: max-content;
  animation: marquee 50s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.partners.in-view .partners__track {
  animation-play-state: running;
}

.partners__track--reverse {
  animation-direction: reverse;
}

.partners__item {
  flex-shrink: 0;
  padding: 0 48px;
  display: flex;
  align-items: center;
  height: 80px;
}

.partners__item img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.082);
  opacity: 0.9;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

.partners__item:hover img,
.partners__item.touch-hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Indywidualne rozmiary logo + kompensacja przezroczystych obwódek w plikach */
.partners__item--baranski img   { height: 96px; margin: 0 -17px; }
.partners__item--agmar img      { height: 75px; margin: 0 -16px; }
.partners__item--wisniowski img { height: 100px; margin: 0 -29px; transform: translateY(4px); }
.partners__item--drutex img     { height: 48px; }
.partners__item--polskone img   { height: 58px; transform: translateY(4px); }
.partners__item--wiked img      { height: 67px; margin: 0 -8px; }
.partners__item--aluprof img    { height: 94px; margin: 0 -26px; }
.partners__item--ambasador img  { height: 150px; transform: translateY(-16px); margin: 0 -26px; }
.partners__item--selt img       { height: 106px; margin: 0 -13px; transform: translateY(4px); }
.partners__item--erkado img     { height: 29px; }
.partners__item--dre img        { height: 48px; margin: 0 -15px; }
.partners__item--veka img       { height: 80px; margin: 0 -6px; }

/* =============================================
   SCROLL REVEAL — kaskada wejscia sekcji
   Kolejnosc: label → heading → 1. rzad logo → 2. rzad logo.

   Label i heading leza przy GORZE sekcji, wiec ida na kaskadzie CZASOWEJ
   (transition-delay) — ich opoznienia wypalaja sie na elementach, ktore
   uzytkownik faktycznie widzi. Rzedy logo dostaja `.is-revealed` z modulu
   "Partners Rows Reveal" w main.js, bo w chwili startu kaskady sa jeszcze pod
   dolna krawedzia okna (ta sama diagnoza co why-us.css v64 i services.css v35:
   czasowe opoznienie wypalone poza kadrem = uzytkownik zastaje rzedy juz
   odsloniete, bez ruchu).

   Ruch przepisany z hero: 0.7s ease-out, 30px, z dolu — jak w "Dlaczego my"
   (why-us v63) i "Nasza oferta" (services v37).
   ============================================= */
.partners {
  --partners-reveal-dur: 0.7s;
  --partners-ease: ease-out;
  --partners-step: 0.25s;
  --partners-shift: 30px;
}

/* Sekcja nie gasnie juz jako jeden blok. `.section-fade` zostaje na niej
   WYLACZNIE po to, zeby wspoldzielony obserwator w common.js dodal `.visible`
   — to ono odpala kaskade dzieci. Bez tego nadpisania caly blok fade'owalby sie
   naraz i kaskady nie byloby widac. (0,2,0) > (0,1,0), wiec wygrywa z regula
   `.section-fade` w base.css niezaleznie od kolejnosci w zrodle. */
.partners.section-fade {
  opacity: 1;
  transform: none;
  transition: none;
}

/* WSZYSTKIE stany ukryte sa zagniezdzone pod `.partners--js-reveal`, ktora
   dodaje modul "Partners Rows Reveal" w main.js. To NIE jest ozdobnik: bez tej
   bramki wystarczy, ze przegladarka poda nowy CSS ze starym (zbuforowanym)
   JS-em, a rzedy logo zostaja na `opacity: 0` NA ZAWSZE i sekcja renderuje sie
   jako pusta przestrzen. Zdarzylo sie to realnie przy kolizji numerow wersji
   `main.js`. Brak modulu = brak klasy = tresc widoczna, tylko bez animacji. */
.partners--js-reveal .partners__label,
.partners--js-reveal .partners__heading,
.partners--js-reveal .partners__row {
  opacity: 0;
  transform: translateY(var(--partners-shift));
  transition: opacity var(--partners-reveal-dur) var(--partners-ease),
              transform var(--partners-reveal-dur) var(--partners-ease);
}

/* --- Kaskada czasowa: tylko gora sekcji --- */
.partners--js-reveal.visible .partners__label,
.partners--js-reveal.visible .partners__heading {
  opacity: 1;
  transform: translateY(0);
}

.partners--js-reveal.visible .partners__label   { transition-delay: 0s; }
.partners--js-reveal.visible .partners__heading { transition-delay: var(--partners-step); }

/* --- Rzedy logo: trigger pozycyjny (main.js) --- */
.partners--js-reveal .partners__row.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .partners--js-reveal .partners__label,
  .partners--js-reveal .partners__heading,
  .partners--js-reveal .partners__row {
    transform: none;
  }

  /* (0,3,0) — tyle samo co reguly kaskady wyzej, wiec zeruje ich opoznienia
     kolejnoscia w zrodle. Nizsza specyficznosc by tu przegrala. */
  .partners--js-reveal.visible .partners__label,
  .partners--js-reveal.visible .partners__heading {
    transition-delay: 0s;
  }
}

@media (max-width: 1024px) {
  .partners { padding: 0 0 60px; }
  .partners__container { padding: 0 24px; }
  .partners__heading { font-size: 32px; }
  .partners__tracks { margin-top: 40px; gap: 20px; }
  .partners__item { padding: 0 40px; height: 68px; }
  .partners__item img { height: 36px; }
  .partners__item--baranski img   { height: 67px; }
  .partners__item--agmar img      { height: 52px; }
  .partners__item--wisniowski img { height: 60px; }
  .partners__item--drutex img     { height: 33px; }
  .partners__item--polskone img   { height: 40px; }
  .partners__item--wiked img      { height: 46px; }
  .partners__item--aluprof img    { height: 64px; }
  .partners__item--ambasador img  { height: 104px; transform: translateY(-12px); }
  .partners__item--selt img       { height: 73px; }
  .partners__item--erkado img     { height: 22px; }
  .partners__item--dre img        { height: 33px; }
  .partners__item--veka img       { height: 55px; }
}

@media (max-width: 768px) {
  .partners { padding: 0 0 48px; }
  .partners__label { font-size: 13px; }
  /* 32px matches every other section heading at this width. At 26px this was the
     smallest H2 on the page, which made a peer-level section read as a
     sub-heading of the one above it. Kept the looser letter-spacing. */
  .partners__heading { font-size: 32px; letter-spacing: -0.01em; }
  .partners__tracks { margin-top: 32px; gap: 16px; }
  .partners__track { animation-duration: 40s; }
  .partners__item { padding: 0 32px; height: 60px; }
  .partners__item img { height: 32px; }
  .partners__item--baranski img   { height: 58px; }
  .partners__item--agmar img      { height: 46px; }
  .partners__item--wisniowski img { height: 53px; }
  .partners__item--drutex img     { height: 29px; }
  .partners__item--polskone img   { height: 35px; }
  .partners__item--wiked img      { height: 40px; }
  .partners__item--aluprof img    { height: 56px; }
  .partners__item--ambasador img  { height: 92px; transform: translateY(-10px); }
  .partners__item--selt img       { height: 64px; }
  .partners__item--erkado img     { height: 19px; }
  .partners__item--dre img        { height: 29px; }
  .partners__item--veka img       { height: 48px; }
}

/* Section badge prefix "// " */
.partners__label::before { content: "// "; }
.partners__label { text-transform: capitalize; }

/* ---- TELEFON: etykieta + naglowek wjezdzaja Z LEWEJ ----
   Wspolna regula calego serwisu (2026-08-03, base.css v142): na telefonie
   NAGLOWEK sekcji wchodzi Z BOKU, a TRESC (karty, zdjecia, listy) Z DOLU.
   Mieszanka jest zamierzona — klient poprosil, zeby ruch byl „i lewo/prawo,
   i z dolu", zamiast dotychczasowego przypadkowego rozklad kierunkow.
   Selektor jest KOPIA stanu ukrytego wyzej, wiec ma te sama specyficznosc i
   wygrywa kolejnoscia w zrodle; reguly odslaniajace maja o klase wiecej
   (`.visible` / `.is-revealed`), wiec dalej przebijaja obie.
   Warunek `no-preference` jest KONIECZNY: blok `prefers-reduced-motion` w tym
   pliku lezy WYZEJ, wiec bez niego ta regula by go przebila.
   Dystans idzie z tokenu sekcji (na telefonie 44px — base.css v142), a sekcja
   przycina poziomo, wiec wjazd nie robi przewijania w bok. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .partners--js-reveal .partners__label,
  .partners--js-reveal .partners__heading {
    transform: translateX(calc(-1 * var(--partners-shift)));
  }
}