/*
 * Revia Homes - the before/after slider (handoff README 6.5), wherever it is.
 *
 * Moved from home.css word for word in V3/B, when the component started to
 * appear under the gallery of a listing, a reference and a service too
 * (inc/beforeafter.php): home.css is for what the front page alone has. It
 * loads straight after home.css, where these rules stood, so the cascade order
 * is unchanged. ONE RULE PAINTS A SURFACE, .rh-ba__stage (sand-2), and it
 * declares the foreground set (docs/designrendszer.md section 2 rule 4).
 *
 * @package Revia_Homes
 */

/* The gutter on the OUTER box and the cap on the inner - home.css 6.3 says why. */
.rh-ba {
	padding-inline: var(--rh-gutter);
}

/* --------------------------------------------------------------------------
 * 6.5 Elotte / utana
 * ----------------------------------------------------------------------- */

.rh-ba__inner {
	max-width: var(--rh-max-ba);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--rh-ba-gap);
}

.rh-ba__hint {
	font-size: var(--rh-t-note);
	line-height: normal;
	letter-spacing: var(--rh-ls-crumb);
	text-transform: uppercase;
	color: var(--rh-muted-text);
	margin-right: calc(-1 * var(--rh-ls-crumb));
}

/*
 * The room buttons start hidden and the script reveals them, because without
 * the script they do nothing. NOT gated on .rh-js: that class comes off on any
 * uncaught error anywhere on the page (inc/assets.php), and it deliberately
 * gates nothing but the entrance animation - a plugin's throw must not be able
 * to hide a working control.
 */
.rh-ba__tabs {
	display: none;
	flex-wrap: wrap;
	gap: var(--rh-ba-tabs-gap);
}

.rh-ba.rh-is-ready .rh-ba__tabs {
	display: flex;
}

.rh-ba__tab {
	padding: var(--rh-ba-tab-pad);
	border: 1px solid var(--rh-line-2);
	background: transparent;

	/*
	 * --rh-body-text, not --rh-body. At rest this button paints NOTHING, so
	 * what is behind it is whatever the section put there - the surface's
	 * question, not the component's. On sand the two resolve to the same
	 * colour and nothing moves; on a dark surface the concrete token would be
	 * 1.82:1. The chosen tab is the other case and keeps its own --rh-paper,
	 * because that one does paint.
	 */
	color: var(--rh-body-text);
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-ba-tab);
	letter-spacing: var(--rh-ls-fact-label);
	line-height: 1.2;
	text-transform: uppercase;
	transition:
		background-color var(--rh-t-header) var(--rh-ease),
		border-color var(--rh-t-header) var(--rh-ease),
		color var(--rh-t-header) var(--rh-ease);
}

/*
 * The chosen room. A leaf that paints its own dark fill and states its own
 * colour, like the buttons in components.css - nothing inherits from it.
 */
.rh-ba__tab[aria-pressed="true"] {
	background: var(--rh-ink);
	border-color: var(--rh-ink);
	color: var(--rh-paper);
}

/*
 * THE STAGE IS A PHOTO WELL, and it takes --rh-sand-2 - the same fill the
 * band's picture panel uses.
 *
 * The prototype says #DDD9D3 (6.5), which the theme does not have. It is
 * deliberately not added: the colour is only ever visible when a photograph is
 * missing, the theme already owns a photo-well colour, and --rh-sand-2 is a
 * surface whose six foreground steps are already measured (the band's panel,
 * 2026-09-15). A 26th hex whose whole job is to be covered up would buy a
 * one-step-darker grey and an unmeasured surface.
 *
 * IT CAN CARRY TEXT - the two badges are in it - so it declares, at the same
 * two steps the band's panel takes: --rh-sand-2 is darker than sand, where
 * --rh-gold-ink measures 3.73 and --rh-muted 3.83.
 */
.rh-ba__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: var(--rh-ba-min-h);
	overflow: hidden;
	background: var(--rh-sand-2);
	/* V3b-1: a finger that starts on the pictures scrolls the page (it was
	   none, a scroll trap); the drag starts on the handle only, which keeps none. */
	touch-action: pan-y;
	user-select: none;

	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-ba__pair,
.rh-ba__before,
.rh-ba__after {
	position: absolute;
	inset: 0;
}

/*
 * ONE custom property drives the split and the handle, so the two cannot come
 * apart. The default lives in tokens.css; the script writes it on the stage.
 */
.rh-ba__after {
	clip-path: inset(0 0 0 var(--rh-ba-pos));
}

.rh-ba__before img,
.rh-ba__after img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rh-ba__badge {
	position: absolute;
	top: var(--rh-ba-badge-inset);
	z-index: 4;
	pointer-events: none;
}

.rh-ba__badge--before {
	left: var(--rh-ba-badge-inset);
}

.rh-ba__badge--after {
	right: var(--rh-ba-badge-inset);
}

.rh-ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--rh-ba-pos);
	width: var(--rh-ba-handle-w);
	margin-left: calc(-1 * var(--rh-ba-handle-w) / 2);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: ew-resize;
	touch-action: none; /* The drag's own: no scroll takes a finger that starts here. */
}

.rh-ba__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--rh-ba-line-w);
	margin-left: calc(-1 * var(--rh-ba-line-w) / 2);
	background: var(--rh-paper);
	box-shadow: 0 0 12px var(--rh-ba-line-shadow);
}

.rh-ba__knob {
	position: relative;
	width: var(--rh-ba-handle-w);
	height: var(--rh-ba-handle-w);
	border-radius: var(--rh-radius-handle);
	background: var(--rh-paper);
	box-shadow: var(--rh-shadow-handle);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

/* Two CSS triangles, the prototype's own (6.5). */
.rh-ba__arrow {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.rh-ba__arrow--left {
	border-right: 6px solid var(--rh-ink);
}

.rh-ba__arrow--right {
	border-left: 6px solid var(--rh-ink);
}

.rh-ba__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-ba-foot-gap);
	justify-content: space-between;
	align-items: flex-start;
}

.rh-ba__captions {
	max-width: var(--rh-ba-caption-max);
}

.rh-ba__caption {
	display: flex;
	flex-direction: column;
	gap: var(--rh-ba-caption-gap);
}

.rh-ba__title {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-regular);
	font-size: var(--rh-t-ba-title);
	line-height: normal;
	color: var(--rh-strong-text);
}

.rh-ba__desc {
	font-size: var(--rh-t-p-support);
	line-height: var(--rh-lh-p-intro);
	color: var(--rh-body-text);
	text-wrap: pretty;
}

.rh-ba__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-ba-stats-gap);
}

.rh-ba__statvalue {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-ba-stat);
	line-height: normal;
	color: var(--rh-strong-text);
}

.rh-ba__statlink {
	color: var(--rh-gold-text);
}

.rh-ba__statlabel {
	padding-top: var(--rh-ba-stat-label-top);
	font-size: var(--rh-t-chip);
	line-height: normal;
	letter-spacing: var(--rh-ls-fact-label);
	text-transform: uppercase;
	color: var(--rh-muted-text);
	margin-right: calc(-1 * var(--rh-ls-fact-label));
}

/* --------------------------------------------------------------------------
 * On a record page (V3/B): the record's column, not the front page's.
 *
 * No top padding: the block continues the sand section above it (the gallery,
 * or a service's head block), so the gap is that section's own bottom padding,
 * as the gallery sits under the head block - stacked, the two made a 200px
 * hole. And the content width of every other record section (--rh-max, gutter
 * inside), so the slider's edges line up with the gallery's; the 1160px
 * 'sizes' hint stays above this box at every width.
 * ----------------------------------------------------------------------- */

.rh-ba--record {
	padding-top: 0;
}

.rh-ba--record .rh-ba__inner {
	max-width: calc(var(--rh-max) - 2 * var(--rh-gutter));
}