/*
 * Learn - Features.
 *
 * Read from cp-all-designer learn-from-work.html:110-131 and
 * css/learn-from-work.css:115-161, 306-314.
 *
 * Colour, type, padding, the corner and the spaces between the parts arrive
 * from the Style tab and are not repeated here.
 */

.custom-learn-features {
	--custom-learn-features-first: #50A3D5;
	--custom-learn-features-second: #5CA13F;
	--custom-learn-features-third: #CE2929;
	--custom-learn-features-rule: rgba(22, 65, 140, 0.14);
	--custom-learn-features-y: 38px;
	--custom-learn-features-x: 38px;
}

/* learn-from-work.css:124-129 — one pale panel, three cells across */
.custom-learn-features .custom-learn-features__cells {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* learn-from-work.css:130-138 — the icon beside the title and its line */
.custom-learn-features .custom-learn-features__cell {
	--custom-learn-features-tone: var(--custom-learn-features-first);
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	box-sizing: border-box;
	margin: 0;
	padding: var(--custom-learn-features-y) var(--custom-learn-features-x);
	list-style: none;
}

.custom-learn-features .custom-learn-features__cell--second {
	--custom-learn-features-tone: var(--custom-learn-features-second);
}

.custom-learn-features .custom-learn-features__cell--third {
	--custom-learn-features-tone: var(--custom-learn-features-third);
}

/* learn-from-work.css:142-146 — a rule between two cells, held off the panel's edges
   by the cell's own space above and below */
.custom-learn-features .custom-learn-features__cell + .custom-learn-features__cell::before {
	content: "";
	position: absolute;
	top: var(--custom-learn-features-y);
	bottom: var(--custom-learn-features-y);
	left: 0;
	width: 2px;                            /* learn-from-work.css:145 measures 1px */
	background: var(--custom-learn-features-rule);
}

/* learn-from-work.css:148-153 — a white disc on the pale panel, the icon in the cell's colour */
.custom-learn-features .custom-learn-features__icon {
	--custom-learn-features-icon: 30px;
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--custom-learn-features-tone);
	box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm, app.css:159 */
	line-height: 0;
}

.custom-learn-features .custom-learn-features__icon svg {
	display: block;
	width: var(--custom-learn-features-icon);
	height: var(--custom-learn-features-icon);
	fill: currentColor;
}

/* learn-from-work.css:154-161 */
.custom-learn-features .custom-learn-features__cell-title {
	grid-column: 2;
	align-self: end;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

.custom-learn-features .custom-learn-features__cell-text {
	grid-column: 2;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 300;
	line-height: 1.65;
	letter-spacing: 0;
	text-transform: none;
}

/* learn-from-work.css:308-314 — below 860 the three cells stack, the rules
   running across, held off the panel's sides */
@media (max-width: 860px) {
	.custom-learn-features .custom-learn-features__cells {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-learn-features .custom-learn-features__cell + .custom-learn-features__cell::before {
		top: 0;
		right: var(--custom-learn-features-x);
		bottom: auto;
		left: var(--custom-learn-features-x);
		width: auto;
		height: 2px;                       /* measures 1px */
	}
}