/* CONTENT BLOCKS */

/* content blocks variables */

/* desktop vars */
:root {
	--block-padding: 1rem;
	--block-h1-font-size: 4rem;
	--block-h2-font-size: 3rem;
	--block-h3-font-size: 1.5rem;
	--block-h4-font-size: 1.25rem;
}

/* tablet vars */
@media screen and (max-width: 60em) {
	:root {
		--block-h1-font-size: 3rem;
		--block-h2-font-size: 2rem;
		--block-h3-font-size: 1.5rem;
		--block-h4-font-size: 1.25rem;
	}
}

/* mobile vars */
@media screen and (max-width: 35em) {
	:root {
		--block-h1-font-size: 2.5rem;
		--block-h2-font-size: 1.75rem;
		--block-h3-font-size: 1.25rem;
		--block-h4-font-size: 1rem;
	}
}

/* general blocks styling */
/* need to cleanup between .block and .cb */
.block {
	position: relative;
	/*overflow: hidden;*/

	flex-grow: 1;
	flex-basis: 20rem;
	/*aspect-ratio: 16/14; /* all blocks are 16/12 by default, but may be overriden if needed */

	/*opacity: 0;*/
	/*visibility: hidden;*/
}

.block h1 {
	font-size: var(--block-h1-font-size);
}

.block h2 {
	font-size: var(--block-h2-font-size);
}

.block h3 {
	font-size: var(--block-h3-font-size);
}

.block>h3 { /* block title */
	margin-top: calc(var(--margin) * 2);
	margin-bottom: calc(var(--margin) / 2);
}

.block.empty {
	aspect-ratio: unset;
	height: 0;
}

@media screen and (max-width: 35em) {
	.block {
		width: 100%;
		flex-basis: auto;
	}

	.block .block-info .h3 {
		font-size: var(--block-h2-font-size);
	}
}

/* link covers whole block */
.block a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* TODO : use additional format class to zoom in on 2.35 videos with black bars, or 1:1 prints etc */
.block-img {
	position: relative;
	top: 0;
	width: 100%;
	aspect-ratio: 16/9; /* all thumbnails are 16/9 by default, but may be overriden if needed */

	overflow: hidden; /* used for hover scale of cover images */
}

.block-img::before {
	content: '';
	display: block;
	position: absolute;

	width: 99%;
	height: 99%;
	left: 0.5%;
	top: 0.5%;

	/*background: var(--clr-medium) url('library/img/mtc_logo_halftone_alpha.gif') no-repeat center center;*/
	background: url('library/img/mtc_logo_halftone_alpha.gif') no-repeat center center,
				linear-gradient(to bottom right, rgba(0, 0, 0, 0), var(--clr-black)),
				url('library/img/loading_pattern_white.gif') repeat;
	background-size: 5rem auto, auto, auto;
	opacity: 0.4;
}

/* for use on images with black bars */
.block-img.format-2-35>* {
	transform: scale(135%); /* values to be refined */
}
.block-img.format-4-3>* {
	transform: scale(133.5%); /* values to be refined */
}

.block-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.block-img.cover-image img{
	transform: scale(100%);
	transition: 0.5s;
}

.active .block-img.cover-image img {
	transform: scale(105%);
}

.block.cb-image:hover .block-img.cover-image img {
	transform: scale(105%);
}
.block-img .rollover-video, .block-img .rollover-image {
	position: absolute;
	width: 100%;
	/*visibility: hidden;*/
	opacity: 0;
}

.block-info {
	position: relative;
	width: 100%;
	left: 0;
	font-size: .8rem;
	padding-top: 0.5rem;
}
/* no info on reels page */
#reels-general .block-info>span:first-child,
#reels-makingof .block-info>span:first-child {
	display: none;
}

.left .block-info {
	text-align: right;
	right: 0;
}
.center .block-info {
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
}
.right .block-info {
	text-align: left;
	left: 0;
}

.block-info span {
	position: relative;
}

.block-info span {
	transition-delay: 0.25s;
}

.block-info span:nth-of-type(2) {
	transition-delay: 0.5s;
}

.block-info span:nth-of-type(2)::after {
	animation-delay: 0.25s;
}

.block-info span:nth-of-type(3) {
	transition-delay: 0.75s;
}

.block-info span:nth-of-type(3)::after {
	animation-delay: 0.5s;
}


/* content blocks (=layouts) */
.cb a:hover .grid-image-overlay {
	color: var(--color-black);
	background: var(--color-accent);
}

.cb a:hover .grid-image-overlay span {
	filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

.block.left {
	left: 0;
}
.block.center {
	left: 50%;
	transform: translateX(-50%);
}
.block.right {
	left: 100%;
	transform: translateX(-100%);
}
.block.full-width {
	width: 100%;
}
.block.half-width {
	width: calc(50% - var(--flex-gap) / 2);
}
.block.one-third {
	width: calc(33.333% - var(--flex-gap) * 0.666);
}
.block.two-thirds {
	width: calc(66.666% + var(--flex-gap) * 0.333);
}
.block.one-quarter {
	width: calc((100% - var(--flex-gap) * 3) * 0.25);
}
.block.three-quarters {
	/*width: calc(75% + var(--flex-gap) * 0.25);*/
	width: calc((100% - var(--flex-gap) * 3) * 0.75 + var(--flex-gap) * 2);
}
.content>.block {
	margin-top: var(--flex-gap);
}

.cb-text, .cb-video {
	aspect-ratio: unset;
}

.cb-text a {
	position: relative;
	width: unset;
	height: unset;
}

.cb-quote {
	padding: var(--inter-section) var(--side-margin) var(--inter-section) var(--side-margin);
	aspect-ratio: unset;
}

.cb-quote::before, .cb-quote::after {
	content: '';
	position: absolute;
	z-index: -1;

	width: calc(var(--side-margin) * 2);
	height: calc(var(--side-margin) * 2);

	background: url('library/svg/mtc-triangle-white.svg') no-repeat;
	opacity: 0.25;
}

@media screen and (max-width: 35em) {
	.cb-quote::before, .cb-quote::after {
		width: calc(var(--side-margin) * 4);
		height: calc(var(--side-margin) * 4);
	}

	.block.half-width, .block.one-third, .block.two-thirds, .block.one-quarter, .block.three-quarters {
		width: 100%;
	}
}

.cb-quote::before {
	left: 0;
	top: 0;
	transform: rotate(90deg);
}

.cb-quote::after {
	right: 0;
	bottom: 0;
	transform: rotate(-90deg);
}

.cb-quote .author {
	position: relative;
	width: fit-content;
	right: 0;
}

.cb-single-image {
	aspect-ratio: unset; /* unset ratio for vertical / custom format images */
	color: var(--clr-white);
}

.cb-single-image>img, .cb-single-image>video {
	width: 100%;
}
.cb-single-image>a {
	position: absolute;
	width: 100%;
	height: 100%;
}

.cb-images {
	aspect-ratio: unset;
	color: var(--clr-white);
}

.cb-images>.block {
	flex-grow: 1;
	flex-basis: 25em;
	/*max-width: 30em;*/
	aspect-ratio: unset;
}

.cb-images .block-img {
	position: relative;
	aspect-ratio: unset;
}

.cb-images .block-img img {
	position:relative;
}

.cbtm-member {
	flex-grow: 1;
	flex-basis: 10em;
	aspect-ratio: unset;
	color: var(--clr-white);
}

.cbtm-member .block-img {
	aspect-ratio: 2/3;
	margin-bottom: .5em;
}

.cbtm-member .block-img img {
	filter: grayscale(100%);
}

@media screen and (max-width: 35em) {
	.cbtm-member {
		flex-basis: 8em;
	}
}

/* grid layouts (multiple blocks) */
.grid {
	display: grid;
	gap: var(--flex-gap);
	aspect-ratio: unset;

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

/* grid item */
.grid>div {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;

	/*background-color: var(--clr-medium);*/
}

.grid>div>img, .grid>div>video {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;

	transition: 0.5s;
}
.grid>div:hover>img {
	transform: scale(105%);
}
.grid>div>span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	opacity: 0;
	transition: 0.5s;
}
.grid>div:hover>span {
	opacity: 1;
}
.grid>div>a {
	position: absolute;
	width: 100%;
	height: 100%;
}
.grid-1 {
	grid-template-columns: 1;
	grid-template-rows: 1;
}
.grid-1-1 {
	grid-column: 1 / 2;
  	grid-row: 1 / 2;
	object-fit: contain;
}
.grid-1-1>img, .grid-1-1>video {
	position: relative !important;
}
.grid-2, .grid-3a, .grid-3b, .grid-4b {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
}
.grid-2-1 {
	grid-column: 1 / 3;
  	grid-row: 1 / 3;
	aspect-ratio: 1;
}
.grid-2-2 {
	grid-column: 3 / 5;
  	grid-row: 1 / 3;
	aspect-ratio: 1;
}
.grid-3a-1 {
	grid-column: 1 / 4;
  	grid-row: 1 / 3;
	aspect-ratio: calc((3 - 2 * var(--flex-gap)) / (2 - var(--flex-gap)));
}
.grid-3a-2 {
	grid-column: 4 / 5;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-3a-3 {
	grid-column: 4 / 5;
  	grid-row: 2 / 3;
	aspect-ratio: 1;
}
.grid-3b-1 {
	grid-column: 1 / 3;
  	grid-row: 1 / 2;
	aspect-ratio: calc(2 + var(--flex-gap));
}
.grid-3b-2 {
	grid-column: 1 / 3;
  	grid-row: 2 / 3;
	aspect-ratio: calc(2 + var(--flex-gap));
}
.grid-3b-3 {
	grid-column: 3 / 5;
  	grid-row: 1 / 3;
	aspect-ratio: 1;
}
.grid-4a {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
}
.grid-4a-1 {
	grid-column: 1 / 2;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-4a-2 {
	grid-column: 2 / 3;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-4a-3 {
	grid-column: 3 / 4;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-4a-4 {
	grid-column: 4 / 5;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-4b-1 {
	grid-column: 1 / 2;
  	grid-row: 1 / 2;
	aspect-ratio: 1;
}
.grid-4b-2 {
	grid-column: 1 / 2;
  	grid-row: 2 / 3;
	aspect-ratio: 1;
}
.grid-4b-3 {
	grid-column: 2 / 4;
  	grid-row: 1 / 3;
	aspect-ratio: 1;
}
.grid-4b-4 {
	grid-column: 4 / 5;
  	grid-row: 1 / 3;
	aspect-ratio: calc(1 / (2 + var(--flex-gap)));
}
.grid-6 {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.grid-6-1 {
	grid-column: 1 / 3;
  	grid-row: 1 / 2;
	aspect-ratio: calc(2 + var(--flex-gap));
}
.grid-6-2 {
	grid-column: 2 / 3;
  	grid-row: 2 / 3;
	aspect-ratio: 1;
}
.grid-6-3 {
	grid-column: 3 / 5;
  	grid-row: 1 / 3;
	aspect-ratio: 1;
}
.grid-6-4 {
	grid-column: 1 / 2;
  	grid-row: 2 / 4;
	aspect-ratio: calc(1 / (2 + var(--flex-gap)));
}
.grid-6-5 {
	grid-column: 2 / 4;
  	grid-row: 3 / 4;
	aspect-ratio: calc(2 + var(--flex-gap));
}
.grid-6-6 {
	grid-column: 4 / 5;
  	grid-row: 3 / 4;
	aspect-ratio: 1;
}