/* Photo gallery — featured selection (gallery.html) and the full browsable
   set (gallery_photos.html). Loaded on top of style.css / layout-fix.css. */

/* ---- shared grid ----------------------------------------------------- */

.photo-grid {
	display: grid;
	gap: 14px;
	margin: 0 0 1.5em 0;
	padding: 0;
	list-style: none;
}

.photo-grid li {
	margin: 0;
	padding: 0;
}

/* Each tile keeps the photo's own aspect ratio via an inline --ar custom
   property, so the grid does not reflow as the lazily loaded images arrive. */
.photo-grid a {
	display: block;
	position: relative;
	aspect-ratio: var(--ar, 3 / 2);
	overflow: hidden;
	border-radius: 8px;
	background: #e9ecef;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.photo-grid a:hover,
.photo-grid a:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
	cursor: zoom-in;
}

.photo-grid a:focus-visible {
	outline: 3px solid #0e2959;
	outline-offset: 2px;
}

.photo-grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}

/* A caption, when one has been written by hand, sits over the bottom of the
   tile. Tiles without a caption show nothing. */
.photo-grid figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 1.6em 0.6em 0.5em;
	color: #fff;
	font-size: 0.8em;
	line-height: 1.3;
	text-align: left;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

/* ---- featured page: paper awards ------------------------------------- */

.gallery-section-head {
	margin: 1.6em 0 0.6em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid #e2e6ee;
	color: #0e2959;
	font-size: 1.15em;
}

/* One card per row: the award photos are wide banner crops (roughly 60:26),
   which need the full width of the content column to stay legible. */
.award-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 1.5em;
}

.award-card {
	display: flex;
	flex-direction: column;
	padding: 0.9em 1em 1em;
	border: 1px solid #e0d6b4;
	border-top: 4px solid #b8860b;
	border-radius: 8px;
	background: #fdf9ee;
	color: #000;
}

/* The runner-up gets a cooler silver-grey so the two read as a pair without
   looking like the same award. */
.award-card.award-runner-up {
	border-color: #d6dae3;
	border-top-color: #8d94a3;
	background: #f7f8fa;
}

.award-label {
	margin: 0 0 0.4em 0;
	color: #6b5108;
	font-size: 0.95em;
	font-weight: bold;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.award-label::before { content: "\1F3C6\00A0"; }

.award-card.award-runner-up .award-label { color: #3d4557; }

.award-title {
	margin: 0 0 0.4em 0;
	color: #000;
	font-size: 0.98em;
	font-weight: 600;
	line-height: 1.4;
}

.award-authors {
	margin: 0 0 0.9em 0;
	color: #3c4457;
	font-size: 0.86em;
	line-height: 1.45;
}

/* The banner crop is shown whole rather than cropped again to a fixed ratio,
   so the tile takes the photo's own aspect ratio from --ar. */
.award-photo {
	margin: 0;
	grid-template-columns: 1fr;
}

.award-photo img {
	object-fit: contain;
}

/* ---- featured page --------------------------------------------------- */

/* Sits inside the 8u content column, so two across is as wide as it gets.
   Uniform tiles keep the rows aligned even though the three cameras shot in
   different ratios; the lightbox shows each photo uncropped. */
.photo-grid.featured {
	grid-template-columns: repeat(2, 1fr);
}

.photo-grid.featured a {
	aspect-ratio: 3 / 2;
}

/* A section with an odd number of photos would otherwise leave a hole in the
   last row; the odd one out spans the full width instead. A fixed, wider ratio
   (object-fit crops to it) keeps it from towering over the page — capping the
   height instead would shrink its width and leave a gap at the right edge. */
.photo-grid.featured li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.photo-grid.featured li:last-child:nth-child(odd) a {
	aspect-ratio: 2 / 1;
}

/* A section of wide crops asks for one per row. */
.photo-grid.featured.single {
	grid-template-columns: 1fr;
}

/* Photos that were already cropped by hand are shown whole, at their own
   ratio, rather than cropped a second time to fit a uniform tile. */
.photo-grid.featured li.uncropped a {
	aspect-ratio: var(--ar, 3 / 2);
}

.photo-grid.featured li.uncropped img {
	object-fit: contain;
}

@media screen and (max-width: 480px) {
	.photo-grid.featured {
		grid-template-columns: 1fr;
	}
}

.gallery-cta {
	margin: 1.5em 0 0.5em;
	padding: 1.1em 1.2em;
	border: 1px solid #d4d9e2;
	border-left: 5px solid #0e2959;
	border-radius: 6px;
	background: #f6f8fb;
	color: #000;
}

.gallery-cta p {
	margin: 0 0 0.8em 0;
	color: #000;
}

.gallery-cta p:last-child {
	margin-bottom: 0;
}

.album-note {
	font-size: 0.92em;
	color: #3c4457;
}

a.gallery-button {
	display: inline-block;
	padding: 0.6em 1.4em;
	border-radius: 4px;
	background: #0e2959;
	color: #fff !important;
	font-weight: bold;
	text-decoration: none;
}

a.gallery-button:hover,
a.gallery-button:focus-visible {
	background: #1a3f80;
	text-decoration: none;
}

/* ---- full gallery page ----------------------------------------------- */

/* The full set gets the whole page width rather than the 8u column. */
.gallery-full {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 1.5em;
	color: #000;
}

.gallery-full h2,
.gallery-full h3 {
	color: #0e2959;
}

/* header.major centres itself outside the #content column; match the rest of
   the site's page titles, which are left-aligned. */
.gallery-full > header.major {
	text-align: left;
}

.gallery-intro {
	margin-bottom: 1.2em;
	color: #000;
}

.gallery-toolbar {
	position: sticky;
	top: 0;
	z-index: 20;
	/* stays clear of skel's fixed 44px #titleBar on its "narrower" breakpoint */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1.5em 0;
	padding: 0.7em 0;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid #e2e6ee;
}

.gallery-toolbar .label {
	margin-right: 0.2em;
	font-size: 0.85em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #55607a;
}

.gallery-toolbar button {
	padding: 0.4em 0.9em;
	border: 1px solid #c8cfdb;
	border-radius: 999px;
	background: #fff;
	color: #0e2959;
	font-size: 0.9em;
	line-height: 1.4;
	cursor: pointer;
}

.gallery-toolbar button:hover {
	border-color: #0e2959;
}

.gallery-toolbar button[aria-pressed="true"] {
	background: #0e2959;
	border-color: #0e2959;
	color: #fff;
}

.gallery-toolbar .count {
	margin-left: auto;
	font-size: 0.85em;
	color: #55607a;
}

.gallery-day {
	margin-bottom: 2.2em;
}

.gallery-day > h3 {
	margin-bottom: 0.6em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid #e2e6ee;
	font-size: 1.15em;
}

.gallery-day > h3 .n {
	margin-left: 0.5em;
	font-size: 0.75em;
	font-weight: normal;
	color: #55607a;
}

.gallery-day[hidden] {
	display: none;
}

.photo-grid.all {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* Uniform tiles read better than mixed ratios at this density; the lightbox
   shows each photo uncropped. */
.photo-grid.all a {
	aspect-ratio: 3 / 2;
}

/* skel's "narrower" breakpoint (up to 840px) puts a fixed 44px #titleBar at the
   top of the window; the sticky toolbar has to clear it. */
@media screen and (max-width: 840px) {
	.gallery-toolbar {
		top: 44px;
	}
}

@media screen and (max-width: 736px) {
	.gallery-full {
		padding: 0 1em;
	}

	.photo-grid.all {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 10px;
	}
}

/* ---- PhotoSwipe tweaks ------------------------------------------------ */

/* The site loads skel.css, which sets a global img max-width; PhotoSwipe sizes
   its image itself and must not be constrained by that. */
.pswp img {
	max-width: none;
}

.pswp__caption {
	padding: 0.6em 1em 1em;
	color: #fff;
	font-size: 0.95em;
	text-align: center;
}