/*
 * Partner - Route.
 *
 * Read from cp-all-designer join-business/store-business-partner/index.html:194-251
 * and css/app.css:3921-4057, 4065-4072, 4080-4085.
 *
 * Colour, type, padding, corners and the spaces between the parts arrive from
 * the Style tab and are not repeated here.
 */

.custom-partner-route {
	--custom-route-ground: #F5F8FC;
	--custom-route-node: 56px;
	--custom-route-edge: #EEF2F7;
	--custom-route-edge-on: rgba(206, 41, 41, 0.4);
}

/* app.css:3949 — the content rides over the mark printed on the band */
.custom-partner-route .custom-partner-route__inner {
	position: relative;
	z-index: 1;
}

/* app.css:3939-3946 — the leaves, large and faint, bleeding off the corner */
.custom-partner-route .custom-partner-route__leaves {
	position: absolute;
	bottom: -58px;                         /* app.css:3941 measures -57.6px */
	left: -86px;                           /* measures -86.4px */
	z-index: 0;
	width: 604px;                          /* app.css:3942 measures 604.8px */
	aspect-ratio: 35.949 / 23.971;
	background: url("../img/investor/leaves-blue.svg") left bottom / contain no-repeat;
	opacity: 0.08;
	pointer-events: none;
}

/* app.css:3951-3956 — the heading beside the stops, level with the first */
.custom-partner-route .custom-partner-route__route {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	align-items: start;
}

.custom-partner-route .custom-partner-route__intro-side {
	min-width: 0;
}

.custom-partner-route .custom-partner-route__steps {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------ */
/* One stop — app.css:3966-4014                                        */
/* ------------------------------------------------------------------ */

.custom-partner-route .custom-partner-route__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--custom-route-node) minmax(0, 1fr);
	margin: 0;
	list-style: none;
}

/* the rail runs from under one mark to the top of the next, and is drawn last.
   It stands on the mark's centre line: half the mark in, then half its own width back. */
.custom-partner-route .custom-partner-route__step::before {
	content: "";
	position: absolute;
	top: var(--custom-route-node);
	bottom: 0;
	left: calc(var(--custom-route-node) / 2);
	width: 2px;
	background: linear-gradient(to bottom, rgba(206, 41, 41, 0.42), rgba(206, 41, 41, 0.16));
	transform: translateX(-50%) scaleY(0);
	transform-origin: top;
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms;
}

.custom-partner-route .custom-partner-route__step.is-in::before {
	transform: translateX(-50%) scaleY(1);
}

.custom-partner-route .custom-partner-route__step:last-child::before {
	display: none;
}

/* app.css:3985-3992 — the mark sits on the rail in a ring of the band's own ground */
.custom-partner-route .custom-partner-route__node {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--custom-route-node);
	height: var(--custom-route-node);
	border-radius: 50%;
	background: linear-gradient(135deg, #AC2020, #801515);
	box-shadow: 0 0 0 6px var(--custom-route-ground), 0 10px 22px -10px rgba(206, 41, 41, 0.45);
	line-height: 1;
	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-partner-route .custom-partner-route__node svg {
	display: block;
}

/* app.css:4023-4026 — one red, walked down in lightness from stop to stop;
   the stops past the fourth keep the deepest */
.custom-partner-route .custom-partner-route__step:nth-child(1) .custom-partner-route__node {
	background: linear-gradient(135deg, #E25E5E, #D14040);
}

.custom-partner-route .custom-partner-route__step:nth-child(2) .custom-partner-route__node {
	background: linear-gradient(135deg, #D84343, #C22C2C);
}

.custom-partner-route .custom-partner-route__step:nth-child(3) .custom-partner-route__node {
	background: linear-gradient(135deg, #C62F2F, #A82121);
}

.custom-partner-route .custom-partner-route__step.is-in .custom-partner-route__node {
	opacity: 1;
	transform: scale(1);
}

/* app.css:3998-4005 — the card slides in off the rail */
.custom-partner-route .custom-partner-route__card {
	box-sizing: border-box;
	min-width: 0;
	border: 2px solid var(--custom-route-edge);   /* app.css:4000 measures 1px */
	box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm, app.css:145 */
	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-partner-route .custom-partner-route__step.is-in .custom-partner-route__card {
	transform: translateX(0);
}

/* app.css:4030-4033 — reached, and heavy enough to outweigh the entrance */
.custom-partner-route .custom-partner-route__step.is-in:hover .custom-partner-route__node {
	transform: scale(1.08);
}

.custom-partner-route .custom-partner-route__step.is-in:hover .custom-partner-route__card {
	border-color: var(--custom-route-edge-on);
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh, app.css:146 */
	transform: translateX(6px);
}

/* app.css:4010-4013 */
.custom-partner-route .custom-partner-route__number {
	margin: 0 0 8px;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 2px;                   /* app.css:4011 measures 1.15px */
	text-transform: uppercase;
}

.custom-partner-route .custom-partner-route__step-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (app.css:4065-4072, drawn at 1000)         */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* the heading stands over the route rather than beside it */
	.custom-partner-route .custom-partner-route__route {
		grid-template-columns: minmax(0, 1fr);
	}
	/* the stops now run over the corner the mark sits in, so it pulls back */
	.custom-partner-route .custom-partner-route__leaves {
		bottom: -36px;                     /* measures -36.8px */
		left: -56px;                       /* measures -55.2px */
		width: 380px;
		opacity: 0.07;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (app.css:4080-4085, drawn at 600)              */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-partner-route .custom-partner-route__leaves {
		bottom: -16px;                     /* measures -16.8px */
		left: -26px;                       /* measures -25.2px */
		width: 220px;
	}
	.custom-partner-route .custom-partner-route__node {
		box-shadow: 0 0 0 6px var(--custom-route-ground), 0 8px 18px -10px rgba(206, 41, 41, 0.45);   /* app.css:4083 measures 5px and -9px */
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-partner-route .custom-partner-route__step::before,
	.custom-partner-route .custom-partner-route__node,
	.custom-partner-route .custom-partner-route__card {
		transition: none;
	}
	.custom-partner-route .custom-partner-route__node {
		opacity: 1;
		transform: none;
	}
	.custom-partner-route .custom-partner-route__card,
	.custom-partner-route .custom-partner-route__step.is-in:hover .custom-partner-route__card {
		transform: none;
	}
	.custom-partner-route .custom-partner-route__step::before,
	.custom-partner-route .custom-partner-route__step.is-in::before {
		transform: translateX(-50%);
	}
	.custom-partner-route .custom-partner-route__step.is-in:hover .custom-partner-route__node {
		transform: none;
	}
}