/**
 * HEROES
 * banner can be aligned on top or bottom
 * adding class .r16-9 preserves a 16/9 aspect ratio on heroes
 *
 * some sample HTML:
 * <div class="cu-hero banner top r16-9"> ... </div>
 *
 * height and width can be specified with css properties
 * 
 * 
 */


.cu-hero {
	margin: 0 auto 3rem;
	max-width: var( --mw, 100% );
	position: relative;
}

.cu-hero.alignfull {
	left: 50%;
	transform: translateX(-50%);
	width: 100vw !important;
	max-width: 100vw;
}

.home .landing-sidebar__content {
	padding-top: 0 !important;
}

/** LAYOUT **/

.cu-hero .artboard {
	position: relative;
	width: 100%;
}
.cu-hero .background {
 	margin: 0;
 	width: 100%;
}
.cu-hero[data-video] .background video {
	aspect-ratio: 16 / 9;
	width: 100%;
}

.cu-hero.is-video {
	overflow-y: hidden;
}


/** LAYOUT: Background media layer **/

.cu-hero.is-video .background img {
	position: absolute;
	visibility: hidden;
	z-index: -1;
}
.vidja {
	height: 100%;
	width: 100%;
	position: relative;
	padding-top: 56.25%;
}
.vidja iframe {
	border: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
}


@media screen and ( min-width: 700px ) {
	.cu-hero .background {
		position: relative;
	}
	.cu-hero .background img {
		display: block;
		object-fit: cover;
		object-position: var( --fp-x, 50% ) var( --fp-y, 50% );
		height: var( --h, 80vh );
		width: 100%;
	}
	.cu-hero.is-video {
		height: var(--h);
	}
	.vidja {
		height: var( --h, 80vh ) !important;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.vidja iframe {
		height: 100%;
		width: calc( 100vh * 16 / 9 );
		min-width: 100%;
		min-height: calc( 100vw * 9 / 16 );
		aspect-ratio: 16 / 9;

		position: absolute;
		left: 50%; /* % of surrounding element */
		top: 50%;
		transform: translate(-50%, -50%); /* % of current element */
	}

	.cu-hero.r16-9 .background {
		aspect-ratio: 16 / 9;
		height: auto !important;
	}
	.cu-hero.r16-9 .background .vidja {
		aspect-ratio: auto;
		object-fit: none;
		max-height: 100%;
		height: 100% !important;
	}
}


/** LAYOUT: Foreground text layer **/

.cu-hero .foreground {
	display: flex;
	padding: 0 2rem;
	position: relative;
	z-index: 2;
}



/** FONTS AND COLORS **/
.cu-hero .background figcaption {
	font-size: .925rem;
	margin: .5rem 2rem 1rem;
	max-width: 60ch;
}
@media screen and ( min-width: 700px ) {
	.cu-hero .background figcaption {
		margin: .5rem 4rem 2rem;
	}
}
.cu-hero .background figcaption .credit {
	display: block;
	font-style: italic;
}

.cu-hero .foreground {
	color: #000;
}
.cu-hero .foreground h2,
.cu-hero .foreground p {
	color: inherit;
}
.cu-hero .foreground h2 {
	font-family: "Crimson Text",serif;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	margin-bottom: 1rem;
}
.cu-hero .foreground p {
	line-height: 1.5;
	margin-bottom: 1.5rem;
}


/** banner-style heroes **/
.cu-hero .foreground-content {
	max-width: 80ch;
}

@media screen and ( min-width: 700px ) {

	.cu-hero .foreground {
		top: var( --h, 80vh );
		transform: translateY( -100% );
		padding: 4rem;
		position: absolute;
		width: 100%;
	}
	.cu-hero.top .foreground {
		transform: translateY( 0 );
	}
	.r16-9 .foreground {
		top: 100%;
	}
	.cu-hero.top .foreground {
		bottom: auto;
		top: 0;
	}
	.cu-hero.center .foreground {
		justify-content: center;
	}
	.cu-hero.center .foreground-content {
		text-align: center;
	}

	.cu-hero.right .foreground {
		justify-content: flex-end;
	}
	.cu-hero.right .foreground-content {
		text-align: right;
	}
	.cu-hero.right .foreground-content a.outline-button {
		margin-right: 0;
	}

	/** fonts and colors for banner-style heroes **/
	.cu-hero .foreground,
	.cu-hero.white .foreground {
		color: #fff;
	}
	.cu-hero.black .foreground {
		color: #000;
	}
	.cu-hero.tint .foreground {
		background: linear-gradient( 0deg, rgba(34,34,34,.6) 0%, rgba(34,34,34,.6) 50%, rgba(0,0,0,0) 100% );
	}
	.cu-hero.top.tint .foreground {
		background: linear-gradient(180deg, rgba(34,34,34,.6) 0%, rgba(34,34,34,.6) 50%, rgba(0,0,0,0) 100%);
	}

	.cu-hero.text-shadow .foreground h2,
	.cu-hero.text-shadow .foreground p {
		text-shadow: 1px 1px 0 rgba( 0, 0, 0, .3);
	}
	.cu-hero.text-shadow-medium .foreground h2,
	.cu-hero.text-shadow-medium .foreground p {
		text-shadow: 1px 1px 0 rgba( 0, 0, 0, .5);
	}
	.cu-hero.text-shadow-dark .foreground h2,
	.cu-hero.text-shadow-dark .foreground p {
		text-shadow: 1px 1px 0 rgba( 0, 0, 0, 1);
	}

	.cu-hero .foreground h2 {
		font-size: 2.25rem;
	}
	.cu-hero .foreground .outline-button {
		backdrop-filter: blur( 5px );
		-webkit-backdrop-filter: blur( 5px );
		border-color: #fff;
		color: #fff;
	}
	.cu-hero.dark-button .foreground .outline-button {
		backdrop-filter: blur( 5px ) brightness( 30% ) saturate( 50% );
		-webkit-backdrop-filter: blur( 5px ) brightness( 80% ) saturate( 50% );
	}
	.cu-hero.text-shadow .foreground .outline-button {
		box-shadow: 1px 1px 0 rgba( 0, 0, 0, .3);
		text-shadow: 1px 1px 0 rgba( 0, 0, 0, .3);
	}
	.cu-hero.text-shadow-medium .foreground .outline-button {
		box-shadow: 1px 1px 0 rgba( 0, 0, 0, .5);
		text-shadow: 1px 1px 0 rgba( 0, 0, 0, .5);
	}
	.cu-hero.text-shadow-dark .foreground .outline-button {
		box-shadow: 1px 1px 0 rgba( 0, 0, 0, 1);
		text-shadow: 1px 1px 0 rgba( 0, 0, 0, 1);
	}
	.cu-hero .foreground .outline-button::after {
		background-color: #c00;
	}


}


.cu-hero .artboard .background:has(.vidja) img + p {
	display: none;
}


/* 

@media screen and ( min-width: 700px ) {
	.content>.cu-hero {
		margin: 0 auto 3rem !important;
	}
}
 */