/*
 * We ALL Grow - Intrapreneur.
 *
 * Read from cp-all-designer we-all-grow.html:317-359 and css/we-all-grow.css:658-880.
 *
 * Colour, type, padding and the spaces between the parts arrive from the
 * Style tab and are not repeated here.
 *
 * Left behind: the design's two columns of steps below 1100 start at 1024
 * here, its single column below 560 at 767 — the build's tiers.
 */

.custom-we-all-grow-intrapreneur {
	--custom-we-all-grow-intrapreneur-shade: #16418C;
	--custom-we-all-grow-intrapreneur-rule: #CE2929;
	--custom-we-all-grow-intrapreneur-gap: 24px;
	--custom-we-all-grow-intrapreneur-drawing: 22px;
	/* we-all-grow.css:729 — the chevron between two steps, drawn as a mask */
	--custom-we-all-grow-intrapreneur-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* we-all-grow.css:665-666 — the picture fills the band behind everything */
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__behind {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	pointer-events: none;
}

.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__picture {
	position: absolute;
	inset: 0;
}

.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__picture > img {
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 70% 40%;              /* we-all-grow.css:666 */
}

/* we-all-grow.css:679-688 — solid navy over the words, thinning fast to the right */
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__behind::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		var(--custom-we-all-grow-intrapreneur-shade) 0%,
		var(--custom-we-all-grow-intrapreneur-shade) 38%,
		color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-shade) 45%, transparent) 52%,
		color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-shade) 16%, transparent) 68%,
		color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-shade) 6%, transparent) 100%);
}

.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__inner {
	position: relative;
	z-index: 1;
}

/* we-all-grow.css:693-702 — a short red rule leads the slogan */
.custom-we-all-grow-intrapreneur [data-custom-investor-intro] {
	position: relative;
	padding-left: 26px;
}

.custom-we-all-grow-intrapreneur [data-custom-investor-intro]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	height: 4px;                           /* we-all-grow.css:701 measures 3px */
	margin-top: -2px;
	border-radius: 2px;
	background-color: var(--custom-we-all-grow-intrapreneur-rule);
}

/* we-all-grow.css:703-708 */
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__text {
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0;
	text-transform: none;
}

.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__text strong,
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__text b {
	font-weight: 600;
}

.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__text .nb {
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* The steps — we-all-grow.css:723-860                                 */
/* ------------------------------------------------------------------ */

/* one white panel; the steps stand in a row inside it */
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--custom-we-all-grow-intrapreneur-gap);
	box-sizing: border-box;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	list-style: none;
	box-shadow: 0 34px 80px -20px rgba(22, 65, 140, 0.3);   /* --sh-lg, app.css:161 */
}

/* each step's colour is its own: its tile, its border, its icon, the chevron
   pointing at it */
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step {
	--custom-we-all-grow-intrapreneur-acc: #50A3D5;
	--custom-we-all-grow-intrapreneur-delay: 0ms;
	position: relative;
	min-width: 0;
	margin: 0;
	border: 2px solid color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-acc) 18%, #FFFFFF);   /* measures 1px */
	border-radius: 14px 4px 14px 4px;
	background-color: color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-acc) 6%, #FFFFFF);
	list-style: none;
	/* we-all-grow.css:773-792 — they rise in one after another; `translate` for
	   the rise, `transform` kept for a pointer, so the pointer has no wait */
	opacity: 0;
	translate: 0 16px;
	transition: opacity 500ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--custom-we-all-grow-intrapreneur-delay),
	            translate 500ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--custom-we-all-grow-intrapreneur-delay),
	            transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            background-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step:nth-child(2) { --custom-we-all-grow-intrapreneur-delay: 180ms; }
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step:nth-child(3) { --custom-we-all-grow-intrapreneur-delay: 360ms; }
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step:nth-child(n+4) { --custom-we-all-grow-intrapreneur-delay: 540ms; }

.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__steps.is-in .custom-we-all-grow-intrapreneur__step {
	opacity: 1;
	translate: none;
}

/* we-all-grow.css:806-818 — the chevron fills the gap before a step, centred
   both ways, in the colour of the step it points at; it follows that step in */
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step + .custom-we-all-grow-intrapreneur__step::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--custom-we-all-grow-intrapreneur-gap) - 2px);
	width: var(--custom-we-all-grow-intrapreneur-gap);
	background-color: color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-acc) 62%, #FFFFFF);
	-webkit-mask: var(--custom-we-all-grow-intrapreneur-chevron) center / 10px 16px no-repeat;
	        mask: var(--custom-we-all-grow-intrapreneur-chevron) center / 10px 16px no-repeat;
	opacity: 0;
	transition: opacity 400ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--custom-we-all-grow-intrapreneur-delay) + 100ms),
	            background-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__steps.is-in .custom-we-all-grow-intrapreneur__step + .custom-we-all-grow-intrapreneur__step::before {
	opacity: 1;
}

/* we-all-grow.css:819-829 — the leaf-cornered icon tile with a shadow of its own colour */
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__icon {
	display: grid;
	place-items: center;
	margin-bottom: 12px;
	border-radius: 12px 4px 12px 4px;
	background-color: var(--custom-we-all-grow-intrapreneur-acc);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-acc) 32%, transparent);
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__icon svg,
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__icon i {
	display: block;
	width: var(--custom-we-all-grow-intrapreneur-drawing);
	height: var(--custom-we-all-grow-intrapreneur-drawing);
	font-size: var(--custom-we-all-grow-intrapreneur-drawing);
	fill: currentColor;
}

.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__from,
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__to {
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
}

/* we-all-grow.css:855 */
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__from {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.6;
}

/* we-all-grow.css:856-860 */
.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__to {
	margin-top: 2px;
	margin-bottom: 0;
	font-weight: 600;
	line-height: 1.55;
}

/* we-all-grow.css:842-854 — a pointer that rests on a step deepens its tile,
   lifts it and its icon, and darkens the chevron pointing at it */
@media (hover: hover) {
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step:hover {
		transform: translateY(-4px);
		border-color: color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-acc) 38%, #FFFFFF);
		background-color: color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-acc) 12%, #FFFFFF);
		box-shadow: 0 16px 28px -18px color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-acc) 62%, transparent);
	}
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step:hover .custom-we-all-grow-intrapreneur__icon {
		transform: translateY(-2px) scale(1.06);
		box-shadow: 0 12px 22px color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-acc) 46%, transparent);
	}
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step:hover::before {
		background-color: color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-acc) 88%, #FFFFFF);
	}
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (we-all-grow.css:865-875, drawn below 1100) */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* the shade lies evenly over the whole picture */
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__behind::after {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-shade) 92%, transparent) 0%,
			color-mix(in srgb, var(--custom-we-all-grow-intrapreneur-shade) 88%, transparent) 100%);
	}
	/* the author's line break closes up */
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__text br {
		display: none;
	}
	/* two to a row, the icon beside its two lines, no chevrons */
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 14px;
	}
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__icon {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step + .custom-we-all-grow-intrapreneur__step::before {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (we-all-grow.css:877-879, drawn at 560)        */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step {
		opacity: 1;
		translate: none;
		transition: none;
	}
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step + .custom-we-all-grow-intrapreneur__step::before {
		opacity: 1;
		transition: none;
	}
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step:hover,
	.custom-we-all-grow-intrapreneur .custom-we-all-grow-intrapreneur__step:hover .custom-we-all-grow-intrapreneur__icon {
		transform: none;
	}
}