/**
 * Cypher: View: Project: Media;
 * 
 * @author alisch berlec hönow
 * @version 1.6.1
 */

.project__media {
	min-height: 100%;
	background-color: var( --white );

	padding-top: calc( var( --grid-wrap-padding-vertical ) * 2 + var( --label-height ) );
	padding-bottom: calc( var( --grid-wrap-padding-vertical ) * 2 + var( --label-height ) );
}

.project__media-viewer-inner {
	position: relative;
	height: 100%;
	overflow: hidden;
}



.project-single-media .video {
	background-color: var( --background-color );
}

.project-single-media video-control[data-trigger="project:media"] {
	display: none;
}



/* ------------------------- */
@media ( max-aspect-ratio: 1/1 ) {
	.project-single-media:not( :last-child ) {
		margin-bottom: var( --grid-row-gap );
	}

	.project__media-navigation,
	.project__media-thumbnails {
		display: none;
	}
}



/* ------------------------- */
@media ( min-aspect-ratio: 1/1 ) {
	.project__media {
		height: 100%;
		display: flex;
		flex-direction: column;

		padding-top: 0;
		overflow: hidden;
	}

	.project__media-viewer {
		flex: 1;
		position: relative;
		padding: calc( var( --grid-wrap-padding-vertical ) * 2 + var( --label-height ) + 1px ) calc( 2.9em + var( --grid-wrap-padding-horizontal ) ) var( --grid-row-gap );
		overflow: hidden;
	}

	.project__media-navigation {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: calc( var( --grid-wrap-padding-vertical ) * 2 + var( --label-height ) + 1px ) 0 var( --grid-row-gap );

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

	.project__media-navigation > * {
		pointer-events: all;
	}

	.project-single-media {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		display: flex;
		justify-content: center;
		align-items: center;

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

	.project-single-media:not( .is-active ) {
		opacity: 0;
	}

	.project-single-media .image,
	.project-single-media .video {
		flex: 1;
		max-width: calc( var( --h ) * var( --ratio ) );
	}

	.project__media-thumbnails {
		display: flex;
		column-gap: var( --grid-column-gap );
		align-items: flex-end;
		justify-content: center;
	}

	.project-media-thumbnail {
		flex: 1;
		max-width: 100px;
		
		cursor: pointer;
	}
}