/* Riverhouse Create gallery wall. Team GALLERY, September 2026 overhaul. */

.rh-gallery-page {
	background: var(--paper);
}

.rh-gallery-intro {
	padding: var(--sp-9) 0 var(--sp-6);
	background: var(--paper);
}

.rh-gallery-intro .crumb {
	font-size: var(--fs-meta);
	color: var(--tx-3);
	margin-bottom: var(--sp-4);
}

.rh-gallery-intro .crumb a {
	color: var(--river);
	font-weight: 600;
	border-bottom: 0;
	text-decoration: underline;
	text-decoration-color: var(--clay);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

.rh-gallery-intro .crumb a:hover,
.rh-gallery-intro .crumb a:focus-visible {
	text-decoration-color: currentColor;
}

.rh-gallery-intro h1 {
	margin-bottom: var(--sp-4);
}

.rh-gallery-intro .lede {
	max-width: 64ch;
	color: var(--tx-2);
}

.rh-gallery {
	padding: 0 0 var(--sp-9);
	background: var(--paper);
}

/* Contact-sheet wall: CSS multi-column masonry, natural aspect ratios, 12px gaps. */
.rh-gallery__wall {
	column-count: 5;
	column-gap: 12px;
	margin: 0;
}

.rh-gallery__cell {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--ground);
	cursor: zoom-in;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	overflow: hidden;
	line-height: 0;
	transition: opacity .18s cubic-bezier(.2, 0, .2, 1);
}

.rh-gallery__cell img {
	width: 100%;
	height: auto;
	display: block;
}

.rh-gallery__cell:hover {
	opacity: .84;
}

.rh-gallery__cell:focus-visible {
	outline: 2px solid var(--river);
	outline-offset: 3px;
}

@media (max-width: 1180px) {
	.rh-gallery__wall { column-count: 4; }
}

@media (max-width: 900px) {
	.rh-gallery__wall { column-count: 3; }
	.rh-gallery-intro { padding-top: var(--sp-7); }
}

@media (max-width: 620px) {
	.rh-gallery__wall { column-count: 2; }
}

/* ---------- lightbox ---------- */

.rh-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px 64px;
	background: rgba(20, 32, 27, .975);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s cubic-bezier(.2, 0, .2, 1), visibility .18s;
}

.rh-gallery-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.rh-gallery-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rh-gallery-lightbox__figure img {
	max-width: 100%;
	max-height: calc(100vh - 104px);
	width: auto;
	height: auto;
	display: block;
}

.rh-gallery-lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(237, 230, 216, .34);
	border-radius: 0;
	background: transparent;
	color: var(--on-ink);
	font-family: var(--b);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .16s, border-color .16s;
}

.rh-gallery-lightbox__btn:hover {
	background: rgba(237, 230, 216, .14);
	border-color: rgba(237, 230, 216, .7);
}

.rh-gallery-lightbox__btn:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 2px;
}

.rh-gallery-lightbox__close { top: 20px; right: 20px; }
.rh-gallery-lightbox__prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.rh-gallery-lightbox__next  { right: 20px; top: 50%; transform: translateY(-50%); }

.rh-gallery-lightbox__hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	text-align: center;
	font-size: var(--fs-meta);
	color: var(--on-ink-2);
	margin: 0 auto;
	max-width: none;
}

@media (max-width: 620px) {
	.rh-gallery-lightbox { padding: 64px 12px 72px; }
	.rh-gallery-lightbox__figure img { max-height: calc(100vh - 148px); }
	.rh-gallery-lightbox__prev { left: 12px; top: auto; bottom: 16px; transform: none; }
	.rh-gallery-lightbox__next { right: 12px; top: auto; bottom: 16px; transform: none; }
	.rh-gallery-lightbox__hint { display: none; }
}