/*
 * Career - Highlight grow.
 *
 * Read from cp-all-designer css/career.css:3187-3260 (the band and its leaf),
 * 3495-3497, 3640-3660 (the two columns) and 3704-3925 (.grwp, the four ways).
 *
 * Colour, type, padding and the measures arrive from the Style tab and are not
 * repeated here.
 */

/* career.css:3196 */
.custom-career-highlight-grow {
	background: linear-gradient(180deg,
		var(--custom-career-highlight-grow-top, #FFFFFF) 0%,
		var(--custom-career-highlight-grow-middle, #F7FBFE) 34%,
		var(--custom-career-highlight-grow-bottom, #EAF6FD) 100%);
}

/* career.css:3249 — the leaf a sixth of the band in from its right, near its foot */
.custom-career-highlight-grow[data-custom-career-leaf]::before {
	right: 16%;
	bottom: var(--custom-career-highlight-leaf-bottom, 30px);
}

/* career.css:3496, 3644 — the photographs take a little more than the words */
.custom-career-highlight-grow .custom-career-highlight-grow__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}

/* career.html:697 — the title breaks where the author broke it at every width
   (the partner bands close their breaks up below the wide tier) */
.custom-career-highlight-grow .custom-career-highlight-grow__title br {
	display: inline;
}

/* ------------------------------------------------------------------ */
/* The ways — career.css:3704-3925                                     */
/* ------------------------------------------------------------------ */

.custom-career-highlight-grow .custom-career-highlight-grow__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* career.css:3717 — the artwork's own shape */
.custom-career-highlight-grow .custom-career-highlight-grow__stage {
	aspect-ratio: 2852 / 1536;
}

.custom-career-highlight-grow .custom-career-highlight-grow__card {
	position: absolute;
	inset: 0;
}

/* career.css:3775-3785 — the photograph stands 3.506% in from the left edge,
   the card overhanging that gap */
.custom-career-highlight-grow .custom-career-highlight-grow__photo {
	position: absolute;
	top: 0;
	left: 3.506%;
	width: 96.494%;
	height: 100%;
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh, app.css:160 */
	background-color: #F1F5F9;
}

/* Elementor's sheet (frontend.min.css, `.elementor img`) comes after the plugin's
   and sets a picture's height to auto and caps its width: the slot's picture says
   its own here, heavily enough to stand */
.custom-career-highlight-grow .custom-career-highlight-grow__photo > img {
	height: 100%;
	max-width: none;
	border-radius: 0;
}

/* career.css:3792-3817 */
.custom-career-highlight-grow .custom-career-highlight-grow__card-box {
	position: absolute;
	left: -5.5%;
	bottom: 3.255%;
	box-sizing: border-box;
	width: 54%;
	border: 2px solid var(--custom-career-highlight-grow-tone, #16418C);
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh */
	text-align: center;
}

/* career.css:3818-3825 */
.custom-career-highlight-grow .custom-career-highlight-grow__name,
.custom-career-highlight-grow .custom-career-highlight-grow__line {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

.custom-career-highlight-grow .custom-career-highlight-grow__name {
	font-weight: 700;
}

.custom-career-highlight-grow .custom-career-highlight-grow__line {
	font-weight: 400;
}

/* career.css:3845-3847 — the dots run under the photograph, not the overhang */
.custom-career-highlight-grow .custom-career-highlight-grow__dots {
	align-items: center;
	width: 96.494%;
	margin-left: 3.506%;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* career.css:3894 — the card overhangs no more than 14px */
	.custom-career-highlight-grow .custom-career-highlight-grow__card-box {
		left: max(-14px, -5.5%);
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (career.css:3462, 3623, 3904-3925)             */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-career-highlight-grow .custom-career-highlight-grow__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	/* career.css:3905 — a taller frame, the card wider and centred under the photograph */
	.custom-career-highlight-grow .custom-career-highlight-grow__stage {
		aspect-ratio: 2852 / 1800;
	}
	.custom-career-highlight-grow .custom-career-highlight-grow__card-box {
		left: 50%;
		width: 68%;
		transform: translateX(-50%);
	}
}