/* ══════════════════════════════════════════════════ *
 * MARK: Section
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# Container #═#═#═#═#═# */
#cvh--site-banner {
	display: grid;
	grid-template-areas: 'content';
	grid-template-rows: clamp(var(--_min-height), var(--_val-height), var(--_max-height));
    grid-auto-flow: row;
    align-items: stretch;
	position: relative;
	isolation: isolate;
	z-index: 10;

	transition: var(--cvh-transition-normal);
	transition-property: grid-template-rows, height;

	@media screen and ( 768px < width ) {
		border-bottom: var(--cvh-space-s, 2.5rem) solid var(--secondary);
	}
}

#cvh--site-banner[data-fit-screen] {
	grid-template-rows: var(--cvh-screen-view-y-init, var(--viewport));
}


/* #═#═#═#═#═# Inners #═#═#═#═#═# */
#cvh--site-banner > div {
	grid-area: content;
	min-width: 0;
	min-height: 0;
}

	/* #════ Content ════# */
#cvh--site-banner > .cvh--banner-layout {
	display: grid;
	grid-template-areas: 'overlay';
	grid-auto-flow: row;

	padding-block: var(--cvh-space-l, 5rem);

	@media screen and ( width <= 768px ) {
		padding-block: var(--cvh-space-s, 2.5rem);
		padding-inline: var(--cvh-section-pad-x);
		background-color: var(--secondary);
	}
}


/* ══════════════════════════════════════════════════ *
 * MARK: Overlays
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# Container #═#═#═#═#═# */
:where(#cvh--site-banner > div.cvh--banner-layout) > div {
	--overlay-indent-y: var(--cvh-space-s, 2.5rem);

	position: relative;
	z-index: 15;
	min-width: 0;
	min-height: 0;
	width: fit-content;
	height: fit-content;
	padding: var(--cvh-space-xs) var(--cvh-space-s);

	@media screen and (width > 1200px) {
		max-width: var(--cvh-col-width-66);
	}


	/* #════ Vertical ════# */
		/* ~~~ TOP ~~~ */
	&[data-alignment*="top-"] {
		align-self: start;
	}

			/* ~~~ CENTER ~~~ */
	&[data-alignment*="center-"] {
		align-self: center;
	}

		/* ~~~ BOTTOM ~~~ */
	&[data-alignment*="bottom-"] {
		align-self: end;
	}


	/* #════ Horizontal ════# */
		/* ~~~ LEFT ~~~ */
	&[data-alignment*="-left"] {
		justify-self: start;
	}
		
		/* ~~~ CENTER ~~~ */
	&[data-alignment*="-center"] {
		justify-self: center;
	}

		/* ~~~ RIGHT ~~~ */
	&[data-alignment*="-right"] {
		justify-self: end;
	}


	/* #════ Heading ════# */
	& > .cvh--heading-ctn h1 {
		font-weight: 400 !important;
	}
}


/* ══════════════════════════════════════════════════ *
 * MARK: Breakpoints
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# Mobile #═#═#═#═#═# */
@media screen and (width <= 768px) {
	#cvh--site-banner {
		grid-template-areas: unset;
	}

	#cvh--site-banner > div {
		grid-area: unset;
		grid-row: span 1;
	}

	:where(#cvh--site-banner > div.cvh--banner-layout) > div.cvh--banner-overlay {
		padding: 0 !important;
		margin: 0 !important;

		&::before {
			content: unset;
		}

		& hgroup.cvh--heading-ctn:not(:last-child) {
			margin-bottom: var(--cvh-space-s);
		}
	}
}