/*** Overall style ***/
html {
	font-family: Arial, Helvetica, sans-serif;
}

/*** Layout ***/
header,
.album,
footer {
	text-align: center;
}

/* TODO: Thumbnails side by side with wrapping figcaption should have the same height */
.album {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-flow: dense;
	gap: 2em;
	padding: 0;
	justify-content: center;
	align-items: center;
}

.photo-card.thumbnail {
	width: min(450px, 80vw);
}

.photo-card {
	margin: 0;
	/* max-width: 80vw; */
}

/*** List as album ***/
.album ul {
	padding: 0;
	margin: 0;
}

.album li {
	list-style: none;
}

/*** Buttons in the album are only used to trigger popovers ***/
/*** and should not look like traditional buttons           ***/
.album button {
	border: none;
	background: none;
	color: inherit;
	padding: 0;
	margin: 0;
}

/*** Color scheme ***/
/* Default light mode */
html {
	background-color: white;
	color: black;
}

.photo-card {
	background: white;
	border: 1px solid darkgray;
	box-shadow: 0.3em 0.2em 0.2em gray;
}

@media (prefers-color-scheme: dark) {
	html {
		background-color: black;
		color: white;
	}

	.photo-card {
		background: #222;
		border: none;
		box-shadow: none;
	}

	.photo-card.thumbnail:hover,
	.photo-card.fullsize {
		background-color: #333;
	}
}

/*** Zoom thumbnail cards when hovering ***/
.photo-card.thumbnail {
	/* Unzooming duration when mouse is moved away */
	transition-duration: 200ms;
}

.photo-card.thumbnail:hover {
	transform: scale(1.08);
	transition-duration: 200ms;
}

/*** Stacking when there are several images in a figure ***/
/* TODO: Go through this and decide what's actually needed. Came out a bit messy */
.photo-card {
	position: relative;
}

/* First image = normal layout anchor */
.photo-card img:first-of-type {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 3;
}

/* Additionally, if there are more than one */
.photo-card:has(img:nth-of-type(2)) img:nth-of-type(1) {
	z-index: 4;
	transform: scale(0.7);
	position: relative;
	margin-left: 0;
}

/* Only stack additional images */
.photo-card img:nth-of-type(n+2) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.photo-card img:nth-of-type(2) {
	transform: scale(0.6) rotate(10deg) translate(15%, -15%);
	z-index: 2;
}

.photo-card img:nth-of-type(3) {
	transform: scale(0.6) rotate(-10deg) translate(-15%, -15%);
	z-index: 1;
}

/* Photo cards should resemble Polaroids */
/* TODO: Currently relies on preprocessing to make square versions of the images. See if images can be made to occupy square space with CSS */
.photo-card {
	padding: 1em;
}

.photo-card figcaption {
	text-wrap: balance;
}

/* Makes the caption no wider than the image */
.photo-card figcaption {
	display: flex;
}

.photo-card figcaption p {
	flex-grow: 1;
	width: 0;
}

/*** Restricts the thumbnail cards and containing images to the size of the viewport ***/
/* TODO: Does it really? Or is it something else that does it? */
.photo-card.thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*** Popover behavior ***/
/* TODO: Long figcaptions can cause vertical overflow */
/* TODO: photo-card's in popovers are way too wide */
/* Prevents images behind the popover from registering hovering */
/* by making the popover fill the screen */
[popover] {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	font-size: large;
}

[popover] img {
	width: 100%;
	max-height: 80vh;
	object-fit: contain;
}