/*
 * proof/hero-mosaic. Figma "About v2" hero 2612:378, see
 * sites/proof/design/about-spec.md. The theme-builder header sits on top.
 */

.pf-block.pf-hmosaic {
	padding-top: calc(182 * var(--pf-u));
	padding-bottom: calc(160 * var(--pf-u));
	background: linear-gradient(180deg, #adf71e 0%, var(--pf-bg) 100%);
}
/* Both layers cover the section and draw the shapes as positioned
   backgrounds. ::before: brand shape 1 (frame x -624, 3167.31 × 2553) with
   hero-mosaic-wings.svg on top, which softens its straight wing edge at
   y 969 as in the Figma render. ::after: the blurred shape 2 (canvas x -412,
   y -323, 2744 × 2291), Figma's noise as a ~5.7% darker tint, and the darker
   green the render shows along the sides (x 0–160, y ~560–1357) and the
   bottom (last 180), as gradient strips (the render's edge darkening has no
   layer of its own in the export, so it is measured: rgb(110,152,32) at up
   to .33). Each strip is its own background box, so they meet without seams. */
.pf-hmosaic {
	--pf-hm-dark: 110, 152, 32;
	/* Fade from the edge inwards (sides) and from the bottom up. */
	--pf-hm-side: rgba(var(--pf-hm-dark), 0.33) 0%, rgba(var(--pf-hm-dark), 0.25) 20%, rgba(var(--pf-hm-dark), 0.18) 40%, rgba(var(--pf-hm-dark), 0.1) 60%, rgba(var(--pf-hm-dark), 0.05) 80%, rgba(var(--pf-hm-dark), 0) 100%;
	--pf-hm-foot: rgba(var(--pf-hm-dark), 0.33) 0%, rgba(var(--pf-hm-dark), 0.23) 25%, rgba(var(--pf-hm-dark), 0.15) 40%, rgba(var(--pf-hm-dark), 0.09) 55%, rgba(var(--pf-hm-dark), 0.046) 70%, rgba(var(--pf-hm-dark), 0.017) 85%, rgba(var(--pf-hm-dark), 0) 100%;
}
.pf-hmosaic::before,
.pf-hmosaic::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.pf-hmosaic::before {
	background:
		url("../../assets/img/hero-mosaic-wings.svg") no-repeat calc(-624 * var(--pf-u)) 0 / calc(3167.31 * var(--pf-u)) calc(2553 * var(--pf-u)),
		url("../../assets/img/hero-shape-1.svg") no-repeat calc(-624 * var(--pf-u)) 0 / calc(3167.31 * var(--pf-u)) calc(2553 * var(--pf-u));
}
.pf-hmosaic::after {
	background:
		/* Bottom strip (180): rounded off in the outer 240 at each side. */
		radial-gradient(100% 100% at 100% 100%, var(--pf-hm-foot)) left bottom / calc(240 * var(--pf-u)) calc(180 * var(--pf-u)) no-repeat,
		radial-gradient(100% 100% at 0 100%, var(--pf-hm-foot)) right bottom / calc(240 * var(--pf-u)) calc(180 * var(--pf-u)) no-repeat,
		linear-gradient(to top, var(--pf-hm-foot)) center bottom / calc(100% - 480 * var(--pf-u)) calc(180 * var(--pf-u)) no-repeat,
		/* Side strips (160 wide): full from y 740 to 1000, fading out
		   towards y 560 and towards the bottom. */
		radial-gradient(100% 100% at 0 100%, var(--pf-hm-side)) left 0 top calc(560 * var(--pf-u)) / calc(160 * var(--pf-u)) calc(180 * var(--pf-u)) no-repeat,
		linear-gradient(to right, var(--pf-hm-side)) left 0 top calc(740 * var(--pf-u)) / calc(160 * var(--pf-u)) calc(260 * var(--pf-u)) no-repeat,
		radial-gradient(100% 100% at 0 0, var(--pf-hm-side)) left 0 top calc(1000 * var(--pf-u)) / calc(160 * var(--pf-u)) calc(400 * var(--pf-u)) no-repeat,
		radial-gradient(100% 100% at 100% 100%, var(--pf-hm-side)) right 0 top calc(560 * var(--pf-u)) / calc(160 * var(--pf-u)) calc(180 * var(--pf-u)) no-repeat,
		linear-gradient(to left, var(--pf-hm-side)) right 0 top calc(740 * var(--pf-u)) / calc(160 * var(--pf-u)) calc(260 * var(--pf-u)) no-repeat,
		radial-gradient(100% 100% at 100% 0, var(--pf-hm-side)) right 0 top calc(1000 * var(--pf-u)) / calc(160 * var(--pf-u)) calc(400 * var(--pf-u)) no-repeat,
		linear-gradient(rgba(0, 0, 0, 0.057), rgba(0, 0, 0, 0.057)),
		url("../../assets/img/hero-shape-2.svg") no-repeat calc(-412 * var(--pf-u)) calc(-323 * var(--pf-u)) / calc(2744 * var(--pf-u)) calc(2291 * var(--pf-u));
}
.pf-hmosaic > * {
	position: relative;
	z-index: 1;
}

.pf-block .pf-hmosaic-title {
	align-self: center;
	width: calc(1329 * var(--pf-u));
	max-width: 100%;
	font-family: var(--pf-sans);
	font-weight: 700;
	font-size: calc(78 * var(--pf-t));
	line-height: 1;
	letter-spacing: -0.05em;
	text-align: center;
	text-transform: uppercase;
	background: linear-gradient(173.8deg, var(--pf-blue) 1.7%, var(--pf-blue-deep) 73.2%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pf-block .pf-hmosaic-sub {
	align-self: center;
	width: calc(821 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(25 * var(--pf-u));
	font-weight: 600;
	font-size: calc(16 * var(--pf-t));
	line-height: 1.45;
	letter-spacing: -0.03em;
	text-align: center;
	color: rgba(0, 0, 0, 0.92);
}

.pf-mosaic {
	display: flex;
	gap: calc(16 * var(--pf-u));
	align-self: center;
	width: calc(1480 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(56 * var(--pf-u));
}
.pf-block .pf-mosaic-frame {
	padding: calc(12 * var(--pf-u));
	border-radius: calc(10 * var(--pf-u));
	background: rgba(255, 255, 255, 0.24);
	backdrop-filter: blur(calc(124 * var(--pf-u)));
	-webkit-backdrop-filter: blur(calc(124 * var(--pf-u)));
}
.pf-mosaic-frame .pf-photo {
	width: 100%;
	height: 100%;
}
.pf-mosaic-frame--big {
	flex: none;
	width: calc(732 * var(--pf-u));
	height: calc(732 * var(--pf-u));
}
.pf-mosaic-col {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--pf-u));
	width: calc(732 * var(--pf-u));
}
.pf-mosaic-col .pf-mosaic-frame {
	height: calc(358 * var(--pf-u));
}

@media (max-width: 1024px) {
	.pf-block.pf-hmosaic {
		padding-top: 128px;
		padding-bottom: 88px;
	}
	/* Shapes 220% / 180% wide and centred, as before; shape 2 starts 96
	   above the section (10% of the 1024 hero). Only the bottom strip of the
	   edge darkening (120), its rounded ends 20% wide; the side strips are
	   left out, the gutters are narrow. */
	.pf-hmosaic::before {
		background-position: 50% 0;
		background-size: 220% auto;
	}
	.pf-hmosaic::after {
		background:
			radial-gradient(100% 100% at 100% 100%, var(--pf-hm-foot)) left bottom / 20% 120px no-repeat,
			radial-gradient(100% 100% at 0 100%, var(--pf-hm-foot)) right bottom / 20% 120px no-repeat,
			linear-gradient(to top, var(--pf-hm-foot)) center bottom / 60% 120px no-repeat,
			linear-gradient(rgba(0, 0, 0, 0.057), rgba(0, 0, 0, 0.057)),
			url("../../assets/img/hero-shape-2.svg") no-repeat 50% -96px / 180% auto;
	}
	.pf-block .pf-hmosaic-title {
		font-size: 64px;
	}
	.pf-block .pf-hmosaic-sub {
		width: 560px;
		margin-top: 20px;
		font-size: 16px;
	}
	/* The editor's line breaks are set for the desktop measure. */
	.pf-hmosaic-sub br {
		display: none;
	}
	.pf-mosaic {
		gap: 12px;
		margin-top: 40px;
	}
	.pf-block .pf-mosaic-frame {
		padding: 8px;
		border-radius: 8px;
	}
	.pf-mosaic-frame--big {
		flex: 1;
		height: auto;
		aspect-ratio: 1;
	}
	.pf-mosaic-col {
		flex: 1;
		gap: 12px;
	}
	.pf-mosaic-col .pf-mosaic-frame {
		flex: 1;
		height: auto;
	}
}
@media (max-width: 767px) {
	.pf-block.pf-hmosaic {
		padding-top: 112px;
		padding-bottom: 64px;
	}
	/* Shape 2 starts 120 above the section (10% of the 390 hero). The
	   stacked mosaic ends on the light page grey, where the dark bottom strip
	   would read as a green smudge, so it is left out. */
	.pf-hmosaic::after {
		background:
			linear-gradient(rgba(0, 0, 0, 0.057), rgba(0, 0, 0, 0.057)),
			url("../../assets/img/hero-shape-2.svg") no-repeat 50% -120px / 180% auto;
	}
	.pf-block .pf-hmosaic-title {
		font-size: 40px;
		letter-spacing: -0.045em;
	}
	.pf-block .pf-hmosaic-sub {
		font-size: 15px;
	}
	.pf-mosaic {
		flex-direction: column;
		margin-top: 32px;
	}
	.pf-mosaic-frame--big,
	.pf-mosaic-col {
		width: 100%;
	}
	.pf-mosaic-col .pf-mosaic-frame {
		flex: none;
		aspect-ratio: 732 / 358;
	}
}