/*
 * SME - Steps.
 *
 * Read from cp-all-designer sme.html:278-347, css/sme.css:470-585, 641-650,
 * 677-697, 705-710.
 *
 * Colour, type, padding, the corner and the spaces between the parts arrive
 * from the Style tab and are not repeated here.
 */

.custom-sme-steps {
	--custom-sme-steps-edge: #EEF2F7;
	--custom-sme-steps-edge-on: rgba(80, 163, 213, 0.5);
}

/* sme.css:477-481 — the head beside the steps, the steps the wider share */
.custom-sme-steps .custom-sme-steps__route {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	align-items: start;
}

/* sme.css:491-494 — the head and its button stay in view while the steps are read */
.custom-sme-steps .custom-sme-steps__aside {
	position: sticky;
	min-width: 0;
}

.custom-sme-steps .custom-sme-steps__act {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 16px;                             /* sme.css:58 */
}

.custom-sme-steps .custom-sme-steps__steps {
	min-width: 0;
}

/* sme.css:501-510 — the title, then a rule across what is left */
.custom-sme-steps .custom-sme-steps__steps-head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.custom-sme-steps .custom-sme-steps__steps-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.custom-sme-steps .custom-sme-steps__steps-rule {
	flex: 1 1 auto;
	height: 2px;                           /* sme.css:510 measures 1px */
}

/* ------------------------------------------------------------------ */
/* The rail — sme.css:512-551                                          */
/* ------------------------------------------------------------------ */

.custom-sme-steps .custom-sme-steps__list {
	--custom-sme-steps-pin: 56px;
	--custom-sme-steps-icon: 26px;
	--custom-sme-steps-from-1: #7CC1E7;
	--custom-sme-steps-to-1: #5AA9D8;
	--custom-sme-steps-from-2: #5FAEDB;
	--custom-sme-steps-to-2: #4795C6;
	--custom-sme-steps-from-3: #4A9BCC;
	--custom-sme-steps-to-3: #3982B3;
	--custom-sme-steps-from-4: #3A88B8;
	--custom-sme-steps-to-4: #2D739E;
	--custom-sme-steps-from-5: #2D789E;
	--custom-sme-steps-to-5: #1F5B7C;
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-sme-steps .custom-sme-steps__step {
	--custom-sme-steps-from: var(--custom-sme-steps-from-5);
	--custom-sme-steps-to: var(--custom-sme-steps-to-5);
	position: relative;
	display: grid;
	grid-template-columns: var(--custom-sme-steps-pin) minmax(0, 1fr);
	margin: 0;
	list-style: none;
}

/* the pins deepen down the rail, one shade of blue; past the fifth, the fifth's */
.custom-sme-steps .custom-sme-steps__step:nth-child(1) {
	--custom-sme-steps-from: var(--custom-sme-steps-from-1);
	--custom-sme-steps-to: var(--custom-sme-steps-to-1);
}

.custom-sme-steps .custom-sme-steps__step:nth-child(2) {
	--custom-sme-steps-from: var(--custom-sme-steps-from-2);
	--custom-sme-steps-to: var(--custom-sme-steps-to-2);
}

.custom-sme-steps .custom-sme-steps__step:nth-child(3) {
	--custom-sme-steps-from: var(--custom-sme-steps-from-3);
	--custom-sme-steps-to: var(--custom-sme-steps-to-3);
}

.custom-sme-steps .custom-sme-steps__step:nth-child(4) {
	--custom-sme-steps-from: var(--custom-sme-steps-from-4);
	--custom-sme-steps-to: var(--custom-sme-steps-to-4);
}

/* sme.css:522-529 — the line runs from under one pin to the top of the next,
   drawn down once the step is reached */
.custom-sme-steps .custom-sme-steps__step::before {
	content: "";
	position: absolute;
	top: var(--custom-sme-steps-pin);
	bottom: 0;
	left: calc((var(--custom-sme-steps-pin) - 2px) / 2);
	width: 2px;
	background: linear-gradient(to bottom, rgba(80, 163, 213, 0.5), rgba(80, 163, 213, 0.16));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms;
}

.custom-sme-steps .custom-sme-steps__step.is-in::before {
	transform: scaleY(1);
}

.custom-sme-steps .custom-sme-steps__list > .custom-sme-steps__step:last-child::before {
	display: none;
}

/* sme.css:531-545 — a ringed pin; it drops in as its step is reached */
.custom-sme-steps .custom-sme-steps__pin {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--custom-sme-steps-pin);
	height: var(--custom-sme-steps-pin);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--custom-sme-steps-from), var(--custom-sme-steps-to));
	box-shadow: 0 0 0 6px #FFFFFF, 0 10px 22px -10px rgba(45, 120, 158, 0.5);
	line-height: 0;
	opacity: 0;
	transform: scale(0.4);
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms,
	            opacity 400ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms;
}

.custom-sme-steps .custom-sme-steps__step.is-in .custom-sme-steps__pin {
	opacity: 1;
	transform: scale(1);
}

.custom-sme-steps .custom-sme-steps__pin svg {
	display: block;
	width: var(--custom-sme-steps-icon);
	height: var(--custom-sme-steps-icon);
}

.custom-sme-steps .custom-sme-steps__pin i {
	font-size: var(--custom-sme-steps-icon);
}

/* sme.css:560-573 — the card slides off the rail as its step is reached */
.custom-sme-steps .custom-sme-steps__card {
	box-sizing: border-box;
	min-width: 0;
	border: 2px solid var(--custom-sme-steps-edge);   /* sme.css:562 measures 1px */
	box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm, app.css:159 */
	transform: translateX(-14px);
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1) 180ms,
	            box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-sme-steps .custom-sme-steps__step.is-in .custom-sme-steps__card {
	transform: translateX(0);
}

/* sme.css:540, 570 — reached by any pointer, a finger included, as the design has it */
.custom-sme-steps .custom-sme-steps__step.is-in:hover .custom-sme-steps__pin {
	transform: scale(1.08);
}
.custom-sme-steps .custom-sme-steps__step.is-in:hover .custom-sme-steps__card {
	border-color: var(--custom-sme-steps-edge-on);
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh, app.css:160 */
	transform: translateX(6px);
}

/* sme.css:574-577, as the card's paragraph rule (582-585) leaves it */
.custom-sme-steps .custom-sme-steps__label {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1.85;
	letter-spacing: 2px;                   /* sme.css:575 measures 1.15px */
	text-transform: uppercase;
}

/* sme.css:578-581 */
.custom-sme-steps .custom-sme-steps__card-title {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

/* sme.css:582-585, 697 */
.custom-sme-steps .custom-sme-steps__card-text {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1.85;
	letter-spacing: 0;
	text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (sme.css:641-650)                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* the head over the steps, and it scrolls away with the page */
	.custom-sme-steps .custom-sme-steps__route {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-sme-steps .custom-sme-steps__aside {
		position: static;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (sme.css:677-697, drawn at 640)                */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-sme-steps .custom-sme-steps__steps-title {
		white-space: normal;
	}
	.custom-sme-steps .custom-sme-steps__steps-rule {
		display: none;
	}
	.custom-sme-steps .custom-sme-steps__pin {
		box-shadow: 0 0 0 6px #FFFFFF, 0 8px 18px -10px rgba(45, 120, 158, 0.5);   /* sme.css:694 measures 5px and -9px */
	}
	.custom-sme-steps .custom-sme-steps__label,
	.custom-sme-steps .custom-sme-steps__card-text {
		line-height: 1.8;
	}
	/* sme.css:702 — the button runs the column's width */
	.custom-sme-steps .custom-sme-steps__act [data-custom-partner-button] {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-sme-steps .custom-sme-steps__step::before,
	.custom-sme-steps .custom-sme-steps__pin,
	.custom-sme-steps .custom-sme-steps__card {
		transition: none;
	}
	.custom-sme-steps .custom-sme-steps__step::before,
	.custom-sme-steps .custom-sme-steps__pin,
	.custom-sme-steps .custom-sme-steps__card {
		opacity: 1;
		transform: none;
	}
}