/**
 * Wallxer Process widget. Mobile first: a simple list; from 721px an
 * alternating timeline with a centre line (the design's breakpoint).
 */

.wlx-proc {
	--wlx-proc-pad-y: clamp(56px, 7vw, 100px);
	--wlx-proc-icon-bg: var(--wlx-ink, #14141c);
	--wlx-proc-icon-color: #ffffff;
	--wlx-proc-accent: var(--wlx-brand, #5b63d3);
	--wlx-proc-hover-bg: #f4f4f6;
	--wlx-proc-line: #e2e3ec;
	--wlx-proc-number: var(--wlx-meta, #6a6a7e);

	background-color: var(--wlx-bg, #ffffff);
}

.wlx-proc__inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: var(--wlx-proc-pad-y) 20px;
}

.wlx-proc .wlx-proc__list {
	position: relative;
	display: grid;
	gap: clamp(8px, 1.4vw, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlx-proc__step {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: clamp(16px, 2vw, 24px) clamp(14px, 2vw, 26px);
	border-radius: 22px;
	transition: background-color 0.3s;
}

.wlx-proc__step:hover {
	background-color: var(--wlx-proc-hover-bg);
}

.wlx-proc__marker {
	display: flex;
	gap: 14px;
	align-items: center;
}

.wlx-proc__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	font-size: 22px;
	line-height: 1;
	color: var(--wlx-proc-icon-color);
	background: var(--wlx-proc-icon-bg);
	box-shadow: 0 10px 24px rgba(20, 20, 40, 0.16);
	transition: transform 0.3s cubic-bezier(0.3, 0.8, 0.3, 1), background-color 0.3s, box-shadow 0.3s;
}

.wlx-proc__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.wlx-proc__step:hover .wlx-proc__icon {
	background: var(--wlx-proc-accent);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--wlx-proc-accent) 34%, transparent);
	transform: scale(1.08) rotate(-3deg);
}

.wlx-proc__number {
	font-family: var(--wlx-font-mono, "IBM Plex Mono", ui-monospace, monospace);
	font-size: 14px;
	font-weight: 600;
	color: var(--wlx-proc-number);
}

.wlx-proc__dot {
	display: none;
}

.wlx-proc .wlx-proc__title {
	margin: 0 0 8px;
	font-family: var(--wlx-font-heading, "Anek Bangla", "Hind Siliguri", sans-serif);
	font-size: clamp(19px, 2.1vw, 23px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--wlx-ink, #14141c);
}

.wlx-proc .wlx-proc__text {
	max-width: 42ch;
	margin: 0;
	font-size: 16px;
	line-height: 1.85;
	color: var(--wlx-muted-2, #5a5a6e);
}

/* Alternating timeline ---------------------------------------------------- */

@media (min-width: 721px) {

	.wlx-proc__list::before {
		content: "";
		position: absolute;
		top: 40px;
		bottom: 40px;
		left: 50%;
		width: 2px;
		background: linear-gradient(180deg, transparent 0%, var(--wlx-proc-line) 8%, var(--wlx-proc-line) 92%, transparent 100%);
		transform: translateX(-50%);
	}

	.wlx-proc__step {
		grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
		gap: clamp(10px, 2vw, 26px);
	}

	/* Odd steps: icon on the left of the line, text on the right. */
	.wlx-proc__marker {
		grid-row: 1;
		grid-column: 1;
		flex-direction: row-reverse;
	}

	.wlx-proc__dot {
		position: relative;
		display: block;
		grid-row: 1;
		grid-column: 2;
		width: 14px;
		height: 14px;
		margin: 0 auto;
		border: 2px solid #d9dae4;
		border-radius: 50%;
		background: #ffffff;
		transition: border-color 0.3s, box-shadow 0.3s;
	}

	.wlx-proc__step:hover .wlx-proc__dot {
		border-color: var(--wlx-proc-accent);
		box-shadow: 0 0 0 5px color-mix(in srgb, var(--wlx-proc-accent) 16%, transparent);
	}

	.wlx-proc__content {
		grid-row: 1;
		grid-column: 3;
		text-align: left;
	}

	/* Even steps: mirrored. */
	.wlx-proc__step:nth-child(even) .wlx-proc__marker {
		grid-column: 3;
		flex-direction: row;
	}

	.wlx-proc__step:nth-child(even) .wlx-proc__content {
		grid-column: 1;
		text-align: right;
	}

	.wlx-proc__step:nth-child(even) .wlx-proc__text {
		margin-left: auto;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wlx-proc__step,
	.wlx-proc__icon,
	.wlx-proc__dot {
		transition: none !important;
	}

	.wlx-proc__step:hover .wlx-proc__icon {
		transform: none !important;
	}
}