/* Art Gallery (art.html) and artwork */

/* in this context, signage: large black sign that provides location information */
.signage {
	/* This one is very minimal. It doesn't use an SVG. */
	border: .5ex outset var(--lblack);
	/* It's mounted on the wall, right? So perhaps no shadow. */
	/*box-shadow: 1ex 1em var(--dblack);*/
	background: var(--dblack);
	color: var(--lwhite);
	padding: 1em;
	margin: 1em;
}

/* in this context, placard: small white sign that explains an art piece */
.placard {
	border: .5ex outset;
	background: var(--lwhite);
	color: var(--dblack);
	padding: 1em;
}

/* Make hgroup elements resemble "title, year, medium" headings
 * popular in modern art galleries.
 */
hgroup {
	margin: 0 0 1em;
	font-style: italic;

	time, .creation, p {
		font-weight: normal;
		font-style: normal;
	}

	/* Publish date, which can be different from when the artwork was made. */
	.published {
		font-style: italic;
	}
}

/* container class for artwork used in individual artwork pages. */
section.artwork {
	display: flex;
	align-items: center;
	.placard {
		margin: 0 1ex 0 2ex;
		.description p {
			margin: 0 0 1em;
		}
	}

	.artwork {
		background: var(--dwhite);
		max-width: 45%;
		object-fit: contain;
	}

}

/* TODO how do I want to arrange the art?! It really friggin' depends. */
/* like *yeah* I could stick with the theme of golden spirals everywhere
 * but I'm going to struggle with that when it comes to keeping titles linked to portraits, y'know?
 * Maybe try a flex layout for now. We can make things fantasy another dang time.
 */

.gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: center;
	justify-content: center;

	/* to ensure outlines remain visible */
	max-width: 95%;
	margin: auto;

	a {
		text-decoration: none;
		/* This appears to help with my "space between placard and artwork"
		 * problem.
		 * I might want to rework how I use <a> again...
		 * (I want it to be that links are only clickable when hovering over the placard OR the artwork, directly.)
		 * ... But then again, I *could* indicate grouping very strongly,
		 * by drawing a dotted outline around the area!
		 * That's a good idea. Consider it. */
		flex-grow: 1;

		margin: 1em auto;
		/* oh this looks nice */
		&:hover {
			outline: dotted;
		}
	}
}

/* framed: in picture frame */
.framed {
	border: 1em ridge;
	border-color: var(--dyellow);
	box-shadow: 1ex 1em var(--dblack);
}

article.artwork {
	/* use flexbox: this lets the placard be either beside, or below, the painting
	 */
	display: flex;
	/* TODO consider changing flex direction,
	 * makes the placard always "below"*/
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;

	.thumbnail {
		/*
		 * When styling is unavailable,
		 * we want the headers to be above the image, as they're the "titles" of the image.
		 * This way, in a screen reader or no CSS environment,
		 * It's clear that the header is "for" the content below it,
		 * like in most standard documents.
		 *
		 * But in real life art galleries,
		 * the placard of a painting is generally below,
		 * or to the side, of the painting.
		 * hence, use order to move it "after" the image in the flow direction.
		 */
		order: 0;

		/* center horizontally when possible */
		margin: 2em 2ex;
		/* FIXME: it would be nice to have a "minimum margin"
		 * such that the placard is spaced a reasonable distance away.
		 * I can't figure out how to do this.
		 */

		/*box-shadow: 1ex 1em var(--dblack);*/
		/* TODO what's a reasonable thumbnail size? */
		max-width: 10em;
	}

	hgroup.placard {
		order: 1;
		border: .5ex outset;
	}
}