/**
 * Podstrona Usługi.
 *
 * Style poszczególnych sekcji znajdują się
 * w katalogach odpowiednich bloków.
 */

body {
	background: var(--color-background, #080b0d);
}

.site-main {
	overflow: clip;
	background:
		radial-gradient(
			circle at 50% 35%,
			rgba(217, 180, 93, 0.025),
			transparent 42rem
		),
		var(--color-background, #080b0d);
}

/*
 * Usuwamy marginesy dodawane przez edytor blokowy.
 */
.site-main > .on-services-hero,
.site-main > .on-services-list,
.site-main > .on-services-promise,
.site-main > .on-service-cta {
	margin-block: 0;
}

/*
 * Lista przylega wizualnie do hero, ale zachowuje
 * odpowiednią ilość miejsca na rozpoczęcie kart.
 */
.on-services-hero + .on-services-list {
	padding-top: clamp(3rem, 6vw, 6rem);
}

/*
 * Separator powinien znajdować się bliżej
 * ostatniej karty niż końcowego CTA.
 */
.on-services-list + .on-services-promise {
	padding-top: clamp(1rem, 3vw, 2.5rem);
}

/*
 * Przerwa pomiędzy separatorem a końcowym CTA.
 */
.on-services-promise + .on-service-cta {
	margin-top: 0;
}

/*
 * Lepsze pozycjonowanie po przejściu do kotwicy.
 */
.on-services-hero,
.on-services-list,
.on-services-promise,
.on-service-cta {
	scroll-margin-top: 7rem;
}

@media (max-width: 47.99rem) {
	.on-services-hero + .on-services-list {
		padding-top: 2rem;
	}

	.on-services-list + .on-services-promise {
		padding-top: 1rem;
	}

	.on-services-hero,
	.on-services-list,
	.on-services-promise,
	.on-service-cta {
		scroll-margin-top: 5.5rem;
	}
}