/**
 * Sekcja: Materiały eksploatacyjne.
 * Figma 14557:3648 — ten sam szkielet co Usługi wspierające (360 + 3×269).
 */

.usluga-supplies {
	/* Figma 14557:3659: body y=164, badge 22+42 → +100 px pod ikoną. */
	--card-feature-body-offset: 100px;
	background-color: var(--color-white);
	padding-block: 78px;
}

.usluga-supplies__inner {
	display: flex;
	flex-direction: column;
	gap: 90px;
}

.usluga-supplies__kicker {
	margin: 0;
}

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

/* 14557:3661 x=533. Kontener ma 1284, rząd Figmy 1288 — space-between
   zjada 4 px i tytuł „Oryginalne” ląduje na 529. Gap 73 = 1288−360−855. */
@media (min-width: 1200px) {
	.usluga-supplies__row {
		justify-content: flex-start;
		gap: 73px;
	}
}

.usluga-supplies__intro {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 360px;
	min-height: 370px;
	flex: 0 0 360px;
}

.usluga-supplies__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--color-black);
}

.usluga-supplies__lead {
	margin: 0;
	max-width: 363px;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
	color: var(--color-black);
}

.usluga-supplies__list {
	display: flex;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.usluga-supplies__item {
	width: 269px;
	flex: 0 0 269px;
}

/* Ten sam szkielet 360 + 3×269 co usluga-support, ale gap 73 już od 1200 px
   — przy 1280 ostatnia karta kończy się na x=1366. Kurczymy tylko 1200–1439. */
@media (min-width: 1200px) and (max-width: 1439px) {
	.usluga-supplies__intro {
		flex: 0 1 360px;
		width: auto;
		max-width: 360px;
		min-width: 0;
	}

	.usluga-supplies__list {
		flex: 1 1 0;
		min-width: 0;
	}

	.usluga-supplies__item {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}

@media (max-width: 1199px) {
	.usluga-supplies__row {
		flex-direction: column;
	}

	.usluga-supplies__intro {
		width: auto;
		flex: 1 1 auto;
		min-height: 0;
		gap: var(--space-md);
	}

	.usluga-supplies__list {
		flex-wrap: wrap;
	}

	.usluga-supplies__item {
		flex: 1 1 240px;
		width: auto;
	}
}

@media (max-width: 767px) {
	.usluga-supplies__inner {
		gap: var(--space-lg);
	}
}