/* Process Steps block: a grid with one column per step (--wb-ps-cols, set inline from the step count).
 * Circle style: a numbered marker with a line to the next marker. Bar style: a bar over each step and a
 * "Step N" label. Sizes come from vars the controls set on the wrapper; defaults sit in :where() so the
 * controls always win. Stacking: --stack-tablet (<=1024px) or --stack-mobile (<=767px). */

.wb-process-steps {
	--wb-ps-gap: 24px;
	--wb-ps-row-gap: 32px;
	--wb-ps-marker: 48px;
	--wb-ps-line: 2px;
	--wb-ps-line-color: var(--c-silver, #c0c0c0);
}

.wb-process-steps__list {
	display: grid;
	grid-template-columns: repeat(var(--wb-ps-cols, 4), minmax(0, 1fr));
	column-gap: var(--wb-ps-gap);
	row-gap: var(--wb-ps-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wb-process-steps__item {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0;
}
.wb-process-steps__item::marker {
	content: none;
}
.wb-process-steps__body {
	min-width: 0;
}
:where(.wb-process-steps__title) {
	margin: 0 0 8px;
}
:where(.wb-process-steps__description) {
	margin: 0;
}
:where(.wb-process-steps__description p) {
	margin: 0 0 8px;
}
.wb-process-steps__description > :last-child {
	margin-bottom: 0;
}

/* --- Circle --------------------------------------------------------------------------------------- */

.wb-process-steps--circle .wb-process-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}
.wb-process-steps--circle.wb-process-steps--align-left .wb-process-steps__item {
	align-items: flex-start;
	text-align: left;
}
.wb-process-steps__marker {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--wb-ps-marker);
	height: var(--wb-ps-marker);
	border-radius: 50%;
	border-style: solid;
	line-height: 1;
}
:where(.wb-process-steps__marker) {
	border-width: 2px;
	border-color: var(--c-primary, #4992c1);
	background-color: #fff;
	color: var(--c-secondary, #111e40);
}
/* The line runs from the right edge of this marker to the left edge of the next one. */
.wb-process-steps--circle .wb-process-steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--wb-ps-marker) / 2 - var(--wb-ps-line) / 2);
	left: calc(50% + var(--wb-ps-marker) / 2);
	width: calc(100% + var(--wb-ps-gap) - var(--wb-ps-marker));
	height: var(--wb-ps-line);
	background: var(--wb-ps-line-color);
}
.wb-process-steps--circle.wb-process-steps--align-left .wb-process-steps__item:not(:last-child)::after {
	left: var(--wb-ps-marker);
	width: calc(100% + var(--wb-ps-gap) - var(--wb-ps-marker));
}

/* --- Bar ------------------------------------------------------------------------------------------ */

.wb-process-steps--bar .wb-process-steps__item {
	padding-top: calc(var(--wb-ps-line) + var(--wb-ps-bar-space, 20px));
	text-align: left;
}
.wb-process-steps--bar .wb-process-steps__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--wb-ps-line);
	background: var(--wb-ps-line-color);
}
.wb-process-steps--bar .wb-process-steps__item:first-child::before {
	background: var(--wb-ps-bar-first, var(--wb-ps-line-color));
}
:where(.wb-process-steps__label) {
	margin: 0 0 6px;
}

/* --- Stacked ---------------------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.wb-process-steps--stack-tablet.wb-process-steps--circle .wb-process-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}
	.wb-process-steps--stack-tablet.wb-process-steps--circle .wb-process-steps__item {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}
	.wb-process-steps--stack-tablet.wb-process-steps--circle .wb-process-steps__body {
		flex: 1 1 auto;
		padding-top: calc(var(--wb-ps-marker) / 2 - 0.75em);
	}
	.wb-process-steps--stack-tablet.wb-process-steps--circle .wb-process-steps__item:not(:last-child)::after {
		top: var(--wb-ps-marker);
		left: calc(var(--wb-ps-marker) / 2 - var(--wb-ps-line) / 2);
		width: var(--wb-ps-line);
		height: calc(100% - var(--wb-ps-marker) + var(--wb-ps-row-gap));
	}
	.wb-process-steps--stack-tablet.wb-process-steps--bar .wb-process-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.wb-process-steps--stack-tablet.wb-process-steps--bar .wb-process-steps__list,
	.wb-process-steps--stack-mobile .wb-process-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}
	.wb-process-steps--stack-mobile.wb-process-steps--circle .wb-process-steps__item {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}
	.wb-process-steps--stack-mobile.wb-process-steps--circle .wb-process-steps__body {
		flex: 1 1 auto;
		padding-top: calc(var(--wb-ps-marker) / 2 - 0.75em);
	}
	.wb-process-steps--stack-mobile.wb-process-steps--circle .wb-process-steps__item:not(:last-child)::after {
		top: var(--wb-ps-marker);
		left: calc(var(--wb-ps-marker) / 2 - var(--wb-ps-line) / 2);
		width: var(--wb-ps-line);
		height: calc(100% - var(--wb-ps-marker) + var(--wb-ps-row-gap));
	}
}