.person-profile__aside {
	--luk-person-sticky-offset: 2rem;
}

@media (min-width: 768px) {
	.person-profile__aside-inner {
		position: sticky;
		top: var(--luk-person-sticky-offset);
	}
}

.person-profile__image {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.person-profile__linkedin-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.person-profile__linkedin-link:hover,
.person-profile__linkedin-link:focus-visible {
	text-decoration: underline;
}

.person-profile__linkedin-icon {
	flex: 0 0 auto;
}

.person-profile__area {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.luk-people-slider {
	overflow: hidden;
}

/*
 * Szerokość slajdu ZANIM wystartuje Swiper.
 *
 * Arkusz Swipera daje `.swiper-slide { width: 100% }`, a właściwą szerokość
 * dopisuje dopiero JavaScript, stylem inline. Między wyrenderowaniem HTML-a
 * a inicjalizacją widać więc jedną kartę na całą szerokość sekcji — tym
 * bardziej rzucającą się w oczy, że zdjęcie ma proporcje 3:4, więc rośnie
 * też w pionie.
 *
 * Te reguły powtarzają `slidesPerView` z `people-slider.js` wzorem Swipera
 * (`(kontener + odstęp) / liczba - odstęp`), więc karta od pierwszej klatki
 * ma docelowy rozmiar. Po inicjalizacji styl inline i tak je przykrywa —
 * dlatego BEZ `!important`, inaczej zablokowałyby Swiperowi wyliczenia.
 *
 * Zmieniasz progi albo `slidesPerView` w JS? Zmień je również tutaj.
 */
.luk-people-slider .swiper-slide {
	width: calc((100% + 24px) / 1.15 - 24px);
	margin-right: 24px;
}

/*
 * Odstęp między slajdami też pochodzi ze stylu inline (`spaceBetween`), więc
 * przed inicjalizacją karty się stykają. NIE `gap` na wrapperze: Swiper liczy
 * przesunięcia z marginesów, a `gap` doszedłby do nich, dając po starcie
 * podwójną przerwę.
 */
.luk-people-slider .swiper-slide:last-child {
	margin-right: 0;
}

@media (min-width: 576px) {
	.luk-people-slider .swiper-slide {
		width: calc((100% + 24px) / 2.15 - 24px);
	}
}

@media (min-width: 768px) {
	.luk-people-slider .swiper-slide {
		width: calc((100% + 24px) / 3 - 24px);
	}
}

@media (min-width: 1200px) {
	.luk-people-slider .swiper-slide {
		width: calc((100% + 24px) / 4 - 24px);
	}
}

.luk-people-slider__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

/*
 * Strzałki są w HTML-u od razu, ale o tym, czy w ogóle są potrzebne, decyduje
 * dopiero Swiper (`watchOverflow` → klasa `swiper-button-lock` → `display: none`
 * z arkusza Swipera). Zanim wystartuje — a startuje po kilkudziesięciu skryptach
 * strony — widać strzałki także tam, gdzie nie ma czego przewijać (np. trzy
 * osoby przy czterech slajdach na widok). Domyślnie więc są niewidoczne, a
 * pokazuje je klasa dokładana po inicjalizacji (`people-slider.js`).
 *
 * `visibility`, nie `display`: miejsce w nagłówku zostaje zarezerwowane, więc
 * pojawienie się strzałek niczego nie przesuwa. Wariant awaryjny bez Swipera
 * chowa całą nawigację na stałe (`--fallback` niżej), a wtedy ta reguła i tak
 * nie ma nic do roboty.
 */
.luk-people-slider__nav {
	display: flex;
	gap: 0.5rem;
	visibility: hidden;
}

.luk-people-slider--ready .luk-people-slider__nav {
	visibility: visible;
}

.luk-people-slider__button {
	width: 47px;
	height: 16px;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;
}

.luk-people-slider__button--prev {
	background-image: url("data:image/svg+xml,%3csvg%20width='47'%20height='16'%20viewBox='0%200%2047%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1030_2772)'%3e%3cpath%20d='M46%208.99004C46.5523%208.99004%2047%208.54233%2047%207.99004C47%207.43776%2046.5523%206.99004%2046%206.99004L46%208.99004ZM0.292901%207.28293C-0.0975993%207.67346%20-0.0975993%208.30662%200.292901%208.69715L6.6569%2015.0611C7.0474%2015.4516%207.6805%2015.4516%208.0711%2015.0611C8.4616%2014.6706%208.4616%2014.0374%208.0711%2013.6469L2.4142%207.99004L8.0711%202.33321C8.4616%201.94271%208.4616%201.30951%208.0711%200.919009C7.6805%200.528409%207.0474%200.528409%206.6569%200.919009L0.292901%207.28293ZM46%206.99004L1%206.99004L1%208.99004L46%208.99004L46%206.99004Z'%20fill='%23030014'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1030_2772'%3e%3crect%20width='47'%20height='16'%20fill='white'%20transform='translate(47%2016)%20rotate(-180)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
	margin-right: 10px;
}

.luk-people-slider__button--next {
	background-image: url("data:image/svg+xml,%3csvg%20width='47'%20height='16'%20viewBox='0%200%2047%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1%207.00977C0.447715%207.00977%204.82823e-08%207.45748%200%208.00977C-4.82823e-08%208.56205%200.447715%209.00977%201%209.00977L1%207.00977ZM46.7071%208.71688C47.0976%208.32635%2047.0976%207.69319%2046.7071%207.30266L40.3431%200.938701C39.9526%200.548177%2039.3195%200.548177%2038.9289%200.938701C38.5384%201.32923%2038.5384%201.96239%2038.9289%202.35291L44.5858%208.00977L38.9289%2013.6666C38.5384%2014.0571%2038.5384%2014.6903%2038.9289%2015.0808C39.3195%2015.4714%2039.9526%2015.4714%2040.3431%2015.0808L46.7071%208.71688ZM1%209.00977L46%209.00977L46%207.00977L1%207.00977L1%209.00977Z'%20fill='%23030014'/%3e%3c/svg%3e");
}

.luk-people-slider__button-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.luk-people-slider__button[disabled],
.luk-people-slider__button.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/*
 * Odstępy jawnymi marginesami, nie jednym `gap` na kolumnie: stanowisko należy
 * do nazwiska i ma się trzymać tuż pod nim, a dopiero zajawka ma odskoczyć.
 * Wspólny `gap` traktował oba przejścia tak samo i stanowisko wisiało w
 * połowie drogi między nazwiskiem a opisem.
 */
.luk-people-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.luk-people-card__media {
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 3 / 4;
	margin-bottom: 0.75rem;
}

.luk-people-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.luk-people-card:hover .luk-people-card__media img,
.luk-people-card:focus-visible .luk-people-card__media img {
	transform: scale(1.03);
}

/*
 * `!important` i podwójny selektor, bo nazwisko nosi też klasę rozmiaru
 * z motywu (`.h6`), a arkusz motywu ładuje się po naszym.
 */
.luk-people-card .luk-people-card__name {
	margin: 0 0 0.35rem !important;
	line-height: 1.3 !important;
	font-weight: 600;
}

.luk-people-card .luk-people-card__position {
	margin: 0 0 0.85rem !important;
	line-height: 1.25 !important;
}

.luk-people-card__position {
	margin: 0 0 0.85rem;
	line-height: 1.25;
	opacity: 0.75;
}

/* Bez stanowiska zajawka nie może się skleić z nazwiskiem. */
.luk-people-card__name + .luk-people-card__excerpt {
	margin-top: 0.6rem;
}

.luk-people-card__excerpt {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.luk-people-slider--fallback .swiper-wrapper {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
}

.luk-people-slider--fallback .swiper-slide {
	flex: 0 0 80%;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.luk-people-slider--fallback .swiper-slide {
		flex-basis: 30%;
	}
}

.luk-people-slider--fallback .luk-people-slider__nav {
	display: none;
}

.person-profile__projects .ul-primary-list {
	margin: 0;
	padding-left: 1.15em;
}

.luk-people-slider__button {
	transition: opacity 0.2s ease;
}

.luk-people-slider__button:hover {
	opacity: 0.65;
}

.luk-people-slider__button:focus-visible {
	opacity: 0.65;
}