/*
 * Learn - Quote.
 *
 * Read from cp-all-designer learn-from-work.html:163-176 and
 * css/learn-from-work.css:241-292, 315-321.
 *
 * Colour, type, padding, the widths, the corner and the spaces between the
 * parts arrive from the Style tab and are not repeated here.
 */

.custom-learn-quote {
	--custom-learn-quote-rule: #50A3D5;
	--custom-learn-quote-portrait: 520px;
}

/* learn-from-work.css:252-260 — the picture a third, the words two thirds, centred */
.custom-learn-quote .custom-learn-quote__quote {
	display: grid;
	grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
	align-items: center;
	margin: 0 auto;
	padding: 0;
}

/* learn-from-work.css:263-268 — a leaf frame, no plate behind it */
.custom-learn-quote .custom-learn-quote__portrait {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.custom-learn-quote .custom-learn-quote__portrait > img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;                       /* Elementor's sheet caps a picture's width */
	object-fit: cover;
	object-position: center 20%;
}

.custom-learn-quote .custom-learn-quote__body {
	min-width: 0;
}

/* learn-from-work.css:270 */
.custom-learn-quote .custom-learn-quote__mark {
	display: block;
	height: auto;
}

/* learn-from-work.css:271-277 — the large mark says it is quoted; no small marks around the words */
.custom-learn-quote .custom-learn-quote__text {
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: 0;
	text-transform: none;
	quotes: none;
}

.custom-learn-quote .custom-learn-quote__text p {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

.custom-learn-quote .custom-learn-quote__text q {
	quotes: none;
}

.custom-learn-quote .custom-learn-quote__text q::before,
.custom-learn-quote .custom-learn-quote__text q::after {
	content: none;
}

/* learn-from-work.css:280-292 — who said it, under a short blue rule */
.custom-learn-quote .custom-learn-quote__by {
	position: relative;
	display: grid;
	gap: 2px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

.custom-learn-quote .custom-learn-quote__by::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 4px;                           /* learn-from-work.css:288 measures 3px */
	border-radius: 4px;
	background: var(--custom-learn-quote-rule);
}

.custom-learn-quote .custom-learn-quote__name {
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

.custom-learn-quote .custom-learn-quote__role {
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

/* learn-from-work.css:317-321 — below 860 the picture stands over the words,
   cropped wide on the face and shoulders */
@media (max-width: 860px) {
	.custom-learn-quote .custom-learn-quote__quote {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-learn-quote .custom-learn-quote__portrait {
		aspect-ratio: 5 / 4;
		max-width: var(--custom-learn-quote-portrait);
	}
	.custom-learn-quote .custom-learn-quote__portrait > img {
		object-position: center 14%;
	}
}