/* ==========================================================================
   SEKCJA 06: Opinia franczyzobiorcy
   --------------------------------------------------------------------------
   Z designu (home:0/7): 1440×775, padding 0/80/120, kolumna, gap 48.
   Panel 1280×585, promień 32, padding 56. Scena 1155×473.

   `padding-top: 0` jest ZAMIERZONE — sekcja skleja się z mapą.
   ========================================================================== */

.fc-testimonial {
  padding-block: 0 var(--fc-sp-120);
  overflow: hidden;
}

.fc-testimonial__inner {
  position: relative;
  z-index: var(--fc-z-base);
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-48);
}

.fc-testimonial__glow {
  --fc-glow-w: 560px;
  --fc-glow-h: 560px;
  --fc-glow-x: -187px;
  --fc-glow-y: -7px;
  --fc-glow-from: var(--fc-glow-orange);
  /* Przystanek końcowy ma INNY kolor — patrz komentarz w components/glow.css. */
  --fc-glow-mid: rgba(148, 87, 60, .5);
  --fc-glow-to: rgba(47, 7, 67, 0);
}

.fc-testimonial__panel {
  padding: var(--fc-sp-56);
}

/* ---------------------------------------------------------------------------
   SCENA — KARTA CYTATU WCHODZI NA ZDJĘCIE

   Makieta 168:19 stawia dzieci absolutnie, bez auto-layoutu:

       zdjęcie partnera   410 × 421   (0,   0)
       karta cytatu       807 × 390   (348, 83)     ← 62 px na zdjęciu
       zakładki partnerów 258 × 43    (386, 0)
       karta z nazwiskiem 259 × 80    (45,  320.46)

   Zachodzenie jest ZAMIERZONE i w makiecie niewidoczne: zdjęcie gaśnie po
   prawej stronie do `--fc-color-void-alt` (patrz `__fade`), więc karta cytatu
   — biel 6 %, półprzezroczysta — kładzie się już na jednolitej czerni.

   ⚠️ HISTORIA TEJ SEKCJI. Wcześniej wygaszenie było odczytane jako pas przy
   DOLNEJ krawędzi zdjęcia: prostokąt 168:23 jest w Figmie obrócony o −90°,
   więc w metadanych ma zamienione `width` i `height` i wygląda jak pas 429×185
   pod fotografią. Przy takim gradiencie prawa krawędź zdjęcia zostawała jasna
   i prześwitywała przez kartę — klient uznał to za błąd składania i kolumny
   zostały rozsunięte o 40 px. Poprawny gradient usuwa przyczynę, więc układ
   wraca do makiety: panel ma znów 585 px, a cytat łamie się na dwa wiersze.

   ODSTĘPSTWO (uzgodnione): karta cytatu dobiega do wewnętrznej krawędzi panelu
   (820 px przy 1440), zamiast kończyć się na 807 px. Grupa w Figmie ma 1155 px
   przy wnętrzu panelu 1168 — te 13 px to szerokość WYLICZONA z pozycji dzieci,
   nie decyzja designera; ich zostawienie dałoby padding 56 z lewej i 69
   z prawej, czyli widoczną asymetrię panelu.

   `--fc-media-w` jest jedynym źródłem szerokości lewej kolumny: zakładki
   i zachodzenie liczą się od niej, więc nie ma dwóch liczb do trzymania
   w zgodzie.
   --------------------------------------------------------------------------- */
.fc-testimonial__stage {
  --fc-media-w: 410px;
  --fc-media-h: 421px;
  /* 410 − 348: o tyle karta cytatu wchodzi na zdjęcie. */
  --fc-overlap: 62px;

  position: relative;
  display: flex;
  /* `flex-start`, nie `stretch`: zdjęcie ma w makiecie stałe 421 px i nie
     dobiera wysokości do karty cytatu. */
  align-items: flex-start;
  width: 100%;
}

/* Wysokość sceny z makiety niesie tylko układ z zakładkami: 43 (zakładki)
   + 40 (odstęp) + 390 (karta) = 473. Przy jednym partnerze zakładek nie ma,
   więc wymuszanie 473 zostawiłoby pod treścią 52 px pustki. */
.fc-testimonial[data-fc-tabs] .fc-testimonial__stage {
  min-height: 473px;
}

/* ---------------------------------------------------------------------------
   ZAKŁADKI — w makiecie w prawym górnym rogu sceny, x 386

   386 px to wartość z makiety, nie wyliczenie: karta cytatu zaczyna się na 348
   i ma 44 px paddingu, więc jej treść startuje na 392. Designer postawił pasek
   6 px w lewo od tej linii i tak zostaje.

   Absolutnie, bo mają stać NAD kartą cytatu, nie odsuwać jej w dół — a przy
   tym być w markupie przed kolumną ze zdjęciem, żeby na wąskich ekranach
   wystarczył `order` do przeniesienia ich nad fotografię.
   --------------------------------------------------------------------------- */
.fc-testimonial__tabs {
  position: absolute;
  left: 386px;
  top: 0;
  z-index: var(--fc-z-overlay);
}

/* Miejsce na zakładki nad kartą cytatu: 43 + 40 = 83, dokładnie tyle, ile
   w makiecie dzieli górę sceny od góry karty. Bez zakładek karta idzie na
   samą górę — nie ma czego omijać. */
.fc-testimonial[data-fc-tabs] .fc-testimonial__quote-col {
  padding-top: 83px;
}

/* ---------------------------------------------------------------------------
   LEWA KOLUMNA — ZDJĘCIE PARTNERA 410×421

   Zdjęcia leżą na sobie absolutnie i przenikają przy zmianie zakładki, więc
   kolumna musi mieć jawną wysokość — stos absolutnych dzieci jej nie niesie.
   --------------------------------------------------------------------------- */
.fc-testimonial__media-col {
  position: relative;
  flex: 0 0 var(--fc-media-w);
  height: var(--fc-media-h);
}

/* Trzy warstwy: gradient pod spodem, zdjęcie, przenikanie u dołu. */
.fc-testimonial__media {
  position: absolute;
  inset: 0;
  z-index: var(--fc-z-base);
  overflow: hidden;
  border-radius: var(--fc-radius-2xl);
  background-image: linear-gradient(90deg, #590f4d 0%, #0f081a 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fc-transition-slow);
}

.fc-testimonial__media.is-active {
  opacity: 1;
  visibility: visible;
}

/*
 * Pliki w `assets/img/partner-*.png` są przycięte do kadru z makiety i mają
 * proporcję kontenera (410 / 421), więc `cover` odtwarza Figmę bez korekty
 * pozycji. `center top` jest zabezpieczeniem dla zdjęć wgranych z panelu:
 * makieta w każdym kadrze kotwiczy fotografię przy górnej krawędzi, żeby
 * przycięcie zjadało nogi, a nie głowę.
 */
.fc-testimonial__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---------------------------------------------------------------------------
   WYGASZENIE — PIONOWY PAS PRZY PRAWEJ KRAWĘDZI, NIE PRZY DOLNEJ

   Figma 168:23: prostokąt 428.755 × 185 z gradientem `180deg` obrócony o −90°,
   zakotwiczony na (229, −3.32) i przycięty maską zdjęcia. Po obrocie gradient
   biegnie POZIOMO: przezroczysty przy x = 229, pełny `--fc-color-void-alt`
   przy 75 % długości, czyli x = 368.3, i taki zostaje do prawej krawędzi.

   W procentach kontenera 410 px: 229 / 410 = 55.85 %, 368.3 / 410 = 89.83 %.
   Procenty, nie piksele — na węższych ekranach zdjęcie ma gasnąć w tym samym
   miejscu kadru, a nie 229 px od lewej.

   To ten pas sprawia, że karta cytatu może wejść na zdjęcie: w miejscu
   zachodzenia (348–410) fotografia jest już jednolicie ciemna.
   --------------------------------------------------------------------------- */
.fc-testimonial__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 55.85%,
    var(--fc-color-void-alt) 89.83%);
}

/* ---------------------------------------------------------------------------
   ZDJĘCIE GRUPOWE — INTERPRETACJA, BRAK W DESIGNIE

   Makieta ma w kadrze jedną osobę, stojącą pośrodku. Przy zdjęciu kilku osób
   ta sama kompozycja chowa skrajną z prawej: pas wygaszenia (od 229 px)
   przyciemnia ją do połowy, a karta cytatu (od 348 px) zakrywa resztę.
   Samo zdjęcie wygaszenia też nie pomaga - wtedy karta cytatu leży na
   twarzy i koszuli zamiast na czerni.

   Włączane przełącznikiem „Zdjęcie grupowe" przy partnerze w panelu, więc
   zdjęcia pojedynczych osób zostają dokładnie jak w makiecie:
     • fotografia kończy się tam, gdzie zaczyna się karta cytatu (410 − 62),
       więc cała grupa mieści się w widocznej części kadru,
     • wygaszenie zwęża się do półtorej szerokości zachodzenia i dochodzi
       do pełnej czerni dokładnie na krawędzi karty - karta nadal leży na
       jednolitym tle, a skrajna osoba nie traci twarzy.

   Pod kartą zostaje tło `__media`, przykryte w całości przez wygaszenie.
   --------------------------------------------------------------------------- */
.fc-testimonial__media--group .fc-testimonial__photo {
  width: calc(100% - var(--fc-overlap));
}

.fc-testimonial__media--group .fc-testimonial__fade {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) calc(100% - 1.5 * var(--fc-overlap)),
    var(--fc-color-void-alt) calc(100% - var(--fc-overlap)));
}

/* ---------------------------------------------------------------------------
   KARTA Z NAZWISKIEM — 259×80, przyklejona do dolnej części zdjęcia

   Makieta podaje `top: 320.46` przy zdjęciu 421 px i karcie 80 px, czyli
   20.54 px od dołu. Kotwiczymy od DOŁU, nie od góry: przy niższym zdjęciu
   na wąskich ekranach karta ma zostać przy dolnej krawędzi kadru, a nie
   zawisnąć w połowie albo wyjść pod spód.

   Tło to CZERŃ 76 %, nie biel 8 % (Figma 168:43). Różnica jest zasadnicza:
   karta leży na fotografii, a nie na panelu, więc musi przyciemniać to, co
   pod nią wypadnie. Na białej koszuli Jakuba biel 8 % dałaby biały tekst
   na jasnym tle.
   --------------------------------------------------------------------------- */
.fc-testimonial__name {
  position: absolute;
  left: 45px;
  bottom: 20.54px;
  z-index: var(--fc-z-overlay);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-sp-2);
  width: 259px;
  max-width: calc(100% - 2 * 45px);
  padding: var(--fc-sp-18) var(--fc-sp-20);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-scrim-name);
  box-shadow: inset 0 0 0 var(--fc-border-width) var(--fc-color-hairline-name);
}

.fc-testimonial__name.is-active {
  display: flex;
}

.fc-testimonial__person {
  margin: 0;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-extrabold);
  font-size: var(--fc-fs-name);
  line-height: var(--fc-lh-auto);
  color: var(--fc-color-text);
}

.fc-testimonial__role {
  margin: 0;
  font-size: var(--fc-fs-sm);
  line-height: var(--fc-lh-sm);
  color: var(--fc-color-text-muted);
}

/* ---------------------------------------------------------------------------
   PRAWA KOLUMNA — KARTA CYTATU

   Ujemny margines to całe zachodzenie z makiety: kolumna zaczyna się 62 px
   przed prawą krawędzią zdjęcia. `z-index` jest konieczny, bo `__media` ma
   `--fc-z-base` — bez podniesienia kolumny fotografia malowałaby się NAD kartą.

   `min-width: 0` jest obowiązkowe: bez niego element flex nie zejdzie poniżej
   swojej treści (domyślne `min-width: auto`) i długi wiersz chipów rozepchnąłby
   kolumnę poza panel zamiast się zawinąć.
   --------------------------------------------------------------------------- */
.fc-testimonial__quote-col {
  position: relative;
  z-index: var(--fc-z-raised);
  flex: 1 1 0;
  min-width: 0;
  margin-left: calc(-1 * var(--fc-overlap));
}

/*
 * `min-height` zamiast `height`: dłuższy cytat ma kartę urosnąć, krótszy
 * nie ma jej zapaść. Patrz handoff/05-wordpress.md §4.
 */
.fc-testimonial__quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-sp-20);
  width: 100%;
  min-height: 390px;
  padding: var(--fc-sp-44);
}

.fc-testimonial__quote[hidden] {
  display: none;
}

.fc-testimonial__label {
  margin: 0;
  font-weight: var(--fc-fw-medium);
  font-size: var(--fc-fs-caption);
  line-height: var(--fc-lh-caption);
  letter-spacing: var(--fc-ls-micro);
  margin-inline-end: calc(-1 * var(--fc-ls-micro));
  color: var(--fc-color-text-bright);
  text-transform: uppercase;
}

.fc-testimonial__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-sp-20);
}

/*
 * Cudzysłów: Archivo Black 64 px z interlinią 56 px w ramce 33×34.
 * Ramka jest niższa niż wiersz — glif celowo z niej wystaje, tak jak
 * w makiecie. Stąd jawna wysokość i `overflow: visible`.
 */
.fc-testimonial__mark {
  display: block;
  width: 33px;
  height: 34px;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-quote-mark);
  line-height: var(--fc-lh-quote-mark);
  color: var(--fc-color-accent-alt);
  overflow: visible;
}

/* W makiecie 719 px przy karcie 807. Po rozsunięciu kolumn karta jest węższa
   niż 807, więc szerokość niesie sama karta — stała wartość tylko ucinałaby
   wiersz w przypadkowym miejscu. */
.fc-testimonial__text {
  width: 100%;
  margin: 0;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-semibold);
  font-size: var(--fc-fs-quote);
  line-height: var(--fc-lh-quote);
  color: var(--fc-color-text);
}

/* ==========================================================================
   RESPONSYWNOŚĆ — INTERPRETACJA, BRAK W DESIGNIE
   ========================================================================== */

/*
 * ⚠️ SCENA SKŁADA SIĘ NA 1200, NIE NA 900.
 *
 * Kuszące jest utrzymanie dwóch kolumn tak długo, jak się mieszczą. Render
 * pokazuje, dlaczego to nie działa: przy 900 px karcie cytatu zostaje ok.
 * 400 px, chipy z nazwami lokalizacji rozjeżdżają się na trzy rzędy, cytat
 * rośnie do sześciu wierszy, a zdjęcie o stałej wysokości 421 px zostawia
 * pod sobą coraz większą rynnę.
 *
 * Ta sama treść w jednej kolumnie mieści chipy w jednym rzędzie, cytat
 * w dwóch wierszach i zostawia zdjęciu proporcję z makiety. Dwie kolumny
 * mają sens dopóty, dopóki karta cytatu zostaje szersza niż ~600 px — czyli
 * do 1200 px szerokości okna.
 *
 * Zakładki wracają NAD zdjęcie: pod zdjęciem przełączenie partnera zmieniałoby
 * fotografię poza polem widzenia.
 *
 * Znika zachodzenie i wygaszenie — jedno i drugie istnieje wyłącznie po to,
 * żeby zdjęcie przechodziło w kartę cytatu stojącą OBOK niego. W układzie
 * pionowym karta jest pod spodem, więc pas ciemności przy prawej krawędzi
 * fotografii nie miałby w co przechodzić i czytałby się jak zabrudzenie.
 * Ten sam wniosek potwierdza makieta „O nas" (137:899): tam zdjęcie partnera
 * stoi samo i nie ma żadnego wygaszenia.
 */
@media (max-width: 1199.98px) {
  .fc-testimonial__stage,
  .fc-testimonial[data-fc-tabs] .fc-testimonial__stage {
    flex-direction: column;
    gap: var(--fc-sp-24);
    min-height: 0;
  }

  .fc-testimonial__tabs {
    position: static;
    order: 1;
    align-self: flex-start;
  }

  .fc-testimonial__media-col {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: var(--fc-media-w);
    /* Proporcja z makiety (410 × 421) zamiast stałej wysokości: na telefonie
       kadr 421 px przy szerokości 320 zjadałby cały ekran. Wysokość musi
       zejść na `auto`, inaczej 421 px z desktopu wygrałoby z proporcją. */
    height: auto;
    aspect-ratio: 410 / 421;
  }

  .fc-testimonial__fade {
    display: none;
  }

  /* Bez zachodzenia karty nie ma czego omijać - zdjęcie grupowe wraca
     na pełną szerokość kadru, jak każde inne. */
  .fc-testimonial__media--group .fc-testimonial__photo {
    width: 100%;
  }

  .fc-testimonial__quote-col,
  .fc-testimonial[data-fc-tabs] .fc-testimonial__quote-col {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-top: 0;
  }

  .fc-testimonial__quote {
    min-height: 0;
    padding: var(--fc-sp-32);
  }

  .fc-testimonial__name {
    left: var(--fc-sp-20);
    bottom: var(--fc-sp-20);
    max-width: calc(100% - 2 * var(--fc-sp-20));
  }
}

@media (max-width: 899.98px) {
  .fc-testimonial {
    padding-bottom: var(--fc-sp-72);
  }

  .fc-testimonial__panel {
    padding: var(--fc-sp-24);
  }

  .fc-testimonial__quote {
    padding: var(--fc-sp-24);
  }
}

/* Najwęższe telefony (320–400 px). Chipy z długimi nazwami lokalizacji
   zawijają się gęściej, więc odstępy w karcie schodzą razem z paddingiem. */
@media (max-width: 399.98px) {
  .fc-testimonial__quote {
    gap: var(--fc-sp-16);
    padding: var(--fc-sp-20);
  }

  .fc-testimonial__chips {
    gap: var(--fc-sp-10);
  }

  .fc-testimonial__name {
    left: var(--fc-sp-12);
    bottom: var(--fc-sp-12);
    max-width: calc(100% - 2 * var(--fc-sp-12));
  }
}