/**
 * Module Page hero banner.
 *
 * Mirrors the site's article banner: a full-bleed band, capped at 300px tall,
 * with a dark-blue gradient overlay for legibility and a centered white title
 * plus an optional description line.
 */

/* Pull the hero flush to the top of the (otherwise empty) component area. */
.com_modulepage .container-component {
	padding-top: 0;
}

.com_modulepage .container-component > main {
	margin-top: 0;
}

.modulepage-hero {
	display: grid;
	position: relative;
	width: 100vw;
	max-width: 100vw;
	max-height: 300px;
	margin-block: 0;
	/* Break out of the content container to full viewport width. */
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	overflow: hidden;
}

.modulepage-hero > img {
	grid-area: 1 / 1 / 2 / 2;
	width: 100%;
	height: 100%;
	max-height: 300px;
	object-fit: cover;
}

.modulepage-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, transparent 45%, hsl(220, 49%, 31%) 100%),
		linear-gradient(to right,
			hsl(220, 49%, 31%) 0%,
			hsl(220 45% 38% / 0.92) 22%,
			hsl(220 45% 38% / 0.55) 75%,
			hsl(220 45% 38% / 0.15) 100%);
}

.modulepage-hero__title {
	grid-area: 1 / 1 / 2 / 2;
	align-self: center;
	position: relative;
	z-index: 1;
}

.modulepage-hero__title > .container-xxl {
	max-width: calc(100vw - 2rem);
	margin-inline: auto;
}

.modulepage-hero__title h1 {
	width: fit-content;
	margin-block: 0;
	padding-block: 10px 5px;
	color: #fff;
	line-height: 1.1;
	font-size: clamp(1.125rem, -0.191rem + 5.8491vw, 5rem);
}

.modulepage-hero__desc {
	max-width: 46rem;
	margin-top: 0.35rem;
	color: #fff;
	font-size: clamp(0.95rem, 0.85rem + 0.55vw, 1.15rem);
	line-height: 1.4;
}

.modulepage-hero__desc > :first-child {
	margin-top: 0;
}

.modulepage-hero__desc > :last-child {
	margin-bottom: 0;
}