/**
 * Moduł: karta osoby.
 *
 * founder — Figma 14557:4247: karta 551×310 na jaśniejszym granacie, wnętrze 511×270
 * z marginesem 20, zdjęcie 210×270, kolumna opisu 301 z wcięciem 27, nazwa 32/1.2,
 * stanowisko wersalikami 16/24, biogram 16/24 przyklejony do dołu, w tle trzy okręgi
 * 447 obcięte krawędzią karty.
 *
 * advisor — Figma 14557:4808: karta 313×449 na F2F6F9 z marginesem 45, etykieta
 * „KONTAKT" 16/24 w zieleni, zdjęcie 94×94 z zaokrąglonym narożnikiem, podpis 24/34
 * i stanowisko wersalikami wyśrodkowane, telefon i e-mail 24/34 do lewej.
 * Okręgi w tym wariancie są cieńsze i wychodzą lewą górną krawędzią.
 */

.card-person {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-sm);
	isolation: isolate;
}

.card-person__body {
	position: relative;
	z-index: 1;
}

.card-person__media {
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.card-person__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-person__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 400;
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
}

.card-person__role {
	margin: 0;
	font-size: var(--fs-body-sm);
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.card-person__text {
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: 24px;
}

/* ------------------------------------------------------------------ *
 * founder — granatowa karta z portretem po lewej
 * ------------------------------------------------------------------ */

.card-person--founder {
	min-height: 310px;
	padding: 20px;
	background-color: var(--color-navy-light);
	color: var(--color-white);
}

.card-person--founder .card-person__body {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	min-height: 270px;
}

/* Kolumna treści stoi w drugim polu siatki także wtedy, gdy nie ma jeszcze zdjęcia:
   bez tego auto-placement wstawia ją w pas 210 px zarezerwowany na portret i biogram
   dostaje 183 px zamiast 274 z makiety. */
.card-person--founder .card-person__details {
	display: flex;
	grid-column: 2;
	flex-direction: column;
	justify-content: space-between;
	padding-left: 27px;
}

.card-person--founder .card-person__head {
	display: flex;
	flex-direction: column;
	gap: 21px;
}

.card-person--founder .card-person__text {
	margin-top: var(--space-lg);
}

/* Dekoracja z makiety: trzy koncentryczne okręgi 447 px wychodzące górną krawędzią. */
.card-person--founder .card-person__glow {
	position: absolute;
	right: -12%;
	top: -70%;
	width: 447px;
	height: 447px;
	border: 1px solid var(--color-primary-bright);
	border-radius: 50%;
	opacity: 0.35;
	pointer-events: none;
}

.card-person--founder .card-person__glow::before,
.card-person--founder .card-person__glow::after {
	content: "";
	position: absolute;
	width: 447px;
	height: 447px;
	border: 1px solid var(--color-primary-bright);
	border-radius: 50%;
}

.card-person--founder .card-person__glow::before {
	right: 30%;
	top: 30%;
}

.card-person--founder .card-person__glow::after {
	right: 8%;
	top: 22%;
	opacity: 0.6;
}

/* ------------------------------------------------------------------ *
 * advisor — jasna karta kontaktu przy formularzu CV
 * ------------------------------------------------------------------ */

.card-person--advisor {
	display: flex;
	flex-direction: column;
	min-height: 449px;
	padding: 45px;
	background-color: var(--color-surface-soft);
	color: var(--color-ink);
}

.card-person--advisor .card-person__label {
	position: relative;
	z-index: 1;
	margin: 0 0 26px;
	font-size: var(--fs-label);
	font-weight: 500;
	line-height: var(--lh-label);
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-primary-bright);
}

.card-person--advisor .card-person__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.card-person--advisor .card-person__media {
	align-self: center;
	width: 94px;
	height: 94px;
}

.card-person--advisor .card-person__details {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.card-person--advisor .card-person__head {
	display: flex;
	flex-direction: column;
	gap: 21px;
	text-align: center;
}

.card-person--advisor .card-person__name {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
}

/* Stanowisko i dane kontaktowe są w makiecie jednolinijkowe — stanowisko jest
   szersze niż kolumna (262 przy 223) i wychodzi symetrycznie poza nią (14557:4820),
   a adres e-mail przeglądarka chętnie łamie po „@”. */
.card-person--advisor .card-person__role {
	color: var(--color-ink);
	white-space: nowrap;
}

.card-person--advisor .card-person__contact-link {
	white-space: nowrap;
}

/* Cieńsze, przerywane okręgi wychodzące lewą górną krawędzią karty. */
.card-person--advisor .card-person__glow {
	position: absolute;
	left: -38%;
	top: -22%;
	width: 290px;
	height: 290px;
	border: 1px solid var(--color-primary-bright);
	border-radius: 50%;
	opacity: 0.5;
	pointer-events: none;
}

.card-person--advisor .card-person__glow::before,
.card-person--advisor .card-person__glow::after {
	content: "";
	position: absolute;
	width: 290px;
	height: 290px;
	border: 1px dashed var(--color-primary-bright);
	border-radius: 50%;
}

.card-person--advisor .card-person__glow::before {
	left: 30%;
	top: 30%;
}

.card-person--advisor .card-person__glow::after {
	left: 8%;
	top: 22%;
	opacity: 0.7;
}

.card-person__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card-person__contact-link {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.card-person__contact-link:hover {
	color: var(--color-primary);
}

.card-person__contact-link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.card-person__contact-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

@media (max-width: 991px) {
	.card-person--founder .card-person__body {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.card-person--founder .card-person__media {
		max-width: 210px;
	}

	.card-person--founder .card-person__details {
		grid-column: 1;
		padding-left: 0;
	}

	.card-person--advisor {
		min-height: 0;
		padding: var(--space-lg) var(--space-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.card-person__contact-link {
		transition: none;
	}
}