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

.concert {
	--aspect: calc( 5 / 4 );
	--max-lines: 18.5;
	--preview-transition-duration: 0.4s;
}

.concert {
	position: relative;
}

.concert:not( .is-compact ) {
	background: var( --background-off-color );
}

.concert:not( .has-mood ) + .concert:not( .has-mood ) {
	border-top: var( --border-width ) solid currentColor;
}



.concert__live-badge {
	background: var( --live-color );
	border-radius: var( --border-radius );
	overflow: hidden;
	padding-bottom: calc( var( --border-radius ) * 2 );
	margin-bottom: calc( var( --border-radius ) * -2 );

	position: relative;
	z-index: 10;
}

.concert__live-badge + a {
	margin-top: 0;
	z-index: 20;
}

.concert.is-boxed .concert__live-badge {
	margin-left: calc( var( --box-horizontal-padding ) * -1 );
	margin-right: calc( var( --box-horizontal-padding ) * -1 );
	margin-top: calc( var( --box-vertical-padding ) * -1 );
	/*padding: var( --box-vertical-padding ) var( --box-horizontal-padding );*/
}

	.concert__live-badge .button {
		display: block;
	}

		.concert__live-badge .button > a {
			justify-content: center;
		}



.concert-inner {
	position: relative;
	z-index: 20;
}

.concert:not( .is-compact ) .concert-inner {
	height: calc( var( --one-line-height ) * var( --max-lines ) );
	overflow: hidden;
}



.concert__content {
	--grid-vertical-spacing: var( --component-sp );
	margin-bottom: calc( var( --grid-vertical-spacing ) * -1 ) ;
}

.concert__label {
	margin-top: 0.1em;
}

/*.concert__label + .concert__label {
	margin-top: 0.3em;
}*/

.concert__short-description {
	/*height: calc( var( --one-line-height ) * var( --max-lines ) );*/
	overflow: hidden;
}



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

.concert__preview {
	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-loaded .concert__preview {
	transition: opacity var( --preview-transition-duration ) cubic-bezier(0.65, 0, 0.35, 1);
}

.concert:hover .concert__preview,
.concert:active .concert__preview {
	opacity: 1;
}

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

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

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



.concert__mood.mood > img {
	/*top: 33%;*/
}



/* ------------------------- */
@media ( min-width: 500px ) {

	.concert {
		--aspect: calc( 2 / 3 );
	}
}



/* ------------------------- */
@media ( min-width: 700px ) {

	.concert {
		--aspect: calc( 1 / 3 );
		--max-lines: 9;
	}

	/*[data-column-count="2"] .concert {
		--aspect: calc( 1 / 2 );
	}*/

	[data-column-count="2"] .concert__content > grid-col {
		--grid-column-span: 12;
	}

	[data-column-count="2"] .concert__content > grid-col:first-child {
		order: 1;
	}

	[data-column-count="2"] .concert__title {
		margin-bottom: 0 !important;
	}

	[data-column-count="2"] .concert__short-description {
		display: none;
	}

	[data-column-count="2"] .concert__content > grid-col:last-child grid-col:first-child {
		--grid-column-span: 6;
	}

	[data-column-count="2"] .concert__content > grid-col:last-child grid-col:nth-child( 2 ) {
		--grid-column-span: 6;
	}
}



/* ------------------------- */
@media ( min-width: 1000px ) {

	.concert {
		--aspect: calc( 1 / 4 );
	}
}



/* ------------------------- */
@media ( min-width: 1200px ) {

	.concert {
		--aspect: calc( 1 / 5 );
	}

	[data-column-count="2"] .concert {
		--aspect: calc( 1 / 4 );
	}
}



/* ------------------------- */
@media ( min-width: 1500px ) {

	.concert {
		--aspect: calc( 1 / 6 );
	}

	[data-column-count="2"] .concert {
		--aspect: calc( 1 / 5 );
	}
}



/* ------------------------- */
@media ( min-width: 2000px ) {

	.concert {
		--aspect: calc( 1 / 8 );
	}
}






/* ---------------------------------------- */

.concert-tr {
	--grid-vertical-spacing: var( --bottom-sp );
	--text-alignment: 0.175em;
}

.concert-tr-inner {
	margin-bottom: calc( var( --grid-vertical-spacing ) * -1 );
}



.concert-tr__note {
	text-align: right;
	padding-top: var( --text-alignment );
}



.concert-tr .button-group {
	justify-content: flex-start;
}



/* ------------------------- */
@media ( min-width: 700px ) {

	.concert-tr__title {
		padding-top: var( --text-alignment );
	}
}