/**
 * Vellis Horizontal Steps widget styles.
 *
 * A row of equal-width steps: a numbered rounded badge with a caption below.
 * The dashed connector is drawn as a pseudo-element spanning the gap between
 * one badge's edge and the next, positioned at the badge's vertical centre.
 */

.vellis-hsteps {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 24px;
	--vellis-hstep-badge: 88px;
	--vellis-hstep-inset: 0px;
	--vellis-hsteps-gap: 24px;
	--vellis-hstep-line-color: rgba(255, 255, 255, 0.85);
	--vellis-hstep-line-size: 3.2px;
	--vellis-hstep-dash: 12px;
	--vellis-hstep-dash-gap: 12px;
}

.vellis-hstep {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Badge */
.vellis-hstep__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin-bottom: 20px;
	border-radius: 8px;
	background-color: #75ACB0;
	border: 1px solid #fff;
	box-sizing: border-box;
	flex: 0 0 auto;
}

.vellis-hstep__num {
	color: #fff;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

/* Caption */
.vellis-hstep__text {
	max-width: 200px;
	color: #fff;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
}

/* Dashed connector: from this badge's right edge to the next badge's left edge,
   centred on the badge row. Works because steps are equal-width (flex: 1 1 0). */
.vellis-hstep:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--vellis-hstep-badge) / 2);
	left: calc(50% + var(--vellis-hstep-badge) / 2 + var(--vellis-hstep-inset));
	width: calc(100% - var(--vellis-hstep-badge) - (2 * var(--vellis-hstep-inset)) + var(--vellis-hsteps-gap, 24px));
	height: var(--vellis-hstep-line-size, 3.2px);
	transform: translateY(-50%);
	/* Exact dashes: border-style:dashed can't control dash length, so we paint
	   the dashes with a repeating gradient (dash then transparent gap). */
	background-image: repeating-linear-gradient(
		to right,
		var(--vellis-hstep-line-color, rgba(255, 255, 255, 0.85)) 0,
		var(--vellis-hstep-line-color, rgba(255, 255, 255, 0.85)) var(--vellis-hstep-dash, 12px),
		transparent var(--vellis-hstep-dash, 12px),
		transparent calc(var(--vellis-hstep-dash, 12px) + var(--vellis-hstep-dash-gap, 12px))
	);
}

/* When connectors are disabled */
.vellis-hsteps--no-connector .vellis-hstep::after {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Mobile stacking
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	/* prefix_class puts vellis-hsteps--stack-yes on the widget wrapper, so the
	   inner .vellis-hsteps is a descendant of it. */
	.vellis-hsteps--stack-yes .vellis-hsteps {
		flex-direction: column;
		align-items: center;
	}

	.vellis-hsteps--stack-yes .vellis-hstep {
		width: 100%;
		flex: 0 0 auto;
	}

	/* The horizontal connector math doesn't apply once stacked */
	.vellis-hsteps--stack-yes .vellis-hstep::after {
		display: none;
	}
}