/*
 * Hero.
 *
 * Full-width block. Colours: --gsf-hero-bg (chosen swatch, or surface-dark) and --gsf-hero-on
 * (readable text colour for it), used for the text panel. On a photo (wide) the text is white on
 * a fixed dark scrim, like the photo tiles of Fototegels.
 */
.gsf-block.gsf-hero {
	--gsf-h-bg: var(--gsf-hero-bg, var(--gsf-color-surface-dark));
	--gsf-h-on: var(--gsf-hero-on, var(--gsf-on-color-surface-dark));
	--gsf-hero-arc: clamp(18px, 4cqi, 52px);
	/* On the panel, label and first button are the inverse of the panel (always readable). */
	--gsf-head-label-bg: var(--gsf-h-on);
	--gsf-head-label-fg: var(--gsf-h-on-inverse, var(--gsf-h-bg));
	--gsf-button-bg: var(--gsf-h-on);
	--gsf-button-fg: var(--gsf-h-on-inverse, var(--gsf-h-bg));
	background: var(--gsf-h-bg);
	color: var(--gsf-h-on);
}

.gsf-block.gsf-hero .gsf-hero__media {
	position: relative;
	aspect-ratio: 16 / 10;
	max-height: 34svh;
	width: 100%;
	overflow: hidden;
	background: var(--gsf-color-surface-dark);
}

.gsf-block.gsf-hero .gsf-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.gsf-block.gsf-hero .gsf-hero__inner {
	max-width: var(--gsf-content-outer);
	margin-inline: auto;
	padding: clamp(1.75rem, 5vw, 4rem) var(--gsf-space-gutter);
}

.gsf-block.gsf-hero .gsf-hero__content {
	max-width: 40rem;
}

.gsf-block.gsf-block.gsf-hero .gsf-head__title {
	max-width: 18ch;
}

/* As a band the title is heavy; in the hero it is a step smaller. */
.gsf-block.gsf-block.gsf-hero[class*="--heading-display-band"] .gsf-head__title {
	max-width: 20ch;
	font-size: clamp(1.75rem, 1rem + 2.6vw, calc(var(--gsf-text-h1-max) * 0.78));
	line-height: 1.5;
}

.gsf-block.gsf-block.gsf-hero .gsf-hero__text {
	max-width: 52ch;
	margin-top: var(--gsf-space-3);
	line-height: 1.5;
}

/* The first paragraph is the lead. */
.gsf-block.gsf-block.gsf-hero .gsf-head__title + .gsf-hero__text,
.gsf-block.gsf-block.gsf-hero .gsf-head__label + .gsf-hero__text {
	max-width: 40ch;
	margin-top: var(--gsf-space-4);
	font-size: var(--gsf-text-lead);
	font-weight: var(--gsf-text-lead-weight);
	line-height: 1.35;
}

.gsf-block.gsf-hero .gsf-hero__buttons {
	margin-top: var(--gsf-space-4);
}

/* Narrow: only the lead below the title, so the visitor still sees the start of the next
   section on a phone. Further paragraphs show from 520px. */
@container (max-width: 519.98px) {
	.gsf-block.gsf-block.gsf-hero .gsf-hero__text ~ .gsf-hero__text {
		display: none;
	}
}

/* Arc (option): the photo ends in a soft arc in the colour below it: the text panel when
   narrow, the page when the text sits on the photo. */
.gsf-block.gsf-hero--edge-arc .gsf-hero__media::before {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: -1px;
	left: -10%;
	width: 120%;
	height: var(--gsf-hero-arc);
	border-radius: 70% 30% 0 0 / 100% 100% 0 0;
	background: var(--gsf-h-bg);
}

/* Wide with a photo: text on the photo, behind a scrim that is darkest where the text is. */
@container (min-width: 720px) {
	.gsf-block.gsf-hero .gsf-hero__frame--photo {
		display: grid;
		/* Never taller than the screen minus the header and a peek of the next section (unless
		   the text needs it): visitors should see that there is more. */
		min-height: min(clamp(26rem, 38cqi, 36rem), calc(100svh - var(--gsf-hero-peek, 12rem)));
		color: #ffffff;
		/* On the photo: white label, the site's button colour, a white outline button. */
		--gsf-head-label-bg: #ffffff;
		--gsf-head-label-fg: rgb(8 12 10);
		--gsf-button-bg: var(--gsf-color-accent);
		--gsf-button-fg: var(--gsf-on-color-accent);
	}

	.gsf-block.gsf-hero .gsf-hero__frame--photo > * {
		grid-area: 1 / 1;
	}

	.gsf-block.gsf-hero .gsf-hero__frame--photo .gsf-hero__media {
		aspect-ratio: auto;
		max-height: none;
	}

	.gsf-block.gsf-hero .gsf-hero__frame--photo .gsf-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(90deg, rgb(8 12 10 / 0.72) 0%, rgb(8 12 10 / 0.5) 38%, rgb(8 12 10 / 0.08) 70%, rgb(8 12 10 / 0) 100%),
			linear-gradient(0deg, rgb(8 12 10 / 0.25) 0%, rgb(8 12 10 / 0) 35%);
	}

	.gsf-block.gsf-hero--edge-arc .gsf-hero__frame--photo .gsf-hero__media::before {
		background: var(--gsf-color-surface);
	}

	.gsf-block.gsf-hero .gsf-hero__frame--photo .gsf-hero__inner {
		position: relative;
		z-index: 1;
		align-self: center;
		width: 100%;
		padding-block: clamp(1.5rem, 3.5vw, 3rem);
	}

	.gsf-block.gsf-block.gsf-hero .gsf-hero__frame--photo .gsf-hero__text {
		max-width: 62ch;
	}

	/* Keep the arc free of text and buttons. */
	.gsf-block.gsf-hero--edge-arc .gsf-hero__frame--photo .gsf-hero__inner {
		padding-bottom: calc(clamp(1.5rem, 3.5vw, 3rem) + var(--gsf-hero-arc));
	}

	.gsf-block.gsf-hero .gsf-hero__frame--photo .gsf-hero__content {
		max-width: min(44rem, 60%);
		text-shadow: 0 1px 12px rgb(0 0 0 / 0.25);
	}

	.gsf-block.gsf-hero .gsf-hero__frame--photo .gsf-button {
		text-shadow: none;
	}
}

/* An inverse label or button (background = the block's text colour, white or black) gets the
   opposite of that as text colour, so it reads as white on black and black on white. Browsers
   without relative colours keep the block colour as text colour. */
@supports (color: rgb(from red r g b)) {
	.gsf-block.gsf-hero {
		--gsf-h-on-inverse: rgb(from var(--gsf-h-on) calc(255 - r) calc(255 - g) calc(255 - b));
	}
}