/* Block: hero. v2 .top, .hero, .hero-media.
   The band runs from the very top edge (behind the transparent header) to behind the media. */
.hero-top {
	position: relative;
	overflow: hidden;
	--bl: 46%;
	--bw: 40%;
}

/* v2's padding-top already clears the absolute header; --header-h only raises it if the header ever grows taller. */
.hero {
	padding-top: max(calc(var(--header-h, 0px) + 32px), clamp(176px, 25vw, 372px));
	padding-bottom: clamp(32px, 3.4vw, 48px);
	align-items: end;
}
.hero h1 { max-width: 8.2em; }
.hero-intro {
	font-size: 16px;
	line-height: 1.4;
	max-width: 21em;
	padding-bottom: 0.5em;
}

.hero-media { margin: 0; --hero-pos: 50% 60%; } /* default focal point; per image via inline --hero-pos */
.hero-media img {
	width: 100%;
	aspect-ratio: 16 / 7.4;
	object-fit: cover;
	object-position: var(--hero-pos);
	border-radius: var(--radius);
}
.hero-media--top { --hero-pos: 50% 0%; }
.hero-media--bottom { --hero-pos: 50% 100%; }
.hero-media--left { --hero-pos: 0% 50%; }
.hero-media--right { --hero-pos: 100% 50%; }

@media (max-width: 900px) {
	.hero-top { --bl: 50%; --bw: 50%; }
	.hero {
		padding-top: max(calc(var(--header-h, 0px) + 72px), 168px);
		row-gap: 22px;
	}
	.hero-intro { font-size: var(--fs-body); }
	/* 5:4, not portrait: a portrait crop of a landscape photo keeps only half its width and cuts people out.
	   The focal point comes from the image (inline --hero-pos, see hero.php). */
	.hero-media img { aspect-ratio: 5 / 4; }
}

/* Optional buttons: a row under the heading, in the left column. */
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(28px, 3vw, 40px);
}

/* Tone: the band takes the colour of the service (or culture) the page is about. */
.hero-top--web { --bc: var(--web); }
.hero-top--dm { --bc: var(--dm); }
.hero-top--camp { --bc: var(--camp); }
.hero-top--culture { --bc: var(--culture); }

/* Without an image: shorter, with room under the text so the band still reads as a shape. */
.hero-top--plain { --bl: 52%; --bw: 34%; }
.hero-top--plain .hero {
	padding-top: max(calc(var(--header-h, 0px) + 56px), clamp(200px, 19vw, 280px));
	padding-bottom: clamp(64px, 7vw, 112px);
}
.hero-top--plain h1 { max-width: 11em; }

@media (max-width: 900px) {
	.hero-actions { margin-top: 6px; }
	.hero-top--plain { --bl: 48%; --bw: 52%; }
	.hero-top--plain .hero {
		padding-top: max(calc(var(--header-h, 0px) + 64px), 156px);
		padding-bottom: 56px;
	}
}