/* LAB sekcja „Poznaj nas” nowej strony głównej aslandi.pl, v3 (29.09.2026): wersja od zera na polecenie Igora („zrób to
   po swojemu od zera… bazując na skillu i kreatywności oraz prostocie”), po uwadze, że nagłówek v2 wisiał odizolowany
   (KIERUNEK.md). Jeden komponent na wszystkich ekranach: zamknięty kafelek osoby jak na zaakceptowanym telefonie v2,
   w języku kart tej strony (realizacje, opinie: białe tło, linia #dce3da, promień 12 px, cień tonowany sosną); zdjęcie na
   ciepłym złotym tle ze światłem za głową, pod nim imię i cytat. Nagłówek zwarty i wyśrodkowany jak w innych sekcjach,
   logo tuż pod nim. Komputer: cztery kafelki w rzędzie; z logo schodzi jedna złota linia i rozgałęzia się do czterech
   kafelków (gramatyka strony „Trasa energii”); przy wejściu w widok płynie nią raz prąd (zielony jak w hero) i gaśnie
   w złoto, całość ok. 1,8 s (WCAG 2.2.2). Telefon i tablet: 2 x 2, bez linii (Igor). Ograniczony ruch i bez skryptu:
   linia od razu złota. Portrety: postacie wycięte (kanał alfa, przygotuj_media.py). Marka: sosna #123f2d, złoto #ceb472,
   Poppins; skille labu: impeccable, taste-skill, frontend-design, emil-design-eng. */
.pz {
  --pz-sosna: #123f2d;
  --pz-zloto: #ceb472;
  --pz-atrament: #1c3428;
  --pz-szary: #58685f;
  --pz-tlo: #f7f8f4;
  --pz-linia-karty: #dce3da;
  --pz-prad: #27b863;
  --pz-prad-poswiata: rgb(79 232 127 / 0.55);
  --pz-odstep: clamp(12px, 2vw, 24px);     /* odstęp między kafelkami */
  --pz-pion: clamp(18px, 1.8vw, 26px);     /* linia z logo do rozgałęzienia */
  --pz-zejscie: clamp(18px, 1.8vw, 26px);  /* z rozgałęzienia do kafelka */
  --pz-wyjscie: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--pz-tlo);
  color: var(--pz-atrament);
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.pz *, .pz *::before, .pz *::after { box-sizing: border-box; }
.pz h2, .pz h3, .pz p, .pz ul, .pz figure { margin: 0; }
.pz ul { padding: 0; list-style: none; }
.pz ::selection { background: #cfdcc5; color: var(--pz-atrament); }
.pz-wew { width: min(1280px, 100% - 64px); margin-inline: auto; }

/* Nagłówek jak w usługach, opiniach i realizacjach (wyśrodkowany, zwarty), logo tuż pod nim. */
.pz-naglowek { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.2vw, 16px); text-align: center;
  margin-bottom: clamp(20px, 3vw, 32px); }
.pz h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--pz-sosna); text-wrap: balance; }
.pz h2 em { font-style: normal; padding-inline: 2px; background: linear-gradient(transparent 66%, rgba(206, 180, 114, 0.55) 66%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
.pz-logo { display: block; width: clamp(150px, 14vw, 210px); height: auto; }

/* Kafelki osób: 2 x 2 (telefon, tablet), cztery w rzędzie (komputer). Kafelki w rzędzie mają równą wysokość, więc
   imiona stoją na jednej wysokości. */
.pz .pz-osoby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pz-odstep); }
.pz-osoba { position: relative; }
.pz-osoba figure { height: 100%; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--pz-linia-karty);
  border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(18, 63, 45, 0.06), 0 16px 32px -24px rgba(18, 63, 45, 0.5); }
.pz-portret { aspect-ratio: 675 / 851;
  background: radial-gradient(ellipse 70% 42% at 50% 30%, rgb(255 251 242 / 0.95), rgb(255 251 242 / 0) 72%),
    linear-gradient(180deg, #f8f3e8 0%, #ede4d0 100%); }
.pz-portret img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pz-osoba figcaption { padding: 12px clamp(10px, 1.3vw, 18px) 14px; container-type: inline-size; }

/* Imię w jednej linii: maleje tylko w zbyt wąskim podpisie (cqi = 1 % szerokości podpisu; „Dagmara Jarząbek” ma
   w Poppins 600 szerokość 9,78 em), ale nie poniżej 15 px, żeby zostało wyraźnie większe od cytatu; na najwęższych
   telefonach długie imię łamie się wtedy na dwie linie. Przeglądarki bez cqi biorą pierwszą deklarację. */
.pz .pz-imie { margin: 0; padding: 0; font-family: inherit; font-size: clamp(17px, 0.55vw + 14px, 21px);
  font-size: max(15px, min(9.9cqi, clamp(17px, 0.55vw + 14px, 21px))); line-height: 1.25; font-weight: 600;
  letter-spacing: -0.005em; text-transform: none; color: var(--pz-sosna); text-wrap: balance; }
/* Cudzysłów otwierający wysunięty poza krawędź tekstu o swoją szerokość (0,35 em w Poppins 400), więc pierwsza litera
   cytatu stoi w jednej linii z kolejnymi liniami i z imieniem (recenzja v3). */
.pz .pz-cytat { margin: 6px 0 0; font-size: clamp(14px, 0.2vw + 13px, 15px); line-height: 1.5; color: var(--pz-szary); text-wrap: pretty;
  text-indent: -0.35em; }

/* Linia od logo do kafelków: tylko komputer. */
.pz-trasa { display: none; }

@media (max-width: 699px) {
  .pz-wew { width: min(1280px, 100% - 32px); }
}

/* Komputer: cztery kafelki w rzędzie. Linia: pion spod logo, rozgałęzienie od środka pierwszego do środka ostatniego
   kafelka (środki liczone z szerokości siatki i odstępu) i jeszcze 1 px dalej, do zewnętrznej krawędzi skrajnego
   odcinka (odcinek ma 2 px na środku kafelka), żeby łokieć był domknięty bez ząbka; odcinek do każdego kafelka
   (::before kafelka) kończy się na jego górnej krawędzi. */
@media (min-width: 1024px) {
  .pz .pz-osoby { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--pz-zejscie); }
  .pz-naglowek { margin-bottom: 0; }
  .pz-trasa { display: block; position: relative; height: var(--pz-pion); margin-top: clamp(12px, 1.2vw, 16px); }
  .pz-trasa span, .pz-osoba::before { position: absolute; display: block; background: var(--pz-zloto); }
  .pz-trasa-pion { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; transform-origin: top; }
  .pz-trasa-l, .pz-trasa-p { bottom: 0; height: 2px; }
  .pz-trasa-l { left: calc((100% - 3 * var(--pz-odstep)) / 8 - 1px); right: 50%; transform-origin: right; }
  .pz-trasa-p { left: 50%; right: calc((100% - 3 * var(--pz-odstep)) / 8 - 1px); transform-origin: left; }
  .pz-osoba::before { content: ""; left: 50%; bottom: 100%; width: 2px; height: var(--pz-zejscie); margin-left: -1px; transform-origin: top; }
}

/* Jedna chwila ruchu na komputerze (Emil: mocne ease-out, stagger 60 ms; tylko transform, kolor na końcu): linia rysuje
   się od logo w dół i na boki zielonym prądem z poświatą, dochodzi do kafelków (najpierw środkowych, potem skrajnych,
   w kolejności, w jakiej dosięga ich rozgałęzienie) i po chwili gaśnie w złoto. Razem ok. 1,8 s. Klasa pz--js ze
   skryptu sekcji (tylko przy dozwolonym ruchu), pz--prad po wejściu linii w widok. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .pz--js .pz-trasa span, .pz--js .pz-osoba::before { background: var(--pz-prad); box-shadow: 0 0 8px var(--pz-prad-poswiata); }
  .pz--js .pz-trasa-pion, .pz--js .pz-osoba::before { transform: scaleY(0); }
  .pz--js .pz-trasa-l, .pz--js .pz-trasa-p { transform: scaleX(0); }
  .pz--prad .pz-trasa span, .pz--prad .pz-osoba::before { background: var(--pz-zloto); box-shadow: 0 0 8px rgb(79 232 127 / 0); }
  .pz--prad .pz-trasa-pion { transform: none;
    transition: transform 240ms var(--pz-wyjscie), background-color 700ms ease 1100ms, box-shadow 700ms ease 1100ms; }
  .pz--prad .pz-trasa-l, .pz--prad .pz-trasa-p { transform: none;
    transition: transform 480ms var(--pz-wyjscie) 200ms, background-color 700ms ease 1100ms, box-shadow 700ms ease 1100ms; }
  .pz--prad .pz-osoba::before { transform: none;
    transition: transform 220ms var(--pz-wyjscie) 240ms, background-color 700ms ease 1100ms, box-shadow 700ms ease 1100ms; }
  .pz--prad .pz-osoba:nth-child(1)::before, .pz--prad .pz-osoba:nth-child(4)::before { transition-delay: 450ms, 1100ms, 1100ms; }
}