/* =========================================================
   BLOK: HERO
   ========================================================= */

.on-hero {
	position: relative;
	isolation: isolate;

	display: flex;

	/*
	 * Hero + desktopowy header = wysokość viewportu.
	 * Nie odejmujemy żadnych dodatkowych sztucznych wartości.
	 */
	min-height: calc(100svh - 5.25rem);

	overflow: hidden;

	color: var(--color-text);

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

	background-image:
		linear-gradient(
			rgba(8, 10, 12, var(--hero-overlay, 0.52)),
			rgba(8, 10, 12, var(--hero-overlay, 0.52))
		),
		var(--hero-image-desktop, none);

	background-repeat: no-repeat;

	background-size: cover;

	/*
	 * Delikatnie podnosimy zdjęcie.
	 */
	background-position:
		center,
		center 10%;
}


/* =========================================================
   WARSTWA POPRAWIAJĄCA CZYTELNOŚĆ
   ========================================================= */

.on-hero::before {
	position: absolute;

	inset: 0;

	z-index: -1;

	content: "";

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(8, 10, 12, 0.9) 0%,
			rgba(8, 10, 12, 0.74) 24%,
			rgba(8, 10, 12, 0.4) 50%,
			rgba(8, 10, 12, 0.12) 78%,
			rgba(8, 10, 12, 0.04) 100%
		),
		linear-gradient(
			180deg,
			rgba(8, 10, 12, 0.05) 0%,
			transparent 34%,
			rgba(8, 10, 12, 0.12) 70%,
			rgba(8, 10, 12, 0.74) 100%
		);
}


/* =========================================================
   SUBTELNA ZŁOTA POŚWIATA
   ========================================================= */

.on-hero::after {
	position: absolute;

	top: 30%;
	left: 12%;

	z-index: -1;

	width: 26rem;
	height: 22rem;

	content: "";

	pointer-events: none;

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

	border-radius: 50%;

	filter: blur(7rem);

	opacity: 0.7;
}


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

.on-hero > .container {
	position: relative;

	z-index: 1;

	display: grid;

	/*
	 * Górny rząd bierze całe wolne miejsce.
	 * Benefity są zawsze ostatnim rzędem i kończą Hero.
	 */
	grid-template-rows:
		minmax(0, 1fr)
		auto;

	width: 100%;

	min-height: inherit;
}


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

.on-hero__content {
	/*
	 * Te zmienne wykorzystujemy też do wyrównania
	 * pionowej złotej linii z eyebrow.
	 */
	--hero-content-top:
		clamp(2.25rem, 4vh, 3.75rem);

	--hero-content-bottom:
		clamp(1.5rem, 3vh, 2.5rem);

	position: relative;

	align-self: center;

	width: min(100%, 48rem);

	padding-top: var(--hero-content-top);
	padding-bottom: var(--hero-content-bottom);

	padding-left: 1.4rem;
}


/* =========================================================
   ZŁOTA LINIA PO LEWEJ
   ========================================================= */

/*
 * Zaczyna się dokładnie tam,
 * gdzie zaczyna się nadtytuł.
 */

.on-hero__content::before {
	position: absolute;

	top: var(--hero-content-top);
	bottom: var(--hero-content-bottom);

	left: 0;

	width: 1px;

	content: "";

	background:
		linear-gradient(
			180deg,
			var(--color-accent) 0%,
			rgba(211, 179, 106, 0.4) 34%,
			rgba(211, 179, 106, 0.08) 76%,
			transparent 100%
		);

	opacity: 0.85;
}


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

.on-hero .section-eyebrow {
	display: block;

	width: fit-content;

	margin-bottom: 1rem;

	color: var(--color-accent);

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

	line-height: 1;

	letter-spacing: 0.14em;

	text-transform: uppercase;
}


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

.on-hero__title {
	max-width: 13.2ch;

	margin: 0 0 1.15rem;

	color: var(--color-white);

	font-size:
		clamp(
			3rem,
			4.7vw,
			5rem
		);

	font-weight: 800;

	line-height: 0.96;

	letter-spacing: -0.055em;

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

	text-wrap: balance;
}


/* =========================================================
   LOKALIZACJA
   ========================================================= */

.on-hero__location {
	display: inline-flex;

	align-items: center;

	gap: 0.55rem;

	width: fit-content;

	margin: 0 0 0.9rem;

	color: var(--color-accent);

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

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

	line-height: 1.3;

	letter-spacing: 0.02em;
}


/* złoty punkt */

.on-hero__location::before {
	width: 0.35rem;
	height: 0.35rem;

	flex: 0 0 auto;

	content: "";

	border-radius: 50%;

	background: var(--color-accent);

	box-shadow:
		0 0 0
		0.3rem
		rgba(211, 179, 106, 0.08);
}


/* =========================================================
   LEAD
   ========================================================= */

.on-hero__lead {
	max-width: 35rem;

	margin: 0;

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

	font-size:
		clamp(
			1rem,
			1.2vw,
			1.1rem
		);

	line-height: 1.7;

	text-wrap: pretty;
}


/* =========================================================
   PRZYCISKI
   ========================================================= */

.on-hero__actions {
	display: flex;

	flex-wrap: wrap;

	gap: 0.75rem;

	margin-top: 1.55rem;
}


.on-hero__actions .button {
	min-width: 10.5rem;
}


/* =========================================================
   BENEFITY — WRAPPER
   ========================================================= */

.on-hero__badges {
	position: relative;

	display: grid;

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

	/*
	 * Bez margin-bottom.
	 * Ten element ma być dokładnie ostatnim
	 * elementem Hero.
	 */
	margin: 0;

	padding-block:
		0.7rem
		0.8rem;

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

	background:
		linear-gradient(
			180deg,
			rgba(8, 10, 12, 0.06),
			rgba(8, 10, 12, 0.34)
		);

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

	backdrop-filter:
		blur(0.2rem);
}


/* =========================================================
   ZŁOTY DETAL NAD BENEFITAMI
   ========================================================= */

.on-hero__badges::before {
	position: absolute;

	top: -1px;
	left: 50%;

	width: 8rem;
	height: 1px;

	content: "";

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(211, 179, 106, 0.55),
			transparent
		);

	transform: translateX(-50%);
}


/* =========================================================
   POJEDYNCZY BENEFIT
   ========================================================= */

.on-hero__badge {
	position: relative;

	display: grid;

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

	gap: 0.9rem;

	align-items: center;

	min-width: 0;

	padding:
		0.65rem
		clamp(0.9rem, 1.4vw, 1.35rem);
}


.on-hero__badge:first-child {
	padding-left: 0;
}


/* =========================================================
   SEPARATORY BENEFITÓW
   ========================================================= */

.on-hero__badge:not(:first-child)::before {
	position: absolute;

	top: 0.6rem;
	bottom: 0.6rem;
	left: 0;

	width: 1px;

	content: "";

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(255, 255, 255, 0.1),
			transparent
		);
}


/* =========================================================
   IKONA BENEFITU
   ========================================================= */

.on-hero__badge-icon {
	display: grid;

	width: 2.6rem;
	height: 2.6rem;

	flex: 0 0 auto;

	place-items: center;

	color: var(--color-accent);

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

	border-radius: 50%;

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

	box-shadow:
		0 0 0
		0.28rem
		rgba(211, 179, 106, 0.016);

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


.on-hero__badge-svg {
	display: block;

	width: 1.25rem;
	height: 1.25rem;
}


@media (hover: hover) {

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

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

		background: var(--color-accent);

		transform: translateY(-0.15rem);
	}

}


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

.on-hero__badge-title {
	margin: 0 0 0.15rem;

	color: var(--color-white);

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

	line-height: 1.25;

	letter-spacing: -0.01em;
}


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

.on-hero__badge-text {
	max-width: 17rem;

	margin: 0;

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

	font-size: 0.7rem;

	line-height: 1.45;
}


/* =========================================================
   ANIMACJE WEJŚCIA
   ========================================================= */

.on-hero .section-eyebrow {
	animation:
		heroFadeUp
		650ms
		cubic-bezier(0.22, 1, 0.36, 1)
		80ms
		both;
}


.on-hero__title {
	animation:
		heroTitleIn
		850ms
		cubic-bezier(0.22, 1, 0.36, 1)
		150ms
		both;
}


.on-hero__location {
	animation:
		heroFadeUp
		700ms
		cubic-bezier(0.22, 1, 0.36, 1)
		250ms
		both;
}


.on-hero__lead {
	animation:
		heroFadeUp
		750ms
		cubic-bezier(0.22, 1, 0.36, 1)
		320ms
		both;
}


.on-hero__actions {
	animation:
		heroFadeUp
		750ms
		cubic-bezier(0.22, 1, 0.36, 1)
		390ms
		both;
}


.on-hero__badge {
	animation:
		heroBadgeIn
		700ms
		cubic-bezier(0.22, 1, 0.36, 1)
		both;
}


.on-hero__badge:nth-child(1) {
	animation-delay: 460ms;
}


.on-hero__badge:nth-child(2) {
	animation-delay: 530ms;
}


.on-hero__badge:nth-child(3) {
	animation-delay: 600ms;
}


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

@keyframes heroFadeUp {

	from {
		opacity: 0;

		transform:
			translateY(1rem);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}

}


@keyframes heroTitleIn {

	from {
		opacity: 0;

		transform:
			translateY(1.2rem)
			scale(0.987);
	}

	to {
		opacity: 1;

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

}


@keyframes heroBadgeIn {

	from {
		opacity: 0;

		transform:
			translateY(0.8rem);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}

}


/* =========================================================
   STANDARDOWY LAPTOP / TABLET
   ========================================================= */

@media (max-width: 64rem) {

	.on-hero {
		min-height: calc(100svh - 4.75rem);

		background-position:
			center,
			center 8%;
	}


	.on-hero__content {
		--hero-content-top:
			clamp(2rem, 4vh, 3rem);

		--hero-content-bottom:
			clamp(1.25rem, 2.5vh, 2rem);

		width:
			min(100%, 42rem);
	}


	.on-hero__title {
		max-width: 12.6ch;

		font-size:
			clamp(
				2.85rem,
				6.4vw,
				4.6rem
			);
	}


	.on-hero__lead {
		max-width: 32rem;
	}


	.on-hero__badges {
		padding-block:
			0.6rem
			0.7rem;
	}


	.on-hero__badge {
		gap: 0.75rem;

		padding-inline: 0.9rem;
	}


	.on-hero__badge:first-child {
		padding-left: 0;
	}


	.on-hero__badge-text {
		font-size: 0.68rem;
	}

}


/* =========================================================
   NISKI LAPTOP
   np. 1366 × 768 / 1440 × 800
   ========================================================= */

@media (min-width: 48rem) and (max-height: 52rem) {

	.on-hero__content {
		--hero-content-top: 1.2rem;
		--hero-content-bottom: 1rem;
	}


	.on-hero .section-eyebrow {
		margin-bottom: 0.7rem;

		font-size: 0.66rem;
	}


	.on-hero__title {
		max-width: 13.5ch;

		margin-bottom: 0.8rem;

		font-size:
			clamp(
				2.65rem,
				4.15vw,
				4.2rem
			);

		line-height: 0.95;
	}


	.on-hero__location {
		margin-bottom: 0.6rem;

		font-size: 0.74rem;
	}


	.on-hero__lead {
		max-width: 34rem;

		font-size: 0.94rem;

		line-height: 1.5;
	}


	.on-hero__actions {
		margin-top: 1rem;
	}


	.on-hero__actions .button {
		min-height: 2.75rem;
	}


	.on-hero__badges {
		padding-block:
			0.45rem
			0.5rem;
	}


	.on-hero__badge {
		gap: 0.7rem;

		padding-top: 0.45rem;
		padding-bottom: 0.45rem;
	}


	.on-hero__badge-icon {
		width: 2.35rem;
		height: 2.35rem;
	}


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


	.on-hero__badge-title {
		font-size: 0.78rem;
	}


	.on-hero__badge-text {
		font-size: 0.64rem;

		line-height: 1.35;
	}

}


/* =========================================================
   BARDZO NISKI LAPTOP
   ========================================================= */

@media (min-width: 48rem) and (max-height: 43rem) {

	.on-hero__content {
		--hero-content-top: 0.7rem;
		--hero-content-bottom: 0.65rem;
	}


	.on-hero .section-eyebrow {
		margin-bottom: 0.55rem;
	}


	.on-hero__title {
		margin-bottom: 0.6rem;

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


	.on-hero__location {
		margin-bottom: 0.45rem;
	}


	.on-hero__lead {
		font-size: 0.88rem;

		line-height: 1.45;
	}


	.on-hero__actions {
		margin-top: 0.75rem;
	}


	.on-hero__badges {
		padding-block:
			0.35rem
			0.4rem;
	}


	.on-hero__badge {
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

}


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

@media (max-width: 47.99rem) {

	.on-hero {
		/*
		 * Mobilny header ma dodatkowy pasek kontaktowy,
		 * więc nie liczymy tutaj wysokości viewportu.
		 */
		min-height: auto;

		background-image:
			linear-gradient(
				rgba(
					8,
					10,
					12,
					var(--hero-overlay, 0.56)
				),
				rgba(
					8,
					10,
					12,
					var(--hero-overlay, 0.56)
				)
			),
			var(
				--hero-image-mobile,
				var(--hero-image-desktop, none)
			);

		background-position:
			center,
			var(--hero-position-mobile, center top);
	}


	.on-hero::before {
		background:
			linear-gradient(
				90deg,
				rgba(8, 10, 12, 0.84) 0%,
				rgba(8, 10, 12, 0.6) 72%,
				rgba(8, 10, 12, 0.42) 100%
			),
			linear-gradient(
				0deg,
				rgba(8, 10, 12, 0.84) 0%,
				transparent 55%
			);
	}


	.on-hero::after {
		display: none;
	}


	.on-hero > .container {
		display: block;

		min-height: 0;
	}


	.on-hero__content {
		--hero-content-top:
			clamp(3.5rem, 11vw, 4.75rem);

		--hero-content-bottom:
			2.25rem;

		width: 100%;

		padding-right: 0;
		padding-left: 0;
	}


	.on-hero__content::before {
		display: none;
	}


	.on-hero .section-eyebrow {
		margin-bottom: 0.8rem;

		font-size: 0.68rem;
	}


	.on-hero__title {
		max-width: 10ch;

		margin-bottom: 1rem;

		font-size:
			clamp(
				2.65rem,
				12vw,
				3.9rem
			);

		line-height: 1;

		letter-spacing: -0.045em;
	}


	.on-hero__location {
		margin-bottom: 0.85rem;

		font-size: 0.76rem;
	}


	.on-hero__lead {
		max-width: 30rem;

		font-size: 0.95rem;

		line-height: 1.65;
	}


	/* =====================================================
	   CTA MOBILE
	   ===================================================== */

	.on-hero__actions {
		display: grid;

		grid-template-columns: 1fr;

		gap: 0.65rem;

		margin-top: 1.4rem;
	}


	.on-hero__actions .button {
		width: 100%;

		min-width: 0;
	}


	/* =====================================================
	   BENEFITY MOBILE
	   ===================================================== */

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

		margin: 0;

		padding-block:
			0.4rem
			1rem;

		background:
			rgba(8, 10, 12, 0.34);
	}


	.on-hero__badges::before {
		left: 0;

		width: 4rem;

		transform: none;
	}


	.on-hero__badge {
		padding:
			1rem 0;

		gap: 0.85rem;
	}


	.on-hero__badge:first-child {
		padding-left: 0;
	}


	.on-hero__badge:not(:first-child)::before {
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;

		width: 100%;
		height: 1px;

		background:
			linear-gradient(
				90deg,
				rgba(255, 255, 255, 0.1),
				transparent
			);
	}


	.on-hero__badge-icon {
		width: 2.55rem;
		height: 2.55rem;
	}


	.on-hero__badge-title {
		font-size: 0.84rem;
	}


	.on-hero__badge-text {
		max-width: none;

		font-size: 0.7rem;
	}

}


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

@media (max-width: 27.99rem) {

	.on-hero__content {
		--hero-content-top: 3.25rem;
	}


	.on-hero__title {
		font-size:
			clamp(
				2.4rem,
				13vw,
				3.15rem
			);
	}


	.on-hero__lead {
		font-size: 0.9rem;
	}

}


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

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

	.on-hero .section-eyebrow,
	.on-hero__title,
	.on-hero__location,
	.on-hero__lead,
	.on-hero__actions,
	.on-hero__badge {
		animation: none;
	}


	.on-hero__badge-icon {
		transition: none;
	}


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

}