/* =========================================================
   O NAS — ZESPÓŁ
   ========================================================= */

.on-about-team {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	padding-block:
		clamp(5rem, 8vw, 7.5rem);

	background:
		radial-gradient(
			circle at 8% 12%,
			rgba(211, 179, 106, 0.045),
			transparent 25rem
		),
		radial-gradient(
			circle at 92% 88%,
			rgba(211, 179, 106, 0.035),
			transparent 28rem
		),
		var(--color-background);
}


/* =========================================================
   DELIKATNY SEPARATOR SEKCJI
   ========================================================= */

.on-about-team::before {
	position: absolute;

	top: 0;
	right: 0;
	left: 0;

	height: 1px;

	content: "";

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			transparent 5%,
			rgba(255, 255, 255, 0.045) 25%,
			rgba(211, 179, 106, 0.11) 50%,
			rgba(255, 255, 255, 0.045) 75%,
			transparent 95%
		);
}


/* =========================================================
   DELIKATNA POŚWIATA W TLE
   ========================================================= */

.on-about-team::after {
	position: absolute;

	top: 16%;
	left: 50%;

	z-index: -1;

	width: 48rem;
	height: 22rem;

	content: "";

	pointer-events: none;

	border-radius: 50%;

	background:
		rgba(211, 179, 106, 0.025);

	filter: blur(7rem);

	transform:
		translateX(-50%);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.on-about-team > .container {
	position: relative;
	z-index: 1;
}


/* =========================================================
   DEKORACJE NAROŻNIKÓW
   ========================================================= */

/*
 * Dwa minimalistyczne "L" w przeciwległych rogach.
 * Są bardzo subtelne — mają uzupełniać sekcję,
 * a nie konkurować z ludźmi na zdjęciach.
 */

.on-about-team > .container::before,
.on-about-team > .container::after {
	position: absolute;

	width: clamp(3.5rem, 6vw, 6rem);
	height: clamp(3.5rem, 6vw, 6rem);

	content: "";

	pointer-events: none;

	opacity: 0.42;
}


/* lewy górny */

.on-about-team > .container::before {
	top: -1.5rem;
	left: 0;

	border-top:
		1px solid
		rgba(211, 179, 106, 0.4);

	border-left:
		1px solid
		rgba(211, 179, 106, 0.4);
}


/* prawy dolny */

.on-about-team > .container::after {
	right: 0;
	bottom: -1.5rem;

	border-right:
		1px solid
		rgba(211, 179, 106, 0.32);

	border-bottom:
		1px solid
		rgba(211, 179, 106, 0.32);
}


/* =========================================================
   NAGŁÓWEK
   ========================================================= */

.on-about-team__header {
	position: relative;

	width: min(100%, 52rem);
	max-width: 52rem;

	margin:
		0 auto
		clamp(3.5rem, 5vw, 4.75rem);

	text-align: center;
}


/* =========================================================
   NADTYTUŁ
   ========================================================= */

.on-about-team__header .section-eyebrow {
	display: block;

	width: 100%;

	margin:
		0 0 0.95rem;

	color: var(--color-accent);

	font-size: 0.72rem;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.14em;

	text-align: center;
	text-transform: uppercase;
}


/* =========================================================
   TYTUŁ
   ========================================================= */

.on-about-team__title {
	display: block;

	width: 100%;
	max-width: none;

	margin: 0 auto;

	color: var(--color-white);

	font-size:
		clamp(
			2.75rem,
			4vw,
			4rem
		);

	font-weight: 800;

	line-height: 1.02;

	letter-spacing: -0.045em;

	text-align: center;

	text-wrap: balance;
}


/* =========================================================
   INTRO
   ========================================================= */

.on-about-team__intro {
	width: 100%;
	max-width: 38rem;

	margin:
		1.1rem auto 0;

	color: var(--color-text-muted);

	font-size: 0.95rem;
	line-height: 1.7;

	text-align: center;

	text-wrap: pretty;
}


/* =========================================================
   KRÓTKA DEKORACJA POD NAGŁÓWKIEM
   ========================================================= */

.on-about-team__header::after {
	display: block;

	width: 3.25rem;
	height: 1px;

	margin:
		1.6rem auto 0;

	content: "";

	background:
		linear-gradient(
			90deg,
			transparent,
			var(--color-accent),
			transparent
		);

	opacity: 0.7;
}


/* =========================================================
   GRID
   ========================================================= */

.on-about-team__grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap:
		clamp(1rem, 1.5vw, 1.35rem);
}


/* =========================================================
   KARTA
   ========================================================= */

.on-about-team__member {
	--team-x: 50%;
	--team-y: 50%;

	position: relative;

	display: grid;

	grid-template-columns:
		minmax(14rem, 0.92fr)
		minmax(0, 1.08fr);

	min-width: 0;
	min-height: 30rem;

	overflow: hidden;

	isolation: isolate;

	border:
		1px solid
		rgba(255, 255, 255, 0.09);

	border-radius:
		var(--radius-medium);

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.022),
			transparent 55%
		),
		var(--color-surface);

	box-shadow:
		0 1.25rem 3rem
		rgba(0, 0, 0, 0.14);

	transition:
		transform
			550ms
			cubic-bezier(0.22, 1, 0.36, 1),

		border-color
			350ms ease,

		box-shadow
			550ms
			cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   DRUGA KARTA — ODBICIE UKŁADU
   ========================================================= */

.on-about-team__member:nth-child(even)
.on-about-team__photo {
	grid-column: 2;
	grid-row: 1;
}


.on-about-team__member:nth-child(even)
.on-about-team__content {
	grid-column: 1;
	grid-row: 1;
}


/* =========================================================
   SPOTLIGHT POD KURSOREM
   ========================================================= */

.on-about-team__member::before {
	position: absolute;

	inset: 0;

	z-index: 4;

	content: "";

	pointer-events: none;

	background:
		radial-gradient(
			circle at
			var(--team-x)
			var(--team-y),

			rgba(211, 179, 106, 0.08),

			rgba(211, 179, 106, 0.018) 7rem,

			transparent 15rem
		);

	opacity: 0;

	transition:
		opacity 350ms ease;
}


/* =========================================================
   ZŁOTA LINIA NA GÓRZE KARTY
   ========================================================= */

.on-about-team__member::after {
	position: absolute;

	top: 0;
	left:
		clamp(1.5rem, 2.5vw, 2rem);

	z-index: 5;

	width: 5rem;
	height: 1px;

	content: "";

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			var(--color-accent),
			transparent
		);

	opacity: 0.16;

	transform:
		scaleX(0.35);

	transform-origin: left;

	transition:
		opacity 350ms ease,

		transform
			550ms
			cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   HOVER KARTY
   ========================================================= */

@media (hover: hover) {

	.on-about-team__member:hover {
		border-color:
			rgba(211, 179, 106, 0.32);

		box-shadow:
			0 2rem 4.5rem
				rgba(0, 0, 0, 0.28),

			0 0 3rem
				rgba(211, 179, 106, 0.025);

		transform:
			translateY(-0.4rem);
	}


	.on-about-team__member:hover::before {
		opacity: 1;
	}


	.on-about-team__member:hover::after {
		opacity: 0.9;

		transform:
			scaleX(1);
	}

}


/* =========================================================
   ZDJĘCIE
   ========================================================= */

.on-about-team__photo {
	position: relative;

	min-width: 0;
	min-height: 100%;

	margin: 0;

	overflow: hidden;

	background:
		var(--color-background);
}


/* =========================================================
   GRADIENT ZDJĘCIA — PIERWSZA KARTA
   ========================================================= */

.on-about-team__photo::after {
	position: absolute;

	inset: 0;

	z-index: 1;

	content: "";

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			transparent 52%,
			rgba(16, 19, 23, 0.62) 100%
		),

		linear-gradient(
			180deg,
			rgba(8, 10, 12, 0.03),
			transparent 45%,
			rgba(8, 10, 12, 0.28) 100%
		);
}


/* =========================================================
   GRADIENT ZDJĘCIA — DRUGA KARTA
   ========================================================= */

.on-about-team__member:nth-child(even)
.on-about-team__photo::after {
	background:
		linear-gradient(
			270deg,
			transparent 52%,
			rgba(16, 19, 23, 0.62) 100%
		),

		linear-gradient(
			180deg,
			rgba(8, 10, 12, 0.03),
			transparent 45%,
			rgba(8, 10, 12, 0.28) 100%
		);
}


/* =========================================================
   OBRAZ
   ========================================================= */

.on-about-team__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position:
		var(
			--team-photo-position,
			center center
		);

	filter:
		saturate(0.92)
		brightness(0.92);

	transform:
		scale(1.01);

	transition:
		transform
			900ms
			cubic-bezier(0.22, 1, 0.36, 1),

		filter
			500ms ease;
}


@media (hover: hover) {

	.on-about-team__member:hover
	.on-about-team__image {
		filter:
			saturate(1)
			brightness(0.98);

		transform:
			scale(1.045);
	}

}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.on-about-team__placeholder {
	display: grid;

	width: 100%;
	height: 100%;

	min-height: 26rem;

	padding: 2rem;

	place-items: center;

	color:
		var(--color-text-muted);

	text-align: center;
}


/* =========================================================
   TREŚĆ
   ========================================================= */

.on-about-team__content {
	position: relative;

	z-index: 2;

	display: flex;

	min-width: 0;

	align-items: center;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.018),
			transparent 52%
		);
}


.on-about-team__content-inner {
	width: 100%;

	padding:
		clamp(
			1.75rem,
			3vw,
			3rem
		);
}


/* =========================================================
   STANOWISKO
   ========================================================= */

.on-about-team__role {
	display: block;

	width: fit-content;

	margin-bottom: 0.85rem;

	color: var(--color-accent);

	font-size: 0.65rem;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.12em;

	text-transform: uppercase;
}


/* =========================================================
   IMIĘ
   ========================================================= */

.on-about-team__name {
	max-width: 13ch;

	margin: 0;

	color: var(--color-white);

	font-family:
		var(--font-heading);

	font-size:
		clamp(
			1.75rem,
			2.2vw,
			2.35rem
		);

	font-weight: 750;

	line-height: 1.05;

	letter-spacing: -0.035em;

	text-wrap: balance;
}


/* =========================================================
   KSYWKA
   ========================================================= */

.on-about-team__nickname {
	display: block;

	width: fit-content;

	margin-top: 0.75rem;

	color: var(--color-accent);

	font-size: 0.82rem;
	font-weight: 650;
}


/* =========================================================
   BIO
   ========================================================= */

.on-about-team__bio {
	max-width: 24rem;

	margin:
		1.65rem 0 0;

	color:
		rgba(244, 242, 237, 0.64);

	font-size: 0.86rem;

	line-height: 1.75;

	text-wrap: pretty;
}


/* =========================================================
   SOCIAL MEDIA
   ========================================================= */

.on-about-team__socials {
	display: flex;

	flex-wrap: wrap;

	gap: 0.6rem;

	margin-top: 1.8rem;
}


.on-about-team__social {
	display: grid;

	width: 2.65rem;
	height: 2.65rem;

	place-items: center;

	overflow: hidden;

	border:
		1px solid
		rgba(211, 179, 106, 0.3);

	border-radius: 50%;

	background:
		rgba(211, 179, 106, 0.02);

	transition:
		border-color 300ms ease,
		background-color 300ms ease,

		transform
			400ms
			cubic-bezier(0.22, 1, 0.36, 1);
}


.on-about-team__social-icon {
	display: block;

	width: 1.05rem;
	height: 1.05rem;

	object-fit: contain;

	opacity: 0.72;

	filter:
		brightness(0)
		invert(1);

	transition:
		opacity 300ms ease,
		transform 350ms ease;
}


@media (hover: hover) {

	.on-about-team__social:hover {
		border-color:
			var(--color-accent);

		background:
			rgba(211, 179, 106, 0.1);

		transform:
			translateY(-0.15rem);
	}


	.on-about-team__social:hover
	.on-about-team__social-icon {
		opacity: 1;

		transform:
			scale(1.08);
	}

}


/* =========================================================
   KOMUNIKAT EDYTORA
   ========================================================= */

.on-about-team__message {
	padding: 2rem;

	color:
		var(--color-text-muted);

	text-align: center;

	border:
		1px dashed
		var(--color-border);

	border-radius:
		var(--radius-medium);
}


/* =========================================================
   ANIMACJA — STAN POCZĄTKOWY
   ========================================================= */

.on-about-team.is-animated
.on-about-team__header > * {
	opacity: 0;

	transform:
		translateY(1rem);
}


.on-about-team.is-animated
.on-about-team__member {
	opacity: 0;

	transform:
		translateY(1.5rem)
		scale(0.99);
}


/* =========================================================
   REVEAL NAGŁÓWKA
   ========================================================= */

.on-about-team.is-animated.is-visible
.on-about-team__header > * {
	animation:
		teamHeaderIn
		700ms
		cubic-bezier(0.22, 1, 0.36, 1)
		forwards;
}


.on-about-team.is-animated.is-visible
.on-about-team__header > :nth-child(1) {
	animation-delay: 40ms;
}


.on-about-team.is-animated.is-visible
.on-about-team__header > :nth-child(2) {
	animation-delay: 110ms;
}


.on-about-team.is-animated.is-visible
.on-about-team__header > :nth-child(3) {
	animation-delay: 180ms;
}


/* =========================================================
   REVEAL KART
   ========================================================= */

.on-about-team.is-animated.is-visible
.on-about-team__member {
	animation:
		teamCardIn
		850ms
		cubic-bezier(0.22, 1, 0.36, 1)
		forwards;

	animation-delay:
		calc(
			220ms +
			(var(--team-index, 0) * 120ms)
		);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes teamHeaderIn {

	from {
		opacity: 0;

		transform:
			translateY(1rem);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}

}


@keyframes teamCardIn {

	from {
		opacity: 0;

		transform:
			translateY(1.5rem)
			scale(0.99);
	}

	to {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}

}


/* =========================================================
   MNIEJSZY LAPTOP
   ========================================================= */

@media (max-width: 74.99rem) {

	.on-about-team__grid {
		grid-template-columns: 1fr;
	}


	.on-about-team__member {
		grid-template-columns:
			minmax(18rem, 0.82fr)
			minmax(0, 1.18fr);

		min-height: 27rem;
	}


	.on-about-team__name {
		max-width: none;
	}

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 61.99rem) {

	.on-about-team {
		padding-block: 5rem;
	}


	.on-about-team__header {
		margin-bottom: 3rem;
	}


	.on-about-team__member {
		grid-template-columns:
			minmax(16rem, 0.9fr)
			minmax(0, 1.1fr);
	}


	.on-about-team > .container::before,
	.on-about-team > .container::after {
		opacity: 0.26;
	}

}


/* =========================================================
   TELEFON
   ========================================================= */

@media (max-width: 47.99rem) {

	.on-about-team {
		padding-block: 4rem;
	}


	/* narożniki znikają na telefonie */

	.on-about-team > .container::before,
	.on-about-team > .container::after {
		display: none;
	}


	.on-about-team__header {
		width: 100%;
		max-width: none;

		margin-bottom: 2.5rem;

		text-align: left;
	}


	.on-about-team__header .section-eyebrow {
		width: auto;

		margin-bottom: 0.75rem;

		text-align: left;
	}


	.on-about-team__title {
		width: auto;

		max-width: 12ch;

		margin-left: 0;

		font-size:
			clamp(
				2.4rem,
				11vw,
				3rem
			);

		text-align: left;
	}


	.on-about-team__intro {
		width: auto;
		max-width: none;

		margin-left: 0;

		text-align: left;
	}


	.on-about-team__header::after {
		margin-left: 0;
	}


	.on-about-team__member,
	.on-about-team__member:nth-child(even) {
		display: grid;

		grid-template-columns: 1fr;

		min-height: 0;
	}


	.on-about-team__photo,
	.on-about-team__member:nth-child(even)
	.on-about-team__photo {
		grid-column: 1;
		grid-row: 1;

		min-height: 25rem;
	}


	.on-about-team__content,
	.on-about-team__member:nth-child(even)
	.on-about-team__content {
		grid-column: 1;
		grid-row: 2;
	}


	.on-about-team__photo::after,
	.on-about-team__member:nth-child(even)
	.on-about-team__photo::after {
		background:
			linear-gradient(
				180deg,
				transparent 52%,
				var(--color-surface) 100%
			);
	}


	.on-about-team__content-inner {
		padding:
			1.6rem
			1.4rem
			1.75rem;
	}


	.on-about-team__name {
		max-width: none;

		font-size:
			clamp(
				1.7rem,
				8vw,
				2.15rem
			);
	}


	.on-about-team__bio {
		max-width: none;

		font-size: 0.84rem;
	}

}


/* =========================================================
   BARDZO MAŁY TELEFON
   ========================================================= */

@media (max-width: 23rem) {

	.on-about-team__photo {
		min-height: 22rem;
	}


	.on-about-team__content-inner {
		padding: 1.25rem;
	}

}


/* =========================================================
   REDUKCJA RUCHU
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.on-about-team.is-animated
	.on-about-team__header > *,

	.on-about-team.is-animated
	.on-about-team__member {
		opacity: 1;

		transform: none;

		animation: none;
	}


	.on-about-team__member,
	.on-about-team__member::before,
	.on-about-team__member::after,
	.on-about-team__image,
	.on-about-team__social,
	.on-about-team__social-icon {
		transition: none;
	}


	.on-about-team__member:hover,
	.on-about-team__member:hover
	.on-about-team__image,
	.on-about-team__social:hover {
		transform: none;
	}

}