/* ================================================== *
 * MARK: 1. Section
 * -------------------------------------------------- */
/* #=#=#=#=#=# 1.1 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));
}


/* #=#=#=#=#=# 1.2 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: 2. Overlays
 * -------------------------------------------------- */
/* #=#=#=#=#=# 2.1 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;
	max-width: var(--cvh-col-width-66);
	padding: var(--cvh-space-xs) var(--cvh-space-s);
}

.cvh--banner-overlay{
	--cvh-color-text-dynamic: white;
	--cvh-color-heading-dynamic: white;
}

.cvh--banner-overlay::before{
	content: unset;
	
}

#cvh--site-banner > .cvh--image-ctn:has(+ div > .cvh--banner-overlay){
	filter: brightness(0.5);
}

 /* #=#=#=#=#=# 2.2 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;
}