/**
 * abh: Component: Media Section: Media
 * 
 * @author H A N D
 * @version 25.0.4
 */

body {
	
}

.media-section__media {
	--video-max-height: none;

	--media-container-height: auto;
	--media-container-width: calc( 100vw / var( --grid-column-count ) * var( --column-span, 12 ) );
	--media-container-padding-vertical: max( var( --media-padding-vertical ), calc( var( --list-item-height, 0px ) + var( --list-padding-vertical, 0px ) * 2 + var( --grid-wrap-padding-vertical ) * 2 ) );
	--media-container-padding-horizontal: var( --media-padding-horizontal );

	--media-width: calc( var( --media-container-width ) - var( --media-container-padding-horizontal ) * 2 );
	--media-height: calc( var( --media-container-height ) - var( --media-container-padding-vertical ) * 2 );
	--media-max-width: 100vw;

	--sjs-slide-width: var( --media-container-width );

	background-color: var( --media-background-color, transparent );
	width: var( --media-container-width );
	height: 100%;
}



.media-section__media:not( .is-padded ) {
	--media-container-padding-vertical: 0px;
	--media-container-padding-horizontal: 0px;
}

.media-section__media.is-padded:not( [data-clone] ) + .media-section__media.is-padded {
	margin-left: calc( var( --media-container-padding-horizontal ) * -1 + 1px );
}

.media-section__media[data-column-span] {
	--column-span: var( --media-column-span );
}

.media-section__media[data-column-span="10"] {
	--column-span: var( --media-column-span-10 );
}

.media-section__media[data-column-span="8"] {
	--column-span: var( --media-column-span-8 );
}

.media-section__media[data-column-span="6"] {
	--column-span: var( --media-column-span-6 );
}

.media-section__media[data-column-span="4"] {
	--column-span: var( --media-column-span-4 );
}

.media-section__media[data-column-span="3"] {
	--column-span: var( --media-column-span-3 );
}

	.media-section.is-full-height .media-section__media {
		--media-container-height: var( --media-section-full-height );
		--media-max-width: calc( var( --media-height ) * var( --ratio ) );
	}

	.media-section.is-full-height .media-section__media:not( .does-cover ) .media-section__media-inner > * {
		max-width: var( --media-max-width );
	}

	.media-section.is-full-height .media-section__media.does-cover .image,
	.media-section.is-full-height .media-section__media.does-cover .image__markup,
	.media-section.is-full-height .media-section__media.does-cover .decorative-video,
	.media-section.is-full-height .media-section__media.does-cover .decorative-video__markup {
		width: 100%;
		height: 100%;
		padding-top: 0;
	}

	@media ( orientation: landscape ) {
		.media-section.is-full-height--landscape .media-section__media {
			--media-container-height: var( --media-section-full-height );
			--media-max-width: calc( var( --media-height ) * var( --ratio ) );
		}

		.media-section.is-full-height--landscape .media-section__media:not( .does-cover ) .media-section__media-inner > * {
			max-width: var( --media-max-width );
		}

		.media-section.is-full-height--landscape .media-section__media.does-cover .image,
		.media-section.is-full-height--landscape .media-section__media.does-cover .image__markup,
		.media-section.is-full-height--landscape .media-section__media.does-cover .decorative-video,
		.media-section.is-full-height--landscape .media-section__media.does-cover .decorative-video__markup {
			width: 100%;
			height: 100%;
			padding-top: 0;
		}
	}



.media-section__media-padding {
	display: block;
	height: 100%;
	padding: var( --media-container-padding-vertical ) var( --media-container-padding-horizontal );
}

.media-section__media-inner {
	position: relative;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	z-index: 10;
}

.media-section__media-inner > * {
	flex: 1;
}



.media-section__media__linked-project {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;

	transform: translate3d( 0, 0, 0 );
	z-index: 20;
}

.media-section__media__linked-project[style*="--project-highlight-color"] {
	--background-color: var( --project-highlight-color );
}

.media-section__media__linked-project[style*="--project-color"] {
	--color: var( --project-color );
}

	.media-section__media__linked-project > .list-item {
		height: auto;
		padding: var( --list-padding-vertical ) var( --list-padding-horizontal );
		border-radius: var( --bubble-group-border-radius );
		background-color: var( --background-color );
	}