/* ================================================== *
 * MARK: 1. Section
 * -------------------------------------------------- */
/* #=#=#=#=#=# 1.1 Container #=#=#=#=#=# */
#cvh--site-banner {
	--cvh-pagewidth-dynamic: var(--cvh-pagewidth-l);
	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 #=#=#=#=#=# */


.cvh--banner-overlay {
    --cvh-color-text-dynamic: var(--cvh-color-text-light);
    --cvh-color-heading-dynamic: var(--cvh-color-text-light);
    --overlay-bg: var(--primary);
    --overlay-opacity: 1;
    align-self: flex-end;
    margin-bottom: calc(var(--cvh-sec-space-y)* -1);
    translate: 0 50%;
    padding: var(--cvh-space-s) var(--cvh-space-m);
}


: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);
} 


/* ================================================== *
 * MARK: 3. Next Element
 * -------------------------------------------------- */
#cvh--site-main > div > .cvh--section:first-child > div {
    padding-top: calc(var(--cvh-sec-space-y) + var(--cvh-space-xl));
}