/*
 * Learn - Intro.
 *
 * Read from cp-all-designer learn-from-work.html:75-108,
 * learn-from-yourself.html:66-108 and css/learn-from-work.css:31-113.
 *
 * Colour, type, padding, the widths, the corner, the ring and the spaces
 * between the parts arrive from the Style tab and are not repeated here.
 */

/* learn-from-work.css:37-40 — white into pale blue, deepening at the foot corner */
.custom-learn-intro {
	--custom-learn-intro-from: #FFFFFF;
	--custom-learn-intro-mid: #F0F9FD;
	--custom-learn-intro-to: #D2E7F4;
	text-align: left;
	background: linear-gradient(135deg, var(--custom-learn-intro-from) 0%, var(--custom-learn-intro-mid) 52%, var(--custom-learn-intro-to) 100%);
}

/* learn-from-work.css:41-45 — the words, then the pictures, the wider share */
.custom-learn-intro .custom-learn-intro__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	align-items: center;
}

.custom-learn-intro .custom-learn-intro__copy {
	--custom-learn-intro-space: 16px;
	--custom-learn-intro-cap: 600px;
	position: relative;
	z-index: 2;
	min-width: 0;
}

/* app.css:202-209, learn-from-work.css:47 — as wide as its words */
.custom-learn-intro .custom-learn-intro__eyebrow {
	display: inline-flex;
	align-items: center;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 2px;                   /* app.css:204 measures 1.15px */
	text-transform: uppercase;
}

/* learn-from-work.css:49-53 */
.custom-learn-intro .custom-learn-intro__title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

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

/* learn-from-work.css:57-65 — the word set apart: upright, a step larger, its colour written into the heading */
.custom-learn-intro .custom-learn-intro__title em {
	position: relative;
	display: inline-block;
	font-style: normal;
	font-weight: 700;
	font-size: 108%;
}

/* .06em and .16em of a 48px heading */
.custom-learn-intro .custom-learn-intro__title em::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 4px;
	left: 0;
	height: 8px;
	border-radius: 4px;                    /* learn-from-work.css:64 measures 3px */
	background: currentColor;
	opacity: 0.18;
}

/* learn-from-work.css:66-83 — each block of words a step below the last */
.custom-learn-intro .custom-learn-intro__text p,
.custom-learn-intro .custom-learn-intro__lead {
	max-width: var(--custom-learn-intro-cap);
	margin: var(--custom-learn-intro-space) 0 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
}

.custom-learn-intro .custom-learn-intro__text p {
	font-size: inherit;
	font-weight: 300;
	line-height: 1.8;
	color: inherit;
}

/* learn-from-work.css:73-78 — lines, no marks before them */
.custom-learn-intro .custom-learn-intro__list {
	max-width: var(--custom-learn-intro-cap);
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	list-style: none;
	font-weight: 300;
	line-height: 1.8;
}

.custom-learn-intro .custom-learn-intro__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-learn-intro .custom-learn-intro__list li::before,
.custom-learn-intro .custom-learn-intro__list li::marker {
	content: none;
}

/* learn-from-work.css:79-83 */
.custom-learn-intro .custom-learn-intro__lead {
	font-weight: 600;
	line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* The pictures — learn-from-work.css:84-102                           */
/* ------------------------------------------------------------------ */

/* a frame of a fixed shape: both pictures stand as shares of it, so the
   overlap holds at every width */
.custom-learn-intro .custom-learn-intro__media {
	--custom-learn-intro-media: 620px;
	--custom-learn-intro-corner: 48px;
	--custom-learn-intro-ring: #FFFFFF;
	--custom-learn-intro-ring-width: 6px;
	--custom-learn-intro-slot: #F0F9FD;
	position: relative;
	z-index: 1;
	min-width: 0;
	aspect-ratio: 5 / 4;
}

.custom-learn-intro .custom-learn-intro__picture,
.custom-learn-intro .custom-learn-intro__picture-small {
	position: absolute;
	box-sizing: border-box;
	margin: 0;
	overflow: hidden;
	border: var(--custom-learn-intro-ring-width) solid var(--custom-learn-intro-ring);
	border-radius: var(--custom-learn-intro-corner) 0 var(--custom-learn-intro-corner) 0;
	background-color: var(--custom-learn-intro-slot);
	transition: width 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            height 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* the large one low on the left, in front */
.custom-learn-intro .custom-learn-intro__picture {
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 73%;
	height: 74%;
	box-shadow: 0 20px 44px -18px rgba(22, 65, 140, 0.42);
}

/* the small one high on the right, behind */
.custom-learn-intro .custom-learn-intro__picture-small {
	top: 0;
	right: 0;
	z-index: 1;
	width: 50%;
	height: 46%;
	box-shadow: 0 34px 80px -20px rgba(22, 65, 140, 0.3);   /* --sh-lg, app.css:161 */
}

.custom-learn-intro .custom-learn-intro__picture > img,
.custom-learn-intro .custom-learn-intro__picture-small > img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;                       /* Elementor's sheet caps a picture's width */
	object-fit: cover;
}

/* learn-from-work.css:98-102 — under a pointer the small one takes the large
   one's place and the large one steps back; the large one only comes forward.
   A device without a pointer that hovers keeps the pictures where they are. */
@media (hover: hover) {
	.custom-learn-intro .custom-learn-intro__media:has(.custom-learn-intro__picture-small:hover) .custom-learn-intro__picture-small {
		z-index: 3;
		width: 73%;
		height: 74%;
	}
	.custom-learn-intro .custom-learn-intro__media:has(.custom-learn-intro__picture-small:hover) .custom-learn-intro__picture {
		width: 50%;
		height: 46%;
	}
	.custom-learn-intro .custom-learn-intro__media:has(.custom-learn-intro__picture:hover) .custom-learn-intro__picture {
		z-index: 3;
	}
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (learn-from-work.css:104-108, drawn below 1080) */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* the words, then the frame, whole and no wider than its cap */
	.custom-learn-intro .custom-learn-intro__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-learn-intro .custom-learn-intro__media {
		width: 100%;
		max-width: var(--custom-learn-intro-media);
		margin-right: auto;
		margin-left: auto;
	}
	/* .06em and .16em of a 34px heading */
	.custom-learn-intro .custom-learn-intro__title em::after {
		bottom: 2px;
		height: 6px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (learn-from-work.css:109-112, drawn at 620)    */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-learn-intro .custom-learn-intro__picture {
		box-shadow: 0 12px 26px -14px rgba(22, 65, 140, 0.4);
	}
	.custom-learn-intro .custom-learn-intro__picture-small {
		box-shadow: 0 14px 30px -12px rgba(22, 65, 140, 0.46);
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-learn-intro .custom-learn-intro__picture,
	.custom-learn-intro .custom-learn-intro__picture-small {
		transition: none;
	}
}