/*
 * Revia Homes - the record pages' gallery (handoff README 7.3/3, 8.3/3).
 *
 * Moved from sub.css word for word in change round V3/B, when the gallery got
 * its arrows, keyboard stepping on the main picture and the swipe (decision log
 * 27) - one component, one stylesheet, beside its own script
 * (assets/js/gallery.js). Loaded straight after sub.css; no later rule there
 * touched these elements, so the move changed nothing in the cascade.
 *
 * Every value comes from assets/css/tokens.css.
 *
 * @package Revia_Homes
 */

/* --------------------------------------------------------------------------
 * Gallery (7.3/3, 8.3/3)
 * ----------------------------------------------------------------------- */

.rh-gallery {
	padding-block: 0 var(--rh-gallery-y-end);
}

.rh-gallery__inner {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding-inline: var(--rh-gutter);
	display: flex;
	flex-direction: column;
	gap: var(--rh-gallery-gap);
}

/*
 * The frame is a surface: it paints, and it holds the caption. So it declares
 * the whole foreground set, at the values measured for THIS fill - the same
 * two steps .rh-tile__media takes, because it is the same --rh-sand-2 and that
 * is a third light step, stricter than sand (gold-ink 3.73, muted 3.83 on it).
 */
.rh-gallery__main {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--rh-sand-2);
	overflow: hidden;

	color: var(--rh-body);

	--rh-link: var(--rh-ink);
	--rh-gold-text: var(--rh-gold-hover);
	--rh-strong-text: var(--rh-ink);
	--rh-body-text: var(--rh-body);
	--rh-muted-text: var(--rh-body);
}

/*
 * CONTAIN, and the handoff says it twice in bold. The renders are PORTRAIT
 * (1086x1448) and the floor plan is in the gallery too; cover would cut the
 * top and bottom off both. object-fit rather than background-size because the
 * theme uses a real <img> - see template-parts/sub/gallery.php for the three
 * things a CSS background loses in a WordPress theme.
 */
.rh-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/*
 * The caption plate: a surface over a PHOTOGRAPH, so its contrast is only
 * measurable from pixels (designrendszer 11, trap 7). It declares the full
 * set at the dark values.
 */
.rh-gallery__caption {
	position: absolute;
	right: var(--rh-gallery-inset);
	bottom: var(--rh-gallery-inset);
	max-width: calc(100% - 2 * var(--rh-gallery-inset));
	background: var(--rh-caption-bg);
	padding: var(--rh-gallery-caption-pad);
	font-size: var(--rh-t-caption);
	line-height: normal;
	letter-spacing: var(--rh-ls-caption);
	color: var(--rh-paper);

	--rh-link: var(--rh-paper-warm);
	--rh-gold-text: var(--rh-gold-light);
	--rh-strong-text: var(--rh-paper-warm);
	--rh-body-text: var(--rh-body-dark);
	--rh-muted-text: var(--rh-muted-dark);
}

.rh-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--rh-gallery-thumb-min), 1fr));
	gap: var(--rh-gallery-gap);
}

/*
 * The thumbnail is a button that paints, so it declares the set too - at the
 * same --rh-sand-2 values as the frame above.
 *
 * outline, not border: the handoff asks for outline with a negative offset, so
 * the ring sits INSIDE the picture and the 2px active state does not change
 * the button's size. That also means :focus-visible cannot use outline here
 * without fighting the state - so the focus ring is a box-shadow instead, and
 * it is the same --rh-focus colour and the same 3px stand-off base.css uses.
 */
.rh-gallery__thumb {
	display: block;
	padding: 0;
	border: 0;
	margin: 0;
	background: var(--rh-sand-2);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	cursor: pointer;
	outline: 1px solid var(--rh-line-2);
	outline-offset: -2px;
	opacity: .72;
	transition:
		opacity var(--rh-t-header) var(--rh-ease),
		outline-color var(--rh-t-header) var(--rh-ease);

	color: var(--rh-body);

	--rh-link: var(--rh-ink);
	--rh-gold-text: var(--rh-gold-hover);
	--rh-strong-text: var(--rh-ink);
	--rh-body-text: var(--rh-body);
	--rh-muted-text: var(--rh-body);
}

.rh-gallery__thumb[aria-pressed="true"] {
	outline: 2px solid var(--rh-gold-ink);
	outline-offset: -2px;
	opacity: 1;
}

.rh-gallery__thumb:hover {
	opacity: 1;
}

.rh-gallery__thumb:focus-visible {
	box-shadow: 0 0 0 3px var(--rh-paper), 0 0 0 6px var(--rh-focus);
}

.rh-gallery__thumbimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
 * Stepping on the main picture (V3/B, decision log 27)
 *
 * Two arrows on the frame's edges, the slider knob's look (the same paper
 * disc and shadow), with the chevron the knob draws. They start hidden and the
 * script shows them once it has wired them - .rh-is-ready on the section, as
 * the before/after room buttons do: without the script they would be buttons
 * that do nothing. NO full-screen zoom, by decision: it would make the largest
 * picture the easiest one to save.
 *
 * The swipe needs the browser to leave horizontal moves to the page:
 * pan-y keeps vertical scrolling and pinch-zoom keeps zooming, so the only
 * gesture the frame takes over is the one that steps.
 * ----------------------------------------------------------------------- */

.rh-gallery__arrow {
	display: none;
	position: absolute;
	top: 50%;
	z-index: 2;
	width: var(--rh-gallery-arrow);
	height: var(--rh-gallery-arrow);
	margin-top: calc(-1 * var(--rh-gallery-arrow) / 2);
	padding: 0;
	border: 0;
	border-radius: var(--rh-radius-handle);
	background: var(--rh-paper);
	box-shadow: var(--rh-shadow-handle);
	color: var(--rh-ink);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.rh-gallery.rh-is-ready .rh-gallery__arrow {
	display: flex;
}

.rh-gallery__arrow--prev {
	left: var(--rh-gallery-inset);
}

.rh-gallery__arrow--next {
	right: var(--rh-gallery-inset);
}

.rh-gallery__chevron {
	width: 0;
	height: 0;
	border-top: var(--rh-gallery-chevron-h) solid transparent;
	border-bottom: var(--rh-gallery-chevron-h) solid transparent;
}

.rh-gallery__arrow--prev .rh-gallery__chevron {
	border-right: var(--rh-gallery-chevron-w) solid currentColor;
}

.rh-gallery__arrow--next .rh-gallery__chevron {
	border-left: var(--rh-gallery-chevron-w) solid currentColor;
}

/*
 * The frame takes the keyboard (the script gives it tabindex="0"); its focus
 * ring is base.css's own, drawn outside the box, so overflow: hidden does not
 * clip it.
 */
.rh-gallery.rh-is-ready .rh-gallery__main {
	touch-action: pan-y pinch-zoom;
}