/* Index
======================================== */
#projects{
	padding-top: 0;
}

/* Header */
#projects-header{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding-top: var(--m-top);
	background-color: var(--color-bg);
	z-index: 2;
}
@media (min-width: 835px){
	#projects-header .trigger{
		justify-self: flex-start;
		cursor: pointer;
	}
	.desktop #projects-header .trigger:hover{
		color: var(--color-txt--highlight);
	}
}
@media (max-width: 834px){
	#projects-header .module-index--row-items > *:not(:last-child)::after{
		content: ', ';
	}
}
@media (max-width: 600px){
	#projects-header .module-index--row-items > *{
		display: none;
	}
	#projects-header .module-index--row-items::before{
		content: 'Project';
	}
}

/* Content */
#projects-body{
	z-index: 1;
}
/* .mobile #projects-body{
	padding-bottom: calc(100vh - var(--m-top) - var(--page-bottom) - var(--rows-gap-s)*3 - var(--height-txt)*2 - 2px);
} */
@media (min-width: 1181px){
	#projects-body{
		position: relative;
	}
}
@media (max-width: 834px){
	#projects-body{
		display: grid;
		grid-auto-rows: min-content;
	}
}

/* Rows */
.module-index--row{
	width: 100%;
	padding: var(--rows-gap-s) 0;
	display: grid;
	grid-template-columns: minmax(calc(var(--txt-indent) - var(--cols-gap)), 1fr) repeat(15, 1fr);
	border-bottom: 1px solid var(--color-txt);
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
}
.desktop #projects-body:hover .module-index--row,
.mobile #projects-body:active .module-index--row{
	color: var(--color-txt--highlight);
	border-color: var(--color-txt--highlight);
}
.desktop #projects-body .module-index--row:hover,
.mobile #projects-body .module-index--row:active{
	margin-top: -1px;
	color: var(--color-txt);
	border-color: var(--color-txt);
	border-top: 1px solid;
}
/* .desktop #projects-body:hover .module-index--row{
	color: var(--color-txt--highlight);
	border-color: var(--color-txt--highlight);
}
.desktop #projects-body .module-index--row:hover,
.mobile #projects-body.touch-active .project.touch-target{
	margin-top: -1px;
	color: var(--color-txt);
	border-color: var(--color-txt);
	border-top: 1px solid;
}
.mobile #projects-body.touch-active .project:not(.touch-target),
.mobile #projects-body:not(.touch-active) .project:not(.highlight){
	color: var(--color-txt--disabled);
	border-color: var(--color-txt--disabled);
} */
@media (min-width: 835px){
	.module-index--row{
		column-gap: var(--cols-gap);
	}
}
@media (max-width: 834px){
	.module-index--row{
		grid-template-columns: var(--txt-indent) 1fr;
	}
}

/* Items */
@media (min-width: 1181px){
	.project-category{
		grid-column: 2 / 4;
	}
	.project-title{
		grid-column: 4 / 7;
	}
	.project-location{
		grid-column: 7 / 12;
	}
	.project-year{
		grid-column: 12;
	}
}
@media (min-width: 835px) and (max-width: 1180px){
	.project-category{
		grid-column: 2 / 5;
	}
	.project-title{
		grid-column: 5 / 9;
	}
	.project-location{
		grid-column: 9 / 15;
	}
	.project-year{
		grid-column: 15 / -1;
	}
}
@media (min-width: 835px){
	.module-index--row-items{
		display: contents;
	}
	.module-index--row-items > *{
		grid-row: 1;
	}
	.module-index--row-items .comma{
		display: none;
	}
}
@media (max-width: 834px){
	.module-index--row-items{
		text-wrap: pretty;
	}
	.module-index--row-items > * > span{
		white-space: nowrap;
	}
	.module-index--row-items > *:last-child .comma{
		display: none;
	}
}
/* @media (max-width: 600px){
	.project-title{
		display: block;
	}
	.project-title .comma{
		display: none;
	}
} */

/* Thumbnail */
.project-thumbnail{
	opacity: 0;
	pointer-events: none;
}
.project-thumbnail .thumb{
	opacity: 1 !important;
	transition: none !important;
}
/* .desktop .module-index--row:hover .project-thumbnail,
.mobile #projects-body.touch-active .project.touch-target .project-thumbnail,
.mobile #projects-body:not(.touch-active) .project.highlight .project-thumbnail{
	opacity: 1;
} */
/* .desktop .module-index--row:hover .project-thumbnail,
.mobile #projects-body .project.highlight .project-thumbnail{
	opacity: 1;
} */
.desktop .module-index--row:hover .project-thumbnail,
.mobile .module-index--row:active .project-thumbnail{
	opacity: 1;
}
@media (min-width: 1181px){
	.project-thumbnail{
		position: absolute;
		top: 0;
		right: 0;
		width: calc(((100vw - var(--page-sides)*2 - var(--cols-gap)*15)/16)*4 + var(--cols-gap)*3);
		height: 100%;
		z-index: 10;
	}
	.project-thumbnail .thumb{
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--m-top) + var(--height-txt) + var(--rows-gap-s) + 1px);
		max-height: calc(var(--height-viewport) - var(--m-top) - var(--height-txt) - var(--rows-gap-s) - 1px - var(--page-sides));
		object-fit: contain;
		object-position: top right;
	}
}
@media (max-width: 1180px){
	.project-thumbnail{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		display: grid;
		z-index: 3;
	}
	.desktop .project-thumbnail{
		align-items: center;
		justify-content: center;
	}
	.mobile .project-thumbnail{
		padding: calc(var(--m-top) + var(--height-txt) + var(--rows-gap-s) + 1px) var(--page-sides) var(--page-sides);
		align-items: flex-end;
		justify-content: flex-start;
	}
	.project-thumbnail .thumb{
		width: calc(100vmin/3*2);
		height: calc(100vmin/3*2);
		object-fit: contain;
	}
	.mobile .project-thumbnail .thumb{
		max-width: calc((100vw - var(--page-sides)*2)/2);
		max-height: calc(var(--height-viewport) - var(--m-top) - var(--height-txt) - var(--rows-gap-s) - 1px - var(--page-sides));
		object-position: left bottom;
	}
}
@media (max-width: 600px){
	.project-thumbnail .thumb{
		width: calc(100vmin - var(--page-sides)*2);
		height: calc(100vmin - var(--height-header)*2);
	}
	.mobile .project-thumbnail .thumb{
		max-width: none;
		height: calc(100vmin - var(--page-sides)*2);
	}
}