/* steam4me photo gallery — sits on top of the site's default.css. */

#header { max-width: 100%; }

.gallery {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px 24px;
	font-size: 14px;
	color: #444;
}
.gallery h1 { font-size: 22px; margin: 0.4em 0 0.6em; }
.gallery h2.sub { font-size: 15px; margin: 1.6em 0 0.8em; text-transform: uppercase; letter-spacing: 2px; }
.gallery a { color: #1a3d8f; }
.gallery a:focus-visible { outline: 3px solid #c0392b; outline-offset: 2px; }

.crumbs { list-style: none; margin: 0 0 1em; padding: 0; font-size: 13px; line-height: 1.6; }
.crumbs li { display: inline; }
.crumbs li + li::before { content: "›"; margin: 0 0.5em; color: #999; }
.crumbs [aria-current] { color: #000; }

.intro, .count { color: #555; }
.desc { max-width: 760px; margin-bottom: 1.4em; line-height: 1.7; }
.desc p, .desc ul, .desc blockquote { margin-bottom: 0.9em; line-height: 1.7; }
.desc ul { margin-left: 1.5em; }
.desc table { max-width: 100%; font-size: 12px; margin-bottom: 1em; }
.desc img { max-width: 100%; height: auto; }

/* Album cards and photo thumbnails */
.albums, .photos {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	display: grid;
	gap: 14px;
}
.albums { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.photos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.album-card a, .photo-tile a { display: block; text-decoration: none; }
.album-card img, .photo-tile img, .thumb-blank {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: #e8e8e8;
	border: 1px solid #ccc;
}
.album-card a:hover img, .photo-tile a:hover img { border-color: #1a3d8f; }
.album-title { display: block; margin-top: 6px; font-weight: bold; color: #000; line-height: 1.3; }
.album-meta { display: block; font-size: 12px; color: #777; }
.thumb-blank.play {
	display: flex; align-items: center; justify-content: center;
	font-size: 36px; color: #fff; background: #333;
}

/* A single photo */
.photo { margin: 0 0 1em; text-align: center; }
.photo img, .photo video {
	max-width: 100%;
	height: auto;
	max-height: 85vh;
	width: auto;
	border: 1px solid #ccc;
	background: #eee;
}
.photo figcaption { max-width: 760px; margin: 1em auto 0; text-align: left; }
.photo figcaption h1 { font-size: 20px; }
.facts { list-style: none; margin: 0 0 1em; padding: 0; font-size: 13px; color: #666; }
.facts li { display: inline; }
.facts li + li::before { content: " · "; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin: 0.6em 0; }
.pager a, .pager .disabled { padding: 6px 2px; }
.pager .disabled { color: #bbb; }

.gallery-foot { border-top: 1px solid #ddd; margin-top: 2em; padding-top: 1em; font-size: 12px; color: #777; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
	#header { height: auto; padding-bottom: 10px; background-size: contain; }
	#header h1 { padding-top: 24px; font-size: 28px; }
	.albums { grid-template-columns: repeat(2, 1fr); }
	.photos { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}