/* Photo albums: the album page, the Photo album block, the Photos page and the press kit.
   Lives beside style.css (not inside it) so adding albums changes no existing page.
   Composes the site's tokens and the .photo-grid rules; nothing here restyles them. */

/* grid of photos: square tiles with the caption and credit under each one */
.album-grid figure.album-photo {
	margin: 0;
	display: flex;
	flex-direction: column;
	aspect-ratio: auto;
	overflow: visible;
	border-radius: 0;
	min-width: 0;
}
.album-grid .album-photo-link {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-background-alt);
}
.album-grid .album-photo-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.album-grid figcaption {
	font-size: var(--font-size-sm);
	line-height: 1.35;
	color: var(--color-text-secondary);
	padding: 0.4em 0.1em 0;
	overflow-wrap: anywhere;
}
.album-grid figcaption > * {
	display: block;
}
.album-grid .album-credit {
	color: var(--color-text-tertiary);
	font-size: var(--font-size-xs);
}
.album-grid .album-download {
	font-size: var(--font-size-xs);
	margin-top: 0.15em;
}
.album-grid[data-captions="off"] figcaption {
	display: none;
}
.album-more {
	text-align: center;
	margin-top: var(--spacing-md);
}

/* album page */
.album-page .album-meta,
.album-page .album-description p {
	color: var(--color-text-secondary);
	max-width: 50em;
}
.press-box {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--color-background-alt);
	max-width: 50em;
}
.press-box h2 {
	font-size: var(--font-size-lg);
	margin-top: 0;
}
.press-box p:last-child {
	margin-bottom: 0;
}

/* album cards on the Photos page and the press kit */
.album-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--spacing-md);
}
.album-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--color-text);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-background-alt);
	min-width: 0;
}
.album-card:hover {
	background: var(--color-background-alt-hover);
	text-decoration: none;
}
.album-card-cover {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-background-alt-hover);
}
.album-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.album-card-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--color-text-tertiary);
	font-size: var(--font-size-sm);
}
.album-card-body {
	display: block;
	padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
}
.album-card-title {
	display: block;
	font-weight: bold;
}
.album-card-meta {
	display: block;
	font-size: var(--font-size-sm);
	color: var(--color-text-tertiary);
}
.album-section-title {
	margin-top: var(--spacing-lg);
}
@media (max-width: 790px) {
	.album-cards {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: var(--spacing-sm);
	}
	.album-grid figcaption {
		font-size: var(--font-size-xs);
	}
}