/**
 * PropOffice Designs — Property Overview.
 *
 * ONE stylesheet for every surface: the native PropOffice screen, the
 * [propoffice_property_overview] 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: `var(--po-ds-color-text)`. No brand colour is
 * hard-coded anywhere in this file.
 *
 * ISOLATION. Every selector is namespaced under `.po-overview`, and the list
 * resets the bullets and margins themes impose on `ul`.
 *
 * LAYOUT. Intrinsic and container-relative, never viewport-keyed. An Overview
 * is placed in a full-width hero and in a one-third sidebar, and there is no
 * viewport width at which the right answer is knowable — so the price row
 * stacks when its own container is narrow, not when the phone is.
 */

.po-overview {
	font-family: var(--po-type-text);
	--po-overview-ink: var(--po-ds-color-text);
	--po-overview-muted: var(--po-ds-color-muted);
	--po-overview-border: var(--po-ds-color-border);
	--po-overview-surface: var(--po-ds-color-surface);
	--po-overview-accent: var(--po-ds-color-primary);
	--po-overview-focus: var(--po-ds-color-primary);

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;

	/* Makes `cqw` below mean "percent of THIS component's width". Without a
	   query container those units silently resolve against the viewport, which
	   would size the price by the window — exactly the viewport-keyed sizing
	   this file is written to avoid. */
	container-type: inline-size;
	color: var(--po-overview-ink);
	font-size: 15px;
	line-height: 1.5;
}

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

/* ------------------------------------------------------------- eyebrow ---- */

.po-overview__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--po-overview-muted);
}

/* ------------------------------------------------------------- heading ---- */

/*
 * THE PROPERTY TITLE — Inter 600 / 16px / 24px / #14181E.
 *
 * 🚨 SIXTEEN pixels. It is the page's heading — an `<h1>` on the Property
 * Page, an `<h2>` where the component is embedded — and every instinct (and
 * every theme) says
 * a heading should be big — but in the reference this line is the same size as
 * body text. The large 48px Oswald treatment belongs to the SHORT DESCRIPTION
 * much further down the page; putting it here turns a quiet identifying line
 * into the loudest thing on the screen and leaves the real headline with
 * nothing to be.
 *
 * Two classes so a theme's `.entry-content h1`/`h2` cannot win. The level is
 * the caller's choice, so the styling is deliberately attached to the class
 * and never to the element — the property title looks the same either way.
 */
.po-overview .po-overview__title {
	margin: 0 0 4px;
	font-family: var(--po-type-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--po-type-ink);
	/* A property title is authored text and can be very long. It wraps, and in
	   the worst case breaks, rather than widening its container. */
	overflow-wrap: anywhere;
}

.po-overview__location {
	margin: 0;
	color: var(--po-overview-muted);
	overflow-wrap: anywhere;
}


/* -------------------------------------------------------------- header ---- */

/*
 * Two columns of roughly equal width: identity on the left, counts on the right.
 *
 * 🚨 The price must not share a row with the statistics. They are different
 * kinds of fact, and side by side a price reads as one more number in the set.
 *
 * `1fr 1fr` rather than a percentage pair so the gap comes out of the track
 * sizing rather than out of the columns, and `align-items: start` so a short
 * counts column does not stretch to the height of a long title.
 */
.po-overview__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 24px 32px;
	margin-top: 12px;
}

.po-overview__identity {
	min-width: 0;
}

/* The counts sit at the top of their column, beside the price rather than the
   title, which is where the reference puts them. */
.po-overview__figures {
	min-width: 0;
}

/*
 * Below the reference's own switch point the two columns stop being columns.
 * A 50/50 split inside a 416px sidebar or a phone leaves the title breaking
 * after every second word.
 */
@container (max-width: 560px) {
	.po-overview__header {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* --------------------------------------------------------------- price ---- */

/*
 * The top row: the chooser, and in state 2 the original price beside it —
 * "USD ⌄   R3,900,000". Small and secondary, both of them.
 *
 * In state 1 the chooser sits here alone: the specification is explicit that
 * the original must NOT be repeated beside the currency when it is already the
 * large figure below.
 *
 * `wrap` so the pair stacks rather than overflows in a narrow sidebar, and the
 * deciding width is the component's container rather than the window, which is
 * why there is no media query here. On a tablet the row may wrap, but the
 * currency and the original price stay grouped because they are the only two
 * things in it.
 */
.po-overview__price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	min-width: 0;
	margin-top: 6px;
}

/*
 * THE PRICE — Oswald 700 / 36px / 47px / #B10028. Measured, not inferred.
 *
 * 🚨 Written as `.po-overview .po-overview__price`, not as the single class.
 *
 * A block theme styles the content area by element — `.entry-content p` is
 * (0,1,1) and beats a lone `.po-overview__price` at (0,1,0). The property page
 * would then inherit the theme's body face and size for its most important
 * figure, which is exactly what it was doing: Manrope 32px instead of Oswald
 * 36px. Two classes make it (0,2,0) and the measurement holds on any theme,
 * with no `!important` anywhere.
 */
.po-overview .po-overview__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 6px;
	min-width: 0;
	margin: 0;
	font-family: var(--po-type-display);
	font-size: 36px;
	font-weight: 700;
	line-height: 47px;
	color: var(--po-type-accent);
}

/* The approximation mark sits with the number rather than in the note, because
   it has to be visible at a glance on the figure itself. */
.po-overview__approx {
	color: var(--po-overview-muted);
	font-weight: 500;
}

.po-overview__approx[hidden] {
	display: none;
}

.po-overview__amount {
	/* Long amounts in a narrow sidebar break rather than overflow. */
	overflow-wrap: anywhere;
}



/*
 * THE ORIGINAL PRICE, beside the chooser — state 2 only.
 *
 * 🚨 Small and grey ON PURPOSE, and that is the whole hierarchy of this card:
 * the large red figure is the currency the visitor asked to read in, and this
 * is the quieter statement of what the agency actually asked. Giving the two
 * equal weight leaves a reader with two prices and no way to tell which one is
 * the listing.
 *
 * Hidden in state 1, where the large figure below already IS the original.
 */
.po-overview__original {
	font-family: var(--po-type-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--po-type-muted);
	white-space: nowrap;
}

.po-overview__original[hidden] {
	display: none;
}

/* ------------------------------------------------------------ currency ---- */

/*
 * 🚨 Compact, because the options are now three letters.
 *
 * A `<select>` sizes itself to its LONGEST option. While those read
 * "ZAR — South African Rand (listed)" the control was as wide as the column it
 * sat in — a chooser competing with the price, and real overflow at 300px. ISO
 * codes make it intrinsically small, so it can simply size to its content.
 */
.po-overview__currency {
	display: inline-flex;
	min-width: 0;
	max-width: 100%;
	margin-bottom: 2px;
}

/* Visually hidden, still announced. Never `display: none`, which would take it
   out of the accessibility tree and leave the select unnamed. */
.po-overview__currency-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.po-overview__currency-select {
	/* Sized to its content — three letters plus the arrow — never to the
	   container. `width: auto` is the whole point of the ISO-code change. */
	width: auto;
	max-width: 100%;
	padding: 4px 8px;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--po-overview-muted);
	background: transparent;
	border: 1px solid var(--po-overview-border);
	border-radius: 4px;
	cursor: pointer;
}

.po-overview__currency-select:hover,
.po-overview__currency-select:focus-visible {
	color: var(--po-overview-ink);
}

.po-overview__note {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--po-overview-muted);
}

.po-overview__note[hidden] {
	display: none;
}

/* --------------------------------------------------------------- stats ---- */

/*
 * The headline counts.
 *
 * 🚨 ICON + NUMBER on one line, LABEL beneath them.
 *
 * That arrangement is the whole difference between this row and the Features
 * list further down the page, where an icon and its label read as one phrase on
 * a single line. Same icons, same canonical concepts, deliberately different
 * shape — so the two are never collapsed into one component.
 *
 * Still an inline wrapping flow: each count takes only the width it needs and
 * the row breaks naturally when it runs out. Nothing here may give a statistic
 * a width, a flex-basis or a track, or it stops sharing a line with the others.
 */
.po-overview__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.po-overview__stat {
	/* Only the space it needs: never grow to fill the line, never shrink below
	   the words, never be assigned a track. */
	flex: 0 0 auto;
	/* Column, because the label sits UNDER the figure. */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--po-overview-ink);
}

/* The icon and the number, side by side. */
.po-overview__stat-figure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* "6" and its icon are one token and must not break apart. */
	white-space: nowrap;
}

.po-overview__stat-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--po-overview-ink);
}

.po-overview__stat-value {
	font-size: 18px;
	font-weight: 650;
	line-height: 1.2;
	white-space: nowrap;
}

.po-overview .po-overview__stat-label {
	font-family: var(--po-type-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--po-type-muted);
	text-align: center;
}

.po-overview .po-overview__stat-value {
	font-family: var(--po-type-text);
	color: var(--po-type-ink);
}

/* ----------------------------------------------------------- reference ---- */

.po-overview__reference {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--po-overview-muted);
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- focus ---- */

/* Never `outline: none`. */
.po-overview select:focus-visible,
.po-overview a:focus-visible,
.po-overview button:focus-visible {
	outline: 2px solid var(--po-overview-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.po-overview * {
		transition: none !important;
	}
}