/**
 *	Works styles
 *	
 *	works list, filters menu, single work display (for single-work and overlay)
 */


/*
d8b   db  .d8b.  db    db d888888b  d888b   .d8b.  d888888b d888888b  .d88b.  d8b   db 
888o  88 d8' `8b 88    88   `88'   88' Y8b d8' `8b `~~88~~'   `88'   .8P  Y8. 888o  88 
88V8o 88 88ooo88 Y8    8P    88    88      88ooo88    88       88    88    88 88V8o 88 
88 V8o88 88~~~88 `8b  d8'    88    88  ooo 88~~~88    88       88    88    88 88 V8o88 
88  V888 88   88  `8bd8'    .88.   88. ~8~ 88   88    88      .88.   `8b  d8' 88  V888 
VP   V8P YP   YP    YP    Y888888P  Y888P  YP   YP    YP    Y888888P  `Y88P'  VP   V8P 
*/


#works-nav .slash {
	/*height: 1.5rem;*/
	margin: 0 -1.5rem 0 -1.5rem;
	opacity: 0.5;
}


/*
d88888b d888888b db      d888888b d88888b d8888b. .d8888. 
88'       `88'   88      `~~88~~' 88'     88  `8D 88'  YP 
88ooo      88    88         88    88ooooo 88oobY' `8bo.   
88~~~      88    88         88    88~~~~~ 88`8b     `Y8b. 
88        .88.   88booo.    88    88.     88 `88. db   8D 
YP      Y888888P Y88888P    YP    Y88888P 88   YD `8888Y' 
*/
#filters-overlay {
	position: relative;
	z-index: 200;

	width: 100%;
	max-height: 0; /* needed for transition, 'height' does not animate to auto */
	top: 0;
	left: 100%;
	padding-bottom: 2rem;

	color: var(--clr-black);

	visibility: hidden;

	transition: 0.5s; /*cubic-bezier(0.26, 1.04, 0.54, 1) 0s;*/
}

#filters-overlay.active {
	left: 0;
	max-height: 1000vh;

	visibility: visible;
}

#filters-overlay>*:not(.background--white) {
	opacity: 0;
	transition: 0.5s;
}

#filters-overlay.active>*:not(.background--white) {
	opacity: 1;
}

#filters-overlay>h2 {
	padding-top: var(--top-margin);
}

#filters-overlay .container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;

	vertical-align: top;
}

#filters-overlay .container fieldset {
	/*width: calc(33% - 2rem);*/
	padding-right: 2rem;
}

#filters-overlay .container fieldset legend {
	padding-top: 2rem;
}

#filters-overlay .container section {
	position: relative;
	width: 100%;
	margin-top: var(--inter-section);
}

#filters-overlay .centered {
	margin-top: var(--inter-section);
	padding-bottom: var(--top-margin);
}

@media screen and (max-width: 35em) {
	#filters-overlay .container {
		flex-direction: column;
		font-size: calc(1.25 * var(--font-size));
	}

	#filters-overlay .link-slanted-border {
		display: block;
		margin: 1rem auto 0 0;
		width: fit-content;
	}

	#filters-overlay .slash {
		display: none;
	}
}

/* background elements */
#filters-overlay .background--white {
	position: absolute;
	z-index: -1;
	background-color: var(--clr-white);
	transform: skew(45deg);
	opacity: 1;

	width: calc((100vw + 100vh) * 2);
	height: 100%;
	left: 200vw;
	top: 0;

	transition: 0.5s cubic-bezier(0.26, 1.04, 0.54, 1);
}

#filters-overlay.active .background--white {
	left: -100vh;
}

#filters-overlay .background--black {
	background: url("/assets/svg/mtc-triangle-black.svg") no-repeat;
	transform: rotate(180deg);

	position: absolute;
	height: calc(100vw + 100vh);
	width: calc(100vw + 100vh);
	top: 0;
	left: 100vw;

	transition: 0.5s cubic-bezier(0.26, 1.04, 0.54, 1) 0.15s;
}

#filters-overlay.active .background--black {
	left: calc(100vw - 22rem);
}

@media screen and (max-width: 35rem) {
	#filters-overlay.active .background--black {
		left: 75%;
	}
}

/* close button */
#filters-overlay .btn-close {
	position: absolute;
	z-index: 2;
	right: 0;
	top: var(--top-margin);
}








/*
.d8888. d888888b d8b   db  d888b  db      d88888b      db   d8b   db  .d88b.  d8888b. db   dD 
88'  YP   `88'   888o  88 88' Y8b 88      88'          88   I8I   88 .8P  Y8. 88  `8D 88 ,8P' 
`8bo.      88    88V8o 88 88      88      88ooooo      88   I8I   88 88    88 88oobY' 88,8P   
  `Y8b.    88    88 V8o88 88  ooo 88      88~~~~~      Y8   I8I   88 88    88 88`8b   88`8b   
db   8D   .88.   88  V888 88. ~8~ 88booo. 88.          `8b d8'8b d8' `8b  d8' 88 `88. 88 `88. 
`8888Y' Y888888P VP   V8P  Y888P  Y88888P Y88888P       `8b8' `8d8'   `Y88P'  88   YD YP   YD 
*/

#work-video-container {
	margin-bottom: 1rem;
}

#work-details {
	--flex-gap: 1rem;
}
/*
#work-details h1 {
	margin-bottom: .5rem;
}

#work-details .share-btns {
	margin-bottom: 1rem;
}*/

#work-details .flex li {
	flex-grow: 1;
	width: calc((100% - var(--flex-gap) * 4) / 3);
}

#work-details .flex li:not(:first-child, :nth-child(2), :nth-child(3)) a {
	font-weight: 400;
}

#work-details-tags {
	margin-top: 1rem;
}

@media screen and (max-width: 35rem) {
	#work-details h1 {
		/*margin-bottom: 1rem;*/
	}

	#work-details .flex li {
		flex-grow: 1;
		width: calc((100% - var(--flex-gap) * 3) / 2);
	}
}

/* awards */

#work-inspection {
  --flex-gap: 2rem;
}

#work-inspection h2 {
  padding-bottom: 2rem;
}

.work-award {
	position: relative;

	width: calc((100% - var(--flex-gap)) / 2);
	left: 0;
	top: 0;

	color: var(--clr-black);
}

.award-icon {
	float: left;
}

.award-text {
	padding-left: 6rem;
}

.work-award img {
	width: 5rem;
	height: 5rem;
}

@media screen and (max-width: 35rem) {
	.work-award {
		width: 100%;
	}
}

/* tags */
#work-tags li {
	margin-top: 0.5rem;
}

#work-tags li .slash {
	/*height: 1.5rem;*/
	margin: 0 -1.25rem 0 -1.25rem;
	opacity: 0.75;
}

/*
 * Taxonomy / label listing pages (mathematic.tv/work_category/, labels/film/)
 */
#taxonomy-details h3,
#labels-film h3 {
	margin-bottom: 0.75rem;
	font-size: var(--h4-font-size);
	font-weight: 400;
	color: var(--clr-medium);
	letter-spacing: 0.02em;
	text-transform: none;
}

#taxonomy-details h1.thin,
#labels-film h1.thin {
	font-size: var(--h0-font-size);
	font-weight: 200;
	letter-spacing: -0.35rem;
	line-height: 85%;
	margin-left: -0.03em;
}

#labels-film .excerpt {
	display: block;
	max-width: 52em;
	margin-top: 1.5rem;
	line-height: 1.55;
	font-size: var(--h3-font-size);
	font-weight: 400;
}

#taxonomy-related .more,
#labels-film-related .more {
	margin-top: var(--inter-section);
}