/**
 * abh: Context: Frontend
 * 
 * @author H A N D
 * @version 25.0.4
 */

html {
	--white: white;
	--black: black;
	--light-gray: rgba( 222, 222, 222, 0.99 );
	--highlight-color: rgb( 0, 255, 0 );

	--background-color: var( --white );
	--background-color--inverted: var( --black );

	--bubble-padding-vertical--default: 0.6em;
	--bubble-padding-vertical: var( --bubble-padding-vertical--default );
	--bubble-padding-vertical: round( var( --bubble-padding-vertical--default ), 1px );
	--bubble-padding-horizontal--default: 0.75em;
	--bubble-padding-horizontal: var( --bubble-padding-horizontal--default );
	--bubble-padding-horizontal: round( var( --bubble-padding-horizontal--default ), 1px );

	--bubble-border-radius: 0px;
	--bubble-spacing: 0px;

	--bubble-group-padding-vertical: 0px;
	--bubble-group-padding-horizontal: 0px;
	--bubble-group-border-radius: 0px;

	--box-padding-vertical--default: calc( var( --bubble-padding-vertical ) + var( --bubble-group-padding-vertical ) );
	--box-padding-vertical: var( --box-padding-vertical--default );
	--box-padding-vertical: round( var( --box-padding-vertical--default ), 1px );
	--box-padding-horizontal--default: calc( var( --bubble-padding-horizontal ) + var( --bubble-group-padding-horizontal ) );
	--box-padding-horizontal: var( --box-padding-horizontal--default );
	--box-padding-horizontal: round( var( --box-padding-horizontal--default ), 1px );

	--box-border-radius: 0px;

	--glass-background-color: rgba( 255, 255, 255, 0.2 );
	--glass-backdrop-filter: blur( 8px ) invert( 0.3 ) saturate( 4 ) brightness( 1.2 );
}

html,
body {
	background-color: var( --background-color );
}

body {
	
}

main {
	min-height: calc( 100vh - var( --header-height, 0px ) );
}



table {
	width: 100%;
	border-collapse: collapse;
}

th {
	text-align: left;
}

tr th:not( :first-child ),
tr td:not( :first-child ) {
	padding-left: calc( var( --grid-column-gap-horizontal ) * 0.5 );
}

tr th:not( :last-child ),
tr td:not( :last-child ) {
	padding-right: calc( var( --grid-column-gap-horizontal ) * 0.5 );
}



.bubble {
	overflow: hidden;
	border-radius: var( --bubble-border-radius );
	padding: var( --bubble-padding-vertical ) var( --bubble-padding-horizontal );
	white-space: nowrap;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.bubble-group {
	overflow: hidden;
	border-radius: var( --bubble-group-border-radius );
	padding: var( --bubble-group-padding-vertical ) var( --bubble-group-padding-horizontal );
}

.box {
	display: block;
	overflow: hidden;
	border-radius: var( --box-border-radius );
	padding: var( --box-padding-vertical ) var( --box-padding-horizontal );
	background-color: var( --background-color );
}



.poster-image {
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc( 100% + 2px );
	height: calc( 100% + 2px );
	object-fit: cover;

	z-index: 20;
}

.poster-image + img,
.poster-image + video,
.poster-image + iframe {
	z-index: 10;
}

.image:not( .is-loaded ) .poster-image + img,
.video:not( [data-state] ) .poster-image + video,
.video:not( [data-state] ) .poster-image + iframe,
.video[data-state=""] .poster-image + video,
.video[data-state=""] .poster-image + iframe,
.video[data-state="loaded"] .poster-image + video,
.video[data-state="loaded"] .poster-image + iframe,
.decorative-video:not( [data-state="loaded"], [data-state="failed"], [data-state="playing"] ) .poster-image + video {
	visibility: hidden;
}

.image:not( .is-loaded ) .image__markup::after,
.video:not( [data-state] ) .video__markup::after,
.video[data-state=""] .video__markup::after,
.video[data-state="loaded"] .video__markup::after,
.decorative-video:not( [data-state="failed"], [data-state="playing"] )::after {
	--filter: blur( 10px );

	content: '';
	display: block;
	position: absolute;

	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	-webkit-backdrop-filter: var( --filter );
	backdrop-filter: var( --filter );

	z-index: 30;
}

.image.is-loaded .poster-image,
.video[data-state]:not( [data-state=""], [data-state="loaded"] ) .poster-image,
.decorative-video[data-state="loaded"] .poster-image,
.decorative-video[data-state="failed"] .poster-image,
.decorative-video[data-state="playing"] .poster-image {
	display: none;
}



/* ------- @grid < ml ------- */
@media ( max-width: 899px ) {
	.page-info main section:nth-child( 2 ) > grid-col:nth-child( 1 ) { order: 1; }
	.page-info main section:nth-child( 2 ) > grid-col:nth-child( 2 ) { order: 3; }
	.page-info main section:nth-child( 2 ) > grid-col:nth-child( 3 ) { order: 5; }
	.page-info main section:nth-child( 2 ) > grid-col:nth-child( 4 ) { order: 2; }
	.page-info main section:nth-child( 2 ) > grid-col:nth-child( 5 ) { order: 4; }
}