/**
 * PropOffice Designs — Property Costs.
 *
 * ONE stylesheet for every surface: the native PropOffice screen, the
 * [propoffice_property_costs] shortcode, and the Elementor widget.
 * Hand-authored, no build step, enqueued with filemtime cache-busting.
 *
 * PALETTE. Every colour reads a PropOffice design token. No brand colour is
 * hard-coded anywhere in this file.
 *
 * ISOLATION. Every selector is namespaced under `.po-costs`, 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
 * figure out of line with its label.
 *
 * LAYOUT. Intrinsic and container-relative, never viewport-keyed. There is no
 * viewport width at which the right answer is knowable — this section sits in a
 * two-thirds reading column on one page and full width on another — so the row
 * wraps against its own container and there is not one media query in this
 * file.
 */

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

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

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	color: var(--po-costs-ink);
}

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

/*
 * 🚨 SCOPED UNDER THE COMPONENT ROOT, TO SURVIVE A GLOBAL HEADING RULE.
 *
 * This is drawn on a real heading element, and both Elementor's global font kit
 * and most themes style headings by TAG: `.elementor-kit-10 h3` is (0,1,1) and
 * outranks a lone `.po-costs__heading` at (0,1,0).
 *
 * MEASURED on the live Kava install at 1440x720, that kit rule had taken over
 * 8 of the 11 PropOffice headings on a property page. The Features category
 * label is the clearest case: declared 12px/600 uppercase with 0.06em tracking,
 * it drew at 24px/400 with tracking `normal` — LARGER than the 22px section
 * heading it sits under, so the hierarchy read backwards and the label had
 * stopped looking like a label at all.
 *
 * One extra class is the whole fix, and it is not a guess: on that same page
 * `.po-finance .po-finance__heading` and `.po-overview .po-overview__title`
 * already carried it and rendered exactly what they declare. Both at (0,2,0),
 * both winning. That is why Finance looked right and this did not — never a
 * difference of design, only of specificity.
 */
.po-costs .po-costs__heading {
	margin: 0 0 20px;
	font-family: var(--po-type-display);
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--po-costs-ink);
}

/*
 * The row of costs.
 *
 * 🚨 It sizes itself to what EXISTS. There is no four-column grid holding a
 * place for a cost the property does not record: a `grid-template-columns` of
 * four would leave a blank quarter where the special levy would have been, and
 * a blank column reads as missing data rather than as data that was never
 * relevant. Flex with `flex-wrap` gives the reference's even row when there are
 * four and a balanced row when there are two, without either being described.
 */
.po-costs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 16px var(--po-costs-gap);
	width: 100%;
	/* Themes give `dl` a top and bottom margin; the section's spacing belongs
	   to whatever places it, not to the list. */
	margin: 0;
	padding: 0;
}

/*
 * ONE cost: the label ABOVE its figure.
 *
 * Stacked rather than inline, which is what separates this from the secondary
 * details row above it. These are amounts a reader compares against each other
 * — levy against rates against the total — and comparison wants the figures
 * aligned on a common baseline, which only happens if the labels are out of the
 * way above them.
 *
 * `flex: 0 1 auto` so an item 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-costs__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 1 auto;
	min-width: 0;
}

/*
 * TYPE C — the hairline between one cost and the next.
 *
 * Drawn as a child of the item rather than as a border on it, so it sits in the
 * middle of the space between two costs instead of hard against the next one.
 * `::after` rather than `::before` deliberately: when the row wraps, a trailing
 * mark reads as "continues below", where a leading one would open a line with a
 * stray rule.
 *
 * `margin-right` makes up the difference between the item's own edge and the
 * gap either side, so the rule is optically centred.
 *
 * Nothing is drawn after the last item — a rule there divides a cost from
 * nothing. The item is `position: relative` above, so the rule is placed
 * against the item it trails.
 */
.po-costs__item:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: calc(var(--po-costs-gap) / -2);
	width: 1px;
	background: var(--po-costs-rule);
}

/*
 * SECONDARY METADATA — the same small, quiet treatment the details row uses for
 * its labels. It names the figure rather than competing with it.
 */
.po-costs .po-costs__label {
	font-family: var(--po-type-text);
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--po-type-muted);
	white-space: nowrap;
}

/*
 * The figure. `dd` carries a 40px inherited indent in every browser's default
 * stylesheet, which would leave every amount pushed away from its own label —
 * the single thing most likely to go wrong in a hand-built `dl`.
 */
.po-costs .po-costs__value {
	font-family: var(--po-type-text);
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	color: var(--po-type-ink);
	margin: 0;
	white-space: nowrap;
}

/*
 * The total is the conclusion of the row, so it carries the accent the page
 * already uses for figures that matter. It is NOT bigger: it is a sum of the
 * costs beside it, not a more important cost, and scaling it up would read as
 * the largest of them.
 */
.po-costs .po-costs__item--total .po-costs__value {
	color: var(--po-type-accent);
}

/* No container query and no media query, deliberately. `flex-wrap` already
   does the whole job: the costs sit side by side while there is room and wrap
   when there is not, against whatever container they were placed in. */