/*
 * Education - Intro.
 *
 * Read from cp-all-designer education.html:46-100, css/education.css:22-129
 * and css/app.css:357-359 (.glow).
 *
 * Colour, type, padding, the corners and the spaces between the parts arrive
 * from the Style tab and are not repeated here.
 */

/* education.css:28-34 — a wash off the top corner over a fall of pale blues */
.custom-education-intro {
	--custom-education-intro-wash: rgba(80, 163, 213, 0.2);
	--custom-education-intro-from: #E3F1FA;
	--custom-education-intro-upper: #EFF7FC;
	--custom-education-intro-lower: #F7FBFE;
	--custom-education-intro-to: #FFFFFF;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;                     /* education.css:34 — a screen tall at every width */
	overflow: hidden;
	background:
		radial-gradient(120% 88% at 10% 4%, var(--custom-education-intro-wash) 0%, rgba(80, 163, 213, 0) 62%),
		linear-gradient(168deg, var(--custom-education-intro-from) 0%, var(--custom-education-intro-upper) 34%, var(--custom-education-intro-lower) 66%, var(--custom-education-intro-to) 100%);
}

/* education.css:36-39 — two soft glows, behind everything */
.custom-education-intro .custom-education-intro__sky {
	position: absolute;
	inset: 0 0 auto;
	z-index: 0;
	height: 62%;
	opacity: 0.5;
	pointer-events: none;
}

.custom-education-intro .custom-education-intro__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(6px);
	pointer-events: none;
}

.custom-education-intro .custom-education-intro__glow--blue {
	top: -260px;
	right: -180px;
	width: 720px;
	height: 720px;
	background: radial-gradient(circle, rgba(80, 163, 213, 0.1) 0%, transparent 70%);   /* app.css:358 */
}

.custom-education-intro .custom-education-intro__glow--green {
	top: 40px;
	left: -220px;
	width: 620px;
	height: 620px;
	background: radial-gradient(circle, rgba(92, 161, 63, 0.09) 0%, transparent 70%);   /* app.css:359 */
}

.custom-education-intro .custom-education-intro__inner {
	position: relative;
	z-index: 2;
}

/* education.css:44-47 — the words, then the pictures, the wider share */
.custom-education-intro .custom-education-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	align-items: center;
}

.custom-education-intro .custom-education-intro__copy {
	position: relative;
	z-index: 3;
	min-width: 0;
	text-align: left;
}

/* education.css:56-60, app.css:238 — the size of the section heads on this page, h-sub's weight */
.custom-education-intro .custom-education-intro__title {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.custom-education-intro .custom-education-intro__title strong,
.custom-education-intro .custom-education-intro__title b {
	font-weight: 700;
	color: inherit;
}

/* education.css:63 — a figure and its unit are one word */
.custom-education-intro .custom-education-intro__title em,
.custom-education-intro .custom-education-intro__title strong,
.custom-education-intro .custom-education-intro__keep {
	white-space: nowrap;
}

/* app.css:244-251 — the phrase set apart: upright, a step larger, its colour written into the heading */
.custom-education-intro .custom-education-intro__title em {
	position: relative;
	display: inline-block;
	font-style: normal;
	font-weight: 700;
	font-size: 108%;
}

/* .06em and .16em of a 40px heading */
.custom-education-intro .custom-education-intro__title em::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 2px;
	left: 0;
	height: 6px;
	border-radius: 4px;                    /* app.css:250 measures 3px */
	background: currentColor;
	opacity: 0.18;
}

/* education.css:65-69 */
.custom-education-intro .custom-education-intro__text p {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-style: normal;
	font-weight: 300;
	line-height: 1.85;
	letter-spacing: 0;
	color: inherit;
	text-transform: none;
}

.custom-education-intro .custom-education-intro__text p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* The pictures — education.css:71-113                                 */
/* ------------------------------------------------------------------ */

/* a frame of a fixed shape, so the two pictures and the leaf hold one
   composition at every width */
.custom-education-intro .custom-education-intro__media {
	--custom-education-intro-cap: 620px;
	position: relative;
	z-index: 1;
	min-width: 0;
	aspect-ratio: 5 / 4;
}

.custom-education-intro .custom-education-intro__picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 73%;
	height: 74%;
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh, app.css:160 */
}

/* over the large one's foot corner; the ring keeps the two apart where they meet */
.custom-education-intro .custom-education-intro__picture-small {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 56%;
	height: 54%;
	box-sizing: border-box;
	border-style: solid;
	box-shadow: 0 34px 80px -20px rgba(22, 65, 140, 0.3);   /* --sh-lg, app.css:161 */
}

/* education.css:101-113 — the mark's own leaf behind the foot corner, faint,
   bleeding no further than the space between the columns */
.custom-education-intro .custom-education-intro__leaf {
	position: absolute;
	bottom: -7%;
	left: calc(-1 * min(9%, var(--custom-education-intro-gap, 52px)));   /* --pair-gap */
	z-index: 0;
	width: 46%;
	line-height: 0;
	opacity: 0.22;
	pointer-events: none;
}

.custom-education-intro .custom-education-intro__leaf svg {
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
}

/* Held on one line the closing phrase is 612px at 40px, wider than the words'
   column until the window is about 1510 wide — the design runs it past the
   column there. It wraps instead; a figure still keeps its unit. */
@media (min-width: 1025px) and (max-width: 1598px) {
	.custom-education-intro .custom-education-intro__keep {
		white-space: normal;
	}
}

/* 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: a slot's picture says
   its own here, heavily enough to stand */
.custom-education-intro .custom-education-intro__picture > img,
.custom-education-intro .custom-education-intro__picture-small > img {
	height: 100%;
	max-width: none;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (education.css:85-93, drawn below 1080)    */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* the words, then the frame, whole and smaller */
	.custom-education-intro .custom-education-intro__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-education-intro .custom-education-intro__media {
		width: 100%;
		max-width: var(--custom-education-intro-cap);
		margin-right: auto;
		margin-left: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px                                                */
/* ------------------------------------------------------------------ */

/* education.css:71-73 — the closing phrase wraps once it no longer fits a phone */
@media (max-width: 420px) {
	.custom-education-intro .custom-education-intro__keep {
		white-space: normal;
	}
}