/**
 * @author Valentin Alisch, Off Office <hallo@valentinalisch.de>
 * @version 1.0
 *
 * Rettberg View: Work
 */

#work {}

#work.overlay {
	--overlay-background--blurred: rgba( 255, 255, 255, 0.95 );
}

@supports ( ( -webkit-backdrop-filter: blur( 10px ) ) or ( backdrop-filter: blur( 10px ) ) ) {

	#work.overlay {
		--overlay-background--blurred: rgba( 255, 255, 255, 0.75 );
	}
}



	#work .overlay-content {
		display: flex;
		flex-direction: column;
	}



#work__closer {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: sticky;
	display: inline-block;

	top: calc( var( --outer-spacing ) * -0.5 );
	padding: calc( var( --outer-spacing ) * 0.5 );

	cursor: pointer;
	pointer-events: none;
	z-index: 20;
	align-self: flex-end;
}

#work.active #work__closer {
	pointer-events: all;
}

	#work__closer > img {
		display: block;
		width: 0.85em;
		height: 0.8em;
	}



#work__info {
	margin-top: -0.25em;
	margin-bottom: var( --spacing--large );
}



#work__title,
#work__meta,
#work__price {
	margin-bottom: var( --spacing--small );
}

#work__price {
	/*margin-top: calc( var( --spacing--small ) * -1 );*/
}



#work__buy {
	margin-bottom: var( --spacing--medium );
}

#work__buy__title {
	cursor: pointer;
	display: flex;
	align-items: center;

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

	#work__buy__title .icon {
		margin-right: var( --spacing--tiny );
	}

#work__buy__form {
	padding-top: var( --spacing--tiny );
	display: none;
}

#work__buy.active #work__buy__form {
	display: block;
}

	#work__buy__form .form-section,
	#work__buy__form .form-part:last-child {
		margin-bottom: 0;
	}



#work__media {}



.work-media {
	--zoom: 2;

	margin-bottom: calc( var( --spacing--tiny ) * 2 );
}

#work__media .work-media:last-child {
	margin-bottom: 0;
}



.work-media .image {}

	.user-can-hover .work-media .image img {
		pointer-events: none;
		width: calc( var( --zoom ) * 100% );
		height: calc( var( --zoom ) * 100% );

		-webkit-transform: scale( calc( 1 / var( --zoom ) ) );
		-moz-transform: scale( calc( 1 / var( --zoom ) ) );
		transform: scale( calc( 1 / var( --zoom ) ) );

		-webkit-transform-origin: top left;
		-moz-transform-origin: top left;
		transform-origin: top left;
	}

	.user-can-hover .work-media .image:hover img,
	.user-can-hover .work-media .image:active img {
		-webkit-transform: scale( 1 );
		-moz-transform: scale( 1 );
		transform: scale( 1 );

		top: calc( var( --zoom-y ) * -100% );
		left: calc( var( --zoom-x ) * -100% );
	}



/* ------------------------ */
@media ( max-width: 899px ) {

	#work__closer {
		margin-top: calc( var( --outer-spacing ) * -0.5 );
		margin-right: calc( var( --outer-spacing ) * -0.5 );
		margin-bottom: calc( var( --outer-spacing ) * 0.5 );
	}

	#work__meta {
		margin-bottom: calc( var( --spacing--small ) * 2 );
	}

	#work__media {
		margin-top: 0 !important;
	}
}

@media ( min-width: 900px ) {

	#work__closer {
		margin-top: calc( var( --outer-spacing ) * -0.5 );
    	margin-right: calc( var( --outer-spacing ) * -0.5 );
    	margin-bottom: calc( var( --outer-spacing ) * -1 );
	}

	#work__info {
		position: -webkit-sticky;
		position: -moz-sticky;
		position: sticky;
		top: -0.25em;
	}
}