/*
 * Learn - Examples.
 *
 * Read from cp-all-designer learn-from-work.html:132-162 and
 * css/learn-from-work.css:163-239, 296-305, 322-326.
 *
 * Colour, type, padding, the corner, the plate's offset and the spaces between
 * the parts arrive from the Style tab and are not repeated here. How many
 * stand in a row is not a measure: it follows how many examples there are,
 * at the widths the design changes it (1200, 900, 640).
 */

.custom-learn-examples {
	--custom-learn-examples-first: #CCDAF2;
	--custom-learn-examples-second: #D8E8A3;
	--custom-learn-examples-third: #EF9895;
	--custom-learn-examples-fourth: #728DC4;
	--custom-learn-examples-off: 14px;
	--custom-learn-examples-body: 26px;
}

/* learn-from-work.css:164 — a heading a step under the page's sections; its
   coloured word's bar is .06em and .16em of a 32px heading */
.custom-learn-examples [data-custom-investor-title] em::after {
	bottom: 2px;
	height: 6px;
}

/* learn-from-work.css:187-191 */
.custom-learn-examples .custom-learn-examples__cards {
	display: grid;
	grid-template-columns: repeat(var(--custom-learn-examples-columns, 3), minmax(0, 1fr));
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	list-style: none;
}

/* learn-from-work.css:192-201 — each takes its place's colour until it is given its own */
.custom-learn-examples .custom-learn-examples__card {
	--custom-learn-examples-tone: var(--custom-learn-examples-first);
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	list-style: none;
}

.custom-learn-examples .custom-learn-examples__card:not(.custom-learn-examples__card--toned):nth-child(4n + 2) {
	--custom-learn-examples-tone: var(--custom-learn-examples-second);
}

.custom-learn-examples .custom-learn-examples__card:not(.custom-learn-examples__card--toned):nth-child(4n + 3) {
	--custom-learn-examples-tone: var(--custom-learn-examples-third);
}

.custom-learn-examples .custom-learn-examples__card:not(.custom-learn-examples__card--toned):nth-child(4n + 4) {
	--custom-learn-examples-tone: var(--custom-learn-examples-fourth);
}

/* learn-from-work.css:214-222 — a leaf frame with its plate set off behind it
   by a solid shadow, the picture's own room keeping the plate in its column */
.custom-learn-examples .custom-learn-examples__picture {
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 3 / 2;
	margin: 0 var(--custom-learn-examples-off) var(--custom-learn-examples-off) 0;
	overflow: hidden;
	box-shadow: var(--custom-learn-examples-off) var(--custom-learn-examples-off) 0 0 var(--custom-learn-examples-tone);
}

.custom-learn-examples .custom-learn-examples__picture > img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;                       /* Elementor's sheet caps a picture's width */
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* learn-from-work.css:223 — drawn a little closer under a pointer; nothing to press */
@media (hover: hover) {
	.custom-learn-examples .custom-learn-examples__card:hover .custom-learn-examples__picture > img {
		transform: scale(1.05);
	}
}

/* learn-from-work.css:227-239 */
.custom-learn-examples .custom-learn-examples__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--custom-learn-examples-body) var(--custom-learn-examples-off) 0 0;
}

.custom-learn-examples .custom-learn-examples__card-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}

/* learn-from-work.css:237-239 — kept close under the title it names */
.custom-learn-examples .custom-learn-examples__card-sub {
	margin: -4px 0 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

.custom-learn-examples .custom-learn-examples__card-text {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: 0;
	text-transform: none;
}

/* learn-from-work.css:211-213 — four to a row goes to two */
@media (max-width: 1200px) {
	.custom-learn-examples .custom-learn-examples__cards--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* learn-from-work.css:298-305 — below 900 one to a row, the picture beside its words */
@media (max-width: 900px) {
	.custom-learn-examples .custom-learn-examples__cards,
	.custom-learn-examples .custom-learn-examples__cards--four {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-learn-examples .custom-learn-examples__card {
		display: grid;
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
		align-items: center;
		column-gap: 28px;                  /* learn-from-work.css:302 (27.6 at 900) */
	}
	.custom-learn-examples .custom-learn-examples__body {
		padding: 0;
	}
}

@media (max-width: 860px) {
	.custom-learn-examples .custom-learn-examples__card {
		column-gap: 24px;                  /* learn-from-work.css:302 (23.1, --vwu 7.7 from 860, app.css) */
	}
}

/* learn-from-work.css:322-326 — a phone: the picture over its words */
@media (max-width: 640px) {
	.custom-learn-examples .custom-learn-examples__card {
		display: flex;
		align-items: stretch;              /* the picture as wide as the column, as the design's own picture is */
	}
	.custom-learn-examples .custom-learn-examples__body {
		padding: var(--custom-learn-examples-body) var(--custom-learn-examples-off) 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-learn-examples .custom-learn-examples__picture > img {
		transition: none;
	}
}