/* ---------------------------------------------------------------------
 * [rc_photo_gallery] — responsive image grid + lightbox.
 * Reuses the site's established film-frame aesthetic (charcoal ground,
 * gold accents) already used for the portfolio archive and single pages.
 * ------------------------------------------------------------------- */

/* Container is transparent: the old dark background + 32px padding read as
 * a thick black frame around the whole grid, and (with the per-tile border
 * + gap below) as a black frame around every single image. Kept transparent
 * here — the masonry rebuild below must not reintroduce that. */
.rc-pg {
	background: transparent;
	padding: 0 0 28px;
	border-radius: 0;
}

/* True masonry, JS-managed explicit columns — NOT CSS column-count anymore.
 * column-count's default column-fill:balance recalculates the distribution
 * across the WHOLE list every time content is added, which is fine for
 * static content but actively wrong for infinite scroll: confirmed directly
 * (not assumed) that appending one scroll-triggered batch physically moved
 * 40 of the 60 already-rendered tiles, including reassigning several from
 * column 2 to column 1 — the visible "flicker/reshuffle" during scroll.
 * photo-gallery.js builds real .rc-pg-col containers instead and appends
 * each new tile to whichever column is currently shortest — existing tiles
 * are never touched again once placed, so nothing on screen can move.
 * Aspect ratio is still fully respected (portrait taller, landscape
 * shorter/wider within its column) since placement uses each tile's real
 * source dimensions (data-w/data-h), not a fixed box. 3 columns on desktop
 * per spec, stepping down on smaller screens — same breakpoints as before,
 * now applied by JS at init (and on a breakpoint-crossing resize) since
 * there's no longer a pure-CSS column count to respond automatically. */
.rc-pg-grid {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	max-width: 1400px;
	margin: 0 auto;
}
.rc-pg-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
}

.rc-pg-tile {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	background: transparent;
	cursor: zoom-in;
}
.rc-pg-tile:hover,
.rc-pg-tile:focus-visible {
	outline: none;
}
/* Keyboard users still get a clear focus ring (border removal above must not
 * cost accessibility) — drawn inside the tile so it never adds layout width. */
.rc-pg-tile:focus-visible {
	box-shadow: inset 0 0 0 3px #c79a52;
}
.rc-pg-tile img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.35s ease;
}
.rc-pg-tile:hover img,
.rc-pg-tile:focus-visible img {
	transform: scale(1.06);
}

/* Infinite-scroll sentinel — zero height, purely a trigger target for the
 * IntersectionObserver in photo-gallery.js. Never visible. */
.rc-pg-sentinel {
	height: 1px;
}

/* Loading indicator for auto-loaded batches — a plain text row, deliberately
 * not the reveal/bounce animation removed from this grid: it's a status
 * message, not a decorative effect, so it just fades in/out quickly. */
.rc-pg-loading {
	text-align: center;
	margin: 20px 0 0;
	font-family: monospace;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(233, 223, 199, 0.6);
	opacity: 1;
	transition: opacity 0.15s ease;
}
.rc-pg-loading[hidden] {
	display: none;
}

.rc-pg-count {
	text-align: center;
	font-family: monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: rgba(233, 223, 199, 0.55);
	margin-top: 10px;
}

/* Lightbox */
.rc-pg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(10, 8, 6, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}
.rc-pg-lightbox[hidden] {
	display: none;
}
.rc-pg-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 10px 60px rgba(0, 0, 0, 0.6);
}
.rc-pg-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(233, 223, 199, 0.35);
	background: rgba(27, 24, 21, 0.6);
	color: #e9dfc7;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.rc-pg-lightbox-close:hover {
	border-color: #c79a52;
	background: rgba(27, 24, 21, 0.9);
}

.rc-pg-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(233, 223, 199, 0.35);
	background: rgba(27, 24, 21, 0.6);
	color: #e9dfc7;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.rc-pg-lightbox-nav:hover {
	border-color: #c79a52;
	background: rgba(27, 24, 21, 0.9);
}
.rc-pg-lightbox-prev {
	left: 16px;
}
.rc-pg-lightbox-next {
	right: 16px;
}
@media (max-width: 600px) {
	.rc-pg-lightbox-nav {
		width: 42px;
		height: 42px;
		font-size: 24px;
	}
	.rc-pg-lightbox-prev {
		left: 6px;
	}
	.rc-pg-lightbox-next {
		right: 6px;
	}
}

/* --- Short viewports: phone held in landscape ---------------------------
 * The blanket `padding: 40px 20px` costs 80px of block padding regardless of
 * screen height. On a 390px-tall landscape phone that is 20.5% of the screen,
 * and it was the *only* thing capping the image: measured 310px of 390px
 * before this rule, and (390 - 80) / 390 = 79.5% exactly.
 *
 * Height-based rather than `orientation: landscape`, because what actually
 * matters is available height — this also catches small landscape tablets and
 * short desktop windows, and doesn't fire on a tall tablet held sideways.
 * The nav/close buttons overlay the image here (as iOS Photos and Instagram
 * do) instead of reserving gutters, so the photo keeps the full width.
 */
@media (max-height: 520px) {
	.rc-pg-lightbox {
		padding: 4px;
	}
	.rc-pg-lightbox-close {
		top: 6px;
		right: 6px;
		width: 34px;
		height: 34px;
		font-size: 20px;
	}
	.rc-pg-lightbox-nav {
		width: 34px;
		height: 34px;
		font-size: 20px;
	}
	.rc-pg-lightbox-prev {
		left: 4px;
	}
	.rc-pg-lightbox-next {
		right: 4px;
	}
}

/* `position: fixed; inset: 0` sizes to the layout viewport, which on iOS with
 * collapsing browser chrome can be taller than what is actually visible — the
 * bottom of the image ends up under the toolbar. dvh tracks the *visible*
 * viewport. Progressive enhancement: browsers without dvh keep inset: 0. */
@supports (height: 100dvh) {
	.rc-pg-lightbox {
		height: 100dvh;
	}
}

.rc-pg-empty {
	text-align: center;
	color: #e9dfc7;
	opacity: 0.6;
	padding: 40px 0;
}

/* Set by the lightbox JS while an image is open. */
html.rc-pg-lb-open,
html.rc-pg-lb-open body {
	overflow: hidden;
	overscroll-behavior: none;
}