/**
 * PropOffice Property Page — the single-property composition.
 *
 * Measured against the reference listing page rather than guessed:
 *   content width      1312px
 *   reading column      752px
 *   companion column    416px
 *   the two columns are pushed apart (space-between), leaving a 144px gutter
 *   the gallery spans the full 1312px ABOVE the split
 *   section rhythm      40px, with a 10px grey band between sections
 *
 * This stylesheet styles the PAGE ONLY — the frame, the columns, the rhythm.
 * Every section's interior belongs to that component's own stylesheet, so
 * there is deliberately not one rule here that reaches inside a `.po-media`,
 * `.po-overview`, `.po-features` or any other component's markup.
 */

.po-page {
	--po-page-width: 1312px;
	--po-page-main: 752px;
	--po-page-sidebar: 416px;
	--po-page-rhythm: 40px;
	/* The reference's section separator: a 10px grey band. */
	--po-page-band: 10px;
	/*
	 * The one colour the page frame uses, taken from the central design-system
	 * boundary so the hairline between sections matches whatever the website's
	 * own surface palette is. The page names no brand value of its own.
	 */
	--po-page-rule: var(--po-ds-color-background);
	--po-page-gutter: clamp(16px, 4vw, 24px);
	/*
	 * How far the sticky sidebar sits below the top of the viewport, and
	 * therefore also how much of the viewport it may not occupy. Declared
	 * here with its siblings rather than left to an inline fallback so the
	 * page states the value once: a host whose header pins itself to the
	 * top raises it by redeclaring `--po-page-sticky-top` on `.po-page`.
	 */
	--po-page-sticky-top: 24px;

	box-sizing: border-box;
	width: 100%;
	/*
	 * 🚨 The gutter is added to the cap, not taken out of it.
	 *
	 * `--po-page-width` is the CONTENT width the reference was measured at, so
	 * the box has to be that plus its own padding. Capping the border-box at
	 * 1312px instead subtracted the padding from the measurement and left 1264
	 * of content - which also cost the column gutter 48px, because the gutter
	 * is whatever the two fixed tracks do not use: 1264 - 752 - 416 = 96, where
	 * the reference reads 144. Every number in the block above was then wrong
	 * by the same 48px, and no viewport could reach the declared width because
	 * the clamp never yields zero padding.
	 */
	max-width: calc(var(--po-page-width) + (var(--po-page-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--po-page-gutter);
	container-type: inline-size;
}

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

/* The gallery: full content width, above the columns. */
.po-page__hero {
	margin-block-end: var(--po-page-rhythm);
}

/*
 * The reading column and its companion.
 *
 * Grid rather than flex with a fixed gutter: the reference's columns do not
 * add up to its container, and reproducing that as `space-between` would make
 * the gutter grow without limit on wide screens. Naming both tracks keeps the
 * 752/416 relationship and lets the leftover become the gutter.
 */
.po-page__body {
	display: grid;
	grid-template-columns: minmax(0, var(--po-page-main)) var(--po-page-sidebar);
	justify-content: space-between;
	column-gap: 48px;
	align-items: start;
}

.po-page--no-sidebar .po-page__body {
	grid-template-columns: minmax(0, 1fr);
}

.po-page__main,
.po-page__sidebar {
	min-width: 0;
}

/*
 * The companion column follows the reader.
 *
 * The enquiry form and the agent are the page's two actions, and the reading
 * column beside them is long — a visitor who has read down to the features has
 * scrolled the contact details off the screen. Sticky keeps them reachable
 * without duplicating them further down the page.
 *
 * 🚨 `align-self: start` is what makes this work at all. A grid item stretches
 * to its row's height by default, and a sticky element cannot travel inside a
 * box already as tall as the thing it scrolls against — the sidebar would
 * simply never stick. The grid sets `align-items: start` for this reason; it is
 * repeated here so the behaviour survives somebody changing the grid.
 */
.po-page__sidebar {
	align-self: start;
	position: sticky;
	/* Clear of any host header that pins itself to the top. */
	top: var(--po-page-sticky-top);
}

/*
 * 🚨 THE SIDEBAR IS NEVER AN INDEPENDENTLY SCROLLING VIEWPORT.
 *
 * It used to carry `max-height: calc(100vh - 48px)` with `overflow-y: auto`, to
 * stop a long agent card outrunning the sticky offset. That cure was worse than
 * the disease: MEASURED on the live Kava install at 1440x720, the cap computed
 * to 672px around 723px of content, so 51px — the foot of the enquiry form —
 * sat behind a scrollbar nobody asked for. Same page at 1440x1000: cap 952px,
 * nothing clipped. The defect was invisible at the height you happened to test
 * and appeared at every height shorter than the sidebar.
 *
 * The fear it was written against is also overstated. A sticky element taller
 * than the viewport pins at `top` and its foot stays below the fold WHILE it is
 * pinned — but the moment the reading column ends it unpins and scrolls away
 * normally, so the foot is reached by scrolling, exactly as on any long page.
 * Content below the fold is not content that is unreachable.
 *
 * So the sidebar takes its natural height and the page scrolls, which is the
 * pattern the Type 2 action rail already uses: sticky, `align-self: start`, no
 * cap, no overflow. Nothing here may reintroduce a height limit or an overflow
 * value — `hidden` would clip silently and `auto` brings the scrollbar back.
 */
.po-page .po-page__sidebar {
	max-height: none;
	overflow: visible;
}

/*
 * Section rhythm.
 *
 * The rule belongs to the gap between sections, so the last section of a
 * column never leaves a hanging line — and a section that renders nothing was
 * dropped before it reached the markup, so no empty gap can appear either.
 */
/*
 * 🚨 THERE IS NO BLANKET DIVIDER BETWEEN SECTIONS.
 *
 * This rule used to be `.po-page__section + .po-page__section`, which drew the
 * 10px band between EVERY pair of sections in the reading column. That is three
 * different jobs collapsed into one selector, and it got two of them wrong:
 *
 *   overview  -> details       needs a 1px line, not a 10px band
 *   details   -> rental        needs NOTHING; the terms, the costs and the
 *   rental    -> costs         description follow the details as one
 *   costs     -> description   continuous statement about this property
 *   description -> features    needs the 10px band
 *
 * So the default is now "no divider", and each transition that wants one asks
 * for it by name below. That default also does the work of the data rule: a
 * section that renders nothing is dropped before it reaches the markup, and
 * with no `+` selector in play its absence cannot leave a line behind.
 *
 * Spacing is still shared — every section keeps the rhythm; only the LINE is
 * per-transition.
 */
.po-page__section + .po-page__section {
	margin-block-start: var(--po-page-rhythm);
	padding-block-start: var(--po-page-rhythm);
}

/*
 * TYPE B — the 1px line ABOVE Secondary Details.
 *
 * 🚨 ABOVE, not below. It separates the primary summary (price, title, tag and
 * the bedroom/bathroom/parking counts) from the secondary facts beneath it.
 * There is deliberately NO second line below Secondary Details: the financial
 * costs and the description continue the same passage, and a rule there would
 * cut a sentence in half.
 *
 * A hairline rather than the band because this is a division WITHIN the
 * property summary, not a move to a new major section.
 *
 * 🚨 Nothing is claimed for `rental` or `costs`, and that is the decision, not
 * an omission. They continue the passage Secondary Details opens — the terms of
 * the tenancy and what the property costs to hold are more of the same
 * statement, not a new one — so they take the shared rhythm above and no line.
 *
 * It also means their absence costs nothing. Either section renders '' when the
 * property records none of its facts, the page presenter drops it before the
 * markup, and with no rule claimed there is none left stranded above the
 * description.
 */
.po-page__section--details {
	border-block-start: 1px solid var(--po-page-rule);
}

/*
 * TYPE D — the 10px grey band between MAJOR sections.
 *
 * The reference separates its major sections with a band of colour the eye
 * reads as a break in the document, not a hairline: at 1px these sections run
 * together and the page reads as one long column of text.
 *
 * Named one by one rather than applied to "every section after the details",
 * so that adding a section to the page is a decision about which divider it
 * gets rather than something the stylesheet guesses.
 */
.po-page__section--features,
.po-page__section--location,
.po-page__section--onshow,
.po-page__section--finance {
	border-block-start: var(--po-page-band) solid var(--po-page-rule);
}

/* The breadcrumb sits under the gallery as a navigation strip, not a section
   with a rule above it. */
.po-page__section--breadcrumb {
	margin-block-end: 0;
}

.po-page__sidebar .po-page__section + .po-page__section {
	margin-block-start: 24px;
	padding-block-start: 24px;
	/* A hairline, deliberately: the 10px band belongs to the reading column's
	   major sections, and repeated down a narrow companion column it reads as
	   striping rather than separation. */
	border-block-start-width: 1px;
}

/*
 * The closing band: full content width again, below both columns.
 *
 * Outside `__body` rather than inside it, so it spans the whole 1312px the way
 * the hero does. Placed within the grid it would become a row of the reading
 * column — narrower than the gallery above it and beside an empty gutter.
 */
.po-page__outro {
	margin-block-start: var(--po-page-rhythm);
	padding-block-start: var(--po-page-rhythm);
	border-block-start: 1px solid var(--po-page-rule);
}

/*
 * Below the reference's own switch point the companion column stops being a
 * column. It moves under the reading content rather than being squeezed, which
 * is what the reference does and what keeps the enquiry form usable.
 */
@container (max-width: 1023px) {
	.po-page__body {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--po-page-rhythm);
	}

	/*
	 * 🚨 Single column: the sidebar must STOP being sticky.
	 *
	 * Pinned here it would park the enquiry form over the content the visitor
	 * is scrolling to read, and the capped height would give it its own inner
	 * scrollbar inside the page's.
	 */
	.po-page__sidebar {
		position: static;
		max-height: none;
		overflow-y: visible;
		padding-block-start: var(--po-page-rhythm);
		border-block-start: 1px solid var(--po-page-rule);
	}
}

@container (max-width: 640px) {
	.po-page {
		--po-page-rhythm: 28px;
	}
}

/*
 * Containers only answer when something establishes one, and the page element
 * itself does. A viewport fallback covers the case where the page is placed
 * somewhere that suppresses containment.
 */
@media (max-width: 1023px) {
	.po-page__body {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--po-page-rhythm);
	}

	.po-page__sidebar {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

@media print {
	.po-page__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.po-page__sidebar {
		position: static;
		display: none;
	}
}