/*
 * Revia Homes - the sub-pages (handoff README 7 and 8). Phase 5.
 *
 * What is NOT here: the band, the chip, the badge, the grid, the buttons and
 * the closing CTA band. Those are components.css, and the two list pages and
 * the two record pages use them unchanged - the band is the component phase 3
 * was built around, and the tile.php header has named these four pages as its
 * users since then.
 *
 * Reads every value from assets/css/tokens.css. No literal colour belongs in
 * this file; there are two comments below that MENTION a hex, and both explain
 * why the number in the handoff became a token instead.
 *
 * @package Revia_Homes
 */

/* --------------------------------------------------------------------------
 * Breadcrumb (7.3/1, 8.3/1)
 * ----------------------------------------------------------------------- */

.rh-crumbs {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding-inline: var(--rh-gutter);
}

.rh-crumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rh-crumb-gap);
	font-size: var(--rh-t-crumb);

	/* The prototype states none, so normal - the theme's body is 1.8. */
	line-height: normal;
	letter-spacing: var(--rh-ls-crumb);
	text-transform: uppercase;
	color: var(--rh-muted-text);
}

.rh-crumbs__item {
	display: flex;
	align-items: center;
	gap: var(--rh-crumb-gap);
}

.rh-crumbs__list a {
	color: var(--rh-muted-text);
}

.rh-crumbs__list a:hover {
	color: var(--rh-gold-text);
}

.rh-crumbs__current {
	color: var(--rh-strong-text);
}

/* --------------------------------------------------------------------------
 * The list page's head (7.2, 8.2)
 * ----------------------------------------------------------------------- */

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

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

/*
 * The breadcrumb is already inside the head's container, so it must not get a
 * second one - otherwise its gutter is applied twice and it sits indented from
 * the H1 below it.
 *
 * margin-inline HAS TO GO TOO, and that is not tidiness - it was a bug.
 * .rh-crumbs centres itself with `margin-inline: auto`, which does nothing to a
 * full-width block; but .rh-pagehead__inner is a flex column, so the breadcrumb
 * is a FLEX ITEM, and an auto inline margin on a flex item centres it. Measured
 * at 1440px before this line: the breadcrumb started at x = 614.98 with a width
 * of 195.03 - dead centre of the 1425px viewport - while the H1 under it
 * started at 144.5. On all three list pages.
 */
.rh-pagehead__inner .rh-crumbs {
	max-width: none;
	padding-inline: 0;
	margin-inline: 0;
}

/*
 * The list page's bands sit in their own rhythm, not .rh-section's: the
 * prototype gives the first band a hairline above it and lets the section's
 * own padding do the rest (8.2). .rh-tiles already carries that from the front
 * page; --list only takes off the head-block padding the front page needs and
 * this page does not.
 */
.rh-tiles--list {
	padding-top: var(--rh-tiles-list-y);
}

/*
 * The reference list with no reference in it (change round V2, decision log
 * 39): the editor's sentence stands where the first band would, with the
 * band's own container, gutter, padding and hairline (.rh-tile, components.css)
 * - so an empty list keeps the rhythm of a full one, and the closing band
 * below it sits where it always does.
 */
.rh-tiles__empty {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding: var(--rh-tile-y) var(--rh-gutter);
	border-top: 1px solid var(--rh-line);
}

/* --------------------------------------------------------------------------
 * The record head block (7.3/2, 8.3/2)
 * ----------------------------------------------------------------------- */

.rh-recordhead {
	padding-block: var(--rh-crumb-y) var(--rh-recordhead-y-end);
}

.rh-recordhead .rh-crumbs {
	padding-bottom: var(--rh-crumb-y-end);
}

.rh-recordhead__inner {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding-inline: var(--rh-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-recordhead-gap);

	/*
	 * flex-end, so the price and the H1 share a baseline row however tall the
	 * left column grows. The prototype asks for it by name on both pages.
	 */
	align-items: flex-end;
	justify-content: space-between;
}

.rh-recordhead__main {
	display: flex;
	flex-direction: column;
	gap: var(--rh-recordhead-col-gap);
	min-width: var(--rh-recordhead-col-min);
}

.rh-recordhead__ident {
	display: flex;
	align-items: center;
	gap: var(--rh-recordhead-col-gap);
	flex-wrap: wrap;
}

.rh-recordhead__ref {
	font-size: var(--rh-t-crumb);
	line-height: normal;
	letter-spacing: var(--rh-ls-record-ref);
	text-transform: uppercase;
	color: var(--rh-muted-text);

	/* Letter-spacing adds a trailing gap after the last glyph; take it back. */
	margin-right: calc(-1 * var(--rh-ls-record-ref));
}

.rh-recordhead__title {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-record-h1);
	line-height: 1.06;
	color: var(--rh-strong-text);
	text-wrap: balance;
}

.rh-recordhead__meta {
	font-size: var(--rh-t-record-meta);
	line-height: var(--rh-lh-p-intro);
	color: var(--rh-body-text);
}

.rh-recordhead__side {
	display: flex;
	flex-direction: column;
	gap: var(--rh-recordhead-side-gap);
	align-items: flex-start;
	min-width: var(--rh-recordhead-side-min);
}

/*
 * The listing's side column has no minimum width in the prototype: the price
 * is short and the two buttons wrap on their own. Restating it would push the
 * price onto its own row earlier than the design does.
 */
.rh-recordhead__side--listing {
	min-width: 0;
}

.rh-recordhead__price {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-price-head);

	/* 1, not the tile price's 1.1: the prototype states it here and not there. */
	line-height: 1;
	color: var(--rh-strong-text);
}

/*
 * Two classes, and they are not the same thing. --sold strikes the figure
 * through (README 8.1 asks for it; the prototype does not do it - a named
 * deviation, docs/designrendszer.md section 9); --muted only takes the quiet
 * colour, which is what the prototype's priceColor does. They come apart when
 * prices are switched off and the "price" is a sentence.
 */
.rh-recordhead__price--sold {
	text-decoration: line-through;
	color: var(--rh-muted-text);
}

.rh-recordhead__price--muted {
	color: var(--rh-muted-text);
}

.rh-recordhead__pricenote {
	font-size: var(--rh-t-note);
	line-height: normal;
	color: var(--rh-muted-text);
}

.rh-recordhead__progress {
	width: 100%;
	max-width: var(--rh-recordhead-progress-max);
}

/*
 * 4px here against the band's 3px, and the base is the heavier line. Both are
 * the handoff's own: 7.3/2 gives the head block's bar 4px on #DFDBD5, 6.8 gives
 * the band's 3px on #EDEAE5.
 */
.rh-recordhead__progress .rh-progress__track {
	height: 4px;
	background: var(--rh-line-2);
}

/*
 * A reference's handover year, in the bar's place (change round V2). The same
 * width as the bar it replaces: the side column aligns its children to the
 * start, so without this the price block's hairline would stop where the word
 * "ÁTADÁS ÉVE" does.
 */
.rh-recordhead__year {
	width: 100%;
	max-width: var(--rh-recordhead-progress-max);
}

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

.rh-recordhead__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-recordhead-actions-gap);
	padding-top: var(--rh-price-pad-top);
}

/*
 * The head block's button size - a FOURTH one, and the prototype's own:
 * 16px 28px against the standard 14px 26px, the CTA band's 15px 28px and the
 * large 17px 30px. It is one step up from the standard button because it is
 * the page's primary action.
 */
.rh-btn--head {
	padding: var(--rh-btn-pad-head);
}

.rh-btn--lg {
	padding: var(--rh-btn-pad-lg);
}

/*
 * A LIGHT outlined button - a new modifier with its own rest and hover pair,
 * which is what docs/designrendszer.md section 2 says is required rather than
 * making .rh-btn--outline half surface-aware. --outline is dark-by-
 * construction: its resting colour is white on a transparent fill, so on this
 * sand head block it would be invisible.
 */
.rh-btn--line {
	background: transparent;
	color: var(--rh-ink);
	border-color: var(--rh-ink);
}

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

/* --------------------------------------------------------------------------
 * The black data strip (7.3/4, 8.3/4)
 * ----------------------------------------------------------------------- */

.rh-datastrip {
	padding-block: var(--rh-datastrip-y);
}

/*
 * The cells do not paint: the section behind them is already --rh-ink, and a
 * cell that painted the same colour would be a surface to declare a whole
 * foreground set on for no gain. The hairline is per cell so a part-filled
 * last row leaves no dangling box - the same construction .rh-grid uses.
 */
.rh-datastrip__grid {
	max-width: var(--rh-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--rh-datastrip-min), 1fr));
	border-top: 1px solid var(--rh-ink-line);
	border-left: 1px solid var(--rh-ink-line);
}

.rh-datastrip__cell {
	padding: var(--rh-datastrip-cell-pad);
	display: flex;
	flex-direction: column;
	gap: var(--rh-datastrip-cell-gap);
	border-bottom: 1px solid var(--rh-ink-line);
	border-right: 1px solid var(--rh-ink-line);
}

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

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

/* --------------------------------------------------------------------------
 * "A projektről" / "A lakásról" / "A szolgáltatásról" (7.3/5, 8.3/5)
 * ----------------------------------------------------------------------- */

.rh-about2__inner {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding-inline: var(--rh-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rh-about2-col-min)), 1fr));
	gap: var(--rh-about2-gap);
	align-items: start;
}

.rh-about2__copy {
	display: flex;
	flex-direction: column;
	gap: var(--rh-about2-copy-gap);
}

.rh-about2__side {
	display: flex;
	flex-direction: column;
	gap: var(--rh-points-gap);
}

/*
 * The heading over the numbered condition list. The prototype has no such
 * heading - its column starts straight at the first row - but the field's
 * label is a setting ("Jelenlegi állapot", rh_listing_condition_label) that
 * phase 2 created for this column, and a settings field that renders nowhere
 * is the fault this phase spent its first decision on. It is set as an eyebrow
 * rather than a title so it reads as a column label, not a second H2 competing
 * with the one beside it.
 */
.rh-about2__sidetitle {
	font-size: var(--rh-t-eyebrow);
	line-height: normal;
	letter-spacing: var(--rh-ls-eyebrow);
	text-transform: uppercase;
	color: var(--rh-gold-text);
	margin-right: calc(-1 * var(--rh-ls-eyebrow));
	padding-bottom: var(--rh-points-top);
}

.rh-prose {
	display: flex;
	flex-direction: column;
	gap: var(--rh-about2-copy-gap);
	font-size: var(--rh-t-p-about);
	line-height: var(--rh-lh-p-intro);
	color: var(--rh-body-text);
	text-wrap: pretty;
}

.rh-prose--support {
	font-size: var(--rh-t-p-support);
}

/* --------------------------------------------------------------------------
 * The phase timeline (7.3/5)
 * ----------------------------------------------------------------------- */

.rh-timeline,
.rh-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rh-points-gap);
}

.rh-timeline__row {
	display: flex;
	gap: var(--rh-timeline-gap);
	align-items: flex-start;
	padding-block: var(--rh-timeline-y);
	border-top: 1px solid var(--rh-line);
}

/*
 * The 9x9 square. Its fill and its ring are the state - and the state is ALSO
 * written beside it in words, from the settings, which is what makes this
 * square decoration in the strict sense: aria-hidden on itself, no text of its
 * own, no children (docs/designrendszer.md, the M9 criterion). Nothing is
 * carried by colour alone.
 *
 * --next's ring is the ONE colour in README 7 and 8 that was not already a
 * token: #CFCBC5. It is --rh-line-2 here (#DFDBD5), the nearest step the theme
 * already owns, rather than a 26th hex. The measurement is in the phase
 * report; on white the two are 1.36 and 1.28 against the page, and a ring
 * whose job is to be quieter than the gold one is quieter at either value.
 */
.rh-timeline__dot {
	width: 9px;
	height: 9px;
	margin-top: var(--rh-timeline-dot-top);
	flex-shrink: 0;
	border: 1px solid var(--rh-gold-ink);
	background: var(--rh-gold-ink);
}

.rh-timeline__dot--now {
	background: var(--rh-paper);
}

.rh-timeline__dot--next {
	background: var(--rh-paper);
	border-color: var(--rh-line-2);
}

.rh-timeline__body {
	flex: 1;
}

.rh-timeline__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-timeline-head-gap);
	justify-content: space-between;
	align-items: baseline;
}

.rh-timeline__title,
.rh-steps__title {
	font-family: var(--rh-font-display);

	/* 400, not 300: the prototype declares no weight on these rows. */
	font-weight: var(--rh-w-regular);
	font-size: var(--rh-t-row-title);
	line-height: normal;
	color: var(--rh-strong-text);
}

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

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

.rh-timeline__state--now {
	color: var(--rh-strong-text);
}

.rh-timeline__desc,
.rh-steps__desc {
	font-size: var(--rh-t-row-desc);
	line-height: 1.65;
	color: var(--rh-muted-text);
	padding-top: var(--rh-timeline-desc-top);
}

/* --------------------------------------------------------------------------
 * The numbered condition list (8.3/5)
 * ----------------------------------------------------------------------- */

.rh-steps__row {
	display: flex;
	gap: var(--rh-timeline-gap);
	align-items: baseline;
	padding-block: var(--rh-timeline-y);
	border-top: 1px solid var(--rh-line);
}

.rh-steps__num {
	font-family: var(--rh-font-display);
	font-size: var(--rh-t-note);
	line-height: normal;
	letter-spacing: var(--rh-ls-step-num);
	color: var(--rh-gold-text);
	min-width: var(--rh-step-num-min);
	flex-shrink: 0;
}

.rh-steps__desc {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
 * "Tervezett munkák" / "Amit felújítottunk" (7.3/6, 8.3/6)
 * ----------------------------------------------------------------------- */

.rh-works__inner,
.rh-servicesteps__inner {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding-inline: var(--rh-gutter);
	display: flex;
	flex-direction: column;
	gap: var(--rh-works-gap);
}

.rh-works__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-works-head-gap);
	align-items: flex-end;
	justify-content: space-between;
}

.rh-works__heading {
	display: flex;
	flex-direction: column;
	gap: var(--rh-works-heading-gap);
	max-width: var(--rh-sectionhead-max-narrow);
}

.rh-works__note {
	font-size: var(--rh-t-note-inline);
	line-height: normal;
	color: var(--rh-muted-text);
}

/*
 * The same grid, a different cell rhythm: no minimum height, a tighter gap,
 * and the 7x7 mark on the title's own row instead of above it. The container,
 * the per-cell hairline and the line colour are .rh-grid's and unchanged.
 *
 * The cell does NOT paint. The prototype fills it with #F2F0ED, which is the
 * colour of the sand section behind it; painting it here would add a surface
 * that has to declare a whole foreground set in exchange for a fill that is
 * already there.
 */
.rh-grid--works {
	--rh-grid-min: var(--rh-works-min);
}

.rh-grid--works .rh-grid__cell {
	padding: var(--rh-works-cell-y) var(--rh-works-cell-y);
	min-height: 0;
	gap: var(--rh-works-cell-gap);
}

.rh-grid__row {
	display: flex;
	align-items: center;
	gap: var(--rh-works-cell-gap);
}

.rh-grid--works .rh-grid__title {
	font-size: var(--rh-t-row-title);
}

.rh-grid--works .rh-grid__desc {
	font-size: var(--rh-t-row-desc);
	line-height: var(--rh-lh-p-tile);
	color: var(--rh-body-text);
}

/* --------------------------------------------------------------------------
 * Alaprajz (7.3/7, 8.3/7)
 * ----------------------------------------------------------------------- */

.rh-plan__inner {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding-inline: var(--rh-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rh-about2-col-min)), 1fr));
	gap: var(--rh-plan-gap);
	align-items: start;
}

.rh-plan__copy {
	display: flex;
	flex-direction: column;
	gap: var(--rh-plan-copy-gap);
}

/*
 * The mount is a surface - it paints and it holds the drawing - so it declares
 * the set, at the light values its own --rh-paper-2 fill takes.
 */
.rh-plan__frame {
	background: var(--rh-paper-2);
	border: 1px solid var(--rh-line);
	padding: var(--rh-plan-pad);

	color: var(--rh-body);

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

.rh-plan__image {
	width: 100%;
	height: auto;
}

.rh-rooms {
	display: flex;
	flex-direction: column;
}

.rh-rooms__row {
	display: flex;
	justify-content: space-between;
	gap: var(--rh-room-gap);
	padding-block: var(--rh-room-y);
	border-top: 1px solid var(--rh-line);
	font-size: var(--rh-t-room);
	line-height: normal;
}

.rh-rooms__name {
	color: var(--rh-strong-text);
}

.rh-rooms__area {
	color: var(--rh-muted-text);
	text-align: right;
}

/*
 * The total's rule is the ink one, and it closes with the ordinary hairline
 * underneath - the prototype draws both, and that is what marks the row out
 * as a sum rather than a seventh room.
 */
.rh-rooms__row--total {
	padding-block: var(--rh-room-total-y);
	border-top-color: var(--rh-ink);
	border-bottom: 1px solid var(--rh-line);
	font-family: var(--rh-font-display);
	font-size: var(--rh-t-room-total);
}

.rh-rooms__row--total .rh-rooms__area {
	color: var(--rh-gold-text);
}

/* --------------------------------------------------------------------------
 * Költségek + Környék (8.3/8)
 * ----------------------------------------------------------------------- */

.rh-costs__inner {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding-inline: var(--rh-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rh-costs-col-min)), 1fr));
	gap: var(--rh-costs-gap);
	align-items: start;
}

.rh-costs__col {
	display: flex;
	flex-direction: column;
	gap: var(--rh-plan-copy-gap);
}

/* A smaller H2 step than the other sections - the prototype's own (40, not 44). */
.rh-costs .rh-title--sub {
	font-size: var(--rh-t-costs-h2);
}

.rh-costlist {
	display: flex;
	flex-direction: column;
}

.rh-costlist__row {
	display: flex;
	justify-content: space-between;
	gap: var(--rh-room-gap);
	padding-block: var(--rh-cost-y);
	border-top: 1px solid var(--rh-line-2);
	font-size: var(--rh-t-room);
	line-height: normal;
}

.rh-costlist__label {
	color: var(--rh-strong-text);
}

.rh-costlist__value {
	color: var(--rh-body-text);
	text-align: right;
}

/* --------------------------------------------------------------------------
 * The dark closing block (7.3/8, 8.3/9)
 * ----------------------------------------------------------------------- */

.rh-subcta__inner {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding-inline: var(--rh-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-subcta-gap);
	align-items: center;
	justify-content: space-between;
}

.rh-subcta__copy {
	display: flex;
	flex-direction: column;
	gap: var(--rh-subcta-copy-gap);
	max-width: var(--rh-subcta-copy-max);
}

/*
 * One step below the other H2s (40 against 44), and the prototype states it on
 * both closing blocks: a call to action is shorter and sits beside a button,
 * so it does not need the section headings' size.
 */
.rh-subcta__title {
	font-size: var(--rh-t-cta-h2);
}

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

.rh-subcta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-subcta-actions-gap);
}

/* --------------------------------------------------------------------------
 * "További projektek" / "További lakásaink" (7.3/9, 8.3/10)
 * ----------------------------------------------------------------------- */

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

.rh-related__title {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-related-h2);
	line-height: var(--rh-lh-sub-h2);
	color: var(--rh-strong-text);
}

.rh-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rh-related-min)), 1fr));
	gap: var(--rh-related-cell-gap);
}

.rh-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rh-line);
	color: var(--rh-strong-text);
	transition: border-color var(--rh-t-header) var(--rh-ease);
}

.rh-card:hover {
	border-color: var(--rh-gold-ink);
	color: var(--rh-strong-text);
}

/*
 * The picture's bed is a surface - it paints and it holds an image - so it
 * declares the set. Two fills, and both are the prototype's: sand behind a
 * project's 4:3, the third sand step behind a flat's 3:2.
 */
.rh-card__media {
	width: 100%;
	overflow: hidden;
	background: var(--rh-sand);

	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-card__media--project {
	aspect-ratio: 4 / 3;
}

.rh-card__media--flat {
	aspect-ratio: 3 / 2;
	background: var(--rh-sand-3);
}

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

.rh-card__body {
	padding: var(--rh-card-pad);
	display: flex;
	flex-direction: column;
	gap: var(--rh-card-gap);
}

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

.rh-card__meta {
	font-size: var(--rh-t-card-meta);
	line-height: normal;
	color: var(--rh-muted-text);
}

.rh-card__figure {
	font-size: var(--rh-t-card-figure);
	line-height: normal;
	color: var(--rh-gold-text);
	padding-top: var(--rh-card-figure-top);
}

.rh-card__figure--price {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-card-title);
	color: var(--rh-strong-text);
}

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

.rh-card__figure--muted {
	color: var(--rh-muted-text);
}

/* --------------------------------------------------------------------------
 * Browser-side image protection (terv 3.8, decision D6)
 *
 * The CSS half. What it does: takes the drag handle off content pictures, and
 * takes the long-press "save image" sheet off them on a touch device. The
 * event half is in assets/js/site.js.
 *
 * ⚠️ IT MAY NOT GET IN THE GALLERY'S WAY - the plan says so by name. The
 * thumbnails are <button>s, so user-select on their contents costs nothing,
 * and the rule deliberately targets IMG only: a user-select on the container
 * would stop a visitor selecting the caption text, which is content.
 *
 * And what it cannot do, restated from docs/kepvedelem.md point 6: nothing
 * here stops a screenshot. The real protection is the watermark.
 * ----------------------------------------------------------------------- */

.rh-protect #rh-content img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-touch-callout: none;
}