/*
 * Career - Path.
 *
 * Read from cp-all-designer career-paths.html:96-296 and
 * css/career-paths.css:32-295.
 *
 * Colour, type, padding, the corner, the widths and the spaces between the
 * parts arrive from the Style tab and are not repeated here.
 */

.custom-career-path {
	--custom-career-path-line: #16418C;
	--custom-career-path-curl: 86px;
	--custom-career-path-off: 24px;
	padding-bottom: var(--custom-career-path-space, 144px);
	/* career-paths.css:42 — a jump to the line stops short of the header (--header-h + 24) */
	scroll-margin-top: 114px;
}

/* the last line of a run closes the section: the next widget is not a line */
.elementor-widget-career-path:not(:has(+ .elementor-widget-career-path)) .custom-career-path {
	padding-bottom: var(--custom-career-path-end, 124px);
}

/* career-paths.css:79-85 — the picture the wider share, the words beside it */
.custom-career-path .custom-career-path__card {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	margin-right: auto;
	margin-left: auto;
}

.custom-career-path--right .custom-career-path__card {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.custom-career-path--right .custom-career-path__media {
	order: 2;
}

/* ------------------------------------------------------------------ */
/* The picture — career-paths.css:94-124                               */
/* ------------------------------------------------------------------ */

/* the plate sits outside the tile, which clips the picture to its corners */
.custom-career-path .custom-career-path__media {
	position: relative;
	isolation: isolate;
	min-width: 0;
}

.custom-career-path .custom-career-path__media::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: var(--custom-career-path-off) calc(-1 * var(--custom-career-path-off)) calc(-1 * var(--custom-career-path-off)) var(--custom-career-path-off);
	border-radius: var(--custom-career-path-curl) 6px var(--custom-career-path-curl) 6px;
	background: var(--custom-career-path-plate, color-mix(in srgb, var(--custom-career-path-line) 50%, #FFFFFF));
	transition: inset 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* a picture on the right sets its plate off to the left (career-paths.css:104-106) */
.custom-career-path--right .custom-career-path__media::before {
	inset: var(--custom-career-path-off) var(--custom-career-path-off) calc(-1 * var(--custom-career-path-off)) calc(-1 * var(--custom-career-path-off));
}

.custom-career-path .custom-career-path__go-media,
.custom-career-path .custom-career-path__go {
	display: block;
	color: inherit;
	text-decoration: none;
	border-radius: inherit;
}

.custom-career-path .custom-career-path__tile {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: var(--custom-career-path-curl) 6px var(--custom-career-path-curl) 6px;
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh, app.css:160 */
	transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-career-path .custom-career-path__picture {
	position: absolute;
	inset: 0;
	background-color: transparent;
}

/* career-paths.css:118-124 — the picture stands drawn slightly in */
.custom-career-path .custom-career-path__picture > img {
	height: 100%;
	max-width: none;                       /* Elementor's `.elementor img` comes after this sheet */
	transform: scale(1.07);
}

/* ------------------------------------------------------------------ */
/* The words — career-paths.css:158-175                                */
/* ------------------------------------------------------------------ */

.custom-career-path .custom-career-path__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.custom-career-path .custom-career-path__name {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--custom-career-path-line);
	text-transform: none;
}

.custom-career-path .custom-career-path__name .custom-career-path__go {
	display: inline;
}

.custom-career-path .custom-career-path__unseen {
	position: absolute;
	width: 2px;
	height: 2px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.custom-career-path .custom-career-path__text {
	font-weight: 300;
	line-height: 1.8;
}

.custom-career-path .custom-career-path__text p {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

.custom-career-path .custom-career-path__text p + p {
	margin-top: 14px;
}

/* the client's heavy words: heavier, in the description's own ink until the field colours them */
.custom-career-path .custom-career-path__text strong,
.custom-career-path .custom-career-path__text b {
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* The button — career-paths.css:236-256                               */
/* ------------------------------------------------------------------ */

.custom-career-path .custom-career-path__cta {
	--custom-career-path-cta-now: var(--custom-career-path-cta, var(--custom-career-path-line));
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	border: 2px solid var(--custom-career-path-cta-now);   /* career-paths.css:244 measures 1px */
	color: var(--custom-career-path-cta-now);
	background-color: transparent;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-career-path .custom-career-path__arrow {
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ------------------------------------------------------------------ */
/* Reached — career-paths.css:199-213, 251-256                          */
/* ------------------------------------------------------------------ */

/* whichever of the line's three links is reached, the whole line answers */
.custom-career-path .custom-career-path__card:has([data-custom-career-path-go]:hover) .custom-career-path__tile,
.custom-career-path .custom-career-path__card:has([data-custom-career-path-go]:focus-visible) .custom-career-path__tile {
	transform: translateY(-8px) scale(1.015);
	box-shadow: 0 34px 80px -20px rgba(22, 65, 140, 0.3);   /* --sh-lg, app.css:161 */
}

/* the plate steps back as the picture lifts */
.custom-career-path .custom-career-path__card:has([data-custom-career-path-go]:hover) .custom-career-path__media::before,
.custom-career-path .custom-career-path__card:has([data-custom-career-path-go]:focus-visible) .custom-career-path__media::before {
	inset: calc(var(--custom-career-path-off) + 6px) calc(-1 * var(--custom-career-path-off) - 6px) calc(-1 * var(--custom-career-path-off) - 6px) calc(var(--custom-career-path-off) + 6px);
}

.custom-career-path--right .custom-career-path__card:has([data-custom-career-path-go]:hover) .custom-career-path__media::before,
.custom-career-path--right .custom-career-path__card:has([data-custom-career-path-go]:focus-visible) .custom-career-path__media::before {
	inset: calc(var(--custom-career-path-off) + 6px) calc(var(--custom-career-path-off) + 6px) calc(-1 * var(--custom-career-path-off) - 6px) calc(-1 * var(--custom-career-path-off) - 6px);
}

.custom-career-path .custom-career-path__card:has([data-custom-career-path-go]:hover) .custom-career-path__cta,
.custom-career-path .custom-career-path__card:has([data-custom-career-path-go]:focus-visible) .custom-career-path__cta {
	color: var(--custom-career-path-cta-ink, #FFFFFF);
	background-color: var(--custom-career-path-cta-now);
	box-shadow: 0 12px 26px color-mix(in srgb, var(--custom-career-path-cta-now) 28%, transparent);
}

.custom-career-path .custom-career-path__card:has([data-custom-career-path-go]:hover) .custom-career-path__arrow {
	transform: translateX(6px);            /* career-paths.css:256 measures 5px */
}

.custom-career-path [data-custom-career-path-go]:focus-visible {
	outline: 4px solid var(--custom-career-path-line);   /* career-paths.css:213 measures 3px */
	outline-offset: 4px;
	border-radius: 6px;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (career-paths.css:280-289)                 */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.custom-career-path {
		scroll-margin-top: 102px;          /* app.css:2993 --header-h 78 + 24 */
	}
	/* the picture over the words, every line alike */
	.custom-career-path .custom-career-path__card,
	.custom-career-path--right .custom-career-path__card {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-career-path--right .custom-career-path__media {
		order: 0;
	}
	/* the plate set off to the right and down only, so the page never scrolls sideways */
	.custom-career-path--right .custom-career-path__media::before {
		inset: var(--custom-career-path-off) calc(-1 * var(--custom-career-path-off)) calc(-1 * var(--custom-career-path-off)) var(--custom-career-path-off);
	}
	.custom-career-path--right .custom-career-path__card:has([data-custom-career-path-go]:hover) .custom-career-path__media::before,
	.custom-career-path--right .custom-career-path__card:has([data-custom-career-path-go]:focus-visible) .custom-career-path__media::before {
		inset: calc(var(--custom-career-path-off) + 6px) calc(-1 * var(--custom-career-path-off) - 6px) calc(-1 * var(--custom-career-path-off) - 6px) calc(var(--custom-career-path-off) + 6px);
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-career-path {
		scroll-margin-top: 94px;           /* app.css:2995 --header-h 70 + 24 */
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-career-path .custom-career-path__tile,
	.custom-career-path .custom-career-path__media::before,
	.custom-career-path .custom-career-path__cta,
	.custom-career-path .custom-career-path__arrow {
		transition: none;
	}
	.custom-career-path .custom-career-path__picture > img,
	.custom-career-path .custom-career-path__card:has([data-custom-career-path-go]:hover) .custom-career-path__tile,
	.custom-career-path .custom-career-path__card:has([data-custom-career-path-go]:focus-visible) .custom-career-path__tile,
	.custom-career-path .custom-career-path__card:has([data-custom-career-path-go]:hover) .custom-career-path__arrow {
		transform: none;
	}
}