/**
 * Sekcja: case study.
 * Figma 14557:3837 — pas 1440 na F2F6F9, padding 100/78, pasek 1281×246:
 * zieleń 428 + mięta 853, metryka 48/57,6, opis 20/28 Geist Medium.
 */

.usluga-case {
	background-color: var(--color-surface-soft);
	padding-block: var(--space-section);
}

.usluga-case__inner {
	display: flex;
	align-items: stretch;
	min-height: 246px;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.usluga-case__metric {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 36px;
	width: 428px;
	height: 246px;
	flex: 0 0 428px;
	padding: 68px 37px;
	overflow: hidden;
	background-color: var(--color-primary);
	color: var(--color-white);
}

.usluga-case__kicker,
.usluga-case__value {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
}

.usluga-case__stat {
	display: flex;
	align-items: center;
	gap: 47px;
}

.usluga-case__label {
	margin: 0;
	max-width: 155px;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
}

.usluga-case__body {
	display: flex;
	align-items: flex-end;
	gap: var(--space-md);
	flex: 1 1 auto;
	min-width: 0;
	padding: 29px 47px;
	background-color: var(--color-surface-mint);
}

.usluga-case__text {
	margin: 0;
	max-width: 614px;
	font-size: var(--fs-h6);
	font-weight: 500;
	line-height: var(--lh-h5);
	color: var(--color-primary);
}

/* Figma 14557:3848: wiersz 149 px, tekst od góry (y≈48 w panelu 246), link przy dolnej krawędzi. */
@media (min-width: 1440px) {
	.usluga-case__body {
		align-items: flex-end;
		gap: 0;
		padding: 48px 20px 49px 47px;
	}

	.usluga-case__text {
		flex: 0 0 614px;
		width: 614px;
		max-width: 614px;
		min-height: 149px;
	}
}

.usluga-case__body .btn--text {
	color: var(--color-primary);
}

.usluga-case__body .btn--text:hover {
	color: var(--color-primary-bright);
}

.usluga-case__body .btn--text:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

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

	.usluga-case__metric {
		width: auto;
		flex-basis: auto;
		padding: var(--space-lg) var(--space-md);
	}

	.usluga-case__body {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--space-lg) var(--space-md);
	}
}