/* =============================================
   WHY US SECTION
   Used on: hero.html, oferta-okna.html
   ============================================= */
.why-us {
  background-color: var(--white);
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
}

.why-us::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at 80% 50%, rgba(var(--orange-rgb), 0.06) 0%, rgba(var(--orange-rgb), 0.02) 40%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.why-us__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ---- Right: Image (swapped to col 2) ---- */
.why-us__image-wrapper {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow:
    0 24px 64px rgba(30, 30, 30, 0.10),
    0 8px 24px rgba(var(--orange-rgb), 0.06);
  grid-column: 2;
  grid-row: 1;
}

.why-us__image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(30, 30, 30, 0.25) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 11px;
}

.why-us__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Floating quote badge ---- */
.why-us__badge {
  position: absolute;
  bottom: 38px;
  left: 29px;
  display: flex;
  align-items: flex-start;
  gap: 19px;
  padding: 25px 34px;
  max-width: 408px;
  background: rgba(236, 232, 223, 0.75);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 12px;
  z-index: 2;
  animation: why-us-float 3s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform;
  contain: layout style;
}

.why-us.in-view .why-us__badge {
  animation-play-state: running;
}

.why-us__badge-icon {
  flex-shrink: 0;
  width: 53px;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--orange-rgb), 0.12);
  border-radius: 50%;
  color: var(--orange);
}

.why-us__badge-icon svg {
  width: 26px;
  height: 26px;
}

.why-us__badge-text {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.why-us__badge-quote {
  font-size: 17px;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.4;
  font-style: italic;
}

.why-us__badge-author {
  font-size: 16px;
  font-weight: 500;
  color: rgba(21, 21, 21, 0.6);
  line-height: 1.3;
}

/* Uwaga: float uzywa wlasciwosci `translate`, NIE `transform` — dzieki temu
   transform zostaje wolny dla animacji wejscia badge'a (animacja zawsze
   wygrywa z transition na tej samej wlasciwosci). Nie zamieniaj z powrotem. */
@keyframes why-us-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

/* ---- Right: Text content ---- */
.why-us__content {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
}

.why-us__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-bottom: 20px;
  align-self: flex-start;
}

.why-us__heading {
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dark-gray);
  margin-bottom: 20px;
}

.why-us__subheading {
  /* 18px — wspolny rozmiar subheadingu sekcji na desktopie. Tablet (16px)
     i telefon (17px, swiadoma decyzja — patrz komentarz w bloku ≤768)
     maja wlasne override'y i ta zmiana ich nie dotyka. */
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gray-500);
  margin-bottom: 44px;
  max-width: 520px;
}

/* ---- Feature list ---- */
.why-us__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.why-us__feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  -webkit-tap-highlight-color: transparent;
}

.why-us__feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(var(--orange-rgb), 0.12);
  color: var(--orange);
}

.why-us__feature-icon svg {
  width: 24px;
  height: 24px;
}


.why-us__feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.why-us__feature-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.3;
}

.why-us__feature-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--gray-500);
}

/* ---- Scroll reveal — KAZDY element ma wlasny trigger pozycyjny ----
   Od v66 w tej sekcji NIE MA juz kaskady czasowej. Zadnego `transition-delay`:
   label, heading, zdjecie, subheading i 4 punkty czekaja, az KAZDY z nich sam
   wjedzie w kadr (klasa `.is-revealed` z modulu "Why Us Elements Reveal"
   w common.js). Kolejnosc pojawiania sie wynika wiec z ukladu strony, a nie
   z zegara — czyli jest funkcja przewijania.
   Powod: przy kaskadzie czasowej wyzwalaczem subheadingu byl w praktyce
   heading (opoznienie 3 × --whyus-step liczone od momentu, w ktorym w widok
   wchodzila GORA sekcji), wiec element pojawial sie „sam z siebie", nawet gdy
   uzytkownik zatrzymal przewijanie. Klient odrzucil to wprost.
   Notatka na zdjeciu (.why-us__badge) ma osobny, jeszcze pozniejszy prog
   (modul "Why Us Badge Reveal" w common.js) — patrz nizej. */
.why-us {
  /* Ruch jest przepisany 1:1 z wejscia hero na stronie glownej
     (`fadeInLeft` / `slideInRight` — oba `0.7s ease-out` + 30px): klient
     wskazal hero jako wzorzec spokoju i tempa.
     NIE wracaj tu do `--reveal-ease` — to expo-out, ktory upycha ~90% drogi
     w pierwszych ~20% czasu, i to on sprawial, ze ta sekcja (zwlaszcza duze
     zdjecie) czytala sie jako „narwana", niezaleznie od dlugosci trwania.
     Rozsuwaniem elementow wjezdzajacych w kadr w jednej klatce zajmuje sie
     wylacznie `eoStagger` w common.js (STEP_MS tam, nie tutaj). */
  --whyus-reveal-dur: 0.7s;
  --whyus-ease: ease-out;
  --whyus-shift: 30px;
}

/* Stan ukryty jest zagniezdzony pod `.why-us--js-reveal` — klase dodaje modul
   "Why Us Elements Reveal" w common.js. To bramka bezpieczenstwa, nie ozdoba:
   gdyby przegladarka podala nowy CSS ze starym, zbuforowanym common.js, cala
   sekcja zostalaby na `opacity: 0` NA ZAWSZE, bez sladu w konsoli (zdarzylo sie
   realnie w sekcji „Nasz Montaż" — patrz montage.css v53). Brak modulu = brak
   klasy = tresc widoczna, tylko bez animacji. */
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__label,
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__heading,
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__image-wrapper,
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__subheading,
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__feature {
  opacity: 0;
  transform: translateY(var(--whyus-shift));
  transition: opacity var(--whyus-reveal-dur) var(--whyus-ease),
              transform var(--whyus-reveal-dur) var(--whyus-ease);
}

/* Label, heading i subheading — kazdy odslaniany osobno, gdy sam wjedzie
   w kadr. Zadnych `transition-delay`. */
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__label.is-revealed,
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__heading.is-revealed,
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__subheading.is-revealed {
  opacity: 1;
  transform: none;
}

/* Kierunki wjazdu (zyczenie klienta): WSZYSTKIE 4 punkty wjezdzaja Z LEWEJ
   (do v64 punkt 4 jechal z dolu i odstawal od reszty listy). Pozostale
   elementy sekcji jada z dolu, zdjecie z prawej — NIC nie wjezdza z gory,
   czyli zaden element nie startuje z ujemnym translateY.
   Ta reguła ma (0,4,0), tyle samo co zbiorczy stan ukryty wyzej, wiec wygrywa
   WYLACZNIE kolejnoscia w zrodle — nie przenos jej ponad tamta.
   Poziomy wjazd nie robi przewijania w bok, bo `.why-us` ma `overflow: hidden`. */
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__feature {
  transform: translateX(calc(-1 * var(--whyus-shift)));
}

/* `:nth-child(n)` podbija te regule do (0,6,0), zeby przebic kierunkowa
   (0,4,0) wyzej — bez tego punkty 1–3 zostalyby przesuniete na zawsze. */
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__feature:nth-child(n).is-revealed {
  opacity: 1;
  transform: none;
}

/* Zdjecie wysuwa sie Z PRAWEJ (zyczenie klienta). Klasa jest PODWOJONA, zeby
   dac regule (0,5,0) — bez tego walczylaby o kolejnosc w zrodle ze zbiorczymi
   regulami translateY (obie (0,4,0)); patrz gotcha o specyficznosci modyfikatorow
   w CLAUDE.md. Dystans nie robi poziomego przewijania, bo `.why-us` ma
   `overflow: hidden` — zdjecie po prostu wyjezdza zza prawej krawedzi sekcji. */
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__image-wrapper.why-us__image-wrapper {
  /* Ten sam dystans i kierunek co `slideInRight` w hero — zdjecie hero jedzie
     z prawej o 30px i to bylo wskazane jako wzorzec. */
  transform: translateX(var(--whyus-shift));
}

/* Potrojona klasa = (0,6,0), zeby przebic kierunkowa (0,5,0) wyzej. */
.why-us__container.reveal-why-us.why-us--js-reveal .why-us__image-wrapper.why-us__image-wrapper.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- UWAGA: klasa `.visible` NIE odslania juz niczego w tej sekcji ----
   Do v65 `.visible` (dodawana na kontenerze przez main.js na hero i przez
   inline JS na 8 stronach oferty, gdy w widok wchodzila GORA sekcji) odpalala
   kaskade czasowa label → heading → subheading. Wlasnie dlatego wyzwalaczem
   subheadingu byl w praktyce heading, a nie przewijanie — i to klient odrzucil.
   Reguly `.visible` zostaly USUNIETE; ta klasa jest teraz w „Dlaczego my"
   bezuzyteczna (jej modul zostawiono, bo `.reveal-why-us` → `.visible` siedzi
   w 9 plikach i nie ma innych skutkow). NIE przywracaj tu regul opartych na
   `.visible` — kazde odslanianie w tej sekcji idzie przez `.is-revealed`. */

/* ---- Notatka na zdjeciu — osobny trigger, na koncu ----
   `.is-revealed` dodaje common.js dopiero, gdy uzytkownik dojedzie prawie do
   dolnej krawedzi zdjecia. Ruch idzie przez `transform`, bo `translate`
   nalezy do animacji float (patrz komentarz przy @keyframes why-us-float).
   Notatka wysuwa sie Z DOLU (zyczenie klienta) — 72px, czyli dolna czesc
   startuje pod dolna krawedzia zdjecia i jest przycieta przez `overflow:
   hidden` na `.why-us__image-wrapper`, wiec czyta sie jak wyjazd spod kadru.
   NIE zwiekszaj tego do pelnej wysokosci badge'a: IntersectionObserver liczy
   przyciecie przez przodkow, wiec badge schowany CALKOWICIE poza kadrem nigdy
   nie zaraportowalby wejscia w widok i nie odslonilby sie wcale. */
.why-us__container.reveal-why-us .why-us__badge {
  opacity: 0;
  transform: translateY(72px);
  transition: opacity var(--whyus-reveal-dur) var(--whyus-ease),
              transform var(--whyus-reveal-dur) var(--whyus-ease);
}

.why-us__container.reveal-why-us .why-us__badge.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .why-us__container.reveal-why-us.why-us--js-reveal .why-us__label,
  .why-us__container.reveal-why-us.why-us--js-reveal .why-us__heading,
  .why-us__container.reveal-why-us.why-us--js-reveal .why-us__image-wrapper,
  .why-us__container.reveal-why-us.why-us--js-reveal .why-us__subheading,
  .why-us__container.reveal-why-us.why-us--js-reveal .why-us__feature,
  .why-us__container.reveal-why-us .why-us__badge,
  /* Oba wpisy nizej podbijaja specyficznosc do (0,5,0) / (0,6,0) — reguly
     kierunkowe (wjazd punktow z lewej i zdjecia z prawej) maja (0,4,0) i
     (0,5,0), wiec bez nich zachowalyby swoj kierunek mimo reduced motion. */
  .why-us__container.reveal-why-us.why-us--js-reveal .why-us__feature:nth-child(n),
  .why-us__container.reveal-why-us.why-us--js-reveal .why-us__image-wrapper.why-us__image-wrapper {
    transform: none;
    transition-delay: 0s;
  }
}

/* =============================================
   RESPONSIVE — WHY US
   ============================================= */
/* === Wide desktop (≤1200px) === */
@media (max-width: 1200px) {
  .why-us__heading {
    font-size: 44px;
  }
}

/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .why-us {
    padding: 80px 24px;
  }

  .why-us__container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .why-us__content {
    display: contents;
  }

  .why-us__label { order: 1; justify-self: start; margin-bottom: 20px; }
  .why-us__heading { order: 2; margin-bottom: 20px; text-align: left; font-size: 36px; }
  .why-us__subheading { order: 3; margin-bottom: 32px; text-align: left; max-width: 560px; margin-left: 0; margin-right: auto; font-size: 16px; }
  .why-us__image-wrapper {
    order: 4;
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    width: 100%;
    margin: 0 auto 40px;
    aspect-ratio: 5 / 4;
  }
  .why-us__features { order: 5; }

  .why-us__badge {
    bottom: 24px;
    left: 18px;
    padding: 16px 20px;
    gap: 12px;
    max-width: 300px;
    border-radius: 9px;
  }

  .why-us__badge-icon {
    width: 38px;
    height: 38px;
  }

  .why-us__badge-icon svg {
    width: 19px;
    height: 19px;
  }

  .why-us__badge-quote {
    font-size: 14px;
  }

  .why-us__badge-author {
    font-size: 12px;
  }
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .why-us {
    padding: 72px 20px;
  }

  .why-us__container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Break content wrapper so children participate in grid */
  .why-us__content {
    display: contents;
  }

  /* Order: label → heading → subheading → image → features */
  .why-us__label { order: 1; justify-self: start; margin-bottom: 20px; }
  .why-us__heading { order: 2; margin-bottom: 20px; text-align: left; }
  .why-us__subheading { order: 3; margin-bottom: 32px; text-align: left; }
  .why-us__image-wrapper {
    order: 4;
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    width: 100%;
    margin: 0 auto 40px;
    aspect-ratio: 5 / 4;
  }
  .why-us__features { order: 5; }

  .why-us__heading {
    font-size: 32px;
  }

  /* Telefon: tekst wiekszy niz na tablecie (16 → 17px).
     `text-align: justify` bylo tu przez v69 i ZOSTALO COFNIETE (v70) —
     na kolumnie ~350px rozstrzeliwalo spacje o kilkadziesiat px w liniach,
     ktorym duzo brakuje do pelnej szerokosci (zmierzone: do 88px na jednej
     linii @390px), co klient zglosil jako blad. Nie przywracaj go: kazda
     zmiana tresci przesuwa lamanie, wiec efekt jest nieprzewidywalny.
     Wyrownanie do lewej dziedziczy sie z reguly wyzej w tym samym bloku. */
  .why-us__subheading {
    font-size: 17px;
  }

  .why-us__features {
    gap: 16px;
  }

  .why-us__feature-icon {
    width: 42px;
    height: 42px;
  }

  .why-us__feature-icon svg {
    width: 20px;
    height: 20px;
  }

  /* Telefon: plakietka rozpieta na CALA szerokosc zdjecia, z rownym luzem
     16px z obu stron (dotad byla waskim pudelkiem 260px przy lewej krawedzi,
     czyli 74% szerokosci @390 i tylko 67% @430). `right` jest tu WYMOGIEM,
     nie ozdoba — bez niego szerokosc wyznacza tresc, a `max-width: none`
     samo niczego nie rozpina.
     WYSOKOSC RZADZI TU FONTEM, A NIE ODWROTNIE — plakietka lezy NA zdjeciu,
     wiec kazda dodatkowa linia cytatu zjada kadr. Przy cytacie 135-znakowym
     15px dawalo 4 linie i ~52% wysokosci zdjecia (zgloszenie klienta: „nie
     widac praktycznie obrazu"); dlatego cytat zostal SKROCONY do 74 znakow
     (`pages/hero.html`) i dopiero to pozwolilo zostawic czytelne 13px.
     Zmierzone udzialy wysokosci: 27% @430 · 36% @390 · 38% @375 · 40% @360.
     PRZY KAZDEJ ZMIANIE TRESCI CYTATU przemierz ten udzial od nowa — dluzszy
     tekst wraca do 3–4 linii i objaw wraca; sam font tego nie naprawi
     (przy 135 znakach nawet 9px dawalo 4 linie na 320px). */
  .why-us__badge {
    bottom: 20px;
    left: 16px;
    right: 16px;
    max-width: none;
    padding: 12px 16px;
    gap: 12px;
    border-radius: 8px;
  }

  .why-us__badge-icon {
    width: 32px;
    height: 32px;
  }

  .why-us__badge-icon svg {
    width: 16px;
    height: 16px;
  }

  .why-us__badge-quote {
    font-size: 13px;
  }

  .why-us__badge-author {
    font-size: 12px;
  }
}

/* === Najwezsze telefony (≤359px, iPhone SE 1. gen) ===
   Zdjecie ma przy 320px tylko 224px wysokosci, wiec kazdy piksel plakietki
   jest tu drogi: przy 13px cytat lamie sie na 4 linie i zakrywa 52% kadru,
   przy 11px na 3 linie i 38%. Stad mniejszy font i ciasniejszy padding.
   Blok MUSI stac PO bloku ≤768px — ta sama specyficznosc, decyduje
   kolejnosc w zrodle. Zmieniajac tresc cytatu, przemierz to od nowa. */
@media (max-width: 359px) {
  .why-us__badge {
    padding: 10px 12px;
    gap: 9px;
  }

  .why-us__badge-icon {
    width: 28px;
    height: 28px;
  }

  .why-us__badge-icon svg {
    width: 14px;
    height: 14px;
  }

  .why-us__badge-quote {
    font-size: 11px;
    line-height: 1.35;
  }

  .why-us__badge-author {
    font-size: 10px;
  }
}

/* Section badge prefix "// " */
.why-us__label::before { content: "// "; }
.why-us__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) {
  .why-us__container.reveal-why-us.why-us--js-reveal .why-us__label,
  .why-us__container.reveal-why-us.why-us--js-reveal .why-us__heading {
    transform: translateX(calc(-1 * var(--whyus-shift)));
  }
}