/*
 * Photo with slanted callouts (patterns/kit-callouts.php). From the old site's
 * homepage-problems-we-solve-section.tsx, which was built and switched off:
 * volcano photo under a gradient, yellow parallelograms bottom left, blue ones
 * bottom right, each pair stepped so the slants line up. Stacked on phones.
 */
.sp-kit-callouts.sp-kit { --kit-bg: #1e2732; padding-block: 56px 40px; }
@media (min-width: 1024px) {
	.sp-kit-callouts.sp-kit { min-height: 900px; padding-block: 80px; }
}
.sp-kit-callouts .sp-kit-callouts__photo { position: absolute; inset: 0; margin: 0; }
.sp-kit-callouts .sp-kit-callouts__photo img { width: 100%; height: 100%; object-fit: cover; }
.sp-kit-callouts::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(21, 29, 39, 0.82) 0%, rgba(31, 41, 55, 0.32) 34%, rgba(31, 41, 55, 0.08) 62%, rgba(21, 29, 39, 0.48) 100%);
	pointer-events: none;
}
.sp-kit-callouts .sp-container { position: relative; z-index: 1; }
.sp-kit-callouts .sp-kit__title { max-width: 750px; margin-bottom: 24px; color: var(--wp--preset--color--white); }
.sp-kit-callouts .sp-kit__intro { max-width: 448px; color: color-mix(in srgb, var(--wp--preset--color--white) 90%, transparent); }
.sp-kit-callouts .sp-kit-callouts__boxes { display: grid; gap: 16px; margin-top: 48px; }
.sp-kit-callouts .sp-kit-callouts__side { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.sp-kit-callouts .sp-kit-callouts__side--left { background: var(--wp--preset--color--primary); }
.sp-kit-callouts .sp-kit-callouts__side--right { background: var(--wp--preset--color--secondary); }
.sp-kit-callouts .sp-kit-callouts__callout { font-size: var(--wp--preset--font-size--medium); line-height: 1.3; font-weight: 500; }
.sp-kit-callouts .sp-kit-callouts__callout--yellow { color: var(--wp--preset--color--black-light); }
.sp-kit-callouts .sp-kit-callouts__callout--blue { color: var(--wp--preset--color--white); }
@media (min-width: 1024px) {
	.sp-kit-callouts .sp-kit-callouts__boxes {
		grid-template-columns: 1fr 1fr;
		align-items: end;
		margin-top: 300px;
		padding-inline: 40px;
	}
	.sp-kit-callouts .sp-kit-callouts__side { gap: 0; padding: 0; background: none; }
	.sp-kit-callouts .sp-kit-callouts__side--right { align-items: flex-end; }
	.sp-kit-callouts .sp-kit-callouts__callout { padding: 24px 40px; font-size: 20px; text-align: center; }
	.sp-kit-callouts .sp-kit-callouts__callout--yellow { width: 350px; background: var(--wp--preset--color--primary); clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%); }
	.sp-kit-callouts .sp-kit-callouts__callout--yellow.sp-kit-callouts__callout--step { width: 380px; margin: -24px 0 0 20px; }
	.sp-kit-callouts .sp-kit-callouts__callout--blue { width: 380px; padding-inline: 64px; background: var(--wp--preset--color--secondary); clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%); }
	.sp-kit-callouts .sp-kit-callouts__callout--blue.sp-kit-callouts__callout--step { margin-right: 120px; }
	.sp-kit-callouts .sp-kit-callouts__side--right .sp-kit-callouts__callout:last-child { width: 390px; margin-top: -24px; }
}