/* ══════════════════════════════════════════════════ *
 * 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;
}

#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--section-inner {
	display: grid;
	grid-template-areas: 'overlay';
	grid-auto-flow: row;
}


/* ══════════════════════════════════════════════════ *
 * MARK: Overlays
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# Container #═#═#═#═#═# */
:where(#cvh--site-banner > div.cvh--section-inner) > div {
	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);
	}
}


/* #═#═#═#═#═# Alignments #═#═#═#═#═# */
	/* #════ Vertical ════# */
		/* ~~~ TOP ~~~ */
:where(#cvh--site-banner > div.cvh--section-inner) > div[data-alignment*="top-"] {
	align-self: start;
}

		/* ~~~ CENTER ~~~ */
:where(#cvh--site-banner > div.cvh--section-inner) > div[data-alignment*="center-"] {
	align-self: center;
}

		/* ~~~ BOTTOM ~~~ */
:where(#cvh--site-banner > div.cvh--section-inner) > div[data-alignment*="bottom-"] {
	align-self: end;
}


	/* #════ Horizontal ════# */
		/* ~~~ LEFT ~~~ */
:where(#cvh--site-banner > div.cvh--section-inner) > div[data-alignment*="-left"] {
	justify-self: start;
}
		
		/* ~~~ CENTER ~~~ */
:where(#cvh--site-banner > div.cvh--section-inner) > div[data-alignment*="-center"] {
	justify-self: center;
}

		/* ~~~ RIGHT ~~~ */
:where(#cvh--site-banner > div.cvh--section-inner) > div[data-alignment*="-right"] {
	justify-self: end;
}


/* ══════════════════════════════════════════════════ *
 * 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--section-inner) > 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);
		}
	}
}