/* =========================================================
   BLOK: USŁUGI
   ========================================================= */

.on-services {
	position: relative;
	overflow: hidden;

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

	background:
		radial-gradient(
			circle at 12% 18%,
			rgba(211, 179, 106, 0.045),
			transparent 30rem
		),
		radial-gradient(
			circle at 88% 70%,
			rgba(255, 255, 255, 0.015),
			transparent 28rem
		),
		var(--color-background);
}


/* subtelna linia sekcji */

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

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

	height: 1px;

	content: "";

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


/* =========================================================
   LAYOUT
   ========================================================= */

.on-services__layout {
	display: grid;

	grid-template-columns:
		minmax(17rem, 0.95fr)
		minmax(0, 3fr);

	gap:
		clamp(2.5rem, 4.5vw, 4.75rem);

	align-items: start;
}


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

.on-services__intro {
	position: sticky;

	top: 7.5rem;

	padding-top: 0.35rem;
}


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

	margin-bottom: 1rem;
}


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

.on-services__title {
	max-width: 8.5ch;

	margin:
		0 0
		1.3rem;

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

	line-height: 1;

	letter-spacing: -0.045em;

	text-wrap: balance;
}


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

.on-services__description {
	max-width: 27rem;

	margin: 0;

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

	font-size:
		clamp(0.96rem, 1.2vw, 1.08rem);

	line-height: 1.75;

	text-wrap: pretty;
}


/* =========================================================
   GŁÓWNY PRZYCISK
   ========================================================= */

.on-services__button {
	margin-top: 2rem;
}


/* =========================================================
   SIATKA USŁUG
   ========================================================= */

.on-services__grid {
	display: grid;

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

	gap: 0.9rem;

	min-width: 0;
}


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

.on-services__card {
	--service-mouse-x: 50%;
	--service-mouse-y: 50%;

	position: relative;

	display: flex;

	min-width: 0;

	min-height:
		clamp(27rem, 31vw, 31rem);

	overflow: hidden;

	isolation: isolate;

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

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

	background:
		var(--color-surface);

	box-shadow:
		0 1rem 2.75rem
		rgba(0, 0, 0, 0.16);

	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);
}


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

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

	inset: 0;

	z-index: 2;

	content: "";

	pointer-events: none;

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

			rgba(211, 179, 106, 0.1) 0,

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

			transparent 14rem
		);

	opacity: 0;

	transition:
		opacity 400ms ease;
}


/* =========================================================
   ZŁOTY DETAL NA DOLE KARTY
   ========================================================= */

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

	right: 1.25rem;
	bottom: 0;
	left: 1.25rem;

	z-index: 3;

	height: 1px;

	content: "";

	pointer-events: none;

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

	opacity: 0;

	transform:
		scaleX(0.25);

	transform-origin:
		center;

	transition:
		opacity 350ms ease,
		transform
			550ms
			cubic-bezier(0.22, 1, 0.36, 1);
}


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

@media (hover: hover) {

	.on-services__card:hover {
		border-color:
			rgba(211, 179, 106, 0.36);

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

			0 0 2.5rem
				rgba(211, 179, 106, 0.035);

		transform:
			translateY(-0.45rem);
	}


	.on-services__card:hover::before {
		opacity: 1;
	}


	.on-services__card:hover::after {
		opacity: 0.9;

		transform:
			scaleX(1);
	}

}


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

.on-services__media {
	position: absolute;

	inset: 0;

	z-index: -1;

	overflow: hidden;

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


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

.on-services__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	filter:
		saturate(0.82)
		brightness(0.84);

	transform:
		scale(1.002);

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

		filter
			600ms ease;
}


@media (hover: hover) {

	.on-services__card:hover
	.on-services__image {
		filter:
			saturate(0.96)
			brightness(0.9);

		transform:
			scale(1.055);
	}

}


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

/*
 * Góra pozostaje możliwie czysta.
 * Najmocniejszy gradient pojawia się dopiero
 * za treścią karty.
 */

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

	inset: 0;

	content: "";

	background:
		linear-gradient(
			180deg,
			rgba(8, 10, 12, 0.03) 0%,
			rgba(8, 10, 12, 0.06) 22%,
			rgba(8, 10, 12, 0.22) 48%,
			rgba(8, 10, 12, 0.82) 73%,
			rgba(8, 10, 12, 0.98) 100%
		),
		linear-gradient(
			90deg,
			rgba(8, 10, 12, 0.05),
			transparent 58%
		);
}


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

.on-services__image-placeholder {
	display: grid;

	width: 100%;
	height: 100%;

	place-items: center;

	padding: 2rem;

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

	text-align: center;

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


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

.on-services__card-body {
	position: relative;

	z-index: 3;

	display: flex;

	flex-direction: column;

	justify-content: flex-end;

	width: 100%;

	min-width: 0;

	padding:
		clamp(1.25rem, 1.8vw, 1.65rem);
}


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

.on-services__card-title {
	max-width: 13ch;

	margin:
		0 0
		0.65rem;

	color:
		var(--color-white);

	font-size:
		clamp(1.15rem, 1.45vw, 1.4rem);

	font-weight: 700;

	line-height: 1.15;

	letter-spacing:
		-0.025em;

	text-shadow:
		0 0.2rem 0.7rem
		rgba(0, 0, 0, 0.45);
}


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

.on-services__card-description {
	max-width: 18rem;

	margin: 0;

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

	font-size:
		0.82rem;

	line-height: 1.6;

	text-wrap: pretty;
}


/* =========================================================
   LINK W KARCIE
   ========================================================= */

.on-services__card-link {
	position: relative;

	display: inline-flex;

	align-items: center;

	gap: 0.65rem;

	width: fit-content;

	margin-top: 1.15rem;

	padding-bottom: 0.15rem;

	color:
		var(--color-white);

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

	font-size:
		0.7rem;

	font-weight: 700;

	line-height: 1.3;

	letter-spacing:
		0.055em;

	text-decoration: none;

	text-transform:
		uppercase;

	transition:
		color 250ms ease;
}


/* podkreślenie linku */

.on-services__card-link::after {
	position: absolute;

	right: 0;
	bottom: -0.15rem;
	left: 0;

	height: 1px;

	content: "";

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

	opacity: 0;

	transform:
		scaleX(0);

	transform-origin:
		left;

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


.on-services__card-link
> span:last-child {
	color:
		var(--color-accent);

	font-size:
		0.95rem;

	transition:
		transform
			350ms
			cubic-bezier(0.22, 1, 0.36, 1);
}


.on-services__card-link:hover {
	color:
		var(--color-accent);
}


.on-services__card-link:hover::after {
	opacity: 1;

	transform:
		scaleX(1);
}


.on-services__card-link:hover
> span:last-child {
	transform:
		translateX(0.3rem);
}


/* =========================================================
   BRAK USŁUG
   ========================================================= */

.on-services__empty {
	padding: 1.5rem;

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

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

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


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

/*
 * Klasa is-animated jest dodawana dopiero przez JS.
 * Jeżeli JS nie działa, cała treść pozostaje widoczna.
 */

.on-services.is-animated
.on-services__intro > * {
	opacity: 0;

	transform:
		translateY(1rem);
}


.on-services.is-animated
.on-services__card {
	opacity: 0;

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


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

.on-services.is-animated.is-visible
.on-services__intro > * {
	animation:
		servicesIntroIn
		700ms
		cubic-bezier(0.22, 1, 0.36, 1)
		forwards;
}


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


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


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


.on-services.is-animated.is-visible
.on-services__intro
> :nth-child(4) {
	animation-delay:
		250ms;
}


/* =========================================================
   ANIMACJA KART
   ========================================================= */

.on-services.is-animated.is-visible
.on-services__card {
	animation:
		servicesCardIn
		850ms
		cubic-bezier(0.22, 1, 0.36, 1)
		forwards;

	animation-delay:
		calc(
			180ms +
			(var(--service-index) * 90ms)
		);
}


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

@keyframes servicesIntroIn {

	from {
		opacity: 0;

		transform:
			translateY(1rem);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}

}


@keyframes servicesCardIn {

	from {
		opacity: 0;

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

	to {
		opacity: 1;

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

}


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

@media (max-width: 84rem) {

	.on-services__layout {
		grid-template-columns:
			minmax(15rem, 0.8fr)
			minmax(0, 2.7fr);

		gap:
			clamp(2rem, 3vw, 3rem);
	}


	.on-services__card {
		min-height:
			clamp(25rem, 31vw, 28rem);
	}


	.on-services__card-body {
		padding:
			1.2rem;
	}


	.on-services__card-description {
		font-size:
			0.77rem;
	}

}


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

@media (max-width: 74.99rem) {

	.on-services__layout {
		grid-template-columns:
			minmax(15rem, 0.75fr)
			minmax(0, 1.6fr);
	}


	.on-services__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap:
			1rem;
	}


	.on-services__card {
		min-height:
			27rem;
	}

}


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

@media (max-width: 61.99rem) {

	.on-services {
		padding-block:
			clamp(4.5rem, 8vw, 6rem);
	}


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

		gap:
			2.75rem;
	}


	.on-services__intro {
		position: static;

		display: grid;

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

		column-gap:
			2rem;

		align-items:
			end;

		padding-top:
			0;
	}


	.on-services__intro
	.section-eyebrow,

	.on-services__title,

	.on-services__description {
		grid-column:
			1;
	}


	.on-services__title {
		max-width:
			13ch;
	}


	.on-services__description {
		max-width:
			35rem;
	}


	.on-services__button {
		grid-column:
			2;

		grid-row:
			1 / span 3;

		align-self:
			end;

		margin-top:
			0;
	}

}


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

@media (max-width: 47.99rem) {

	.on-services {
		padding-block:
			clamp(4rem, 14vw, 5.5rem);
	}


	.on-services__layout {
		gap:
			2.25rem;
	}


	.on-services__intro {
		display:
			block;
	}


	.on-services__title {
		max-width:
			11ch;

		font-size:
			clamp(2.35rem, 11vw, 3.25rem);
	}


	.on-services__description {
		font-size:
			0.94rem;
	}


	.on-services__button {
		width:
			100%;

		margin-top:
			1.6rem;
	}


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

		gap:
			0.85rem;
	}


	.on-services__card {
		min-height:
			clamp(24rem, 115vw, 29rem);
	}


	.on-services__card-body {
		padding:
			1.3rem;
	}


	.on-services__card-title {
		font-size:
			clamp(1.2rem, 6vw, 1.45rem);
	}


	.on-services__card-description {
		max-width:
			23rem;

		font-size:
			0.82rem;
	}

}


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

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

	.on-services.is-animated
	.on-services__intro > *,

	.on-services.is-animated
	.on-services__card {
		opacity: 1;

		transform: none;

		animation: none;
	}


	.on-services__card,
	.on-services__image,
	.on-services__card-link,
	.on-services__card-link::after,
	.on-services__card-link > span:last-child {
		transition: none;
	}


	.on-services__card:hover {
		transform: none;
	}


	.on-services__card:hover
	.on-services__image {
		transform: none;
	}

}