/* =============================================================================
   Zespół — .foreto-team / .foreto-person

   Kit nie ma komponentu „karta osoby". Ma Avatar (wymiar i kadrowanie) oraz
   Card (pojemnik z cieniem i dopełnieniem), więc karta jest z nich złożona,
   a tutaj stoi wyłącznie jej rysunek wewnętrzny — dokładnie tak, jak
   sections.css trzyma wnętrze karty spółki i karty faktu.

   GŁOWA KARTY JEST TA SAMA CO W WIZYTÓWCE Z /kontakt/ (.foreto-contact-person
   w sections.css): kwadratowe zdjęcie w szarości, podpis obok. Dwie sekcje
   z twarzami na jednym serwisie mają wyglądać jak jedna decyzja, a nie jak dwa
   niezależne pomysły — dlatego wymiary, stopnie i odstępy są przepisane
   z tamtego komponentu, nie dobrane od nowa.

   CZEGO NIE PRZEPISUJEMY: wierszy „tel." i „mail.". Wizytówka z kontaktu ma
   dawać bezpośrednie kanały, karta z /o-nas/ — powiedzieć, kto to jest i czym
   się zajmuje. To pozostaje różnica w treści, nie w rysunku, i docblock
   blocks-team.php ją trzyma.

   Ani jednej liczby poza wymiarem zdjęcia: reszta przez tokeny z kit-bridge.css.
   Tam, gdzie mostu aliasu nie ma — grubość pisma — sięgamy po --wp--* wprost,
   tą samą drogą co .foreto-testimonial__name.

   Arkusz musi stać w kolejce ZA kit.css: .foreto-person__link ma tę samą wagę
   selektora co reguły kitu i wygrywa kolejnością.
   ========================================================================== */

/* Siatka rozciąga komórkę, ale karta w środku zostaje przy swojej treści, więc
   rząd kart o opisie jedno- i trzywierszowym kończy się nierówno. Ta sama para
   reguł, którą sections.css stosuje przy spółkach Grupy. */
.foreto-team {
	--foreto-grid-align: stretch;
}

/* KARTA MA DWA PIĘTRA: głowę (zdjęcie i podpis) oraz opis pod nią, na całą
   szerokość karty. Opis nie wchodzi w wiersz obok zdjęcia, bo przy karcie
   552 px zostawałoby na niego 316 — kolumna węższa niż wiersz czytelniczy.
   Pod spodem ma całe 456. */
.foreto-person {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-4);
}

/* WIERSZ, KTÓRY UMIE SIĘ ROZPAŚĆ W KOLUMNĘ — i to jest cała obsługa wąskiej
   karty, bez ani jednego progu w media query.

   Powód, dla którego progu tu nie ma, choć wizytówka z kontaktu go ma: tamta
   stoi w JEDNYM miejscu o znanej szerokości, więc próg okna ją opisuje. Karta
   osoby stoi w siatce, której liczba kolumn jest atrybutem bloku — przy dwóch
   kolumnach ma 552 px, przy trzech 351, a okno w obu przypadkach to samo.
   Zapytanie kontenerowe też nie pomoże: kontenerem musiałby być przodek, a tym
   jest cała lista, nie pojedyncza karta.

   Zawijanie mierzy dokładnie to, co trzeba: gdy na podpis przestaje starczać
   200 px, schodzi on pod zdjęcie i głowa wraca do układu pionowego. Próg 200 px
   jest z pomiaru — „Business Development Manager" łamie się wtedy na dwa
   wiersze i to jest granica, poniżej której wiersz przestaje mieć sens. */
.foreto-person__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	gap: var(--foreto-space-4);
}

/* Kwadrat 116 px za wizytówką z kontaktu. Wymiar podany, bo .foreto-avatar
   z kitu ma 100 px, a przy karcie 552 px zdjęcie tej wielkości jest znaczkiem
   przy tekście zamiast drugim elementem kompozycji.

   flex: 0 0 auto — pozycja bez zdjęcia dostaje <span> z inicjałami, a ten,
   w odróżnieniu od <img>, rozciągnąłby się na całą szerokość karty. */
.foreto-person__photo {
	flex: 0 0 auto;
	width: 116px;
	height: 116px;
}

/* Nazwisko i rola to JEDNA informacja czytana razem, więc odstępu między nimi
   nie ma — jest między podpisem a tym, co niżej.

   min-width: 0 zdejmuje domyślny minimalny rozmiar elementu flex: bez tego
   długie nazwisko rozpycha kartę, zamiast się złamać. */
.foreto-person__who {
	flex: 1 1 200px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.foreto-person__name {
	margin: 0;
	font-size: var(--foreto-font-size-h4);
	line-height: var(--foreto-line-h4);
	font-weight: var(--wp--custom--weight--bold);
	text-wrap: balance;
}

.foreto-person__role {
	margin: 0;
	font-size: var(--foreto-font-size-card);
	line-height: var(--foreto-space-5);
	color: var(--foreto-text-muted);
	text-wrap: balance;
}

/* Opis stopniem i kolorem tekstu pomocniczego — pierwszeństwo ma zostać przy
   nazwisku. pretty, nie balance: to kilka zdań, a balance wyrównuje wiersze
   tylko w krótkich blokach. */
.foreto-person__bio {
	margin: 0;
	font-size: var(--foreto-font-size-body);
	line-height: var(--foreto-line-body);
	color: var(--foreto-text-muted);
	text-wrap: pretty;
}

/* Odsyłacz kończy kartę, a nie stoi tuż pod opisem: karty o opisach różnej
   długości mają go wtedy w tym samym wierszu. Działa dzięki
   --foreto-grid-align: stretch wyżej — bez rozciągnięcia komórki nie ma czego
   dobierać. align-self, bo w kolumnie flexa element rozciągnąłby się na całą
   szerokość karty i cel kliknięcia sięgałby daleko poza napis. */
.foreto-person__link {
	align-self: flex-start;
	margin-top: auto;
}