/**
 * PropOffice Property Closing — the band the property page ends on.
 *
 * Three parts, each optional, each independently absent: a call to action, a
 * promotion, and the agency's disclaimer. Measured against the reference
 * listing page:
 *
 *   call-to-action band   dark surface, 96px tall, copy left / action right
 *   promotion             full content width, its own artwork, no chrome
 *   disclaimer            small muted prose, no rule above it
 *
 * Every colour resolves through the design-system boundary. This stylesheet
 * names no brand value of its own — the band belongs to whatever palette the
 * website is already using.
 */

.po-closing {
	font-family: var(--po-type-text);

	--po-closing-gap: 32px;
	--po-closing-radius: 2px;

	/* The band inverts, exactly as the Resource card in Property Contact does,
	   and by the same route: the SURFACE reads a design token, and only the ink
	   that has to survive on top of it is a literal. White is not a brand
	   value — it is what is legible on a dark ground. */
	--po-closing-surface: var(--po-ds-color-text);
	--po-closing-ink: #ffffff;

	/* The action. Its ink is stated separately from the band's, because a
	   button on a dark surface is not the same relationship as text on it. */
	--po-closing-action: var(--po-ds-color-accent);
	--po-closing-action-ink: #ffffff;

	--po-closing-muted: var(--po-ds-color-muted);

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--po-closing-gap);
	container-type: inline-size;
}

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

/* ------------------------------------------------------ call to action ---- */

/*
 * Copy left, action right, pushed apart — the reference's composition.
 *
 * `space-between` rather than a two-track grid: the copy is one line and the
 * action is as wide as its words, so neither wants a fixed track. Wrapping is
 * what happens when they no longer fit, and it needs no breakpoint to do it.
 */
.po-closing__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	min-height: 96px;
	padding: 20px 32px;
	border-radius: var(--po-closing-radius);
	background: var(--po-closing-surface);
	color: var(--po-closing-ink);
}

.po-closing__cta-heading {
	margin: 0;
	font-size: 20px;
	font-weight: 650;
	line-height: 1.3;
	color: inherit;
	/* The copy takes the space it needs and yields it to the action first. */
	flex: 1 1 auto;
	min-width: 0;
}

.po-closing__cta-action {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 28px;
	border-radius: var(--po-closing-radius);
	background: var(--po-closing-action);
	color: var(--po-closing-action-ink);
	font-size: 14px;
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: opacity 160ms ease;
}

.po-closing__cta-action:hover,
.po-closing__cta-action:focus-visible {
	opacity: 0.88;
	color: var(--po-closing-action-ink);
	text-decoration: none;
}

/* ---------------------------------------------------------- promotion ---- */

.po-closing__promotion {
	display: block;
}

.po-closing__promotion-link {
	display: block;
	text-decoration: none;
}

/*
 * The artwork sets its own height. A promotion is somebody's designed banner,
 * so it is scaled to the width available and never cropped or letterboxed into
 * a ratio PropOffice chose for it.
 */
.po-closing__promotion-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--po-closing-radius);
}

/* --------------------------------------------------------- disclaimer ---- */

.po-closing__disclaimer {
	color: var(--po-closing-muted);
	font-size: 12px;
	line-height: 1.6;
}

.po-closing__disclaimer-heading {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 650;
	color: inherit;
}

.po-closing__disclaimer-body {
	margin: 0;
	color: inherit;
	/* Long prose, and often a single unbroken sentence. */
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- narrow ---- */

/*
 * Below the reference's own switch point the action stops sitting beside the
 * copy and takes the full width under it, which is what keeps a two-word
 * button from being squeezed to three lines.
 */
@container (max-width: 640px) {
	.po-closing {
		--po-closing-gap: 24px;
	}

	.po-closing__cta {
		align-items: stretch;
		flex-direction: column;
		justify-content: center;
		padding: 24px;
	}

	.po-closing__cta-heading {
		font-size: 18px;
	}

	.po-closing__cta-action {
		width: 100%;
	}
}

/* Containers only answer when something establishes one, and this component
   does. A viewport fallback covers being placed where containment is
   suppressed. */
@media (max-width: 640px) {
	.po-closing__cta {
		align-items: stretch;
		flex-direction: column;
		justify-content: center;
	}

	.po-closing__cta-action {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.po-closing__cta-action {
		transition: none;
	}
}

@media print {
	.po-closing__cta,
	.po-closing__promotion {
		display: none;
	}
}