/* =========================================================
   BLOK: LISTA USŁUG
   ========================================================= */

.on-services-list {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	padding-block:
		clamp(4rem, 6vw, 6.5rem);

	color:
		var(--color-white, #ffffff);

	background:
		radial-gradient(
			circle at 12% 20%,
			rgba(217, 180, 93, 0.035),
			transparent 28rem
		),
		radial-gradient(
			circle at 88% 70%,
			rgba(217, 180, 93, 0.025),
			transparent 30rem
		),
		var(--color-background, #080b0d);
}


/* =========================================================
   DEKORACJE SEKCJI
   ========================================================= */

.on-services-list::before,
.on-services-list::after {
	position: absolute;
	z-index: 0;

	width: clamp(18rem, 28vw, 32rem);
	height: 1px;

	content: "";
	pointer-events: none;

	opacity: 0.22;
}

.on-services-list::before {
	top: 3rem;
	left: -8rem;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(217, 180, 93, 0.35)
		);

	transform: rotate(-24deg);
}

.on-services-list::after {
	right: -8rem;
	bottom: 4rem;

	background:
		linear-gradient(
			90deg,
			rgba(217, 180, 93, 0.26),
			transparent
		);

	transform: rotate(-24deg);
}

.on-services-list > .container {
	position: relative;
	z-index: 1;
}


/* =========================================================
   LISTA
   ========================================================= */

.on-services-list__items {
	display: grid;

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


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

.on-services-list__item {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(18rem, 0.8fr)
		minmax(0, 1.3fr);

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

	overflow: hidden;
	isolation: isolate;

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

	border-radius:
		var(--radius-medium, 0.75rem);

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.03),
			rgba(255, 255, 255, 0.008)
		),
		#0c1013;

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

	transition:
		border-color 400ms ease,
		box-shadow 500ms
			cubic-bezier(0.22, 1, 0.36, 1),
		transform 500ms
			cubic-bezier(0.22, 1, 0.36, 1);
}


/* złoty detal górnej krawędzi */

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

	top: -1px;
	left: 2rem;

	z-index: 5;

	width: 4.5rem;
	height: 1px;

	content: "";

	background:
		linear-gradient(
			90deg,
			var(--color-accent, #d9b45d),
			rgba(217, 180, 93, 0.15),
			transparent
		);

	opacity: 0.8;
}


/* =========================================================
   UKŁAD ODWRÓCONY
   ========================================================= */

.on-services-list__item--reversed {
	grid-template-columns:
		minmax(0, 1.3fr)
		minmax(18rem, 0.8fr);
}

.on-services-list__item--reversed
.on-services-list__content {
	order: 2;
}

.on-services-list__item--reversed
.on-services-list__media {
	order: 1;
}

.on-services-list__item--reversed::before {
	right: 2rem;
	left: auto;

	background:
		linear-gradient(
			270deg,
			var(--color-accent, #d9b45d),
			rgba(217, 180, 93, 0.15),
			transparent
		);
}


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

.on-services-list__content {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;

	align-items: flex-start;
	justify-content: center;

	gap: 1.3rem;

	min-width: 0;

	padding:
		clamp(2.25rem, 4vw, 3.75rem);
}


/* subtelny glow za tekstem */

.on-services-list__content::after {
	position: absolute;

	top: 50%;
	left: 25%;

	z-index: -1;

	width: 14rem;
	height: 14rem;

	content: "";
	pointer-events: none;

	border-radius: 50%;

	background:
		rgba(217, 180, 93, 0.025);

	filter: blur(4rem);

	transform:
		translate(-50%, -50%);
}


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

.on-services-list__icon {
	position: relative;

	display: grid;

	width: 3.5rem;
	height: 3.5rem;

	flex: 0 0 auto;

	place-items: center;

	padding: 0;

	overflow: visible;

	border: 0;
	border-radius: 0;

	background: transparent;
}


/* glow ikony */

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

	inset: 20%;

	z-index: -1;

	content: "";

	border-radius: 50%;

	background:
		rgba(217, 180, 93, 0.15);

	filter: blur(0.85rem);

	opacity: 0.65;

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


/* =========================================================
   OBRAZEK IKONY
   ========================================================= */

.on-services-list__icon-image {
	display: block;

	width: 3rem;
	height: 3rem;

	object-fit: contain;

	filter:
		brightness(0)
		saturate(100%)
		invert(74%)
		sepia(46%)
		saturate(696%)
		hue-rotate(2deg)
		brightness(95%)
		contrast(89%);

	opacity: 0.95;

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


/* =========================================================
   BLOK TEKSTOWY
   ========================================================= */

.on-services-list__text {
	align-self: auto;

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


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

.on-services-list__title {
	position: relative;

	max-width: 16ch;

	margin: 0;

	padding-bottom: 1.15rem;

	color:
		var(--color-white, #ffffff);

	font-size:
		clamp(
			1.7rem,
			2.3vw,
			2.45rem
		);

	font-weight: 750;

	line-height: 1.08;

	letter-spacing: -0.04em;

	text-wrap: balance;
}


/* złota kreska */

.on-services-list__title::after {
	position: absolute;

	bottom: 0;
	left: 0;

	width: 2.75rem;
	height: 2px;

	content: "";

	background:
		linear-gradient(
			90deg,
			var(--color-accent, #d9b45d),
			rgba(217, 180, 93, 0.2)
		);
}


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

.on-services-list__description {
	max-width: 32rem;

	margin-top: 1.25rem;

	color:
		rgba(255, 255, 255, 0.65);

	font-size: 0.94rem;

	line-height: 1.72;

	text-wrap: pretty;
}

.on-services-list__description > * {
	margin-top: 0;

	margin-bottom: 0.7rem;
}

.on-services-list__description > *:last-child {
	margin-bottom: 0;
}


/* =========================================================
   LINK
   ========================================================= */

.on-services-list__link {
	display: inline-flex;

	align-items: center;

	gap: 0.65rem;

	width: fit-content;

	margin-top: 1.35rem;

	color:
		var(--color-accent, #d9b45d);

	font-size: 0.74rem;
	font-weight: 800;

	line-height: 1.2;

	letter-spacing: 0.065em;

	text-decoration: none;

	text-transform: uppercase;

	transition:
		color 180ms ease,
		gap 220ms ease;
}

.on-services-list__link > span:last-child {
	transition:
		transform 220ms ease;
}

.on-services-list__link:hover,
.on-services-list__link:focus-visible {
	gap: 0.85rem;

	color:
		var(--color-white, #ffffff);
}

.on-services-list__link:hover
> span:last-child {
	transform:
		translateX(0.2rem);
}

.on-services-list__link:focus-visible {
	outline:
		2px solid
		var(--color-accent, #d9b45d);

	outline-offset: 0.35rem;
}


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

.on-services-list__media {
	position: relative;

	min-width: 0;

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

	overflow: hidden;

	background:
		#111619;
}


/* gradient na styku zdjęcia i tekstu */

.on-services-list__media::after {
	position: absolute;
	inset: 0;

	z-index: 2;

	content: "";

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(8, 11, 13, 0.3),
			transparent 28%
		),

		linear-gradient(
			0deg,
			rgba(8, 11, 13, 0.14),
			transparent 42%
		);
}

.on-services-list__item--reversed
.on-services-list__media::after {
	background:
		linear-gradient(
			270deg,
			rgba(8, 11, 13, 0.3),
			transparent 28%
		),

		linear-gradient(
			0deg,
			rgba(8, 11, 13, 0.14),
			transparent 42%
		);
}


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

.on-services-list__image {
	display: block;

	width: 100%;
	height: 100%;

	min-height: inherit;

	object-fit: cover;

	transform:
		scale(1.015)
		translate3d(
			var(--service-image-x, 0),
			var(--service-image-y, 0),
			0
		);

	will-change: transform;

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


/* =========================================================
   POZYCJA ZDJĘCIA
   ========================================================= */

.on-services-list__item--image-left
.on-services-list__image {
	object-position: left center;
}

.on-services-list__item--image-center
.on-services-list__image {
	object-position: center center;
}

.on-services-list__item--image-right
.on-services-list__image {
	object-position: right center;
}

.on-services-list__item--image-top
.on-services-list__image {
	object-position: center top;
}

.on-services-list__item--image-bottom
.on-services-list__image {
	object-position: center bottom;
}


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

@media (hover: hover) {

	.on-services-list__item:hover {
		border-color:
			rgba(217, 180, 93, 0.3);

		box-shadow:
			0 2rem 5rem
			rgba(0, 0, 0, 0.22);

		transform:
			translateY(-0.2rem);
	}


	.on-services-list__item:hover
	.on-services-list__image {
		filter:
			saturate(1.04)
			brightness(1.02);

		transform:
			scale(1.045)
			translate3d(
				var(--service-image-x, 0),
				var(--service-image-y, 0),
				0
			);
	}


	.on-services-list__item:hover
	.on-services-list__icon-image {
		opacity: 1;

		transform:
			scale(1.1)
			rotate(-2deg);
	}


	.on-services-list__item:hover
	.on-services-list__icon::before {
		opacity: 1;

		transform:
			scale(1.35);
	}

}


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

.on-services-list__placeholder,
.on-services-list__empty {
	display: grid;

	place-items: center;

	min-height: 18rem;

	padding: 2rem;

	color:
		rgba(255, 255, 255, 0.55);

	text-align: center;

	border:
		1px dashed
		rgba(255, 255, 255, 0.2);

	background:
		#0c1013;
}


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

.on-services-list.is-enhanced
.on-services-list__item {
	opacity: 0;

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


/* =========================================================
   JS — ELEMENT WIDOCZNY
   ========================================================= */

.on-services-list.is-enhanced
.on-services-list__item.is-visible {
	opacity: 1;

	transform:
		translateY(0)
		scale(1);

	transition:
		opacity 750ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
		transform 850ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
		border-color 400ms ease,
		box-shadow 500ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);

	transition-delay:
		var(--service-delay, 0ms);
}


/* treść osobno */

.on-services-list.is-enhanced
.on-services-list__item
.on-services-list__content > * {
	opacity: 0;

	transform:
		translateY(0.8rem);
}

.on-services-list.is-enhanced
.on-services-list__item.is-visible
.on-services-list__content > * {
	opacity: 1;

	transform:
		translateY(0);

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

.on-services-list.is-enhanced
.on-services-list__item.is-visible
.on-services-list__content > :nth-child(1) {
	transition-delay:
		calc(
			var(--service-delay, 0ms) + 110ms
		);
}

.on-services-list.is-enhanced
.on-services-list__item.is-visible
.on-services-list__content > :nth-child(2) {
	transition-delay:
		calc(
			var(--service-delay, 0ms) + 180ms
		);
}


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

@media (max-width: 64rem) {

	.on-services-list {
		padding-block:
			clamp(3.5rem, 6vw, 5rem);
	}


	.on-services-list__item,
	.on-services-list__item--reversed {
		grid-template-columns:
			minmax(16rem, 0.9fr)
			minmax(0, 1.1fr);

		min-height: 22rem;
	}


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


	.on-services-list__content {
		padding:
			clamp(1.8rem, 3vw, 2.5rem);
	}


	.on-services-list__media {
		min-height: 22rem;
	}


	.on-services-list__title {
		font-size:
			clamp(
				1.55rem,
				3vw,
				2rem
			);
	}


	.on-services-list__description {
		font-size: 0.89rem;
		line-height: 1.65;
	}

}


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

@media (max-width: 47.99rem) {

	.on-services-list {
		padding-block: 3rem;
	}


	.on-services-list__items {
		gap: 1rem;
	}


	.on-services-list__item,
	.on-services-list__item--reversed {
		grid-template-columns: 1fr;

		min-height: 0;
	}


	/* zdjęcie zawsze pierwsze */

	.on-services-list__media,
	.on-services-list__item--reversed
	.on-services-list__media {
		order: 1;

		min-height: 16rem;

		aspect-ratio: 16 / 10;
	}


	/* treść zawsze druga */

	.on-services-list__content,
	.on-services-list__item--reversed
	.on-services-list__content {
		order: 2;

		padding:
			1.6rem 1.4rem 1.8rem;
	}


	.on-services-list__content {
		gap: 0.9rem;
	}


	.on-services-list__icon {
		width: 3rem;
		height: 3rem;
	}


	.on-services-list__icon-image {
		width: 2.55rem;
		height: 2.55rem;
	}


	.on-services-list__title {
		max-width: 18ch;

		font-size:
			clamp(
				1.6rem,
				7vw,
				2rem
			);
	}


	.on-services-list__description {
		max-width: none;

		font-size: 0.9rem;
		line-height: 1.65;
	}


	.on-services-list__media::after,
	.on-services-list__item--reversed
	.on-services-list__media::after {
		background:
			linear-gradient(
				0deg,
				rgba(8, 11, 13, 0.35),
				transparent 45%
			);
	}


	.on-services-list__item::before,
	.on-services-list__item--reversed::before {
		right: auto;
		left: 1.4rem;

		width: 3.5rem;

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

}


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

@media (max-width: 30rem) {

	.on-services-list__content {
		padding:
			1.4rem 1.2rem 1.6rem;
	}


	.on-services-list__media,
	.on-services-list__item--reversed
	.on-services-list__media {
		min-height: 14rem;
	}


	.on-services-list__title {
		font-size: 1.55rem;
	}

}


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

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

	.on-services-list__item,
	.on-services-list__image,
	.on-services-list__icon-image,
	.on-services-list__icon::before,
	.on-services-list__link,
	.on-services-list__content > * {
		transition: none !important;
	}


	.on-services-list.is-enhanced
	.on-services-list__item,

	.on-services-list.is-enhanced
	.on-services-list__item
	.on-services-list__content > * {
		opacity: 1;

		transform: none;
	}


	.on-services-list__item:hover,
	.on-services-list__item:hover
	.on-services-list__image {
		transform: none;
	}

}