/**
 * Sekcja: „Jak przebiega wdrożenie".
 * Figma 14557:3801 — pas 1440×635 na białym, nagłówek 48/57,6 (y=100), cztery karty
 * 279×321 z odstępem 57 od y=214, wnętrze 32, numer 60/72 w zieleni, tytuł 24/33,6
 * w odstępie 20, opis 18/27 w odstępie 16. Strzałka 24×24 w przerwie między kartami
 * jest dekoracją, więc idzie maską CSS, nie znacznikiem.
 */

.usluga-steps {
	background-color: var(--color-surface);
	padding-block: 100px;
}

.usluga-steps__heading {
	margin: 0;
	color: var(--color-black);
}

.usluga-steps__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 57px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.usluga-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 321px;

	/* Wnętrze 32 z makiety liczy się od zewnętrznej krawędzi karty, a obwódka 1 px
	   leży w środku — 31 px daje kolumnę tekstu 215, tak jak w Figmie. */
	padding: 31px;
	border: 1px solid var(--color-hairline);
	border-top-color: var(--color-border-mint);
	border-radius: var(--radius-sm);
}

.usluga-steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -38px;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	background-color: var(--color-primary);
	mask-image: url("../../img/icons/arrow-right.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: url("../../img/icons/arrow-right.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.usluga-steps__number {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--color-primary);
}

.usluga-steps__title {
	margin: 20px 0 0;
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: 400;
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-heading);
	color: var(--color-ink);
}

.usluga-steps__text {
	margin: 16px 0 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-muted);
}

@media (max-width: 1199px) {
	.usluga-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-md);
	}

	.usluga-steps__item:not(:last-child)::after {
		display: none;
	}
}

@media (max-width: 575px) {
	.usluga-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}
}