/* =========================================================
   BLOK: O NAS — HERO
   ========================================================= */

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

	padding-top:
		clamp(1.5rem, 2vw, 2.25rem);

	padding-bottom:
		clamp(2.75rem, 3.5vw, 3.75rem);

	background:
		radial-gradient(
			circle at 78% 25%,
			rgba(211, 179, 106, 0.05),
			transparent 34rem
		),
		var(--color-background);
}


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

.on-about-hero > .container {
	width:
		min(
			calc(100% - 3rem),
			94rem
		);

	max-width: 94rem;
}


/* =========================================================
   GŁÓWNY PANEL
   ========================================================= */

.on-about-hero__layout {
	position: relative;

	min-height:
		clamp(
			38rem,
			70svh,
			43rem
		);

	overflow: hidden;
	isolation: isolate;

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

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

	background:
		#0b0e11;

	box-shadow:
		0 2rem 6rem
		rgba(0, 0, 0, 0.28);
}


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

.on-about-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;

	min-width: 0;
	min-height: 0;

	overflow: hidden;
	isolation: isolate;

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


.on-about-hero__picture {
	position: absolute;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;
}


.on-about-hero__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position:
		var(
			--about-image-position-desktop,
			center center
		);

	filter:
		saturate(0.9)
		brightness(0.93);

	transform:
		scale(1.01);

	transition:
		transform
			1200ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
		filter 600ms ease;
}


/* =========================================================
   GRADIENT NAD ZDJĘCIEM
   ========================================================= */

.on-about-hero__media::after {
	position: absolute;
	inset: 0;
	z-index: 1;

	content: "";

	pointer-events: none;

	background:
		linear-gradient(
			90deg,

			rgba(8, 10, 12, 0.99)
			0%,

			rgba(8, 10, 12, 0.97)
			17%,

			rgba(8, 10, 12, 0.92)
			30%,

			rgba(8, 10, 12, 0.74)
			43%,

			rgba(8, 10, 12, 0.34)
			58%,

			rgba(8, 10, 12, 0.08)
			76%,

			rgba(8, 10, 12, 0.02)
			100%
		),

		linear-gradient(
			0deg,

			rgba(8, 10, 12, 0.46)
			0%,

			rgba(8, 10, 12, 0.08)
			34%,

			transparent
			58%
		),

		linear-gradient(
			180deg,

			rgba(8, 10, 12, 0.12),

			transparent
			26%
		);
}


/* =========================================================
   WINIETA
   ========================================================= */

.on-about-hero__layout::after {
	position: absolute;
	inset: 0;
	z-index: 2;

	content: "";

	pointer-events: none;

	box-shadow:
		inset 0 0 7rem
		rgba(0, 0, 0, 0.18);
}


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

.on-about-hero__content {
	position: relative;
	z-index: 4;

	display: flex;
	flex-direction: column;
	justify-content: center;

	width:
		min(
			58%,
			46rem
		);

	min-height:
		clamp(
			38rem,
			70svh,
			43rem
		);

	padding:
		clamp(
			2.5rem,
			3.4vw,
			3.75rem
		);
}


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

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

	width: fit-content;

	margin-bottom: 0.95rem;

	color:
		var(--color-accent);

	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.14em;

	text-transform: uppercase;
}


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

.on-about-hero__title {
	max-width: 11.5ch;

	margin: 0;

	color:
		var(--color-white);

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

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

	font-weight: 800;

	line-height: 0.99;

	letter-spacing:
		-0.05em;

	text-wrap: balance;

	text-shadow:
		0 0.3rem 2rem
		rgba(0, 0, 0, 0.32);
}


/* =========================================================
   ZŁOTA KRESKA
   ========================================================= */

.on-about-hero__accent {
	display: block;

	width: 4rem;
	height: 2px;

	margin:
		1.15rem 0
		1.35rem;

	background:
		linear-gradient(
			90deg,
			var(--color-accent),
			rgba(211, 179, 106, 0.18)
		);
}


/* =========================================================
   OPIS
   ========================================================= */

.on-about-hero__description {
	max-width: 37rem;

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

	font-size:
		clamp(
			0.86rem,
			0.9vw,
			0.96rem
		);

	line-height: 1.65;

	text-wrap: pretty;
}


.on-about-hero__description > *:first-child {
	margin-top: 0;
}


.on-about-hero__description > *:last-child {
	margin-bottom: 0;
}


.on-about-hero__description p {
	margin:
		0 0 0.7rem;
}


/* =========================================================
   WYRÓŻNIONY TEKST
   ========================================================= */

.on-about-hero__highlight {
	max-width: 36rem;

	margin:
		0.95rem 0 0;

	color:
		var(--color-accent);

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

	line-height: 1.5;
}


/* =========================================================
   BADGE
   ========================================================= */

.on-about-hero__badges {
	display: grid;

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

	gap:
		clamp(
			0.65rem,
			1vw,
			1rem
		);

	width:
		min(
			100%,
			37rem
		);

	margin-top: 1.2rem;

	padding-top: 1rem;

	border-top:
		1px solid
		rgba(255, 255, 255, 0.1);
}


/* =========================================================
   POJEDYNCZY BADGE
   ========================================================= */

.on-about-hero__badge {
	display: flex;

	gap: 0.6rem;

	align-items: center;

	min-width: 0;
}


/* =========================================================
   IKONA BADGE
   ========================================================= */

.on-about-hero__badge-icon {
	display: grid;

	width: 2.2rem;
	height: 2.2rem;

	flex:
		0 0 2.2rem;

	place-items: center;

	color:
		var(--color-accent);

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

	border-radius: 50%;

	background:
		rgba(
			8,
			10,
			12,
			0.48
		);

	box-shadow:
		0 0.7rem 1.5rem
		rgba(0, 0, 0, 0.2);

	transition:
		color 300ms ease,
		border-color 300ms ease,
		background-color 300ms ease,
		transform
			400ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
}


.on-about-hero__badge-svg {
	display: block;

	width: 0.95rem;
	height: 0.95rem;
}


/* =========================================================
   TEKST BADGE
   ========================================================= */

.on-about-hero__badge-copy {
	display: grid;

	gap: 0.12rem;

	min-width: 0;
}


.on-about-hero__badge-copy strong {
	color:
		var(--color-white);

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

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

	line-height: 1.25;
}


.on-about-hero__badge-copy > span {
	color:
		rgba(
			244,
			242,
			237,
			0.55
		);

	font-size: 0.59rem;

	line-height: 1.35;
}


/* =========================================================
   KARTA DOŚWIADCZENIA
   ========================================================= */

.on-about-hero__experience {
	position: absolute;

	right:
		clamp(
			1.25rem,
			2.5vw,
			2.25rem
		);

	bottom:
		clamp(
			1.25rem,
			2.5vw,
			2rem
		);

	z-index: 6;

	display: grid;

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

	gap: 1.1rem;

	align-items: center;

	width:
		min(
			29rem,
			34%
		);

	padding:
		clamp(
			1rem,
			1.5vw,
			1.35rem
		);

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

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

	background:
		rgba(
			8,
			10,
			12,
			0.9
		);

	box-shadow:
		0 1.5rem 4rem
		rgba(0, 0, 0, 0.38);

	-webkit-backdrop-filter:
		blur(1rem);

	backdrop-filter:
		blur(1rem);
}


/* złoty detal */

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

	top: -1px;
	left: 1.4rem;

	width: 4rem;
	height: 1px;

	content: "";

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


/* =========================================================
   LICZBA 10+
   ========================================================= */

.on-about-hero__experience-number {
	display: grid;

	min-width: 6rem;

	padding-right: 1.1rem;

	border-right:
		1px solid
		rgba(255, 255, 255, 0.11);
}


.on-about-hero__experience-number strong {
	color:
		var(--color-accent);

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

	font-size:
		clamp(
			2.5rem,
			3.4vw,
			3.75rem
		);

	font-weight: 800;

	line-height: 0.9;

	letter-spacing:
		-0.055em;
}


.on-about-hero__experience-number span {
	margin-top: 0.45rem;

	color:
		var(--color-white);

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

	line-height: 1.25;

	letter-spacing: 0.065em;

	text-transform: uppercase;
}


/* =========================================================
   OPIS KARTY DOŚWIADCZENIA
   ========================================================= */

.on-about-hero__experience-text {
	max-width: 18rem;

	margin: 0;

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

	font-size: 0.64rem;

	line-height: 1.5;
}


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

.on-about-hero__placeholder {
	display: grid;

	width: 100%;
	height: 100%;

	place-items: center;

	padding: 2rem;

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

	text-align: center;
}


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

@media (hover: hover) {

	.on-about-hero__layout:hover
	.on-about-hero__image {
		filter:
			saturate(0.98)
			brightness(0.97);

		transform:
			scale(1.025);
	}


	.on-about-hero__badge:hover
	.on-about-hero__badge-icon {
		color:
			var(--color-background);

		border-color:
			var(--color-accent);

		background:
			var(--color-accent);

		transform:
			translateY(-0.1rem);
	}

}


/* =========================================================
   ANIMACJA — START
   ========================================================= */

.on-about-hero.is-animated
.on-about-hero__content > * {
	opacity: 0;

	transform:
		translateY(1rem);
}


.on-about-hero.is-animated
.on-about-hero__layout {
	opacity: 0;

	transform:
		translateY(1rem)
		scale(0.992);
}


/* =========================================================
   ANIMACJA — WEJŚCIE
   ========================================================= */

.on-about-hero.is-animated.is-visible
.on-about-hero__layout {
	animation:
		aboutPanelIn
		900ms
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		)
		forwards;
}


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


.on-about-hero.is-animated.is-visible
.on-about-hero__content > :nth-child(1) {
	animation-delay: 130ms;
}


.on-about-hero.is-animated.is-visible
.on-about-hero__content > :nth-child(2) {
	animation-delay: 190ms;
}


.on-about-hero.is-animated.is-visible
.on-about-hero__content > :nth-child(3) {
	animation-delay: 250ms;
}


.on-about-hero.is-animated.is-visible
.on-about-hero__content > :nth-child(4) {
	animation-delay: 310ms;
}


.on-about-hero.is-animated.is-visible
.on-about-hero__content > :nth-child(5) {
	animation-delay: 370ms;
}


.on-about-hero.is-animated.is-visible
.on-about-hero__content > :nth-child(6) {
	animation-delay: 430ms;
}


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

@keyframes aboutPanelIn {

	from {
		opacity: 0;

		transform:
			translateY(1rem)
			scale(0.992);
	}

	to {
		opacity: 1;

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

}


@keyframes aboutContentIn {

	from {
		opacity: 0;

		transform:
			translateY(1rem);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}

}


/* =========================================================
   LAPTOP / NISKI DESKTOP
   np. 1366×768, 1440×800, 1600×900
   ========================================================= */

@media
	(min-width: 62rem)
	and (max-height: 56rem) {

	.on-about-hero {
		/*
		 * Mały, ale widoczny odstęp od headera.
		 */
		padding-top: 1.5rem;

		padding-bottom: 2rem;
	}


	.on-about-hero > .container {
		width:
			min(
				calc(100% - 3rem),
				94rem
			);
	}


	/* =====================================================
	   WYŻSZY PANEL NA LAPTOPIE
	   ===================================================== */

	.on-about-hero__layout {
		min-height:
			clamp(
				37rem,
				calc(100svh - 7.25rem),
				40rem
			);
	}


	.on-about-hero__content {
		width:
			min(
				59%,
				43rem
			);

		min-height:
			clamp(
				37rem,
				calc(100svh - 7.25rem),
				40rem
			);

		padding:
			2.15rem
			clamp(
				2.3rem,
				3vw,
				2.9rem
			);
	}


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

	.on-about-hero__content
	.section-eyebrow {
		margin-bottom: 0.85rem;
	}


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

	.on-about-hero__title {
		max-width: 11.5ch;

		font-size:
			clamp(
				2.8rem,
				3.8vw,
				3.7rem
			);

		line-height: 0.99;
	}


	.on-about-hero__accent {
		width: 3.5rem;

		margin:
			0.95rem 0
			1.1rem;
	}


	/* =====================================================
	   OPIS
	   ===================================================== */

	.on-about-hero__description {
		max-width: 35rem;

		font-size: 0.82rem;

		line-height: 1.58;
	}


	.on-about-hero__description p {
		margin-bottom: 0.55rem;
	}


	.on-about-hero__highlight {
		margin-top: 0.8rem;

		font-size: 0.77rem;

		line-height: 1.5;
	}


	/* =====================================================
	   BADGE
	   ===================================================== */

	.on-about-hero__badges {
		gap: 0.8rem;

		margin-top: 1rem;

		padding-top: 0.9rem;
	}


	.on-about-hero__badge-icon {
		width: 2.1rem;
		height: 2.1rem;

		flex-basis: 2.1rem;
	}


	.on-about-hero__badge-svg {
		width: 0.92rem;
		height: 0.92rem;
	}


	.on-about-hero__badge-copy strong {
		font-size: 0.65rem;
	}


	.on-about-hero__badge-copy > span {
		font-size: 0.58rem;
	}


	/* =====================================================
	   KARTA 10+
	   ===================================================== */

	.on-about-hero__experience {
		right: 1.2rem;
		bottom: 1.2rem;

		width:
			min(
				27rem,
				35%
			);

		gap: 1rem;

		padding:
			1rem 1.1rem;
	}


	.on-about-hero__experience-number {
		min-width: 5.9rem;

		padding-right: 1rem;
	}


	.on-about-hero__experience-number strong {
		font-size: 3rem;
	}


	.on-about-hero__experience-text {
		font-size: 0.62rem;

		line-height: 1.45;
	}

}


/* =========================================================
   BARDZO NISKI LAPTOP
   np. 1366×720
   ========================================================= */

@media
	(min-width: 62rem)
	and (max-height: 47rem) {

	.on-about-hero {
		padding-top: 1.25rem;

		padding-bottom: 1.5rem;
	}


	/*
	 * Nie spłaszczamy hero.
	 * Nadal zachowujemy minimum 35rem.
	 */
	.on-about-hero__layout,
	.on-about-hero__content {
		min-height: 35rem;
	}


	.on-about-hero__content {
		padding:
			1.85rem
			2.4rem;
	}


	.on-about-hero__content
	.section-eyebrow {
		margin-bottom: 0.7rem;
	}


	.on-about-hero__title {
		font-size:
			clamp(
				2.55rem,
				3.55vw,
				3.4rem
			);
	}


	.on-about-hero__accent {
		margin:
			0.8rem 0
			0.9rem;
	}


	.on-about-hero__description {
		font-size: 0.78rem;

		line-height: 1.5;
	}


	.on-about-hero__description p {
		margin-bottom: 0.45rem;
	}


	.on-about-hero__highlight {
		margin-top: 0.65rem;

		font-size: 0.74rem;
	}


	.on-about-hero__badges {
		margin-top: 0.75rem;

		padding-top: 0.72rem;
	}


	.on-about-hero__experience {
		right: 1rem;
		bottom: 1rem;

		padding:
			0.85rem
			1rem;
	}


	.on-about-hero__experience-number strong {
		font-size: 2.75rem;
	}

}


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

@media (max-width: 61.99rem) {

	.on-about-hero {
		padding-top: 1.5rem;

		padding-bottom: 3rem;
	}


	.on-about-hero > .container {
		width:
			min(
				calc(100% - 2rem),
				70rem
			);
	}


	.on-about-hero__layout {
		display: grid;

		min-height: 0;
	}


	/* =====================================================
	   TREŚĆ NAD ZDJĘCIEM
	   ===================================================== */

	.on-about-hero__content {
		position: relative;
		z-index: 4;

		width: 100%;

		min-height: 0;

		padding:
			2.75rem
			2.25rem;

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


	.on-about-hero__media {
		position: relative;
		inset: auto;

		grid-row: 2;

		min-height: 34rem;
	}


	.on-about-hero__picture {
		position: absolute;
		inset: 0;
	}


	.on-about-hero__media::after {
		background:
			linear-gradient(
				180deg,
				rgba(8, 10, 12, 0.03),
				rgba(8, 10, 12, 0.5)
			);
	}


	.on-about-hero__title {
		max-width: 14ch;
	}


	.on-about-hero__description {
		max-width: 43rem;
	}


	.on-about-hero__badges {
		max-width: 42rem;
	}


	.on-about-hero__experience {
		right: 1.5rem;
		bottom: 1.5rem;

		width:
			min(
				31rem,
				calc(
					100% - 3rem
				)
			);
	}

}


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

@media (max-width: 47.99rem) {

	.on-about-hero {
		padding-top: 1rem;

		padding-bottom: 2.5rem;
	}


	.on-about-hero > .container {
		width:
			calc(
				100% - 1.5rem
			);
	}


	.on-about-hero__layout {
		border-radius:
			var(--radius-small);
	}


	.on-about-hero__content {
		padding:
			2.25rem
			1.25rem;
	}


	.on-about-hero__title {
		max-width: 11ch;

		font-size:
			clamp(
				2.5rem,
				12vw,
				3.6rem
			);
	}


	.on-about-hero__description {
		font-size: 0.88rem;

		line-height: 1.65;
	}


	.on-about-hero__highlight {
		font-size: 0.8rem;
	}


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

		gap: 0.85rem;
	}


	.on-about-hero__media {
		min-height: 30rem;
	}


	.on-about-hero__image {
		object-position:
			var(
				--about-image-position-mobile,
				center center
			);
	}


	.on-about-hero__experience {
		right: 1rem;
		bottom: 1rem;
		left: 1rem;

		width: auto;

		grid-template-columns: 1fr;

		gap: 0.8rem;

		padding: 1rem;
	}


	.on-about-hero__experience-number {
		min-width: 0;

		padding:
			0 0
			0.75rem;

		border-right: 0;

		border-bottom:
			1px solid
			rgba(
				255,
				255,
				255,
				0.1
			);
	}


	.on-about-hero__experience-number strong {
		font-size: 3rem;
	}

}


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

@media (max-width: 23rem) {

	.on-about-hero > .container {
		width:
			calc(
				100% - 1rem
			);
	}


	.on-about-hero__content {
		padding:
			2rem
			1rem;
	}


	.on-about-hero__media {
		min-height: 31rem;
	}

}


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

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

	.on-about-hero.is-animated
	.on-about-hero__layout,

	.on-about-hero.is-animated
	.on-about-hero__content > * {
		opacity: 1;

		transform: none;

		animation: none;
	}


	.on-about-hero__image,
	.on-about-hero__badge-icon {
		transition: none;
	}


	.on-about-hero__layout:hover
	.on-about-hero__image,

	.on-about-hero__badge:hover
	.on-about-hero__badge-icon {
		transform: none;
	}

}