/* =============================================
   TESTIMONIAL QUOTE — Full-width big quote
   Used on: hero.html, oferta-okna.html
   ============================================= */
.testimonial-quote {
  padding: 100px 40px;
  background: #FAF9F4;
  position: relative;
  overflow: hidden;
}

.testimonial-quote__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
}

/* ---- Quote icon ---- */
.testimonial-quote__icon {
  width: 100px;
  height: 100px;
  /* gradient fill applied directly in SVG */
  flex-shrink: 0;
  margin-bottom: 24px;
}

.testimonial-quote__icon svg {
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
}

/* ---- Quote text (same as about-hero__heading) ---- */
.testimonial-quote__text {
  font-family: var(--font-family);
  font-size: 55px;
  font-weight: 400;
  color: var(--dark-gray);
  letter-spacing: -0.03em;
  line-height: 1.18;
  text-align: left;
  max-width: 960px;
}

.testimonial-quote__accent {
  background: var(--orange-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Scroll-driven word fill (same mechanic as the trust-stats quote) ----
   The Quote Word Fill module in common.js splits the text into per-word dual
   layers: a dim base word + an absolute full-colour copy clipped from the
   right, then GSAP scrubs each mask open sequentially, left-to-right.
   Nothing below applies until the module adds .is-split, so a page without
   GSAP renders the plain quote exactly as before. */
.testimonial-quote__text .word {
  position: relative;
  left: 0;
  top: 0;
  text-align: start;
  display: inline-block;
  color: rgba(21, 21, 21, 0.5);
}

/* Keeps the final two words on one line (no orphan) — see glue() in common.js */
.testimonial-quote__text .word-glue {
  white-space: nowrap;
}

.testimonial-quote__text .word-mask {
  position: absolute;
  display: inline-block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  text-align: start;
  color: var(--dark-gray);
  -webkit-clip-path: inset(0% 100% 0% 0%);
  clip-path: inset(0% 100% 0% 0%);
}

/* The accent span's own background-clip: text gradient must go once the text
   is split: its transparent text-fill would inherit down to the word layers,
   and the gradient painted behind them would bleed through the semi-
   transparent base words (the unfilled phrase would already look orange).
   The gradient moves onto the mask instead, so the accent fills into orange
   while its unfilled state stays the same dim grey as the rest of the line. */
.testimonial-quote__text.is-split .testimonial-quote__accent {
  background: none;
  -webkit-text-fill-color: currentColor;
}

.testimonial-quote__text.is-split .testimonial-quote__accent .word-mask {
  background: var(--orange-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-quote__text .word {
    color: var(--dark-gray);
  }

  /* No masks to fill — the accent keeps its gradient on the base words. */
  .testimonial-quote__text .word-mask {
    display: none;
  }

  .testimonial-quote__text.is-split .testimonial-quote__accent {
    background: var(--orange-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ---- Author block ---- */
.testimonial-quote__author {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  padding-bottom: 12px;
}

/* Awatar (kolko z ikona osoby) USUNIETY 2026-08-10 — nie mamy zdjecia
   klienta, wiec zastepcza ikona tylko zajmowala miejsce. Blok autora ma
   teraz jedno dziecko, a zwolnione ~72px (56px awatara + 16px gapu)
   poszlo w rozmiar tekstu nizej. */
.testimonial-quote__name {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.3;
}

.testimonial-quote__role {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.35;
}

/* =============================================
   RESPONSIVE
   ============================================= */
/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .testimonial-quote {
    padding: 80px 40px;
  }

  .testimonial-quote__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .testimonial-quote__text {
    font-size: 44px;
  }

  .testimonial-quote__icon {
    width: 75px;
    height: 75px;
    margin-bottom: 16px;
  }
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .testimonial-quote {
    padding: 64px 20px;
  }

  .testimonial-quote__text {
    font-size: 30px;
    font-weight: 400;
  }

  .testimonial-quote__icon {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
  }

  /* Cytat schodzi tu z 55 na 30px, wiec autor idzie za nim — inaczej
     20/17px czytaloby sie jak drugi naglowek pod tekstem. */
  .testimonial-quote__name {
    font-size: 18px;
  }

  .testimonial-quote__role {
    font-size: 15px;
  }
}

/* === Small mobile (≤600px) === */
@media (max-width: 600px) {
  .testimonial-quote__text {
    font-size: 30px;
  }

  .testimonial-quote {
    padding: 56px 20px;
  }
}

/* =============================================
   KASKADA WEJSCIA
   Sekcja nie wjezdza juz jednym fade'em (`.section-fade` z base.css) —
   wchodzi w kolejnosci wskazanej przez klienta:
     1. cudzyslow (ikona)
     2. tekst cytatu
     3. autor („Michal i Karolina" + rola) — OSTATNI, z wlasnym
        triggerem: ma pojawiac sie dopiero, gdy uzytkownik do niego
        dojedzie scrollem (w v8 jechal razem z tekstem i konczyl fade
        jeszcze pod dolna krawedzia okna)

   Ruch przepisany 1:1 z wejscia hero na stronie glownej (0.7s ease-out,
   30px, z dolu) — tak jak why-us.css v63, services.css v37 i
   showroom.css v63. NIE wracaj tu do `--reveal-ease` (expo-out): upycha
   ~90% drogi w ~20% czasu i czyta sie jako szarpniecie.

   Trigger jest POZYCYJNY (modul „Testimonial Quote Reveal" w common.js),
   a nie czasowy: tekst startuje ~115px ponizej krawedzi okna w momencie,
   gdy sekcja wchodzi w widok, wiec czasowe opoznienie wypalaloby sie
   poza kadrem. Modul pilnuje tez odstepu jednego kroku miedzy grupami.

   UWAGA: tekst ma osobna animacje — scroll-driven word fill (GSAP,
   modul „Quote Word Fill"). Reveal rusza `opacity` + `transform` na
   `<p>`, fill zmienia `clip-path` masek WEWNATRZ — nie koliduja.
   ============================================= */
.testimonial-quote {
  /* Strojenie tempa: zmieniaj TYLKO te wartosci — odstepy w jednej klatce IO
     rozdaje eoStagger w common.js (STEP_MS tam). */
  --tq-reveal-dur: 0.7s;
  --tq-ease: ease-out;
  --tq-shift: 30px;
}

/* Sekcja sama sie nie animuje — animuja sie jej dzieci. Klasa
   `.section-fade` zostaje w HTML (9 stron), bo nadal jest hakiem
   rozpoznawczym sekcji, ale jej fade jest tu wygaszony: (0,2,0) bije
   `.section-fade` (0,1,0) z base.css. */
.testimonial-quote.section-fade,
.testimonial-quote.section-fade.visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.testimonial-quote .testimonial-quote__icon,
.testimonial-quote .testimonial-quote__text,
.testimonial-quote .testimonial-quote__author {
  opacity: 0;
  transform: translateY(var(--tq-shift));
  transition: opacity var(--tq-reveal-dur) var(--tq-ease),
              transform var(--tq-reveal-dur) var(--tq-ease);
}

.testimonial-quote .testimonial-quote__icon.is-revealed,
.testimonial-quote .testimonial-quote__text.is-revealed,
.testimonial-quote .testimonial-quote__author.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-quote .testimonial-quote__icon,
  .testimonial-quote .testimonial-quote__text,
  .testimonial-quote .testimonial-quote__author {
    transform: none;
  }
}

/* ---- 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) {
  .testimonial-quote .testimonial-quote__icon {
    transform: translateX(calc(-1 * var(--tq-shift)));
  }
}