/*
 * Career - Learn.
 *
 * Read from cp-all-designer css/career.css:1803, 1848-1955 and 1968-1969.
 *
 * Colour, type, sizes and the spaces between the parts arrive from the Style
 * tab and are not repeated here.
 */

.custom-career-learn {
	position: relative;
	overflow: hidden;
}

.custom-career-learn .nb {
	white-space: nowrap;
}

/* career.css:1849-1853, 1860, 1953-1955 — four to a row */
.custom-career-learn .custom-career-learn__ways {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-margin-top: 114px;              /* career.css:1848 — the header's 90 and 24 */
}

/* career.css:1861-1868 — a white card in the leaf's shape; reached, it lifts */
.custom-career-learn .custom-career-learn__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	border: 2px solid #EEF2F7;             /* career.css:1863 measures 1px */
	box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm, app.css:159 */
	list-style: none;
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
	.custom-career-learn .custom-career-learn__card:hover {
		box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);  /* --sh, app.css:160 */
		transform: translateY(-4px);
	}
	.custom-career-learn .custom-career-learn__card:hover .custom-career-learn__photo > img {
		transform: scale(1.04);
	}
}

/* career.css:1944-1948 — the whole card is the way in */
.custom-career-learn .custom-career-learn__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.custom-career-learn a.custom-career-learn__link:focus-visible {
	outline: 2px solid #50A3D5;
	outline-offset: 4px;                   /* career.css:1948 measures 3px */
}

/* career.css:1872-1878 */
.custom-career-learn .custom-career-learn__photo {
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.custom-career-learn .custom-career-learn__photo > img {
	height: 100%;
	max-width: none;
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* career.css:1879-1900 */
.custom-career-learn .custom-career-learn__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	box-sizing: border-box;
	text-align: left;
}

.custom-career-learn .custom-career-learn__card-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}

.custom-career-learn .custom-career-learn__icon {
	display: flex;
	flex: 0 0 auto;
}

.custom-career-learn .custom-career-learn__icon svg,
.custom-career-learn .custom-career-learn__icon i {
	display: block;
	width: var(--custom-career-learn-icon, 32px);
	height: var(--custom-career-learn-icon, 32px);
	font-size: var(--custom-career-learn-icon, 32px);
	fill: currentColor;
}

/* career.css:1910-1917 */
.custom-career-learn .custom-career-learn__item-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

.custom-career-learn .custom-career-learn__item-text {
	margin: 0;
	padding: 0;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (career.css:1860)                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.custom-career-learn .custom-career-learn__ways {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		scroll-margin-top: 102px;          /* 78 and 24 */
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (career.css:1953-1955, drawn at 640)           */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-career-learn .custom-career-learn__ways {
		grid-template-columns: minmax(0, 1fr);
		scroll-margin-top: 94px;           /* 70 and 24 */
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-career-learn .custom-career-learn__card,
	.custom-career-learn .custom-career-learn__photo > img {
		transition: none;
	}
}

/* career.html:577-579 — the intro's break is a plain <br>, kept at every width
   (the design closes up only .br-lg breaks, app.css:938); the partner band's
   rule that closes every authored break below 1025 does not apply here */
@media (max-width: 1024px) {
	.custom-career-learn .custom-career-learn__intro[data-custom-investor-intro] br {
		display: inline;
	}
}