/**
 * PropOffice Designs — Property Description.
 *
 * ONE stylesheet for every surface: the native PropOffice screen, the
 * [propoffice_property_description] 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-description`. The body
 * copy is authored HTML, so its own elements are styled through a descendant
 * selector rather than by adding classes the author cannot write.
 *
 * LAYOUT. Intrinsic and container-relative, never viewport-keyed. The heading
 * scales with the COMPONENT — a `container-type` is declared for it, because
 * `cqw` silently resolves against the viewport without one, which is the
 * opposite of what this file is written to do.
 */

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

	box-sizing: border-box;
	container-type: inline-size;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	color: var(--po-description-ink);
	font-size: 16px;
	line-height: 1.65;
}

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

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

/* The reference sets this heading large and light — it is the property's
   character, not a section label, so it carries weight through size rather
   than through boldness. It scales with the container so a sidebar placement
   does not get a 48px headline in a 300px column. */
/*
 * THE SHORT DESCRIPTION — Oswald 500 / 48px / 62px / #14181E.
 *
 * 🚨 THIS is where the large Oswald treatment belongs — not in the property
 * header. The property title above is 16px Inter; this marketing headline is
 * the page's one big line, and the two are routinely swapped because both look
 * like "the heading". They carry different information: the title identifies
 * the listing, this sells it.
 *
 * Written with two classes so a theme's `.entry-content h2` cannot take it, and
 * fixed rather than fluid because the reference's 48/62 is a measured pair, not
 * a ratio: `clamp()` reached 48px only at full width and quietly shrank the
 * headline everywhere else.
 */
.po-description .po-description__heading {
	margin: 0 0 8px;
	font-family: var(--po-type-display);
	font-size: 48px;
	font-weight: 500;
	line-height: 62px;
	color: var(--po-type-ink);
	overflow-wrap: anywhere;
}

/*
 * A 48px headline in a 300px column is four words a line. Below the reference's
 * own switch point it steps down — the only place the measured pair is allowed
 * to move, and it moves as a pair.
 */
@container (max-width: 560px) {
	.po-description .po-description__heading {
		font-size: 32px;
		line-height: 42px;
	}
}

/* ------------------------------------------------------------ captions ---- */

.po-description__captions {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 24px;
	margin: 0 0 20px;
	padding: 0;
	font-size: 13px;
	line-height: 20px;
}

.po-description__caption {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

/*
 * 🚨 The web reference gets a line to itself.
 *
 * The captions are a WRAPPING flex row, so while the reference was an ordinary
 * item it sat beside the street address on any column wide enough to hold both
 * — and read as the tail of the address rather than as a separate fact.
 * "12 Sekhukhune Street, Lady Selborne, Pretoria    Web Ref. RLS1207534" is one
 * line a visitor scans as one thing.
 *
 * `flex-basis: 100%` rather than a break element or a separate container: the
 * item claims the whole line, so the wrap happens BEFORE it whatever precedes
 * it and whatever the column width is. Nothing else has to know it is there,
 * and a caption added later still flows normally.
 */
.po-description__caption--reference {
	flex-basis: 100%;
}

.po-description__caption-label {
	margin: 0;
	color: var(--po-description-muted);
}

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

/* `dd` carries a 40px inherited indent in every browser's default stylesheet,
   which would push each value away from its own label. */
.po-description__caption-value {
	margin: 0;
	color: var(--po-description-ink);
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- body ---- */

/* THE BODY — Inter 500 / 16px / 24px / #14181E. */
.po-description .po-description__body {
	font-family: var(--po-type-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--po-type-ink);
	/* Authored prose can contain a pasted URL with no spaces in it, which would
	   otherwise widen the whole column. */
	overflow-wrap: anywhere;
}

/* The body is authored HTML: its elements are styled by descendant selector,
   because an author writing in an editor cannot add classes. Only the first
   paragraph's top margin is removed, so the prose sits tight under the
   captions without collapsing the rhythm between paragraphs. */
.po-description__body > :first-child {
	margin-top: 0;
}

.po-description__body > :last-child {
	margin-bottom: 0;
}

.po-description__body p {
	margin: 0 0 1em;
}

.po-description__body ul,
.po-description__body ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.po-description__body li {
	margin: 0 0 0.35em;
}

.po-description__body h2,
.po-description__body h3,
.po-description__body h4 {
	margin: 1.4em 0 0.5em;
	line-height: 1.35;
	font-weight: 600;
}

.po-description__body a {
	color: inherit;
	text-decoration: underline;
}

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

/* Never `outline: none`. A link inside authored prose is still a control. */
.po-description a:focus-visible {
	outline: 2px solid var(--po-ds-color-primary);
	outline-offset: 2px;
}