/*
 * Revia Homes - the base components.
 *
 * Button (four variants), chip, status badge, eyebrow, section title, hairline
 * grid, and the tile - the one that repeats in four places and therefore exists
 * exactly once (handoff 6.8).
 *
 * Every value comes from assets/css/tokens.css.
 *
 * @package Revia_Homes
 */

/* --------------------------------------------------------------------------
 * Button - four variants
 *
 * The shared part is the shape and the lettering; the variants differ only in
 * what they paint. Every one of them is <a> or <button>, never a div, so the
 * keyboard gets it for free.
 * ----------------------------------------------------------------------- */

.rh-btn {
	display: inline-block;
	align-self: flex-start;
	padding: var(--rh-btn-pad);
	border: 1px solid transparent;
	border-radius: var(--rh-radius);
	font-family: var(--rh-font-body);
	font-weight: var(--rh-w-regular);
	font-size: var(--rh-t-button);
	letter-spacing: var(--rh-ls-button);
	line-height: 1.2;
	text-transform: uppercase;

	/*
	 * The caption WRAPS - the prototype's nowrap is deliberately not taken.
	 *
	 * Every button caption on this site is a settings field, so its length is
	 * data. A non-wrapping run does not clip itself, it scrolls the PAGE
	 * sideways - the one thing the layout must never do (designrendszer 9.,
	 * the same argument the motto already won). Measured at 390px with the
	 * caption swapped in the DOM and nothing else changed: the submit button
	 * scrolled the page from 32 characters, the tile and CTA-band buttons from
	 * 35, and the hero buttons did not scroll but were CLIPPED by the hero's
	 * own overflow: hidden - a 103-character caption ran to x = 1380 inside a
	 * 375px viewport. rh_btn_open_service holds 103 characters in the database
	 * today (a placeholder for Tamas), so this is not hypothetical.
	 *
	 * overflow-wrap: anywhere is not decoration. white-space: normal alone
	 * breaks at spaces only, and it is `anywhere` - not break-word - that also
	 * lowers the box's MIN-CONTENT width, which is what a shrink-to-fit
	 * inline-block is sized from. Measured with one unbroken 60-letter word:
	 * normal alone still scrolled 517 / 242 / 455 px, break-word fixed only
	 * the full-width button, `anywhere` gave 0 everywhere. Hungarian compounds
	 * get that long in one word.
	 *
	 * The price, stated: the button's height becomes data-dependent (at 390px
	 * a 103-character caption takes the tile button from 44.39 to 87.56 px).
	 * At every caption the site holds today the geometry is byte-identical to
	 * the nowrap version - measured, all eleven buttons, 390 / 900 / 1440.
	 */
	white-space: normal;
	overflow-wrap: anywhere;

	/*
	 * center, not the prototype's start. Neutral while a button cannot wrap;
	 * now that it can, it is a decision: --block is full width and --cta sits
	 * in a centred band, so a start-aligned second line would read as broken.
	 */
	text-align: center;
	cursor: pointer;
	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);
}

/* 1. Primary - the tile button, and the drawer's contact button. */
.rh-btn--primary {
	background: var(--rh-ink);
	color: var(--rh-paper);
	border-color: var(--rh-ink);
}

.rh-btn--primary:hover,
.rh-btn--primary:focus-visible {
	background: var(--rh-gold-ink);
	border-color: var(--rh-gold-ink);
	color: var(--rh-paper);
}

/* 2. Paper - on the photo hero, where the surface is a picture. */
.rh-btn--paper {
	padding: var(--rh-btn-pad-lg);
	background: var(--rh-paper);
	color: var(--rh-ink);
	border-color: var(--rh-paper);
}

.rh-btn--paper:hover,
.rh-btn--paper:focus-visible {
	background: var(--rh-gold-ink);
	border-color: var(--rh-gold-ink);
	color: var(--rh-paper);
}

/*
 * 3. Outline - on a dark surface. Two borders, because the handoff uses two:
 * translucent white over the hero photograph, and the flat --rh-body line in
 * the dark CTA band. Same component, one modifier.
 */
.rh-btn--outline {
	padding: var(--rh-btn-pad-lg);
	background: transparent;
	color: var(--rh-paper);
	border-color: var(--rh-outline-on-dark);
}

.rh-btn--outline:hover,
.rh-btn--outline:focus-visible {
	background: var(--rh-paper);
	border-color: var(--rh-paper);
	color: var(--rh-ink);
}

.rh-btn--outline.rh-btn--quiet {
	border-color: var(--rh-body);
	color: var(--rh-paper-warm);
}

.rh-btn--outline.rh-btn--quiet:hover,
.rh-btn--outline.rh-btn--quiet:focus-visible {
	background: transparent;
	border-color: var(--rh-gold-light);
	color: var(--rh-gold-light);
}

/*
 * 4. Gold - the closing CTA bands.
 *
 * DELIBERATE DEVIATION from the handoff, and the handoff is what asks for it.
 * It gives the hover as --rh-gold (#B8894A) while 4.1 states, in bold: white
 * text may only sit on --rh-gold-ink (#96682E) or darker, and #B8894A is a
 * line-and-bar colour. White on #B8894A is 3.2:1 - below AA for this size. So
 * the hover goes DARKER (--rh-gold-hover), which the handoff itself lists as
 * the gold button's hover elsewhere. See docs/designrendszer.md.
 */
.rh-btn--gold {
	background: var(--rh-gold-ink);
	color: var(--rh-paper);
	border-color: var(--rh-gold-ink);
}

.rh-btn--gold:hover,
.rh-btn--gold:focus-visible {
	background: var(--rh-gold-hover);
	border-color: var(--rh-gold-hover);
	color: var(--rh-paper);
}

.rh-btn--block {
	display: block;
	width: 100%;
	padding-block: 16px;
}

/*
 * The closing CTA band's button - a THIRD size, and the prototype's own.
 *
 * README 6.6 names the band but not its button's type, so the prototype decides
 * (Revia Homes.dc.html): padding 15px 28px, 13px, .18em - against the standard
 * button's 14px 26px, 12px, .2em. Measured, the difference is +2px of width per
 * side and +1px of type; side by side it reads as one step larger, which is
 * what a closing call to action is for.
 */
.rh-btn--cta {
	padding: var(--rh-btn-pad-cta);
	font-size: var(--rh-t-cta-btn);
	letter-spacing: var(--rh-ls-cta-btn);
}

/* --------------------------------------------------------------------------
 * Chip
 * ----------------------------------------------------------------------- */

.rh-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-chip-gap);
}

.rh-chip {
	display: inline-block;
	padding: var(--rh-chip-pad);
	border: 1px solid var(--rh-line-2);
	border-radius: var(--rh-radius);
	background: transparent;
	color: var(--rh-body-text);
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-chip);
	/*
	 * normal, not the body's 1.8. The prototype declares no line-height on
	 * this run, so it inherits its own body's `normal`; this theme's body is
	 * 1.8 (README 4.2), and inheriting that made the box taller than the
	 * design. Stated rather than left to inherit, because the two bodies do
	 * not agree - see docs/designrendszer.md section 9.
	 */
	line-height: normal;

	/*
	 * The label WRAPS (decision log 60, V3/A) - the same rule and the same
	 * reason as .rh-btn's (fix 7/M1, 2026-09-15): every chip is an editor's
	 * text, so its length is data, and a non-wrapping run widens the PAGE.
	 * Measured before this (V2/j-e, V2je-5): an 81-character placeholder chip
	 * stretched /lakberendezes to 505 px on a 360-412 px phone, and the fixed
	 * header followed it - the menu button ended up outside the screen.
	 * `anywhere`, not break-word: only it lowers the min-content width that a
	 * flex item is sized from, so one long compound word breaks too.
	 * Measured with the change: of 288 chip boxes (18 pages, 390 / 900 / 1440
	 * px) only that placeholder changed - at 390 px it takes two lines - and
	 * the page is the phone's width again at 360-412 px, drawer included.
	 */
	white-space: normal;
	overflow-wrap: anywhere;
}

/*
 * The neighbourhood chips sit on sand, so they carry their own paper - and
 * because they paint, they take the pale foregrounds back too.
 *
 * The chip's own TEXT was never the gap: .rh-chip is always co-present (a
 * --paper modifier without its base class is not a thing) and it declares
 * colour, so the label measured 8.27 even inside a dark section. What was
 * missing were the ones no class name can reach: --rh-link, which the bare
 * `a` rule reads at (0,0,1), and --rh-gold-text, which a:hover reads.
 * Measured before this block: a link inside a paper chip inside
 * .rh-section--ink .rh-on-dark came out 1.09:1 - white-on-white, the exact J1
 * shape - and its hover would have been --rh-gold-light on paper, 2.42.
 *
 * No chip contains a link today, so nothing renders differently; phase 4's
 * neighbourhood chips are the obvious first ones that will.
 */
.rh-chip--paper {
	background: var(--rh-paper);
	padding: var(--rh-chip-pad-paper);

	--rh-link: var(--rh-ink);
	--rh-gold-text: var(--rh-gold-ink);

	/*
	 * The three text steps, at their LIGHT values, for the same reason
	 * .rh-section--sand restates them: this paints a pale surface, and a pale
	 * surface can stand inside a dark section. Without them a .rh-facts label
	 * inside a paper chip inside an ink section would be --rh-muted-dark on
	 * white, 3.23:1.
	 */
	--rh-strong-text: var(--rh-ink);
	--rh-body-text: var(--rh-body);
	--rh-muted-text: var(--rh-muted);
}

/* --------------------------------------------------------------------------
 * Status badge
 *
 * The colour arrives as a custom property from inc/status.php, which is the
 * single place the status-to-colour map lives (an editor must never type a hex).
 * The fallback is the dark one: a badge with no colour is still legible.
 *
 * text-transform is what makes the uppercase, NOT the stored label - decision
 * F6. The database holds "Kivitelezes alatt" so the editor sees a word. This
 * is not a deviation from the prototype: all eight badges in it are typed in
 * capitals (Revia Homes.dc.html:200, 201, 246, 277, 308, 354, 385, 416 -
 * measured, 0 of 8 mixed case). Same result, chosen route. It is the opposite
 * answer from .rh-tile__eyebrow further down for the opposite reason: there
 * the prototype writes "01 - Ferencvaros", in mixed case, and means it.
 *
 * The label WRAPS, and that one IS the prototype's (white-space: normal on
 * every badge). It used to be nowrap, on the reading that a status name is
 * short - but the name is DATA: inc/status.php reads it from the options
 * table, so an editor can make it any length. Measured at 390px, where the
 * media panel is 346px wide: at 38 characters the badge leaves the picture,
 * and at 45 the PAGE starts scrolling sideways - 14px at 45 characters, 116px
 * at 59. "Befejezes elott, atadas egyeztetes alatt" is 40. Wrapping costs
 * nothing for the labels that exist (measured byte-identical at 1440, 900 and
 * 390) and degrades instead of breaking for the ones that do not yet.
 * ----------------------------------------------------------------------- */

.rh-badge {
	display: inline-block;
	padding: var(--rh-badge-pad);
	background: var(--rh-badge-bg, var(--rh-ink));
	color: var(--rh-paper);
	font-family: var(--rh-font-body);
	font-weight: var(--rh-w-regular);
	font-size: var(--rh-t-badge);
	letter-spacing: var(--rh-ls-badge);
	line-height: 1.2;
	text-transform: uppercase;
}

.rh-badge--ink {
	--rh-badge-bg: var(--rh-ink);
}

.rh-badge--gold {
	--rh-badge-bg: var(--rh-gold-ink);
}

.rh-badge--muted {
	--rh-badge-bg: var(--rh-muted);
}

.rh-badge--before {
	--rh-badge-bg: var(--rh-badge-before);

	letter-spacing: var(--rh-ls-tile-eyebrow);
}

.rh-badge--after {
	--rh-badge-bg: var(--rh-badge-after);

	letter-spacing: var(--rh-ls-tile-eyebrow);
}

/* --------------------------------------------------------------------------
 * Eyebrow and section title
 * ----------------------------------------------------------------------- */

.rh-eyebrow {
	font-family: var(--rh-font-body);
	font-weight: var(--rh-w-regular);
	font-size: var(--rh-t-eyebrow);

	/*
	 * normal, not the body's 1.8. The prototype states no line-height on any
	 * eyebrow, so it inherits its own body's `normal`; this theme's body is
	 * 1.8, which made every eyebrow box 9.8px taller than the design at
	 * 1440px and moved the heading under it down by the same amount.
	 */
	line-height: normal;
	letter-spacing: var(--rh-ls-eyebrow);
	text-transform: uppercase;

	/*
	 * Gold, not grey. The handoff's 4.2 table gives the eyebrow no colour, so
	 * its prototype is the authority - and every section eyebrow in it is
	 * #96682E, or #CE9E5F on a dark section (Revia Homes.dc.html lines 105,
	 * 149, 183, 237, 346).
	 *
	 * The token, not --rh-gold-ink directly: the surface decides the step. See
	 * assets/css/tokens.css.
	 */
	color: var(--rh-gold-text);

	/*
	 * letter-spacing pads the RIGHT of the last letter too, so a centred or
	 * right-aligned run sits off by half a space. The handoff calls this out
	 * once and it applies to every spaced-capitals step in this file.
	 */
	margin-right: calc(-1 * var(--rh-ls-eyebrow));
}

/*
 * The eyebrow used to carry its own per-surface rules here - gold-light on
 * .rh-section--ink and .rh-on-dark, gold-hover on .rh-section--sand. Both are
 * gone, and nothing about their behaviour changed: --rh-gold-text now says the
 * same thing from the surface itself, and says it for the tile eyebrow, the
 * progress figure and a plain link on hover at the same time. Measured
 * unchanged after the move: eyebrow on sand 5.72, on ink 6.22.
 *
 * The reason it had to move is in tokens.css, and it is one line long: a:hover
 * is not a class, so the per-component list could never have been completed.
 */

/*
 * --rh-strong-text, not --rh-ink with a dark pair beside it. The pair was
 * here until 2026-09-15 (.rh-section--ink .rh-title, .rh-on-dark .rh-title,
 * --rh-paper-warm), and it was right about the two surfaces it named and
 * silent about the other two: measured with a .rh-title inside a
 * .rh-grid--ink cell, 1.00:1, and inside .rh-footer, 1.11. Both of those
 * paint a dark fill of their own and neither is in the selector list, which
 * is the failure mode of every list. The token asks the surface instead, and
 * every surface answers.
 */
.rh-title {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-h2);
	line-height: var(--rh-lh-h2);
	color: var(--rh-strong-text);
	text-wrap: balance;
}

.rh-title--sub {
	font-size: var(--rh-t-sub-h2);
	line-height: var(--rh-lh-sub-h2);
}

/*
 * The one heading the design tracks in. README 6.3 gives letter-spacing:-.01em
 * on the introduction's H2, and it is tempting to read that as the H2 step -
 * measured, it is not: 1 of the 6 front-page H2s in the prototype carries it,
 * the other five declare no tracking, and neither sub-page prototype tracks any
 * heading. So it is a modifier, used once, rather than a change to .rh-title.
 */
.rh-title--tight {
	letter-spacing: var(--rh-ls-h2-tight);
}

.rh-lead {
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-p-intro);
	line-height: var(--rh-lh-p-intro);
	max-width: var(--rh-lead-max);
	color: var(--rh-body-text);
	text-wrap: pretty;
}

/*
 * The section head: eyebrow + title + intro on the left, whatever the section
 * puts beside it (a link, a count) pushed to the right and sitting on the same
 * baseline. Straight from the prototype (Revia Homes.dc.html:181-182, 235-236).
 */
.rh-sectionhead {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-sectionhead-gap);
	align-items: flex-end;
	justify-content: space-between;
}

.rh-sectionhead__text {
	display: flex;
	flex-direction: column;
	gap: var(--rh-sectionhead-inner-gap);
	max-width: var(--rh-sectionhead-max);
}

/*
 * The second heading treatment, and the prototype has both a few lines apart.
 *
 * 6.6 (Futo projektek) is the ROW above: a 640px column with room beside it for
 * whatever the section puts on its right. 6.7 (Elado lakasok) is a full-width
 * COLUMN with a wider gap, and only its intro is held to a width. Measured at
 * 1440px the difference is visible - the flats' H2 has 496px more to run in
 * before it breaks, which moves where it breaks.
 */
.rh-sectionhead--stacked .rh-sectionhead__text {
	/*
	 * flex-basis 100%, not just max-width: none. The text block is a flex
	 * ITEM, so without a basis it shrink-to-fits its content instead of
	 * filling the row - measured, the flats' H2 came out 1008px wide inside
	 * a 1136px column.
	 */
	flex: 1 1 100%;
	max-width: none;
	gap: var(--rh-sectionhead-gap-col);
}

/*
 * 620px, not 640. The prototype gives the projects head 640 and the process and
 * before/after heads 620 - three heads, two numbers, measured in the file.
 */
.rh-sectionhead--narrow .rh-sectionhead__text {
	max-width: var(--rh-sectionhead-max-narrow);
}

/* --------------------------------------------------------------------------
 * The closing CTA band (handoff 6.6 and 6.7)
 *
 * A sentence and a button in a centred sand box, after each list. It lives here
 * rather than in home.css because it is not the front page's: the settings page
 * promises the same band at the bottom of /projektek and /elado-lakasok, which
 * phase 5 builds.
 *
 * The sand is .rh-section--sand in the markup - the theme's sand SURFACE, which
 * paints and declares the whole foreground set. .rh-section is only the vertical
 * rhythm and is deliberately absent here.
 * ----------------------------------------------------------------------- */

.rh-ctaband {
	padding: var(--rh-ctaband-y) var(--rh-gutter) var(--rh-ctaband-y-end);
}

.rh-ctaband__inner {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding: var(--rh-ctaband-pad);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--rh-ctaband-gap);
}

.rh-ctaband__text {
	font-size: var(--rh-t-p-support);
	line-height: normal;
	color: var(--rh-body-text);
	text-align: center;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
 * Hairline grid
 *
 * The line is on the CELL, not the container, so a part-filled last row does
 * not leave a dangling empty box (handoff 6.4). The container carries the top
 * and left edge; each cell carries its bottom and right.
 * ----------------------------------------------------------------------- */

.rh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rh-grid-min)), 1fr));
	border-top: 1px solid var(--rh-line-2);
	border-left: 1px solid var(--rh-line-2);
}

.rh-grid__cell {
	border-bottom: 1px solid var(--rh-line-2);
	border-right: 1px solid var(--rh-line-2);
	padding: var(--rh-cell-y) var(--rh-cell-x);
	min-height: var(--rh-cell-min-h);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rh-grid--ink {
	border-top-color: var(--rh-ink-line);
	border-left-color: var(--rh-ink-line);
}

/*
 * The cell paints the dark fill, so the cell declares the dark foregrounds -
 * the same rule as .rh-section--sand in base.css, in the other direction.
 *
 * This modifier is self-contained by design: .rh-grid--ink paints --rh-ink
 * itself, so it does not need a dark SECTION around it, and its class name
 * invites exactly that use. Today the styleguide happens to put one inside a
 * .rh-section--ink, which was masking this. Measured with the same grid
 * standing on a pale page instead: a plain <a> came out 1.00:1 - the two
 * colours identical - plain text 1.82 and an .rh-eyebrow 3.09, because all
 * three inherited the PALE page's tokens onto a dark fill. __title, __desc
 * and __num were correct, because those three name the surface (or, for
 * __num, hard-coded the dark step - see the --rh-gold-text move below).
 *
 * Restating the three here rather than adding this selector to the
 * .rh-section--ink list in base.css keeps the declaration next to the paint:
 * base.css should not have to know a component's class name.
 *
 * Nothing about today's rendering changes - the values are identical to the
 * ones the enclosing ink section already supplies, measured byte-for-byte.
 */
.rh-grid--ink .rh-grid__cell {
	background: var(--rh-ink);
	border-bottom-color: var(--rh-ink-line);
	border-right-color: var(--rh-ink-line);
	color: var(--rh-body-dark);

	--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);
}

/*
 * The token, not --rh-gold-light directly - the ONE of the theme's four
 * remaining direct readers that had to move, and the reason is the component
 * itself: .rh-grid has a pale variant and the styleguide renders one
 * ("Hajszalvonal-racs - vilagos", template-parts/styleguide.php:191-203).
 * Its other two texts already answer per surface - __title is --rh-ink and
 * --rh-paper-warm, __desc is --rh-body and --rh-body-dark - and __num was the
 * one with no pale half. Measured with a full grid cell on each surface
 * before the move: pale 2.42, sand 2.13, ink 6.22. After: 4.87, 5.72, 6.22.
 *
 * Today's rendering does not change, and that is deliberate. The prototype
 * puts numbers ONLY on dark: all four (01-04, #CE9E5F) are in the dark
 * #folyamat section (Revia Homes.dc.html:156-171), and its pale grid uses a
 * 7x7 gold square instead (README 7.3/6, which is .rh-grid__mark here). All
 * 18 occurrences of #CE9E5F in the prototype sit on a dark fill. No
 * .rh-grid__num in the theme stands on a pale surface, so the value it
 * resolves to is unchanged - what changes is that a pale one WOULD now be
 * readable instead of silently 2.42.
 *
 * The other three direct readers stay, deliberately, and are written into
 * docs/designrendszer.md section 2 as named exceptions:
 *   .rh-footer__motto and .rh-footer__nav a:hover - BEM-scoped to .rh-footer,
 *     which paints --rh-ink-deep unconditionally. Reading the token instead
 *     would make their gold depend on the .rh-on-dark class in footer.php
 *     rather than on the footer's own fill, which is strictly weaker.
 *   .rh-btn--outline.rh-btn--quiet:hover - the whole --outline family is
 *     dark-by-construction one rule up, where the BASE colour is --rh-paper
 *     (white) on a transparent fill. Moving only the hover to the token would
 *     make the component half surface-aware: still invisible at rest on a
 *     pale surface, but no longer obviously so.
 */
.rh-grid__num {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-thin);
	font-size: var(--rh-t-grid-num);

	/* The prototype states none, so normal - measured 43px against our 30px. */
	line-height: normal;
	color: var(--rh-gold-text);
}

.rh-grid__mark {
	width: 7px;
	height: 7px;
	background: var(--rh-gold-ink);
}

/*
 * These two had a dark pair until 2026-09-15, and the pair was keyed to the
 * GRID's own modifier rather than to the surface - .rh-grid--ink __title /
 * __desc. That is correct for an ink grid and silent about a PALE grid
 * standing in a dark section, which the styleguide renders and phase 4 will
 * too: measured there, __title 1.00:1 and __desc 1.82. The cell already
 * declares the whole foreground set when it paints (above), so the token
 * answers both cases and the two extra selectors are gone.
 */
.rh-grid__title {
	font-family: var(--rh-font-display);

	/* 400, not 300: the prototype declares no weight here, so it is regular. */
	font-weight: var(--rh-w-regular);
	font-size: var(--rh-t-grid-title);
	/*
	 * normal, not the body's 1.8. The prototype declares no line-height on
	 * this run, so it inherits its own body's `normal`; this theme's body is
	 * 1.8 (README 4.2), and inheriting that made the box taller than the
	 * design. Stated rather than left to inherit, because the two bodies do
	 * not agree - see docs/designrendszer.md section 9.
	 */
	line-height: normal;
	color: var(--rh-strong-text);
}

.rh-grid__desc {
	font-size: var(--rh-t-grid-desc);
	line-height: 1.75;
	color: var(--rh-body-text);
}

/* --------------------------------------------------------------------------
 * THE TILE (handoff 6.8)
 *
 * Four places use this: the front page's projects and flats, and the two list
 * pages. One component, two metric variants.
 *
 * The pair that makes or breaks it: align-items: flex-start on the wrapper and
 * align-self: flex-start on the image panel. Without them a flex item stretches
 * to the row height, and a stretched item has no height left for
 * aspect-ratio: 16/9 to set - the photograph grows to the text column's height
 * and the frame is gone. The tile's height comes from the text column; the
 * picture stays 16:9, aligned to the top. This is the phase's check point, and
 * docs/designrendszer.md says how to re-measure it.
 *
 * There is NO background and no inset frame: the handoff removed the mount on
 * purpose, so every tile is exactly as wide as the content and they line up.
 * ----------------------------------------------------------------------- */

.rh-tile {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding: var(--rh-tile-y) var(--rh-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	border-top: 1px solid var(--rh-line);
}

/*
 * THIS PAINTS, SO IT DECLARES - and the category table was wrong about it.
 *
 * docs/designrendszer.md listed .rh-tile__media under "paints, but cannot
 * carry text (decoration)", alongside .rh-grid__mark, the two progress bars
 * and the hamburger's spans. Those four really are empty in the markup
 * (checked, every one of them). This one is not: it carries the status badge,
 * and phase 4's obvious next additions - a caption, a count, an overlay label
 * on a picture - go here too.
 *
 * Measured with a bare text node in it, inside a .rh-section--ink: 1.45:1.
 * The panel paints --rh-sand-2, a LIGHT fill, and inherited the dark section's
 * --rh-body-dark onto it. Exactly the shape the four surfaces fixed on
 * 2026-09-15 had; this is the fifth, and the self-review found it, not the
 * round's list.
 *
 * --rh-sand-2 (#E4E1DC) is a step DARKER than --rh-sand, and that changes two
 * of the values: measured on it, --rh-gold-ink is 3.73 and --rh-muted 3.83 -
 * both below AA, both worse than on sand. So this surface takes the same two
 * steps down that .rh-section--sand takes: gold-hover (4.99) and body (6.34).
 *
 * Nothing renders differently: the badge declares its own colour and its own
 * fill, and it is the only text here today - measured 15.04 (--ink) and 10.27
 * (--before) before and after.
 */
.rh-tile__media {
	flex: 1 1 var(--rh-col-basis);
	align-self: flex-start;
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--rh-sand-2);
	order: 0;

	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);
}

/* Picture on the right: the media panel moves, the text stays put. */
.rh-tile--flip .rh-tile__media {
	order: 1;
}

.rh-tile__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rh-tile__badge {
	position: absolute;
	left: 0;
	top: var(--rh-badge-top);
}

.rh-tile__body {
	flex: 1 1 var(--rh-col-basis);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--rh-tile-gap);
	padding: 0 var(--rh-tile-col-x);
	min-width: 0;
}

/* The eyebrow and the street name are one unit, tighter than the column gap. */
.rh-tile__head {
	display: flex;
	flex-direction: column;
	gap: var(--rh-tile-head-gap);
}

.rh-tile__eyebrow {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-regular);
	font-size: var(--rh-t-tile-eyebrow);

	/*
	 * normal, not the body's 1.8. The prototype declares no line-height on
	 * this run, so it inherits its own body's `normal`; this theme's body is
	 * 1.8 (README 4.2), and inheriting that made the box taller than the
	 * design. Stated rather than left to inherit, because the two bodies do
	 * not agree - see docs/designrendszer.md section 9.
	 */
	line-height: normal;
	letter-spacing: var(--rh-ls-tile-eyebrow);
	color: var(--rh-gold-text);
	margin-right: calc(-1 * var(--rh-ls-tile-eyebrow));

	/*
	 * NOT uppercase, unlike the section eyebrow above. The handoff writes this
	 * one as "01 · Ferencváros" and its prototype sets no text-transform on it
	 * (Revia Homes.dc.html:250): the district keeps its capital and nothing else
	 * gets one. Forcing capitals here turned it into "01 · FERENCVÁROS".
	 */
}

.rh-tile__title {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-tile-h3);
	line-height: var(--rh-lh-tile-h3);
	color: var(--rh-strong-text);
	text-wrap: balance;
}

.rh-tile__title a {
	color: inherit;
}

.rh-tile__text {
	font-size: var(--rh-t-p-tile);
	line-height: var(--rh-lh-p-tile);
	max-width: var(--rh-text-max);
	color: var(--rh-body-text);
	text-wrap: pretty;
}

.rh-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(46%, var(--rh-facts-min)), 1fr));
	gap: var(--rh-facts-gap);
	max-width: var(--rh-facts-max);
}

/*
 * The label and the value are 5px apart (6.8). The pair had no gap at all, so
 * every fact sat 5px tighter than the design and the grid came out 10px short
 * over its two rows - measured against the prototype at 1440px.
 */
.rh-facts > div {
	display: flex;
	flex-direction: column;
	gap: var(--rh-facts-cell-gap);
}

.rh-facts__label {
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-fact-label);
	/*
	 * normal, not the body's 1.8. The prototype declares no line-height on
	 * this run, so it inherits its own body's `normal`; this theme's body is
	 * 1.8 (README 4.2), and inheriting that made the box taller than the
	 * design. Stated rather than left to inherit, because the two bodies do
	 * not agree - see docs/designrendszer.md section 9.
	 */
	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));
}

.rh-facts__value {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-fact-value);
	/*
	 * normal, not the body's 1.8. The prototype declares no line-height on
	 * this run, so it inherits its own body's `normal`; this theme's body is
	 * 1.8 (README 4.2), and inheriting that made the box taller than the
	 * design. Stated rather than left to inherit, because the two bodies do
	 * not agree - see docs/designrendszer.md section 9.
	 */
	line-height: normal;
	color: var(--rh-strong-text);
}

/* ---- Metric variant A: progress (handoff 6.6) ------------------------- */

.rh-progress {
	display: flex;
	flex-direction: column;
	gap: var(--rh-metric-gap);

	/*
	 * The same 400px the price block gets, so the two metric variants are the
	 * same width and the tiles line up down a list. The handoff's 6.6 text does
	 * not say it; its prototype does (Revia Homes.dc.html:266).
	 */
	max-width: var(--rh-metric-max);
}

.rh-progress__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-chip);
	/*
	 * normal, not the body's 1.8. The prototype declares no line-height on
	 * this run, so it inherits its own body's `normal`; this theme's body is
	 * 1.8 (README 4.2), and inheriting that made the box taller than the
	 * design. Stated rather than left to inherit, because the two bodies do
	 * not agree - see docs/designrendszer.md section 9.
	 */
	line-height: normal;
	letter-spacing: var(--rh-ls-crumb);
	text-transform: uppercase;
	color: var(--rh-muted-text);
}

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

.rh-progress__track {
	height: var(--rh-progress-h);
	background: var(--rh-line-3);
}

.rh-progress__fill {
	height: 100%;
	background: var(--rh-gold);
	width: var(--rh-progress, 0%);
}

/* On a card the track base is the lighter line (handoff 4.1, line-5). */
.rh-tile--card .rh-progress__track {
	background: var(--rh-line-5);
}

/* ---- Metric variant B: price (handoff 6.7) ---------------------------- */

/*
 * The prototype stacks the three runs with a gap and gives the LABEL its own
 * top padding on top of the block's (6.7): 4px on the block, 12px on the
 * label, 4px between each pair. Expressed as margins instead it came out 4px
 * tight above the label and 2px loose under the value.
 */
.rh-price {
	border-top: 1px solid var(--rh-line);
	max-width: var(--rh-metric-max);
	padding-top: var(--rh-price-pad-top);
	display: flex;
	flex-direction: column;
	gap: var(--rh-price-gap);
}

.rh-price__label {
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-fact-label);
	/*
	 * normal, not the body's 1.8. The prototype declares no line-height on
	 * this run, so it inherits its own body's `normal`; this theme's body is
	 * 1.8 (README 4.2), and inheriting that made the box taller than the
	 * design. Stated rather than left to inherit, because the two bodies do
	 * not agree - see docs/designrendszer.md section 9.
	 */
	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));
	padding-top: var(--rh-price-label-top);
}

.rh-price__value {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-price-tile);
	line-height: var(--rh-lh-tile-h3);
	color: var(--rh-strong-text);
}

.rh-price__value--sold {
	text-decoration: line-through;
	color: var(--rh-muted-text);
}

.rh-price__note {
	font-size: var(--rh-t-note);
	/*
	 * normal, not the body's 1.8. The prototype declares no line-height on
	 * this run, so it inherits its own body's `normal`; this theme's body is
	 * 1.8 (README 4.2), and inheriting that made the box taller than the
	 * design. Stated rather than left to inherit, because the two bodies do
	 * not agree - see docs/designrendszer.md section 9.
	 */
	line-height: normal;
	color: var(--rh-muted-text);
}

/*
 * Stacked there is no second column to be inset from, so the text column drops
 * its side padding and takes a little air above instead.
 *
 * The order is deliberately NOT touched. On a flipped tile order:1 puts the
 * picture after the text, so stacking leaves the text on top and the picture
 * below - which the handoff asks for by name ("order:1 eseten stackelve a
 * szoveg kerul felulre, a kep ala - ez szandekos"). The tiles therefore
 * alternate when stacked too, and that is the design, not a bug.
 *
 * THE NUMBER IS 949, AND IT IS THE SAME 949 AS THE sizes HINT IN
 * template-parts/tile.php. Both describe one thing - the width at which these
 * two columns stop fitting side by side - and until now they disagreed: the
 * hint said 949 and this said 900.
 *
 * The break is a CONTENT width, not a viewport width: the columns are
 * flex: 1 1 420px, so they need 840px of content, and how much viewport that
 * takes depends on whether the scrollbar is eating 15px of it. A media query
 * can only ask about the viewport, so the two can never coincide in both
 * columns at once. Measured, at the boundary widths, in both:
 *
 *                        last stacked   first two columns   error band
 *   with a scrollbar         949              950              NONE
 *   real overlay scrollbar   933              934              934-949, 16px
 *
 * 900 used to leave 901-949 (49px) with a scrollbar and 901-933 (33px)
 * without, and in that band the tile was STACKED while the text column kept a
 * 24px side indent the picture above it did not have, and went without the
 * 14px of air. 949 removes that entirely on the scrollbar column and leaves
 * 16px on the other, in the opposite direction - two columns, briefly without
 * their inner gutter. That is the direction docs/designrendszer.md asks for:
 * take the tolerance from the narrower column, and let the bad case be
 * "switched a little early" rather than "switched late".
 *
 * A container query would be exact in both columns. It is deliberately not
 * used yet: it needs container-type on .rh-tile, which is the one component
 * phase 4 repeats everywhere, and it moves the baseline to Chrome 105 /
 * Safari 16 / Firefox 110 from the theme's current Chrome 88. Worth revisiting
 * in phase 4; not worth 16px here.
 */
@media (max-width: 949px) {

	.rh-tile__body {
		padding-inline: 0;
		padding-top: var(--rh-tile-gap);
	}
}