/*
 * Revia Homes - the front page's own sections (handoff README 6.1 - 6.9).
 *
 * The fifth stylesheet, after tokens, base, components and layout. What belongs
 * here: a section that appears on the front page and nowhere else. What does
 * NOT: the band (components.css - four pages use it), the closing CTA band
 * (components.css - the sub-pages get it in phase 5), the hairline grid, the
 * buttons, the chips and the badges.
 *
 * Every value comes from assets/css/tokens.css. No literal colour belongs in
 * this file.
 *
 * FIVE RULES HERE PAINTED A SURFACE, and each declares the whole six-item
 * foreground set the way docs/designrendszer.md section 2 rule 4 requires:
 * .rh-hero (ink-deep), .rh-form (ink-soft), .rh-about__quote (paper),
 * .rh-about__frame (sand) and .rh-ba__stage (sand-2) - the last one, with the
 * whole before/after slider, lives in beforeafter.css since V3/B, when the
 * slider stopped being the front page's alone. Two more sections paint
 * through classes that already exist and already declare - .rh-section--ink and
 * .rh-section--sand - so they add no surface to the list.
 *
 * Swept from the CSSOM after this file joined the cascade: 222 rules in the
 * theme's own four stylesheets, 75 of them paint, 37 of those are WordPress
 * core's block presets and 38 are the theme's - 26 that were there before and
 * these 12. The twelve split three ways: SIX are decoration that is empty in
 * the markup (the two veils, the hero's and the strip's gold rules, the
 * handle's line and its knob), ONE is a leaf that paints and states its own
 * colour (the chosen room tab), and FIVE are surfaces - all five declare.
 *
 * @package Revia_Homes
 */

/* --------------------------------------------------------------------------
 * 6.1 Hero
 *
 * Six layers, bottom to top: the photograph, the linear veil, the radial glow,
 * the centred wordmark block, the claim block, and the fixed header above all
 * of it (layout.css). The section paints --rh-ink-deep underneath, so a hero
 * with no picture is a dark band rather than a white one.
 * ----------------------------------------------------------------------- */

.rh-hero {
	position: relative;
	overflow: hidden;
	min-height: var(--rh-hero-min-h);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--rh-ink-deep);

	/* It paints, so it declares. The dark values, as .rh-footer does. */
	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);
}

.rh-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/*
 * height: 100% has to be stated: base.css sets height: auto on every img so a
 * responsive picture keeps its ratio, and this one is a cover fill instead.
 */
.rh-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	transform-origin: 52% 44%;
	animation: rh-ken var(--rh-ken-duration) ease-out forwards;
}

@keyframes rh-ken {

	from {
		transform: scale(1.04) translate3d(0, 0, 0);
	}

	to {
		transform: scale(1.17) translate3d(-1.6%, -1.2%, 0);
	}
}

/*
 * 🔴 REDUCED MOTION NEEDS ITS OWN ANSWER HERE, and the global rule is not it.
 *
 * base.css shortens every animation to .01ms under prefers-reduced-motion,
 * which is right for a 400ms colour fade: it lands on the end state and the end
 * state is the one that was wanted anyway. This animation is 26 SECONDS and
 * `forwards`, so .01ms means the visitor who asked for less motion gets the
 * picture at scale(1.17), shifted by -1.6% / -1.2% - the FINISH of a movement
 * they never saw, and a tighter crop than the photograph was composed for.
 *
 * The right still frame is the animation's FIRST one: scale(1.04), no drift.
 * That is exactly what everyone else sees at t=0, so the composition is the
 * designer's and nothing is cropped away. `animation: none` alone would leave
 * scale(1), which is a third framing that appears nowhere in the design.
 */
@media (prefers-reduced-motion: reduce) {

	.rh-hero__img {
		animation: none;
		transform: scale(1.04);
	}
}

.rh-hero__veil,
.rh-hero__glow {
	position: absolute;
	inset: 0;
}

/*
 * Both veils, as the handoff spells them (6.1). The stops are this component's
 * own geometry; the colours are tokens, because the contrast measurement in
 * docs/designrendszer.md reads them too - and if the hero photograph is
 * replaced, the top stop is the lever that gets moved.
 */
.rh-hero__veil {
	background: linear-gradient(
		180deg,
		var(--rh-hero-veil-top) 0%,
		var(--rh-hero-veil-upper) 34%,
		var(--rh-hero-veil-lower) 56%,
		var(--rh-hero-veil-bottom) 100%
	);
}

.rh-hero__glow {
	background: radial-gradient(
		ellipse 76% 40% at 50% 30%,
		var(--rh-hero-glow-core) 0%,
		var(--rh-hero-glow-mid) 55%,
		var(--rh-hero-glow-edge) 78%
	);
}

.rh-hero__top {
	position: relative;
	padding: var(--rh-hero-top-y) var(--rh-gutter-hero) var(--rh-hero-top-y-end);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rh-hero-gap);
}

/* The H1 around the wordmark (phase 7): as wide as the column, so the mark's width resolves as before. */
.rh-hero__brand {
	align-self: stretch;
	display: flex;
	justify-content: center;
}

.rh-hero__mark {
	width: var(--rh-wordmark-hero);
	color: var(--rh-paper);
	filter: var(--rh-shadow-hero);
}

.rh-hero__rule {
	width: var(--rh-hero-rule-w);
	height: 1px;
	background: var(--rh-gold-light);
}

/*
 * NOT white-space: nowrap, which is what the prototype has. The motto is a
 * settings field, so its length is data - and a run that cannot wrap makes the
 * PAGE scroll sideways instead, which is the one thing the layout may never do.
 * Same answer, and the same reason, as the status badge in components.css.
 * Where the motto fits, wrapping changes nothing.
 */
.rh-hero__motto {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-hero-motto);
	line-height: normal;
	letter-spacing: var(--rh-ls-motto);
	color: var(--rh-paper);
	text-align: center;
	margin-right: calc(-1 * var(--rh-ls-motto));
}

/*
 * --rh-max, not the prototype's 1440px, and it is the SAME substitution the
 * header already carries (docs/designrendszer.md section 9): the theme has ONE
 * content maximum, and a second one would be the invented number that decision
 * removed.
 *
 * The gutter is on the OUTER box and the cap on the inner, which is exactly
 * .rh-header's structure - so the claim starts where the header's wordmark
 * starts. Measured at 1440px: wordmark 72.50px, claim 72.50px. With the padding
 * inside the cap it was 128.50px, 56px adrift of the bar above it.
 */
.rh-hero__bottom {
	position: relative;
	margin-top: auto;
	padding: var(--rh-hero-bottom-y) var(--rh-gutter-hero);
}

.rh-hero__bottominner {
	max-width: var(--rh-max);
	margin-inline: auto;
}

.rh-hero__claimbox {
	display: flex;
	flex-direction: column;
	gap: var(--rh-hero-claim-gap);
	max-width: var(--rh-hero-claim-max);
}

.rh-hero__claim {
	font-family: var(--rh-font-display);
	font-weight: var(--rh-w-light);
	font-size: var(--rh-t-hero-claim);
	line-height: var(--rh-lh-claim);
	letter-spacing: var(--rh-ls-claim);
	text-transform: uppercase;
	color: var(--rh-paper);
	text-wrap: pretty;
}

.rh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-hero-actions-gap);
}

/* --------------------------------------------------------------------------
 * 6.2 The three-word strip
 *
 * The surface is .rh-section--ink, which paints and declares; this only lays
 * out. See template-parts/home/strip.php.
 * ----------------------------------------------------------------------- */

.rh-strip {
	padding: var(--rh-strip-y) var(--rh-gutter-hero);
}

.rh-strip__inner {
	max-width: var(--rh-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--rh-strip-gap);
	font-family: var(--rh-font-display);
	font-size: var(--rh-t-strip);
	line-height: normal;
	letter-spacing: var(--rh-ls-claim);
	color: var(--rh-paper-warm);
}

/*
 * Only the LAST word takes the tracking back. Letter-spacing pads the right of
 * every run, so a centred row sits half a space off - but compensating every
 * word would also shrink the gap between the words and the rules, which is the
 * prototype's. One trailing space, removed once.
 */
.rh-strip__word:last-child {
	margin-right: calc(-1 * var(--rh-ls-claim));
}

.rh-strip__rule {
	width: 1px;
	height: var(--rh-strip-rule-h);
	background: var(--rh-gold);
}

/* --------------------------------------------------------------------------
 * 6.3 Bemutatkozas
 * ----------------------------------------------------------------------- */

/*
 * 🔴 THE GUTTER IS OUTSIDE THE CONTAINER HERE, and it is NOT a style choice.
 *
 * The handoff uses both patterns, a few lines apart, and they give different
 * content widths. The BAND (6.8) puts its padding inside a 1280px box, and
 * components.css copies that. These four sections (6.3, 6.4, 6.5, 6.9) put the
 * padding on the SECTION and the max-width on the inner box, so the content
 * column IS the stated number rather than the number minus two gutters.
 *
 * Measured at 1440px with the padding on the inner instead: the introduction's
 * column came out 1096px against the prototype's 1240 - 144px narrower, the
 * heading broke in a different place, and the before/after stage lost 144px of
 * width, which pushed its figures row onto its own line. Four sections, one
 * mistake, visible in all four.
 */
.rh-about,
.rh-process,
.rh-contact {
	padding-inline: var(--rh-gutter);
}

.rh-about__inner {
	max-width: var(--rh-max-narrow);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rh-about-col-min)), 1fr));
	gap: var(--rh-about-gap);
	align-items: center;
}

.rh-about__copy {
	display: flex;
	flex-direction: column;
	gap: var(--rh-about-copy-gap);
	min-width: 0;
}

/*
 * The two paragraphs run to the column, not to the lead's own 660px - and
 * they are a step narrower than the lead: 1.15vw, not 1.2vw. Both come from
 * the prototype, a screen apart, and at 1440px the difference is 17px against
 * 16.56px.
 */
.rh-about__p {
	max-width: none;
	font-size: var(--rh-t-p-about);
}

.rh-points {
	display: flex;
	flex-direction: column;

	/* The prototype's own two numbers for this list (6.3). */
	gap: var(--rh-points-gap);
	margin-top: var(--rh-points-top);
}

/*
 * The line is on the item, and the last one carries a second: that is the
 * handoff's own description (6.3), and it is the same reasoning as the hairline
 * grid - a list that grows or shrinks never leaves a dangling rule.
 */
.rh-points__item {
	display: flex;
	gap: var(--rh-point-gap);
	align-items: baseline;
	padding-block: var(--rh-point-y);
	border-top: 1px solid var(--rh-line);
}

.rh-points__item:last-child {
	border-bottom: 1px solid var(--rh-line);
}

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

.rh-points__body {
	min-width: 0;
}

.rh-points__title {
	display: block;
	font-family: var(--rh-font-display);
	font-size: var(--rh-t-point-title);
	line-height: normal;
	letter-spacing: var(--rh-ls-point-title);
	color: var(--rh-strong-text);
}

.rh-points__desc {
	display: block;
	font-size: var(--rh-t-point-desc);
	line-height: 1.7;
	color: var(--rh-muted-text);
}

.rh-about__figure {
	position: relative;
	min-width: 0;
}

/*
 * IT PAINTS SAND, SO IT DECLARES - even though only a photograph is in it
 * today. The category "paints, but the markup is empty" is for elements that
 * are literally empty and stay empty (the gold rules, the handle's line, the
 * hamburger's bars); this one already has a child, and a caption inside a
 * picture frame is the most ordinary thing anyone would add next. That is the
 * exact judgement call .rh-tile__media was got wrong on, and the answer is not
 * to make it again.
 *
 * Sand's steps, the same two .rh-section--sand takes: --rh-gold-hover for gold
 * lettering (5.72) and --rh-body for the quiet one (--rh-muted is 4.40 here).
 * Nothing renders differently today.
 */
.rh-about__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	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-about__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The quotation laps over the photograph's bottom-left corner, one pixel
 * outside it on both sides so no hairline of picture shows along the join.
 *
 * IT PAINTS PAPER, SO IT DECLARES - at the LIGHT values, because a light
 * surface is exactly the case that inherits the wrong thing when it is nested
 * in a dark one. The concrete tokens, not the surface tokens: a component that
 * paints its own light fill carries its foreground with it
 * (docs/designrendszer.md section 2, the forbidden case).
 */
.rh-about__quote {
	position: absolute;
	left: -1px;
	bottom: -1px;
	max-width: var(--rh-quote-max);
	padding: var(--rh-quote-pad);
	background: var(--rh-paper);

	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-about__quotetext {
	font-family: var(--rh-font-display);
	font-size: var(--rh-t-quote);
	letter-spacing: var(--rh-ls-quote);
	line-height: 1.32;
	color: var(--rh-strong-text);
}

.rh-about__author {
	padding-top: var(--rh-quote-author-top);
	font-size: var(--rh-t-chip);
	line-height: normal;
	letter-spacing: var(--rh-ls-button);
	text-transform: uppercase;
	color: var(--rh-gold-text);
	margin-right: calc(-1 * var(--rh-ls-button));
}

/* --------------------------------------------------------------------------
 * 6.4 Folyamat
 *
 * The surface is .rh-section--ink and the cells are .rh-grid--ink, both of
 * which already exist and already declare. Only the wrapper is here.
 * ----------------------------------------------------------------------- */

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

.rh-process__intro {
	max-width: var(--rh-process-intro-max);
	font-size: var(--rh-t-p-support);
}

/* --------------------------------------------------------------------------
 * 6.6 / 6.7 The two list sections
 *
 * The bands themselves are components.css; this is the heading above them.
 * ----------------------------------------------------------------------- */

.rh-tiles__head {
	max-width: var(--rh-max);
	margin-inline: auto;
	padding: var(--rh-section-y) var(--rh-gutter) var(--rh-tiles-head-y-end);
}

/* --------------------------------------------------------------------------
 * 6.9 Kapcsolat
 * ----------------------------------------------------------------------- */

.rh-contact__inner {
	max-width: var(--rh-max-narrow);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rh-contact-col-min)), 1fr));
	gap: var(--rh-contact-gap);
}

.rh-contact__copy {
	display: flex;
	flex-direction: column;
	gap: var(--rh-contact-copy-gap);
	min-width: 0;
}

.rh-contact__intro {
	max-width: var(--rh-contact-intro-max);
	font-size: var(--rh-t-p-support);
}

.rh-contact__rows {
	padding-top: var(--rh-contact-rows-top);
}

.rh-contact__row {
	border-top: 1px solid var(--rh-ink-line);
}

.rh-contact__row:last-child {
	border-bottom: 1px solid var(--rh-ink-line);
}

.rh-contact__link {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--rh-contact-row-gap);
	padding-block: var(--rh-contact-row-y);
}

.rh-contact__label {
	font-size: var(--rh-t-contact-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-contact-label);
	text-transform: uppercase;
	color: var(--rh-muted-text);
	margin-right: calc(-1 * var(--rh-ls-contact-label));
}

/*
 * A contact row with no href is a <span>, not an <a>, so it never receives
 * --rh-link - it would inherit the section's body colour and sit one step
 * quieter than its neighbours. The value is the same --rh-paper-warm the links
 * resolve to; stating it here keeps the three rows identical whether or not an
 * editor has filled in the address.
 */
.rh-contact__link--plain {
	color: var(--rh-strong-text);
}

.rh-contact__value {
	font-family: var(--rh-font-display);
	font-size: var(--rh-t-contact-value);
	line-height: normal;
	color: inherit;
}

/*
 * The form card.
 *
 * IT PAINTS --rh-ink-soft, SO IT DECLARES - the dark values. It is the theme's
 * only surface in that shade, and the whole card sits inside a section that
 * paints a DIFFERENT dark, so nothing here may rely on what the section said.
 *
 * 🔴 DECLARING THE SET IS NOT THE SAME AS MEASURING IT. This rule had all six
 * from the first draft, at the values every other dark surface uses - and one
 * of them was wrong, because --rh-ink-soft (#2A2E33) is a FOURTH dark step and
 * nothing in this theme had ever painted it. Measured on all three:
 *
 *                      --rh-ink-soft   --rh-ink   --rh-ink-deep
 *   --rh-paper-warm        12.56        13.82        15.39
 *   --rh-body-dark          7.23         7.96         8.86
 *   --rh-muted-dark      >> 4.24 <<      4.66         5.19
 *   --rh-gold-light         5.65         6.22         6.92
 *
 * The card is LIGHTER than the section it sits in - that is the design, the
 * card lifts out of the band - and the quiet grey is the one step with no room
 * left. Measured on the running page: the four field labels and the privacy
 * line came out at 4.24:1, below AA. The prototype has the same pair and the
 * same 4.24 (README 6.9 gives label #8A9096 on card #2A2E33), so this is a
 * deliberate deviation FROM the handoff, of the same kind as J8 in the footer.
 *
 * The answer is the one --rh-muted-text was made for, and the same one sand
 * takes: step to the next grey that clears. There is nothing between #8A9096
 * and #B9BDC1 in the handoff, so it is --rh-body-dark, 7.23:1. The cost, said
 * plainly rather than hidden: ON THIS CARD THE QUIET STEP AND THE BODY STEP ARE
 * THE SAME COLOUR, and the label stays quieter through its size, its tracking
 * and its capitals - exactly the trade tokens.css already describes for sand.
 */
.rh-form {
	background: var(--rh-ink-soft);
	padding: var(--rh-form-pad);

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

.rh-form__body {
	display: flex;
	flex-direction: column;
	gap: var(--rh-form-gap);
}

.rh-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--rh-form-label-gap);
}

.rh-form__label {
	font-size: var(--rh-t-form-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-form-label);
	text-transform: uppercase;
	color: var(--rh-muted-text);
	margin-right: calc(-1 * var(--rh-ls-form-label));
}

/*
 * The underlined field. The handoff's prototype removes the outline here (12)
 * and its own section 12 asks for a visible focus ring in production, so the
 * ring stays (base.css) and the gold underline is what moves - both, not
 * either.
 */
.rh-form__input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--rh-body);
	border-radius: var(--rh-radius);

	/* The UA gives an input 2px of side padding; the design gives it none. */
	padding-block: var(--rh-form-input-y);
	padding-inline: 0;
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-form-input);
	color: var(--rh-strong-text);
	transition: border-color var(--rh-t-header) var(--rh-ease);
}

.rh-form__input:focus {
	border-bottom-color: var(--rh-gold-light);
}

.rh-form__input::placeholder {
	color: var(--rh-muted-text);
	opacity: 1;
}

/*
 * The dropdown's own list is painted by the operating system, not by this
 * stylesheet, and on Windows it is a light menu - so an <option> inheriting the
 * card's pale text would be pale-on-pale. The prototype states the same thing
 * on every option.
 */
.rh-form__select option {
	color: var(--rh-ink);
}

.rh-form__textarea {
	resize: vertical;
}

.rh-form__submit {
	margin-top: var(--rh-form-submit-top);
	padding: var(--rh-form-submit-pad);
	font-size: var(--rh-t-form-submit);
}

.rh-form__note {
	font-size: var(--rh-t-chip);
	line-height: 1.6;
	color: var(--rh-muted-text);
}