/**
 * Front page hero (Figma "Hero update": desktop 1:150 at 1920x927, mobile 1:327
 * at 390x668.5).
 *
 * On desktop the section fills the first screen below the header, so its
 * height follows the viewport. Horizontal positions stay in percentages of the
 * width; the title is centred vertically and the portrait is sized from the
 * height so it always fits. Wedge corners were measured from the Figma renders.
 */

.hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: clamp(520px, calc(100svh - var(--header-height)), 70vw);
	background: var(--color-orange);
}

.hero__background {
	position: absolute;
	left: 0.42%;
	top: 50%;
	width: 112.4%;
	max-width: none;
	height: auto;
	min-height: 100%;
	object-fit: cover;
	transform: translateY(-50%);
}

.hero__wedge {
	position: absolute;
	inset: 0;
}

.hero__wedge--yellow {
	background: var(--color-yellow);
	clip-path: polygon(25.26% 0%, 100% 0%, 100% 19.78%, 78.27% 44.9%);
}

.hero__wedge--orange {
	background: var(--color-orange);
	clip-path: polygon(0% 0%, 25.26% 0%, 78.27% 44.9%, 30.59% 100%, 0% 100%);
}

.hero__title {
	position: absolute;
	left: 19.946%;
	top: 50%;
	width: 31.877%;
	margin: 0;
	font-size: min(106.705px, 5.5576vw, 12svh);
	font-weight: var(--weight-medium);
	line-height: 1.022;
	letter-spacing: 0.012em;
	color: #fff;
	transform: translateY(-50%);
}

.hero__title strong {
	display: inline-block;
	margin-top: 0.2335em;
	padding: 0.117em 0.2085em 0.117em 0.2927em;
	font-size: 0.9231em;
	font-weight: var(--weight-medium);
	line-height: 1;
	background: var(--color-green);
}

.hero__portrait {
	position: absolute;
	left: 74.5%;
	top: 13%;
	width: auto;
	height: 101%;
	transform: translateX(-50%);
}

@media (max-width: 720px) {
	.hero {
		height: auto;
		aspect-ratio: 390 / 668.5;
	}

	/* The mobile frame zooms into the right part of the photo. */
	.hero__background {
		left: -141.5%;
		top: 19.9%;
		width: 289%;
		min-height: 0;
		transform: none;
	}

	.hero__wedge--yellow {
		clip-path: polygon(14.23% 0%, 100% 0%, 100% 20.42%);
	}

	.hero__wedge--orange {
		clip-path: polygon(0% 0%, 14.23% 0%, 100% 20.42%, 100% 50.07%, 0% 82.48%);
	}

	.hero__title {
		left: 7.949%;
		top: 16.02%;
		width: 83.33%;
		font-size: 14.529vw;
		transform: none;
	}

	.hero__portrait {
		left: 30.77%;
		top: 41%;
		width: 68.6%;
		height: auto;
		transform: none;
	}
}