/**
 * @author alisch berlec hönow <info@abh.eu>
 * @version 4.6.6
 *
 * Mdj Component: Material
 */

.material {
	--preview-transition-duration: 0.4s;
	--material-content-spacing: var( --component-sp );

	--material-transition-duration: 0.4s;
	--material-transition-easing: cubic-bezier( 0.76, 0, 0.24, 1 );

	position: relative;
	padding: 0;
	overflow: hidden;

	height: calc( var( --teaser-height, 0 ) + var( --box-vertical-padding ) * 2 );
}

.material[data-type="werk"] {
	--background-color: var( --highlight-color );
}

.material.has-content { 
	cursor: pointer;
	pointer-events: all;
}

.material.has-content.is-active {
	height: calc( var( --upper-height, 0 ) + var( --box-vertical-padding ) * 2 + var( --content-height ) + var( --material-content-spacing ) );
}

.is-ready .material {
	transition: height var( --material-transition-duration ) var( --material-transition-easing );
}

.material-inner {
	z-index: 20;
	margin: 0 !important;

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

	display: flex !important;
	flex-direction: column;
}

.material.has-mood .material-inner {
	position: absolute !important;
}



.material__meta {
	justify-content: center;
}

.material__meta:not( :last-child ) {
	padding-bottom: 0.75em;
}

.material__upper:not( :last-child ) {
	padding-bottom: 0.5em;
}

.material__concert-titles {
	margin-top: auto;
}



.material__content {
	margin-top: calc( var( --material-content-spacing ) * 5 );
	opacity: 0;
}

.material.is-active .material__content {
	margin-top: var( --material-content-spacing );
	opacity: 1;
}

.is-ready .material__content {
	transition: margin-top var( --material-transition-duration ) var( --material-transition-easing ),
				opacity var( --material-transition-duration ) var( --material-transition-easing )
				;
}



.material__preview,
.material__mood {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	overflow: hidden;
}

.material.is-active .material__preview,
.material.is-active .material__mood {
	opacity: 0;
}

.material__preview {
	position: relative;
	z-index: 15;
	border-radius: var( --border-radius );
	opacity: 0;

	filter: var( --preview-filter );
	-moz-filter: var( --preview-filter );
	-webkit-filter: var( --preview-filter );
}

.is-ready .material__preview,
.is-ready .material__mood {
	transition: opacity var( --preview-transition-duration ) cubic-bezier( 0.65, 0, 0.35, 1 );
}

.material:not( .is-active ):hover .material__preview,
.material:not( .is-active ):active .material__preview {
	opacity: 1;
}

.material__preview::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

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

	.material__preview > img {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}