/*
 * Engagement protocol step groups.
 *
 * Suggested block structure:
 * - Outer Group: gaussian-engagement-protocol
 * - Each step Group: gaussian-engagement-protocol__step
 * - Each step contains a Heading 3 and Paragraph.
 */
.gaussian-engagement-protocol {
	--engagement-protocol-bg: color-mix(in srgb, var(--wp--preset--color--primary-accent, #e5f1f8) 78%, var(--wp--preset--color--main-accent, #e3e7eb) 22%);
	--engagement-protocol-text: var(--wp--preset--color--main, #080a1a);
	--engagement-protocol-muted: var(--wp--preset--color--secondary, #3f435f);
	--engagement-protocol-marker-bg: var(--wp--preset--color--primary, #191b46);
	--engagement-protocol-marker-text: var(--wp--preset--color--base, #ffffff);
	counter-reset: engagement-protocol;
	display: grid;
	gap: var(--wp--preset--spacing--small, 1rem);
}

.gaussian-engagement-protocol__step {
	align-items: center;
	background: var(--engagement-protocol-bg);
	border-bottom-left-radius: var(--wp--preset--border-radius--sm, 0.375rem);
	border-bottom-right-radius: var(--wp--preset--border-radius--xs, 0.25rem);
	border-top-left-radius: var(--wp--preset--border-radius--sm, 0.375rem);
	border-top-right-radius: var(--wp--preset--border-radius--xs, 0.25rem);
	color: var(--engagement-protocol-text);
	counter-increment: engagement-protocol;
	display: grid;
	gap: 0.35rem;
	min-height: 4.35rem;
	padding: var(--wp--preset--spacing--base, 1.5rem) var(--wp--preset--spacing--base, 1.5rem);
	position: relative;
}

.gaussian-engagement-protocol__step::after {
	content: none;
}

.gaussian-engagement-protocol__step::before {
	align-items: center;
	background: var(--engagement-protocol-marker-bg);
	border-radius: 999px;
	color: var(--engagement-protocol-marker-text);
	content: counter(engagement-protocol);
	display: flex;
	font-size: var(--wp--preset--font-size--x-small, 0.95rem);
	font-weight: 700;
	height: 2.1rem;
	justify-content: center;
	line-height: 1;
	width: 2.1rem;
}

.gaussian-engagement-protocol__step > .wp-block-heading {
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.gaussian-engagement-protocol__step > p {
	color: var(--engagement-protocol-muted);
	font-size: var(--wp--preset--font-size--x-small, 0.95rem);
	line-height: 1.45;
	margin: 0;
}

@media (min-width: 1200px) {
	.gaussian-engagement-protocol {
		--protocol-left-corner: var(--wp--preset--border-radius--sm, 0.375rem);
		gap: 1.35rem;
		padding-left: 2rem;
	}

	.gaussian-engagement-protocol__step {
		background: transparent;
		border-bottom-left-radius: var(--wp--preset--border-radius--sm, 0.375rem);
		border-bottom-right-radius: 0;
		border-top-left-radius: var(--wp--preset--border-radius--sm, 0.375rem);
		border-top-right-radius: 0;
		clip-path: none;
		min-height: 4.15rem;
		padding-left: calc(var(--wp--preset--spacing--medium, 2rem) + 0.35rem);
		padding-right: var(--wp--preset--spacing--x-large, 5rem);
	}

	.gaussian-engagement-protocol__step::after {
		background: var(--engagement-protocol-bg);
		border-bottom-left-radius: var(--wp--preset--border-radius--sm, 0.375rem);
		border-top-left-radius: var(--wp--preset--border-radius--sm, 0.375rem);
		clip-path: polygon(var(--protocol-left-corner) 0, var(--protocol-right-top) 0, var(--protocol-right-bottom) 100%, var(--protocol-left-corner) 100%, 0 calc(100% - var(--protocol-left-corner)), 0 var(--protocol-left-corner));
		content: "";
		inset: 0;
		opacity: var(--protocol-alpha);
		position: absolute;
		z-index: 0;
	}

	.gaussian-engagement-protocol__step::before {
		left: -1.15rem;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}

	.gaussian-engagement-protocol__step > .wp-block-heading,
	.gaussian-engagement-protocol__step > p {
		position: relative;
		z-index: 1;
	}

	.gaussian-engagement-protocol__step:nth-child(1) {
		--protocol-alpha: 0.48;
		--protocol-right-top: 83%;
		--protocol-right-bottom: 86%;
	}

	.gaussian-engagement-protocol__step:nth-child(2) {
		--protocol-alpha: 0.58;
		--protocol-right-top: 87%;
		--protocol-right-bottom: 90.5%;
	}

	.gaussian-engagement-protocol__step:nth-child(3) {
		--protocol-alpha: 0.69;
		--protocol-right-top: 91.5%;
		--protocol-right-bottom: 94.5%;
	}

	.gaussian-engagement-protocol__step:nth-child(4) {
		--protocol-alpha: 0.79;
		--protocol-right-top: 95%;
		--protocol-right-bottom: 97.5%;
	}

	.gaussian-engagement-protocol__step:nth-child(5),
	.gaussian-engagement-protocol__step:nth-child(6) {
		--protocol-alpha: 0.92;
		--protocol-right-top: 98%;
		--protocol-right-bottom: 98%;
	}

	.gaussian-engagement-protocol__step:nth-child(7) {
		--protocol-alpha: 0.84;
		--protocol-right-top: 97.5%;
		--protocol-right-bottom: 95%;
	}

	.gaussian-engagement-protocol__step:nth-child(8) {
		--protocol-alpha: 0.72;
		--protocol-right-top: 94.5%;
		--protocol-right-bottom: 91.5%;
	}

	.gaussian-engagement-protocol__step:nth-child(9) {
		--protocol-alpha: 0.6;
		--protocol-right-top: 90.5%;
		--protocol-right-bottom: 87%;
	}

	.gaussian-engagement-protocol__step:nth-child(10) {
		--protocol-alpha: 0.5;
		--protocol-right-top: 86%;
		--protocol-right-bottom: 83%;
	}
}

@media (max-width: 1199px) {
	.gaussian-engagement-protocol__step {
		grid-template-columns: 2.1rem minmax(0, 1fr);
	}

	.gaussian-engagement-protocol__step::before {
		align-self: start;
		display: flex;
		grid-row: 1 / span 2;
		margin-top: 0.1rem;
	}

	.gaussian-engagement-protocol__step > .wp-block-heading,
	.gaussian-engagement-protocol__step > p {
		grid-column: 2;
	}
}

@media (max-width: 781px) {
	.gaussian-engagement-protocol__step {
		align-items: start;
		min-height: 0;
	}
}