/* 
*
*	dumbtype.com-2.0
*	index.php (news page) styles
*
*/

[data-title='WORKS'] a { color: #900; }

/* --------------------------------- */
/* contents layout */
/* --------------------------------- */
main > article {
	font-family: "Helvetica", "Arial", sans-serif;
	padding-bottom: 4em;
}

/* --------------------------------- */
/* works list navigation */
/* --------------------------------- */
#workslist li {
	font-size: 1.2rem;
	line-height: 1.2em;
}
/* workslist anchor colors */
#workslist li { color: #000; opacity: 0.5; transition: opacity 0.2s; }
#workslist li:hover { opacity: 1.0; }
#workslist li[selected] { opacity: 1.0; }

/* --------------------------------- */
/* works contents */
/* --------------------------------- */
/* Contents Section */
#works-contents { position:relative; }
#works-contents > div { margin-bottom: 2rem; }
#works-contents iframe { width:100%; height:auto; aspect-ratio:16/9; margin-bottom:2rem; }
#works-contents h4 { color: #F5AB28; }
#works-contents h5 { font-weight:bold; }
#works-contents .lang { position:absolute; top:-5rem; right:0; }

/* --------------------------------- */
/* MUTranstionView Contents */
/* --------------------------------- */
/* works-images container offset left padding minus for cover the area of navigation menu. */
.works-images {
	position: relative;
	margin-left: calc(-300px - 6rem);
	margin-bottom: 6rem;
	width: calc(100% + 300px + 12rem);
	aspect-ratio: 980 / 400;
	background: #222;
	z-index:1;
}
.works-images img {
	display: none;
	width: 100%;
	height: 100%;
	background: #222;
	object-fit: cover;
}
.works-images-mobile { 
	position: relative;
	margin-left: -1rem; 
	width: 100vw; 
	aspect-ratio: 3/2;
	/* aspect-ratio: 980 / 400; */
	margin-bottom: 6rem;
	background: #222;
}
.works-images-mobile img {
	display: none;
	width: 100%;
	height: 100%;
	background: #222;
	object-fit: cover;
}

/* --------------------------------- */
/* Responsive
/* --------------------------------- */
@media screen and (max-width: 960px) 
{
	.works-images { margin-left: -1rem; width: 100vw; aspect-ratio: 3/2; }

	/* ver2.0.6, mobile drawer menu */
	#workslist-mobile { display:relative; padding-bottom:1rem;  }
	#workslist-mobile > div { display:flex; width:100%; height:100%; justify-content:space-between; align-items:end; }
	#workslist-mobile > div > h3 { display:block; padding:4px 0px; font-size:1.2rem; }
	#workslist-mobile > div > button { display:block; padding:4px 12px; background-color:white; font-family: "corporate-a", serif; border:1px solid #aaa; opacity:0.5; cursor:pointer; }
	#workslist-mobile > div > button:hover { opacity:1.0; }

	/* container will be moved to root element, so we need to set styles directly by id. */
	#workslist-container {
		width: 70vw;
		font-size: 1.25rem;
		min-width: calc(4em * 3); 
		height: 100dvh; 
		padding: 2rem; 
		padding-top: calc(2rem + 100px + 100px - 8rem - 8px);
		background-color: white; top: 0px; 
		margin:auto; 
		overflow-y:scroll;
	}
	#workslist-container [data-mu-drawermenu-item] { padding-bottom:1rem; }
	#workslist-container li { width:fit-content; opacity:0.5; }
	#workslist-container li:hover { opacity: 1.0; }
	#workslist-container li[selected] { opacity:1.0; }
}