/**
 * Sekcja: zakres usługi.
 * Figma 14559:25546 — pas 1440×714 na mięcie surface (#c1e1cc), nagłówek 64/72 wyśrodkowany (y=100),
 * cztery karty 303×362 z odstępem 24 od y=252, wnętrze 20, zieleń primary,
 * numer 32/38,4, tytuł 24/33,6 od y=83, opis 16/24 od y=158, link u dołu.
 * W tle kart trzy okręgi 447 — rysowane pseudoelementem, nie obrazem.
 */

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

.usluga-scope__heading {
	margin: 0;
}

/* 14559:25548 — 64/72 tylko na desktopie. ≤991 zostaje token --fs-h1 (moduł section-heading). */
@media (min-width: 992px) {
	.usluga-scope .usluga-scope__heading {
		font-size: 64px;
		line-height: 72px;
	}
}

.usluga-scope__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md);
	margin: 80px 0 0;
	padding: 0;
	list-style: none;
}

.usluga-scope__item {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 362px;
	padding: 20px;
	border-radius: var(--radius-sm);
	background-color: var(--color-primary);
	color: var(--color-white);
	isolation: isolate;
}

/* Dekoracja z makiety: okręgi wychodzące poza dolną krawędź karty. */
.usluga-scope__item::after {
	content: "";
	position: absolute;
	right: -44%;
	bottom: -62%;
	z-index: -1;
	width: 447px;
	height: 447px;
	border: 1px solid var(--color-primary-bright);
	border-radius: 50%;
	opacity: 0.4;
	pointer-events: none;
}

.usluga-scope__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-md);
}

.usluga-scope__number {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
}

.usluga-scope__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	color: var(--color-primary);
}

.usluga-scope__icon-img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
	fill: var(--color-primary);
}

.usluga-scope__icon-img path {
	fill: var(--color-primary);
}

.usluga-scope__title {
	margin: 41px 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);
}

.usluga-scope__text {
	margin: 41px 0 0;
	font-size: var(--fs-body-sm);
	font-weight: 500;
	line-height: var(--lh-body);
}

/* align-self, żeby podkreślenie linku obejmowało tekst, a nie całą szerokość karty. */
.usluga-scope__item .btn--text {
	align-self: flex-start;
	margin-top: auto;
	padding-top: var(--space-lg);
}

@media (max-width: 991px) {
	.usluga-scope__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: var(--space-xl);
	}
}

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