/* Gallery, Analogue and Drone pages. Header and cards reuse projects.css. */
.sg-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sg-slideshow-btn { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 11px 16px; border: 1px solid #111; border-radius: 3px; background: #fff; color: #111; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }
.sg-slideshow-btn:hover, .sg-slideshow-btn:focus-visible { background: #111; color: #fff; }
.no-js .sg-slideshow-btn { display: none; }

.sg-section { padding: 0 0 8px; }
.sg-section-title { margin: 0; padding: 8px 48px 24px; font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: #777; }
.sg-section-card h3 { margin: 14px 0 0; font: 700 20px/1.2 Inter, system-ui, sans-serif; letter-spacing: -0.01em; }
.sg-empty { padding: 0 48px 56px; font: 400 16px/1.6 Inter, system-ui, sans-serif; color: #555; }

/* Masonry. Fallback: CSS columns (reads down each column). */
.sg-masonry-wrap { padding: 0 48px 56px; }
.sg-masonry { columns: 4; column-gap: 10px; }
.sg-masonry-item { position: relative; margin: 0 0 10px; break-inside: avoid; }
.sg-masonry-item a { display: block; background: #f3f3f3; }
.sg-masonry-item img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Where container units work (every current browser): a grid whose row is
   1% of a column's width. Each photo spans round(100 * h / w) + 3 rows
   (sghenryd_masonry_row_span()), and grid auto-placement puts each one in
   the shortest column, so DOM order = Steve's order, left to right. */
@supports (width: 1cqw) {
	.sg-masonry-wrap { container-type: inline-size; }
	.sg-masonry {
		--cols: 4;
		--gap: 10px;
		columns: auto;
		display: grid;
		grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
		column-gap: var(--gap);
		row-gap: 0;
		grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) / 100);
		align-items: start;
	}
	.sg-masonry-item { margin: 0; }
}

.sg-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 48px 56px; }

@media (max-width: 1100px) {
	.sg-masonry { columns: 3; }
	@supports (width: 1cqw) { .sg-masonry { --cols: 3; columns: auto; } }
}

@media (max-width: 782px) {
	.sg-section-title { padding: 4px 18px 18px; }
	.sg-empty { padding: 0 18px 36px; }
	.sg-masonry-wrap { padding: 0 18px 36px; }
	.sg-masonry { columns: 2; column-gap: 6px; }
	.sg-masonry-item { margin-bottom: 6px; }
	@supports (width: 1cqw) { .sg-masonry { --cols: 2; --gap: 6px; columns: auto; } .sg-masonry-item { margin: 0; } }
	.sg-videos { grid-template-columns: 1fr; gap: 12px; padding: 0 18px 36px; }
	.sg-slideshow-btn { padding: 9px 12px; }
}

/* Slideshow play/pause button inside the lightbox (slideshow only).
   Prefixed with .pswp so it wins over PhotoSwipe's own .pswp__button rule. */
.pswp .pswp__button--sghenryd-play { display: none; width: 50px; color: #fff; font: 600 18px/1 Inter, system-ui, sans-serif; }
.pswp.sghenryd-slideshow-on .pswp__button--sghenryd-play { display: inline-flex; align-items: center; justify-content: center; }