/* @override
	https://auriea.art/portfolio/works.css */
/* styled to match THEKE's generated work/series pages (css/pages.css):
   warm-grey field, 20px white mats, translucent-white hover labels, blue links */

@import url('https://fonts.cdnfonts.com/css/trajan-pro');
@font-face {
	font-family: HeldaneTextRegular;
	src: url("HeldaneTextRegular.otf") format("opentype");
}

BODY		{
			margin: 0px;
			margin-top: 100px;/*for toolbar*/
			overflow: hidden;
			background-color: rgb(255, 255, 255);
			}

/* ---------- filter toolbar (echoes THEKE's SECLABEL / NAVCRUMB) ---------- */

#toolbar	{
			position: absolute;
			top: 175px;
			width: 100vw;
			height: 40px;
			padding: 0px;
			text-align: center;
			}

select		{
			font-family: sans-serif;
			font-size: 12px;
			font-weight: 100;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #000000;
			background-color: transparent;
			border: none;
			border-bottom: 1px solid rgba(0, 0, 0, 0.25);
			width: 150px;
			padding: 7px 6px;
			margin: 0px 8px;
			cursor: pointer;
			transition: border-color 0.15s ease, background-color 0.15s ease;
			}
select:hover	{ border-bottom-color: #000000; }

#availTool	{
			font-family: sans-serif;
			font-size: 12px;
			font-weight: 100;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #000000;
			background-color: transparent;
			border: none;
			border-bottom: 1px solid rgba(0, 0, 0, 0.25);
			padding: 7px 14px;
			margin: 0px 8px;
			cursor: pointer;
			transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
			}
#availTool:hover	{ border-bottom-color: #000000; }
#availTool.on	{ background-color: rgb(52, 56, 203); color: #ffffff; border-bottom-color: rgb(52, 56, 203); }

option		{
			font-family: 'HeldaneTextRegular', georgia, serif;
			text-transform: none;
			letter-spacing: 0;
			font-size: 14px;
			}

/* ---------- the grid (matches THEKE SERIESGRID) ---------- */

GRID		{
			position: absolute;
			width: 100vw;
			top: 250px;
			height: -moz-calc(100vh - 250px);
			height: -webkit-calc(100vh - 250px);
			height: -o-calc(100vh - 250px);
			height: calc(100vh - 250px);
			overflow-y: auto;
			overflow-x: hidden;
			display: grid;
			grid-template-columns: repeat(auto-fill, 250px);
			grid-auto-rows: 260px;
			grid-auto-flow: dense;
			gap: 40px;
			justify-content: center;
			padding: 60px 20px 100px 20px;
			box-sizing: border-box;
			background-color: rgb(223, 219, 217);
			}

WORK		{
			position:relative;/*required for min focus positioning top right*/
			display: inline-table;
			font-family: 'HeldaneTextRegular', georgia, serif;
			font-size: 14px;
			color: black;
			overflow: hidden;
			background-color: #ffffff;
			background-size: cover;
			background-position: top center;
			margin: 10px;
			border: 20px solid #fff;
			transition: box-shadow 0.18s ease;
			cursor: pointer;
			}
WORK:hover	{ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }

/* type tints — the fallback field behind each thumbnail (same as THEKE) */
.Drawing			{ background-color: #ffecb3; }
.DigitalSculpture	{ background-color: #c0d1c1; }
.Sculpture			{ background-color: #d1bbb4; }
.Rendering			{ background-color: #bdc6d4; }
.Website			{ background-color: #CFD8DC; }
.Video				{ background-color: #f3c2d2; }
.Software			{ background-color: #e5ebcf; }
[class~="3DModel"]	{ background-color: #d2f3f3; }
.Installation		{ background-color: #e0d4e8; }

/* ---------- title label (appears on hover, matches THEKE TILELABEL) ---------- */

HEADER		{
			display: table-row;
			width: 100%;
			visibility: hidden;
			}

H2			{
			margin: 0;/*for Firefox*/
			font-family: 'HeldaneTextRegular', georgia, serif;
			font-weight: normal;
			font-size: 15px;
			line-height: 1.3;
			text-align: left;
			color: #000000;
			word-wrap: break-word;
			overflow: hidden;
			background-color: rgba(255, 255, 255, 0.88);
			padding: 10px 56px 10px 12px;/*right room for the minimize button*/
			}

/* ---------- details (appear on click / focus, styled like THEKE TOMBSTONE) ---------- */

BLURB		{
			display: none;
			vertical-align: bottom;
			height: 100%;
			}
.DETAILS	{
			background-color: rgba(255, 255, 255, 0.92);
			padding: 18px 20px;
			width: 100%;
			box-sizing: border-box;
			font-size: 17px;
			font-weight: 100;
			line-height: 24px;
			text-align: left;
			}
DATE		{
			display: block;
			font-size: 120%;
			margin-bottom: 6px;
			}
MEDIUM		{ display: block; width: 92%; }
EDITION		{ display: block; width: 92%; }
DIMENSIONS	{ display: block; width: 92%; }

.pagelink	{
			display: block;
			margin-top: 14px;
			font-size: 17px;
			font-weight: 100;
			color: rgb(52, 56, 203);
			text-decoration: none;
			}
.pagelink:hover	{ text-decoration: underline; }

.noselect	{
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			}

/* below 700px, normal document flow replaces the fixed-header/toolbar/grid
   offsets — matches the mobile block in css/AVRIEA.css and css/pages.css */
@media (max-width: 700px) {
	BODY { margin-top: 0; overflow-x: hidden; overflow-y: visible; }
	#toolbar	{
				position: static;
				width: 100%;
				height: auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 8px 6px;
				padding: 4px 14px 16px 14px;
				box-sizing: border-box;
				}
	select, #availTool	{ width: auto; min-width: 0; margin: 0; }
	GRID	{
				position: static;
				width: 100%;
				top: auto;
				height: auto;
				grid-template-columns: 1fr;
				grid-auto-rows: auto;
				gap: 30px;
				padding: 20px 16px 60px 16px;
				}
	WORK	{ margin: 0; aspect-ratio: 1; }
	/* tapped open: release the square so the revealed details aren't squeezed/clipped */
	WORK.open	{ aspect-ratio: auto; }
	WORK.open .DETAILS	{ font-size: 15px; line-height: 22px; padding: 16px 18px; }
}

/* ---------- minimize button (focus) ---------- */

.minFocusParent	{
				position:absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 50px;
				display: none; /*min focus initially invisible*/
				}
.minFocus	{
			width: 26px;
			height: 26px;
			line-height: 24px;
			position: absolute;
			top: 12px;
			right: 12px;
			background-color: rgb(255, 255, 255);
			text-align: center;
			font-weight: 100;
			border-radius: 50%;
			cursor: pointer;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
			}