/**
 * Phase 1.5 design previews (Render\Variant), loaded only on /gallery1/, /gallery2/, /gallery3/,
 * after gallery.css. Each look is a body class: rhg-look-refined, rhg-look-bold, rhg-look-rows.
 * Photos come at their own shape here; `--ar` on each item is its width / height.
 */

/* All looks: less space between the menu's rule and the heading (the theme's page template adds
   two spacing-60 gaps, about 140px, and the header 32px more on phones). */
.rhg-variant main.wp-block-group,
.rhg-variant .wp-site-blocks > header {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.rhg-variant main > .wp-block-group.alignfull:first-child {
	padding-top: clamp(20px, 2.8vw, 32px) !important;
}

.rhg-variant .wp-block-post-title {
	margin-bottom: .4rem;
}

.rhg-preview-label {
	display: inline-block;
	margin: 0 0 .8rem;
	padding: 3px 10px;
	border-radius: 99px;
	background: var(--rhg-ink);
	color: var(--rhg-cream);
	font-family: var(--rhg-sans);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* The tools above the albums (assets/gallery-tools.js): search and the tile-size switch. */
.rhg-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 1.25rem;
}

.rhg-bar[hidden] {
	display: none;
}

.rhg-search {
	position: relative;
	flex: 1 1 260px;
	max-width: 420px;
}

.rhg-search input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px 9px 34px;
	border: 1px solid var(--rhg-tan);
	border-radius: 99px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b6f47' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 11px 50% / 16px no-repeat;
	color: var(--rhg-ink);
	font: 15px/1.3 var(--rhg-sans);
}

.rhg-search input::placeholder {
	color: var(--rhg-brown);
	opacity: 1;
}

.rhg-search input:focus {
	outline: 2px solid var(--rhg-tan);
	outline-offset: 1px;
}

.rhg-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: min(60vh, 420px);
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--rhg-border-light);
	border-radius: 8px;
	background: var(--rhg-cream);
	box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}

.rhg-results[hidden] {
	display: none;
}

.rhg-results a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	border-radius: 6px;
	color: var(--rhg-ink);
	text-decoration: none;
}

.rhg-results a:hover,
.rhg-results a:focus-visible {
	background: rgb(139 111 71 / .14);
}

.rhg-results a:focus-visible {
	outline: 2px solid var(--rhg-tan);
	outline-offset: -2px;
}

.rhg-results img {
	flex: 0 0 auto;
	width: 60px;
	height: 40px;
	border-radius: 3px;
	object-fit: cover;
}

.rhg-results span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rhg-results strong {
	font: 500 14px/1.3 var(--rhg-serif);
}

.rhg-results small {
	color: var(--rhg-brown);
	font: 11px/1.3 var(--rhg-sans);
	letter-spacing: .04em;
}

.rhg-results-none {
	padding: 8px;
	color: var(--rhg-brown);
	font: 14px/1.3 var(--rhg-sans);
}

.rhg-size {
	display: inline-flex;
	margin-left: auto;
	border: 1px solid var(--rhg-border);
	border-radius: 99px;
	overflow: hidden;
}

.rhg-size button {
	padding: 7px 14px;
	border: 0;
	background: none;
	color: var(--rhg-brown);
	font: 500 12px/1.2 var(--rhg-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Inside the rounded switch, whose overflow would cut off an outer outline. */
.rhg-size button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.rhg-size button[aria-pressed="true"] {
	background: var(--rhg-ink);
	color: var(--rhg-cream);
}

/* The bold look's dark ground: the dropdown stays light for contrast, the rest follows its colors. */
.rhg-look-bold .rhg-results {
	--rhg-ink: #2c2a26;
	--rhg-cream: #f5efe4;
	--rhg-tan: #7a6140;
	--rhg-brown: #5a4e3c;
}

.rhg-look-bold .rhg-size button[aria-pressed="true"] {
	background: #f5efe4;
	color: #161512;
}

/* Here the ink is light, the same as the cream, so the current page needs its own dark number. */
.rhg-look-bold .rhg-pages .rhg-page-current {
	color: #161512;
}

/* Small tiles: more to a row in every look. */
.rhg.is-small .rhg-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.rhg.is-small .rhg-cards,
	.rhg.is-small .rhg-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.rhg.is-small .rhg-cards,
	.rhg.is-small .rhg-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.rhg-look-bold .rhg.is-small .rhg-cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.rhg-look-bold .rhg.is-small .rhg-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.rhg-look-bold .rhg.is-small .rhg-cards {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.rhg-look-bold .rhg.is-small .rhg-card-title,
.rhg-look-bold .rhg.is-small .rhg-card.is-wide .rhg-card-title {
	bottom: 24px;
	font-size: .95rem;
}

@media (min-width: 600px) {
	.rhg-look-bold .rhg.is-small .rhg-card.is-wide .rhg-card-title {
		font-size: 1.2rem;
	}
}

.rhg-look-bold .rhg.is-small .rhg-card-count {
	bottom: 8px;
	font-size: 10px;
}

.rhg-look-bold .rhg.is-small .rhg-card-title,
.rhg-look-bold .rhg.is-small .rhg-card-count {
	left: 10px;
	right: 10px;
}

.rhg-look-rows .rhg.is-small .rhg-cards {
	--row: 100px;
}

.rhg-look-rows .rhg.is-small .rhg-grid {
	--row: 70px;
}

@media (min-width: 900px) {
	.rhg-look-rows .rhg.is-small .rhg-cards {
		--row: 150px;
	}

	.rhg-look-rows .rhg.is-small .rhg-grid {
		--row: 130px;
	}
}

@media (max-width: 599px) {
	.rhg-search {
		flex-basis: 100%;
		max-width: none;
	}

	.rhg-size {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------------------
   1. Refined: the site's style, landscape 3:2 tiles, larger album cards.
   --------------------------------------------------------------------------------------- */

.rhg-look-refined .rhg-frame {
	aspect-ratio: 3 / 2;
	border-radius: 3px;
}

.rhg-look-refined .rhg-cards {
	gap: 28px 20px;
}

@media (min-width: 900px) {
	.rhg-look-refined .rhg-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rhg-look-refined .rhg-card-title {
	margin-top: .75rem;
	font-size: 1.15rem;
}

.rhg-look-refined .rhg-card-count {
	letter-spacing: .12em;
}

.rhg-look-refined .rhg-grid {
	gap: 10px;
}

/* ---------------------------------------------------------------------------------------
   2. Bold: photo-first on a dark ground, titles over the photos, featured albums double width.
   --------------------------------------------------------------------------------------- */

.rhg-look-bold main.wp-block-group {
	background: #161512;
	color: #efe8dc;
}

.rhg-look-bold main .wp-block-post-title {
	color: #f5efe4;
}

.rhg-look-bold .rhg {
	--rhg-ink: #f5efe4;
	--rhg-brown: #d9cfbf;
	--rhg-tan: #c9a877;
	--rhg-border: #5c5446;
	--rhg-border-light: #2a2722;
	padding-bottom: 2rem;
}

.rhg-look-bold .rhg-preview-label {
	background: #c9a877;
	color: #161512;
}

.rhg-look-bold .rhg-cards {
	grid-template-columns: minmax(0, 1fr);
	grid-auto-flow: dense;
	gap: 6px;
}

@media (min-width: 600px) {
	.rhg-look-bold .rhg-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.rhg-look-bold .rhg-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rhg-look-bold .rhg-card a {
	position: relative;
}

.rhg-look-bold .rhg-card .rhg-frame {
	position: relative;
	aspect-ratio: 3 / 2;
}

@media (min-width: 600px) {
	.rhg-look-bold .rhg-card.is-wide {
		grid-column: span 2;
	}

	/* Two 3:2 tiles side by side make a 3:1 frame (the 6px gap is within a pixel or two). */
	.rhg-look-bold .rhg-card.is-wide .rhg-frame {
		aspect-ratio: 3 / 1;
	}
}

.rhg-look-bold .rhg-card .rhg-frame::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.rhg-look-bold .rhg-card-title,
.rhg-look-bold .rhg-card-count {
	position: absolute;
	left: 16px;
	right: 16px;
	z-index: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.rhg-look-bold .rhg-card-title {
	bottom: 30px;
	margin: 0;
	font-size: clamp(1.1rem, 1.6vw, 1.45rem);
	color: #fff;
}

.rhg-look-bold .rhg-card.is-wide .rhg-card-title {
	font-size: clamp(1.3rem, 2.2vw, 1.9rem);
}

.rhg-look-bold .rhg-card-count {
	bottom: 12px;
	margin: 0;
	color: #e3c99d;
}

.rhg-look-bold .rhg-card a:hover .rhg-card-title {
	color: #fff;
}

.rhg-look-bold .rhg-grid {
	gap: 6px;
}

@media (min-width: 900px) {
	.rhg-look-bold .rhg-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rhg-look-bold .rhg-grid .rhg-frame,
.rhg-look-bold .rhg-cards .rhg-ad .rhg-frame {
	aspect-ratio: 3 / 2;
}

/* ---------------------------------------------------------------------------------------
   3. Rows: every photo at its own shape, in justified rows; nothing is cropped.
   --------------------------------------------------------------------------------------- */

.rhg-look-rows .rhg-cards,
.rhg-look-rows .rhg-grid {
	--row: 100px; /* two photos to a row on phones */
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.rhg-look-rows .rhg-cards {
	--row: 150px;
}

@media (min-width: 900px) {
	.rhg-look-rows .rhg-cards {
		--row: 230px;
	}

	.rhg-look-rows .rhg-grid {
		--row: 210px;
	}
}

.rhg-look-rows .rhg-cards li,
.rhg-look-rows .rhg-grid li {
	flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * var(--row));
	min-width: 0;
}

/* Keeps the last row from stretching to the full width. */
.rhg-look-rows .rhg-cards::after,
.rhg-look-rows .rhg-grid::after {
	content: "";
	flex: 999 1 calc(1.5 * var(--row));
}

.rhg-look-rows .rhg-frame {
	aspect-ratio: var(--ar, 1.5);
	border-radius: 2px;
}

.rhg-look-rows .rhg-card-title {
	font-size: 1.05rem;
}

/* ---------------------------------------------------------------------------------------
   Lightbox options (previews only; assets/lightbox.js adds them when the album has data-lb):
   a top bar with the site logo and labelled tools on one line, a thumbnail strip and a toast.
   --------------------------------------------------------------------------------------- */

.rhg-lightbox.has-extras[open] {
	grid-template-rows: auto 1fr auto auto;
}

/* A solid background: nothing of the page shows through (it did on iPhone). */
.rhg-lightbox.has-extras,
.rhg-lightbox.has-extras::backdrop {
	background: #14120f;
}

/* The photo fills the viewer's photo area and is fitted inside it, the same in every browser
   (Safari sized it inconsistently from the flexible layout). Small photos are enlarged to fit. */
.rhg-lightbox.has-extras .rhg-lb-stage {
	display: block;
}

.rhg-lightbox.has-extras .rhg-lb-stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

.rhg-lb-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: max(10px, env(safe-area-inset-top)) 14px 6px;
}

.rhg-lb-logo {
	display: block;
	width: auto;
	height: 22px;
	max-width: 42vw;
	margin-top: 9px; /* centered on the 40px icons, not on icon and label */
	filter: brightness(0) invert(1); /* the dark wordmark, light on the dark viewer */
	opacity: .9;
}

/* Each tool is as wide as its icon or its label, whichever is wider, with a gap between tools,
   so labels never touch ("Full size" and "Full screen" did with fixed widths). */
.rhg-lb-tools {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-left: auto; /* on the right, with or without a logo */
}

.rhg-lightbox .rhg-lb-tool {
	position: static;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: auto;
	min-width: 40px;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	font: inherit;
}

.rhg-lightbox .rhg-lb-tool[hidden] {
	display: none;
}

.rhg-lightbox .rhg-lb-tool:hover,
.rhg-lightbox .rhg-lb-tool:focus-visible {
	background: none;
	box-shadow: none;
}

.rhg-lb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgb(245 239 228 / .1);
	transition: background .15s ease;
}

.rhg-lightbox .rhg-lb-tool:hover .rhg-lb-icon,
.rhg-lightbox .rhg-lb-tool[aria-pressed="true"] .rhg-lb-icon,
.rhg-lightbox .rhg-lb-tool.is-on .rhg-lb-icon {
	background: rgb(245 239 228 / .24);
}

.rhg-lightbox .rhg-lb-tool:focus-visible .rhg-lb-icon {
	box-shadow: 0 0 0 2px var(--rh-cream, #f5efe4);
}

.rhg-lb-icon svg {
	display: block;
}

.rhg-lb-label {
	font: 500 10px/1.2 var(--rh-sans, system-ui, sans-serif);
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgb(245 239 228 / .75);
}

.rhg-lightbox.has-extras .rhg-lb-prev svg,
.rhg-lightbox.has-extras .rhg-lb-next svg {
	display: block;
}

.rhg-lightbox.has-extras .rhg-lb-stage img {
	will-change: transform;
}

.rhg-lb-strip {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 3px 1rem calc(.75rem + env(safe-area-inset-bottom));
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}

.rhg-lb-strip li {
	flex: 0 0 auto;
	margin: 0;
}

.rhg-lightbox .rhg-lb-thumb {
	position: static;
	width: 72px;
	height: 48px;
	border-radius: 2px;
	overflow: hidden;
	background: #2a2722;
	opacity: .55;
	transition: opacity .2s ease;
}

.rhg-lightbox .rhg-lb-thumb:hover,
.rhg-lightbox .rhg-lb-thumb[aria-current="true"] {
	opacity: 1;
}

.rhg-lightbox .rhg-lb-thumb[aria-current="true"] {
	box-shadow: 0 0 0 2px var(--rh-cream, #f5efe4);
}

/* Inside the thumbnail, so it shows on the current one, which already has a ring. */
.rhg-lightbox .rhg-lb-thumb:focus-visible {
	opacity: 1;
	outline: 3px solid var(--rh-cream, #f5efe4);
	outline-offset: -3px;
}

.rhg-lb-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rhg-lb-toast {
	position: absolute;
	left: 50%;
	bottom: 110px;
	z-index: 3;
	margin: 0;
	padding: 8px 14px;
	border-radius: 99px;
	background: var(--rh-cream, #f5efe4);
	color: #161512;
	font: 500 13px/1.3 var(--rh-sans, system-ui, sans-serif);
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
	max-width: calc(100% - 32px);
	overflow-wrap: anywhere;
}

.rhg-lb-toast.is-shown {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Desktop zoom. */
@media (hover: hover) and (pointer: fine) {
	.rhg-lightbox.has-extras .rhg-lb-stage img {
		cursor: zoom-in;
		transition: opacity .2s ease, transform .25s ease;
	}

	.rhg-lightbox.has-extras .rhg-lb-stage img.is-zoomed {
		cursor: zoom-out;
		transform: scale(2.5);
	}
}

@media (max-width: 599px) {
	.rhg-lb-top {
		padding-inline: 10px;
	}

	.rhg-lb-logo {
		height: 14px;
		margin-top: 11px; /* centered on the 36px icons */
	}

	.rhg-lb-tools {
		gap: 7px;
	}

	.rhg-lightbox .rhg-lb-tool {
		min-width: 36px;
	}

	.rhg-lb-icon {
		width: 36px;
		height: 36px;
	}

	.rhg-lb-label {
		font-size: 9px;
		letter-spacing: .04em;
	}

	.rhg-lightbox .rhg-lb-thumb {
		width: 60px;
		height: 40px;
	}
}

/* Small phones: six tools and the logo still fit on one line. */
@media (max-width: 400px) {
	.rhg-lb-tools {
		gap: 5px;
	}

	.rhg-lb-label {
		font-size: 8px;
		letter-spacing: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rhg-lightbox.has-extras .rhg-lb-stage img,
	.rhg-lb-toast,
	.rhg-lightbox .rhg-lb-thumb,
	.rhg-lb-icon {
		transition: none;
	}
}