/**
 * PropOffice Designs — Property Details.
 *
 * ONE stylesheet for every surface: the native PropOffice screen, the
 * [propoffice_property_details] shortcode, and the Elementor widget.
 * Hand-authored, no build step, enqueued with filemtime cache-busting.
 *
 * PALETTE. Every colour reads a PropOffice design token with the token's own
 * value as the fallback. No brand colour is hard-coded anywhere in this file.
 *
 * ISOLATION. Every selector is namespaced under `.po-details`, and the list
 * resets the margins and indentation themes impose on `dl`, `dt` and `dd` —
 * `dd` in particular carries a 40px inherited indent that would push every
 * value out of line with its label.
 *
 * LAYOUT. Intrinsic and container-relative, never viewport-keyed. This row is
 * placed under a full-width price and inside a two-thirds content column, and
 * there is no viewport width at which the right answer is knowable — so it
 * wraps against its own container and there is not one media query in this
 * file.
 */

.po-details {
	font-family: var(--po-type-text);
	--po-details-ink: var(--po-ds-color-text);
	--po-details-muted: var(--po-ds-color-muted);
	--po-details-rule: var(--po-ds-color-border);

	/* The space either side of the separator between one fact and the next.
	   The separator sits in the middle of it, so the fact-to-fact distance is
	   twice this. */
	--po-details-gap: 16px;

	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px var(--po-details-gap);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	/* Themes give `dl` a top and bottom margin; the row's spacing belongs to
	   whatever places it, not to the row. */
	margin: 0;
	padding: 0;
	color: var(--po-details-ink);
}

.po-details *,
.po-details *::before,
.po-details *::after {
	box-sizing: border-box;
}

/*
 * 🚨 ONE fact, on ONE line: label THEN value, side by side.
 *
 * This was a column, which stacked every label above its value and turned the
 * row into four little cards —
 *
 *     Ref.          Land          Floor         Storeys
 *     RLS1007534    767.00 m²     300.00 m²     2
 *
 * — where the reference reads "Ref. RLS1007534   Land 767.00 m²" straight
 * across. The label/value relationship has to survive the row wrapping, which
 * is why it lives on the FACT rather than being spelled out by the row: the
 * facts wrap against each other, and each one stays inline whatever line it
 * lands on.
 *
 * `flex: 0 1 auto` so a fact shrinks before the row overflows, and
 * `min-width: 0` so it is actually allowed to — a flex item refuses to go
 * below its content width without it.
 */
.po-details__fact {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	/* `--po-details-pair-gap` (the Style tab's "Space between label and
	   value") is read here AND in the divider's offset below, so the rule stays
	   centred whatever it is set to. 6px when unset, as before. */
	gap: var(--po-details-pair-gap, 6px);
	flex: 0 1 auto;
	min-width: 0;
}

/*
 * A subtle hairline between one fact and the next.
 *
 * Drawn as a child of the fact rather than as a border on it, so it sits in the
 * middle of the space between two facts instead of hard against the next one.
 * It is `::after` rather than `::before` deliberately: when the row wraps, a
 * trailing mark reads as "continues below", while a leading one would open a
 * line with a stray rule.
 *
 * `margin-left` makes up the difference between the fact's own label-to-value gap
 * (`--po-details-pair-gap`, 6px when unset) and the
 * `--po-details-gap` either side, so the rule is optically centred.
 */
.po-details__fact:not(:last-child)::after {
	content: "";
	/* Spans the row rather than sitting in it as a 12px dash: at a fixed height
	   the mark reads as decoration between two words, where a full-height rule
	   reads as a division between two facts. `stretch` takes the height from
	   the fact itself, so it follows the type rather than a number that has to
	   be kept in step with it. */
	align-self: stretch;
	flex: none;
	width: 1px;
	margin-left: calc(var(--po-details-gap) - var(--po-details-pair-gap, 6px));
	background: var(--po-details-rule);
}

/*
 * 🚨 NOTHING is drawn immediately before the Monthly Repayment.
 *
 * The repayment is pushed to the far end of the row by auto margin, so the
 * separator that `:not(:last-child)` would put after Storeys ends up stranded
 * in the middle of empty space — a rule dividing a fact from a gap. The
 * reference has no mark there.
 *
 * `:has(+ ...)` rather than a class on Storeys because the fact that precedes
 * the repayment is not always Storeys: a property with no storeys recorded
 * ends its run at Floor, or at Land, or at the reference alone.
 */
.po-details__fact:has(+ .po-details__fact--monthly_repayment)::after {
	content: none;
}

/*
 * The monthly repayment sits at the far end of the same row.
 *
 * `margin-left: auto` rather than a second container: it is one more fact, and
 * pushing it with auto margin keeps it in the row's wrap flow — on a narrow
 * column it simply wraps onto the next line with the others instead of being
 * stranded in a block of its own.
 *
 * 🚨 It draws nothing today. PropOffice has no canonical monthly repayment, so
 * the presenter emits this fact only if a property actually carries one. The
 * rule exists so that the day one does, it lands where the reference puts it.
 */
.po-details__fact--monthly_repayment {
	margin-left: auto;
}

/* It ends the row, so it never draws a separator against what follows it. */
.po-details__fact--monthly_repayment::after {
	content: none;
}

/* The label: small, muted, and BESIDE the value. Quiet on purpose — it names
   the value rather than competing with it, and this whole row sits beneath a
   price that must stay the loudest thing on the page. */
/*
 * SECONDARY METADATA — Inter 600 / 10px / 15px / #6B7686.
 *
 * The reference's small-metadata treatment: uppercase-weight at a very small
 * size, deliberately quieter than anything around it. 🚨 It is for labels like
 * these only — never for the property title, which is 16px.
 */
.po-details .po-details__label {
	font-family: var(--po-type-text);
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
	color: var(--po-type-muted);
}

/* The value. `dd` carries a 40px inherited indent in every browser's default
   stylesheet, which would leave every value pushed away from its own label —
   the single thing most likely to go wrong in a hand-built `dl`, and the more
   visible for the two now sitting on one line. */
.po-details .po-details__value {
	font-family: var(--po-type-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--po-type-ink);
	margin: 0;
}

/* No container query, and no media query, deliberately. `flex-wrap` already
   does the whole job: the facts sit side by side while there is room and wrap
   when there is not, against whatever container they were placed in. A
   `@container` rule here would in any case never match — an element cannot
   query itself, only its descendants, so `container-type` on `.po-details`
   would size the labels and never the row. */