/**
 * Soulful Healing Process Steps widget — base styles.
 * Horizontal connected stepper on desktop, collapsing to a vertical
 * stack on mobile. All colors read from theme CSS variables by
 * default via the widget's own style controls.
 */

.sh-process__header {
	margin-bottom: var(--sh-space-7);
}

.sh-process__title {
	font-family: var(--sh-font-heading);
	font-weight: 600;
	font-size: clamp(1.75rem, 1.4rem + 2vw, 2.75rem);
	color: var(--sh-heading);
	margin: 0;
}

.sh-process__track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.sh-process__step {
	display: flex;
	flex-direction: column;
	background: var(--sh-surface);
	border: 1px solid var(--sh-border);
	border-radius: 16px;
	padding: var(--sh-space-6) var(--sh-space-5);
}

.sh-process__step-head {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: var(--sh-space-4);
}

.sh-process__number {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sh-accent);
	color: var(--sh-button-text);
	font-family: var(--sh-font-heading);
	font-weight: 700;
	font-size: 1.0625rem;
	z-index: 1;
}

.sh-process__connector {
	position: absolute;
	top: 50%;
	left: 44px;
	right: calc(-28px);
	height: 2px;
	background: var(--sh-border);
	transform: translateY(-50%);
	z-index: 0;
}

.sh-process__step-title {
	font-family: var(--sh-font-heading);
	font-weight: 600;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	color: var(--sh-accent);
	margin-bottom: var(--sh-space-3);
}

.sh-process__step-description {
	font-family: var(--sh-font-body);
	color: var(--sh-text-muted);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.7;
	margin: 0;
}

/* Tablet: 2-column grid, connector hidden (doesn't make sense on wrap) */
@media (max-width: 1024px) and (min-width: 641px) {
	.sh-process__track {
		grid-template-columns: repeat(2, 1fr);
	}

	.sh-process__connector {
		display: none;
	}
}

/* Mobile: single column stack; each step becomes a two-column row
   (number+line beside title+description) — the connector runs
   vertically from the bottom of one number down to the next. */
@media (max-width: 640px) {
	.sh-process__track {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sh-process__step {
		flex-direction: row;
		align-items: flex-start;
		border-radius: 0;
		padding: var(--sh-space-5) var(--sh-space-4);
	}

	.sh-process__step:not(:last-child) {
		border-bottom: none;
	}

	.sh-process__step:first-child {
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
	}

	.sh-process__step:last-child {
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
	}

	.sh-process__step-head {
		flex-direction: column;
		align-items: center;
		align-self: stretch;
		margin-right: var(--sh-space-4);
		margin-bottom: 0;
	}

	.sh-process__number {
		width: 36px;
		height: 36px;
		font-size: 0.9375rem;
	}

	.sh-process__connector {
		position: static;
		width: 2px;
		flex: 1;
		min-height: 24px;
		transform: none;
		margin-top: var(--sh-space-2);
	}

	.sh-process__step-body {
		flex: 1;
		padding-top: 6px;
	}
}