/* Home: the harbour hero, the welcome panel, the class band. */

.hero {
	position: relative;
	display: grid;
	min-height: min(88svh, 52rem);
	isolation: isolate;
	overflow: hidden;
	background-color: var(--color-bg-band);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

/* A soft wash from the left keeps the headline legible over the boats without hiding the
   mandala, which sits in the middle of the photograph. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(246 245 243 / 0.88) 0%, rgb(246 245 243 / 0.6) 38%, rgb(246 245 243 / 0) 62%);
}

.hero__inner {
	display: flex;
	align-items: center;
	padding-block: var(--space-8);
}

.hero__copy {
	max-width: 48rem;
}

.hero__heading {
	margin: 0;
	font-size: var(--font-9);
	line-height: 1.08;
}

.hero__text {
	margin-block-start: var(--space-2);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-15);
	margin-block-start: var(--space-4);
}

@media (max-width: 799px) {
	.hero {
		min-height: 0;
		grid-template-rows: auto auto;
	}

	.hero__media {
		position: relative;
		inset: auto;
		aspect-ratio: 3 / 2;
	}

	.hero__media::after {
		content: none;
	}

	.hero__img {
		object-position: 50% 50%;
	}

	.hero__inner {
		padding-block: var(--space-4) var(--space-5);
	}
}

.welcome {
	max-width: 52rem;
	margin-inline: auto;
	padding: var(--space-5) clamp(var(--space-3), 5vw, var(--space-6));
	background-color: var(--color-bg-card);
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-sm);
	text-align: center;
}

.welcome__heading {
	margin: 0;
}

.welcome__sub {
	margin-block: var(--space-1) var(--space-2);
	font-family: var(--font-display);
	font-weight: var(--weight-display);
}

.welcome__text {
	max-width: var(--measure);
	margin-inline: auto;
	margin-block-end: var(--space-3);
}

.band {
	position: relative;
	display: grid;
	min-height: 28rem;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--color-bg-band);
}

.band__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.band__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.band__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-block: var(--space-8);
}

.band__copy {
	max-width: 30rem;
	padding: var(--space-5) var(--space-4);
	background-color: rgb(255 255 255 / 0.92);
	border-radius: var(--radius-sm);
}

.band__heading {
	margin: 0;
	font-size: var(--font-8);
}

.band__text {
	margin-block-start: var(--space-15);
}

.band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-15);
	margin-block-start: var(--space-3);
}

@media (max-width: 599px) {
	.band__inner {
		padding-block: var(--space-5);
	}

	.band__copy {
		padding: var(--space-3);
	}
}