/*
 * We ALL Grow - Hero.
 *
 * Read from cp-all-designer we-all-grow.html:89-156, css/we-all-grow.css:94-336
 * and css/app.css:202-212 (.eyebrow), 244-251 (the word set apart).
 *
 * Colour, type, padding and the spaces between the parts arrive from the
 * Style tab and are not repeated here.
 *
 * Left behind: the picture's cap is the window's height less the band's
 * padding (we-all-grow.css:175, a height in svh). Here it is a height in px
 * from the Style tab — at 1920 × 1080 the picture is held by its column well
 * before that cap, so the two draw the same.
 */

/* we-all-grow.css:107-115 — a wash off the top corner over a fall of pale
   blues that turns white before the picture starts */
.custom-we-all-grow-hero {
	--custom-we-all-grow-hero-wash: #E3F0F8;
	--custom-we-all-grow-hero-from: #EAF4FA;
	--custom-we-all-grow-hero-upper: #E8F4FB;
	--custom-we-all-grow-hero-lower: #F0F9FD;
	--custom-we-all-grow-hero-to: #FFFFFF;
	--custom-we-all-grow-hero-copy: 580px;
	--custom-we-all-grow-hero-para: 16px;
	background:
		radial-gradient(118% 88% at 0% 0%, var(--custom-we-all-grow-hero-wash) 0%, rgba(255, 255, 255, 0) 34%),
		linear-gradient(90deg, var(--custom-we-all-grow-hero-from) 0%, var(--custom-we-all-grow-hero-upper) 16%, var(--custom-we-all-grow-hero-lower) 30%, var(--custom-we-all-grow-hero-to) 42%);
}

/* we-all-grow.css:138-151 — the words' column at its own width, the picture the rest */
.custom-we-all-grow-hero .custom-we-all-grow-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--custom-we-all-grow-hero-copy)) minmax(0, 1fr);
	align-items: center;
}

.custom-we-all-grow-hero .custom-we-all-grow-hero__copy {
	min-width: 0;
	text-align: left;
}

/* app.css:202-210 */
.custom-we-all-grow-hero .custom-we-all-grow-hero__eyebrow {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 2px;                   /* app.css:204 measures 1.15px */
	text-transform: uppercase;
}

/* we-all-grow.css:208-219 — the poster's title, not .h-sec */
.custom-we-all-grow-hero .custom-we-all-grow-hero__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-we-all-grow-hero .custom-we-all-grow-hero__title strong,
.custom-we-all-grow-hero .custom-we-all-grow-hero__title b {
	font-weight: 700;
	color: inherit;
}

/* we-all-grow.css:226-260 — the red word: upright, 1.08 times its line, and the
   site's pale bar under it */
.custom-we-all-grow-hero .custom-we-all-grow-hero__title em {
	position: relative;
	display: inline-block;
	font-style: normal;
	font-weight: 700;
	font-size: 108%;
}

/* .06em and .16em of a 72px title */
.custom-we-all-grow-hero .custom-we-all-grow-hero__title em::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 4px;
	left: 0;
	height: 12px;
	border-radius: 4px;                    /* we-all-grow.css:259 measures 3px */
	background: currentColor;
	opacity: 0.18;
}

.custom-we-all-grow-hero .custom-we-all-grow-hero__tag,
.custom-we-all-grow-hero .custom-we-all-grow-hero__kicker,
.custom-we-all-grow-hero .custom-we-all-grow-hero__text,
.custom-we-all-grow-hero .custom-we-all-grow-hero__close {
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
}

/* we-all-grow.css:269-272 */
.custom-we-all-grow-hero .custom-we-all-grow-hero__tag {
	font-weight: 600;
	line-height: 1.45;
}

/* we-all-grow.css:289-293 */
.custom-we-all-grow-hero .custom-we-all-grow-hero__kicker {
	font-weight: 600;
	line-height: 1.5;
}

/* we-all-grow.css:276-283 — the second paragraph a step heavier and darker */
.custom-we-all-grow-hero .custom-we-all-grow-hero__text,
.custom-we-all-grow-hero .custom-we-all-grow-hero__close {
	margin-top: var(--custom-we-all-grow-hero-para);
	line-height: 1.8;
}

.custom-we-all-grow-hero .custom-we-all-grow-hero__text {
	font-weight: 300;
}

.custom-we-all-grow-hero .custom-we-all-grow-hero__close {
	font-weight: 500;
}

.custom-we-all-grow-hero .custom-we-all-grow-hero__copy strong,
.custom-we-all-grow-hero .custom-we-all-grow-hero__copy b {
	font-weight: 600;
	color: inherit;
}

.custom-we-all-grow-hero .custom-we-all-grow-hero__copy .nb {
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* The picture — we-all-grow.css:169-181                               */
/* ------------------------------------------------------------------ */

/* whole, never cropped: as wide as its column and as tall as its own shape */
.custom-we-all-grow-hero .custom-we-all-grow-hero__art {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-width: 0;
}

.custom-we-all-grow-hero .custom-we-all-grow-hero__picture {
	width: 100%;
	min-width: 0;
	overflow: visible;
}

.custom-we-all-grow-hero .custom-we-all-grow-hero__picture > img {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: right center;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (we-all-grow.css:305-336, drawn below 1200) */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* the words, then the picture */
	.custom-we-all-grow-hero .custom-we-all-grow-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-we-all-grow-hero .custom-we-all-grow-hero__copy {
		max-width: var(--custom-we-all-grow-hero-copy);
	}
	.custom-we-all-grow-hero .custom-we-all-grow-hero__art {
		justify-content: center;
	}
	.custom-we-all-grow-hero .custom-we-all-grow-hero__picture > img {
		object-position: center center;
	}
	/* .06em and .16em of a 46px title */
	.custom-we-all-grow-hero .custom-we-all-grow-hero__title em::after {
		bottom: 2px;
		height: 8px;
	}
}

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

@media (max-width: 767px) {
	/* .06em and .16em of a 38px title */
	.custom-we-all-grow-hero .custom-we-all-grow-hero__title em::after {
		bottom: 2px;
		height: 6px;
	}
}