/**
 * Sekcja: Usługi wspierające.
 * Figma 14557:3576 — pas 1440 na F2F6F9, padding 78, kicker 60/72,
 * lewa kolumna 360×370, trzy karty 269×370 gap 24.
 */

.usluga-support {
	background-color: var(--color-surface-soft);
	padding-block: 78px;
}

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

.usluga-support__kicker {
	margin: 0;
}

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

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

.usluga-support__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-support__lead {
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
}

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

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

/* Kontener treści ma 1284, ramka Figmy 1288. Przy ≥1440 pierwsza karta
   (tytuł 14557:3588) ma wyjść na x=533: kolumna 360 + odstęp 73.
   Lista zostaje przy var(--space-md) = 24, jak usluga-supplies
   (tytuły 533 / 826 / 1119). */
@media (min-width: 1440px) {
	.usluga-support__row {
		justify-content: flex-start;
		gap: 73px;
	}
}

/* 360 + 3×269 mieści się w kontenerze 1284. Między 1200 a 1439 kolumny
   oddają szerokość, zamiast wypychać ostatnią kartę za ekran. */
@media (min-width: 1200px) and (max-width: 1439px) {
	.usluga-support__intro {
		flex: 0 1 360px;
		width: auto;
		max-width: 360px;
		min-width: 0;
	}

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

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

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

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

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

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

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