/**
 * STF: Context: Frontend
 * 
 * @author alisch berlec hönow <info@abh.eu>
 * @version 1.6.1
 */

body {
	--black: black;
	--white: white;
	--background-color: var( --white );
	--highlight-color: #Ff4500;

	--grid-dot-size: var( --grid-column-gap-vertical );
	--d-margin-horizontal: calc( var( --grid-dot-size ) * 0.5 );
	
	--css-grid-column-count: 2;
	--css-grid-row-count: 3;
	--css-grid-row-height: calc( ( 100vh - var( --grid-wrap-padding-vertical ) * 2 - var( --grid-column-gap-vertical ) * ( var( --css-grid-row-count ) - 1 ) ) / var( --css-grid-row-count ) );

	--rolodex-height: calc( 100svh - var( --header-inner-height ) - var( --grid-dot-size ) * 3 );
	--rolodex-gradient-height: calc( var( --font-size--regular ) * 6 );
	--rolodex-gradient-offset: 25svh;

	background-color: var( --background-color );
}

#grid {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	overflow-x: hidden;
	overflow-y: scroll;
}

/*#grid::before {
	content: '';
	position: fixed;
	top: var( --grid-wrap-padding-vertical );
	left: var( --grid-wrap-padding-horizontal );
	width: calc( 100% - var( --grid-wrap-padding-horizontal ) * 2 );
	height: var( --css-grid-row-height );
	background: rgba( 0, 255, 255, 0.25 );
	pointer-events: none;
	z-index: 10000;
}*/

main {
	grid-row-start: 2;
	grid-row-end: span var( --rsp, 1 );
	grid-column-start: 1;
	grid-column-end: -1;
}

main section[style*="--background-color"] {
	position: relative;
}

	main section[style*="--background-color"] .layout {
		position: relative;
		z-index: 20;
	}

	main section[style*="--background-color"]::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: calc( var( --grid-wrap-padding-horizontal ) * -1 );
		width: calc( 100% + var( --grid-wrap-padding-horizontal ) * 2 );
		height: 100%;
		background-color: var( --background-color );

		pointer-events: none;
	}

	main section[style*="--background-color"]:first-child::after {
		top: -50vh;
		height: calc( 100% + 50vh );
	}

	main section[style*="--background-color"]:last-child::after {
		height: calc( 100% + var( --grid-wrap-padding-vertical ) );
	}

	main section[style*="--background-color"]:first-child:last-child::after {
		height: calc( 100% + 50vh + var( --grid-wrap-padding-vertical ) );
	}

video {
	clip-path: content-box;
}



.is-rolodex-view #grid {
	overflow: hidden;
}

/* ------- @grid md ------- */
@media ( max-width: 1049px ) {
	.is-rolodex-view {
		background-color: var( --black );
	}

	.is-rolodex-view main {
		overflow: hidden;
		text-align: center;

		margin-left: calc( var( --grid-column-gap-horizontal ) * -1 );
		margin-right: calc( var( --grid-column-gap-horizontal ) * -1 );
	}

	.is-rolodex-view .rolodex {
		--color: var( --white );
	}
}



.rolodex {
	position: relative;
	height: var( --rolodex-height );

	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;

	mask: linear-gradient( 
		transparent var( --rolodex-gradient-offset ), 
		white calc( var( --rolodex-gradient-offset ) + var( --rolodex-gradient-height ) ), 
		white calc( 100% - var( --rolodex-gradient-offset ) - var( --rolodex-gradient-height ) ), 
		transparent calc( 100% - var( --rolodex-gradient-offset ) ) 
	);
	z-index: 20;
}

.rolodex::-webkit-scrollbar {
	display: none;
}

	.rolodex > *:first-child {
		margin-top: calc( var( --rolodex-height ) * 0.5 - var( --line-height--rolodex ) * 0.5 );
	}

	.rolodex > *:last-child {
		margin-bottom: calc( var( --rolodex-height ) * 0.5 - var( --line-height--rolodex ) * 0.5 );
	}



slider-wrap.slider {
	--sjs-indicator-size: var( --grid-dot-size );
	--sjs-indicator-border: none;
	--sjs-indicator-margin: 0;

	--slide-padding-vertical: var( --grid-column-gap-vertical );
	--slide-padding-horizontal: var( --grid-wrap-padding-horizontal );
	--slide-height: calc( 100svh - var( --grid-wrap-padding-vertical ) * 2 - var( --grid-column-gap-vertical ) * 3 );
	--slide-media-height: calc( var( --slide-height ) - var( --slide-padding-vertical ) * 2 - var( --grid-column-gap-vertical ) * 4 );

	/*height: 100%;*/
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

slider-wrap.slider slider-slides {
	align-items: center;
	height: var( --slide-height );
}

slider-wrap.slider slider-slide {
	display: flex;
	justify-content: center;
	padding: var( --slide-padding-vertical ) var( --slide-padding-horizontal );
	max-height: 100%;
}

	slider-wrap.slider slider-slide > * {
		flex: 1;
	}

	slider-wrap.slider slider-slide .image,
	slider-wrap.slider slider-slide .video {
		max-width: calc( var( --slide-media-height ) * var( --ratio, 1.7777777777 ) );
	}

slider-wrap.slider slider-controls {
	--line-height: var( --grid-column-gap-vertical );

	display: flex;
	justify-content: space-between;
	flex-shrink: 0;
	pointer-events: all;

	max-width: 100vw;
}

	slider-wrap.slider slider-controls slider-control {
		background: var( --background-color );
		flex-shrink: 0;
		z-index: 20;
	}

	slider-wrap.slider slider-controls slider-control > span {
		position: relative;

		z-index: 20;
	}

	slider-wrap.slider slider-controls slider-control:first-child {
		padding-left: var( --grid-wrap-padding-horizontal );
	}

	slider-wrap.slider slider-controls slider-control:last-child {
		padding-right: var( --grid-wrap-padding-horizontal );
	}

slider-wrap.slider .slider-indicators-wrap {
	--gradient-width: calc( 50% - var( --grid-column-gap-horizontal ) * 0.5 );

	flex: 1;
	position: relative;
	display: flex;
	margin: 0 -1px;

	overflow-x: scroll;
	overflow-y: hidden;

	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
    scrollbar-width: none;
}

slider-wrap.slider .slider-indicators-wrap::-webkit-scrollbar {
	display: none;
}

slider-wrap.slider .slider-indicators-wrap::before,
slider-wrap.slider .slider-indicators-wrap::after {
	content: '';
	width: var( --gradient-width );
	flex-shrink: 0;

	position: -webkit-sticky;
	position: -moz-sticky;
	position: sticky;

	pointer-events: none;
	z-index: 20;
}

slider-wrap.slider .slider-indicators-wrap::before {
	background: linear-gradient( to right, var( --background-color ) 10%, transparent );
	left: -1px;
}

slider-wrap.slider .slider-indicators-wrap::after {
	background: linear-gradient( to left, var( --background-color ) 10%, transparent );
	width: calc( var( --gradient-width ) - var( --grid-dot-size ) );
	right: -1px;
}

slider-wrap.slider slider-indicators {
	display: inline-flex;

	z-index: 10;
}

slider-wrap.slider slider-indicator {
	width: auto;
	height: auto;
	pointer-events: all;
}

slider-wrap.slider slider-control,
slider-wrap.slider slider-indicator {
	padding: var( --grid-column-gap-vertical ) calc( var( --grid-column-gap-horizontal ) * 0.5 );
}

	slider-wrap.slider slider-indicator > div {
		width: var( --sjs-indicator-size, 1em );
		height: var( --sjs-indicator-size, 1em );
		background-color: currentColor;
	}

slider-wrap.slider slider-indicator:hover,
slider-wrap.slider slider-indicator:active,
slider-wrap.slider slider-indicator.is-target,
slider-wrap.slider slider-indicator.is-active,

slider-wrap.slider slider-control span:hover,
slider-wrap.slider slider-control span:active {
	--color: var( --highlight-color );
}

slider-wrap.slider slider-control::before,
slider-wrap.slider slider-control::after {
	top: var( --grid-dot-size ) !important;
}

slider-wrap.slider slider-control::before {
	left: var( --grid-dot-size ) !important;
}

slider-wrap.slider slider-control::after {
	right: var( --grid-dot-size ) !important;
}



.d-tl,
.d-tr,
.d-br,
.d-bl {
	position: relative;
}

.d-tl::before,
.d-tr::after,
.d-br::after,
.d-bl::before {
	content: '';
	position: absolute;
	pointer-events: none;

	background-color: currentColor;
	width: var( --grid-dot-size );
	height: var( --grid-dot-size );
}

.d-tl::before {
	top: calc( var( --grid-dot-size ) * -1 );
	left: calc( var( --grid-dot-size ) * -1 );
}

.d-tr::after {
	top: calc( var( --grid-dot-size ) * -1 );
	right: calc( var( --grid-dot-size ) * -1 );
}

.d-br::after {
	bottom: calc( var( --grid-dot-size ) * -1 );
	right: calc( var( --grid-dot-size ) * -1 );
}

.d-bl::before {
	bottom: calc( var( --grid-dot-size ) * -1 );
	left: calc( var( --grid-dot-size ) * -1 );
}

grid-col.d-tl::before,
.grid-col.d-tl::before,
grid-col.d-bl::before,
.grid-col.d-bl::before {
	left: calc( var( --grid-dot-size ) * -0.5 );
}

grid-col.d-tr::after,
.grid-col.d-tr::after,
grid-col.d-br::after,
.grid-col.d-br::after {
	right: calc( var( --grid-dot-size ) * -0.5 );
}

	.d-tl > *:not( div ):not( img ):not( video ):not( slider-wrap ):first-child,
	.d-bl > *:not( div ):not( img ):not( video ):not( slider-wrap ):first-child,
	.d-tl > div.d-push:first-child,
	.d-bl > div.d-push:first-child,

	.d-tl > video-control,
	.d-tl > p {
		margin-left: var( --d-margin-horizontal );
	}

	.d-tr > *:not( div ):not( img ):not( video ):not( slider-wrap ):last-child,
	.d-br > *:not( div ):not( img ):not( video ):not( slider-wrap ):last-child,
	.d-tr > div.d-push:last-child,
	.d-br > div.d-push:last-child {
		margin-right: var( --d-margin-horizontal );
	}

	.d-tl > nav,
	.d-tr > nav,
	.d-br > nav,
	.d-bl > nav {
		position: relative;
		top: calc( var( --grid-dot-size ) * -1 );
	}



/* ------- @grid md ------- */
@media ( min-width: 800px ) {

}



/* ------- @grid md ------- */
@media ( max-width: 1049px ) {
	#wrap {
		min-height: 100svh;
		display: flex;
		flex-direction: column;
	}

	#grid {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	main {
		flex: 1;
		margin-top: calc( var( --header-branding-height, 0px ) + var( --grid-column-gap-vertical ) * 2 );
	}

	slider-wrap.slider slider-controls {
		padding: 0 0 var( --grid-wrap-padding-vertical );
	}
}



/* ------- @grid lg ------- */
@media ( min-width: 1050px ) {
	body {
		--css-grid-column-count: 4;
		--css-grid-row-height: calc( ( ( 100vw - var( --grid-wrap-padding-horizontal ) * 2 - var( --grid-column-gap-horizontal ) * ( var( --css-grid-column-count ) - 1 ) ) / var( --css-grid-column-count ) ) * ( 9 / 16 ) );

		--rolodex-height: calc( 100svh - var( --css-grid-row-height ) - var( --grid-wrap-padding-vertical ) * 2 + var( --rolodex-gradient-height ) );
		--rolodex-gradient-offset: 0px;
	}

	#grid {
		display: grid;
		grid-template-columns: repeat( var( --css-grid-column-count ), 1fr );
		grid-auto-rows: var( --css-grid-row-height );
		column-gap: var( --grid-column-gap-horizontal );
		row-gap: var( --grid-column-gap-vertical );
	}

	.rolodex {
		top: calc( var( --rolodex-gradient-height ) * -1 );
	}

		.rolodex > *:first-child {
			margin-top: var( --rolodex-gradient-height );
		}

		.rolodex > *:last-child {
			margin-bottom: var( --rolodex-gradient-height );
		}

	slider-wrap.slider {
		--slide-padding-vertical: max( 12vh, calc( var( --grid-column-gap-vertical ) * 3 ) );
		--slide-padding-horizontal: var( --grid-wrap-padding-horizontal );
		--slide-media-height: calc( var( --slide-height ) - var( --slide-padding-vertical ) * 2 );
	}

	slider-wrap.slider slider-controls {
		position: absolute;
		bottom: calc( var( --slide-padding-vertical ) - var( --grid-column-gap-vertical ) * 3 );
		left: 50%;
		max-width: 30vw;

		-webkit-transform: translateX( -50% );
		-moz-transform: translateX( -50% );
		transform: translateX( -50% );

		z-index: 20;
	}

	slider-wrap.slider slider-control:first-child::before,
	slider-wrap.slider slider-control:last-child::after {
		display: none;
	}
}