@charset "UTF-8";
/**
 * MLS Genie — sold homes: the sale page, the /sold/ archive and sale cards
 * (also used by the Sold Homes element). Colours, spacing and radii come from
 * the GenieBuilder tokens, so a site's theme settings carry through.
 */

/* ── Page frame ─────────────────────────────────────────────────────────── */

.mlsg-sold-page {
	box-sizing: border-box;
	width: 100%;
	max-width: 75rem;
	margin: 0 auto;
	padding: var(--mlsg-gb-space-lg) 1rem calc(var(--mlsg-gb-space-lg) * 2);
}

.mlsg-sold {
	display: flex;
	flex-direction: column;
	gap: calc(var(--mlsg-gb-space-lg) * 1.5);
	color: var(--mlsg-gb-color-text);
	font-size: 1rem;
	line-height: 1.6;
}

.mlsg-sold :where(h1, h2, h3, p, dl, dd, ul) {
	margin: 0;
}

.mlsg-sold__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mlsg-gb-space-sm);
	font-size: 0.9375rem;
	color: var(--mlsg-gb-color-muted);
}

.mlsg-sold__crumbs a,
.mlsg-sold__more-link {
	color: var(--mlsg-gb-color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.mlsg-sold__head {
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-space-sm);
}

.mlsg-sold__title {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	line-height: 1.2;
}

/* The sale's address keeps the space the sale column puts between rows. */
.mlsg-sold__address {
	--mlsg-address-gap: var(--mlsg-gb-space-md);
}

.mlsg-sold__address .mlsg-address__street {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	line-height: 1.2;
}

.mlsg-sold__lede,
.mlsg-sold__address .mlsg-address__place,
.mlsg-sold__muted {
	color: var(--mlsg-gb-color-muted);
}

.mlsg-sold__heading {
	font-size: 1.375rem;
	line-height: 1.3;
}

.mlsg-sold__heading--small {
	font-size: 1.0625rem;
}

.mlsg-sold__section {
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-space-md);
}

/* ── Hero: the photo on one side, the sale on the other ─────────────────── */

.mlsg-sold__hero {
	--mlsg-sold-hero-gap: calc(var(--mlsg-gb-space-lg) * 1.5);
	display: flex;
	gap: var(--mlsg-sold-hero-gap);
	align-items: flex-start;
}

/* Photo a little wider than the sale, as 1.15 to 1, padding included. */
.mlsg-sold__hero > .mlsg-sold__media {
	flex: 0 0 calc((100% - var(--mlsg-sold-hero-gap)) * 1.15 / 2.15);
	box-sizing: border-box;
	min-width: 0;
}

.mlsg-sold__hero > .mlsg-sold__sale {
	flex: 0 0 calc((100% - var(--mlsg-sold-hero-gap)) / 2.15);
	box-sizing: border-box;
	min-width: 0;
}

.mlsg-sold--photo-right .mlsg-sold__media {
	order: 2;
}

/* The main photo takes the property card photo settings (shape, fixed
   height, fit) from the Sale Details element or Site Settings › Property
   Cards. The photo fills the frame absolutely: the frame's height comes
   from its shape, not one a percentage can use, which left a band below a
   photo wider than the frame. */
.mlsg-sold__media {
	position: relative;
	aspect-ratio: var(--mlsg-gb-aspect, 4 / 3);
	height: var(--mlsg-gb-img-height, auto);
	overflow: hidden;
	border-radius: var(--mlsg-gb-radius-card);
	background: var(--mlsg-gb-color-placeholder);
}

.mlsg-sold__img,
.mlsg-sold-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mlsg-sold__media .mlsg-sold__img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: var(--mlsg-gb-img-fit, cover);
}

.mlsg-sold__noimg,
.mlsg-sold-card__noimg {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: var(--mlsg-gb-color-muted);
}

.mlsg-sold__badge,
.mlsg-sold-card__badge {
	position: absolute;
	top: var(--mlsg-gb-space-md);
	left: var(--mlsg-gb-space-md);
	padding: var(--mlsg-gb-space-xs) var(--mlsg-gb-space-sm);
	border-radius: var(--mlsg-gb-radius-badge);
	background: var(--mlsg-gb-color-badge-bg);
	color: var(--mlsg-gb-color-badge-text);
	font-size: var(--mlsg-gb-font-badge);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mlsg-sold__sale {
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-space-md);
}

/* Sale Headline element: the sold date line over the address. */
.mlsg-sold__headline {
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-space-md);
}

.mlsg-sold__eyebrow {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mlsg-gb-color-primary);
}

/* Figures fill the row, at least 12rem each; an element's Columns setting
   sizes them exactly (--mlsg-gap is the space between, for that sum). */
.mlsg-sold__figures {
	--mlsg-gap: var(--mlsg-gb-space-md);
	display: flex;
	flex-wrap: wrap;
	gap: var(--mlsg-gap);
}

.mlsg-sold__figures > .mlsg-sold__figure {
	flex: 1 1 min(100%, 12rem);
	box-sizing: border-box;
	min-width: 0;
}

.mlsg-sold__figure {
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-space-xs);
	padding: var(--mlsg-gb-space-md);
	border: 1px solid var(--mlsg-gb-color-border);
	border-radius: var(--mlsg-gb-radius-card);
}

.mlsg-sold__figure dt {
	font-size: 0.9375rem;
	color: var(--mlsg-gb-color-muted);
}

.mlsg-sold__figure dd {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.mlsg-sold__facts,
.mlsg-sold-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mlsg-gb-space-xs) var(--mlsg-gb-space-md);
	padding: 0;
	list-style: none;
}

.mlsg-sold__by {
	font-weight: 600;
}

.mlsg-sold__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mlsg-gb-space-sm);
	padding: var(--mlsg-gb-space-md);
	border-radius: var(--mlsg-gb-radius-card);
	background: var(--mlsg-gb-color-placeholder);
}

/* Two classes: the shared link colour rule for MLS Genie markup is one
   class plus :any-link, and would otherwise win on source order. */
.mlsg-sold__cta .mlsg-sold__cta-btn {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--mlsg-gb-space-lg);
	border-radius: var(--mlsg-gb-radius-badge);
	background: var(--mlsg-gb-color-primary);
	color: var(--mlsg-gb-color-badge-text);
	font-weight: 700;
	text-decoration: none;
}

/* Hover rules carry their own colour: a theme or kit link-hover rule
   (e.g. .elementor-kit-N a:hover, two classes and an element) would
   otherwise outrank the two-class rules above and recolour the text. */
.mlsg-sold__cta .mlsg-sold__cta-btn:hover,
.mlsg-sold__cta .mlsg-sold__cta-btn:focus-visible {
	color: var(--mlsg-gb-color-badge-text);
	filter: brightness(0.92);
}

.mlsg-sold a:focus-visible,
.mlsg-sold-grid a:focus-visible {
	outline: 2px solid var(--mlsg-gb-color-primary);
	outline-offset: 2px;
}

.mlsg-sold__remarks {
	white-space: pre-line;
}

.mlsg-sold__compare {
	font-weight: 600;
}

.mlsg-sold__map {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	min-height: 16rem;
	border: 0;
	border-radius: var(--mlsg-gb-radius-card);
}

/* ── Attribution: always last ───────────────────────────────────────────── */

.mlsg-sold__attribution {
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-space-md);
	padding-top: var(--mlsg-gb-space-lg);
	border-top: 1px solid var(--mlsg-gb-color-border);
}

.mlsg-sold__credits {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mlsg-gb-space-sm) var(--mlsg-gb-space-lg);
}

.mlsg-sold__credits > .mlsg-sold__credit {
	flex: 1 1 min(100%, 14rem);
	min-width: 0;
}

.mlsg-sold__credit dt {
	font-size: 0.9375rem;
	color: var(--mlsg-gb-color-muted);
}

.mlsg-sold-notice {
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-space-sm);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--mlsg-gb-color-muted);
}

.mlsg-sold-notice p {
	margin: 0;
}

/* ── Archive ────────────────────────────────────────────────────────────── */

.mlsg-sold__city-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mlsg-gb-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mlsg-sold__city-list .mlsg-sold__city {
	display: inline-flex;
	align-items: center;
	gap: var(--mlsg-gb-space-xs);
	min-height: 2.5rem;
	padding: 0 var(--mlsg-gb-space-md);
	border: 1px solid var(--mlsg-gb-color-border);
	border-radius: 999px;
	color: var(--mlsg-gb-color-text);
	text-decoration: none;
}

.mlsg-sold__city-list .mlsg-sold__city:hover {
	border-color: var(--mlsg-gb-color-primary);
	color: var(--mlsg-gb-color-text);
}

.mlsg-sold__city-list .mlsg-sold__city.is-current,
.mlsg-sold__city-list .mlsg-sold__city.is-current:hover {
	border-color: var(--mlsg-gb-color-primary);
	background: var(--mlsg-gb-color-primary);
	color: var(--mlsg-gb-color-badge-text);
}

.mlsg-sold__city-count {
	opacity: 0.75;
}

/* The city links on a computer; the same choice as a menu on a phone. */
.mlsg-sold__city-form {
	display: none;
}

.mlsg-sold__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mlsg-gb-space-sm);
}

.mlsg-sold__pages .page-numbers {
	display: inline-flex;
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mlsg-gb-color-border);
	border-radius: var(--mlsg-gb-radius-badge);
	color: var(--mlsg-gb-color-text);
	text-decoration: none;
}

.mlsg-sold__pages a.page-numbers:hover {
	border-color: var(--mlsg-gb-color-primary);
	color: var(--mlsg-gb-color-text);
}

.mlsg-sold__pages .page-numbers.current {
	border-color: var(--mlsg-gb-color-primary);
	background: var(--mlsg-gb-color-primary);
	color: var(--mlsg-gb-color-badge-text);
}

/* ── Sold Homes element ─────────────────────────────────────────────────── */

.mlsg-sold-widget {
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-space-lg);
}

.mlsg-sold-widget__title,
.mlsg-sold-widget .mlsg-sold__more {
	margin: 0;
}

/* ── Sale cards ─────────────────────────────────────────────────────────── */

/* Sale cards in columns: each card is an exact share of the row, less the
   space between (--mlsg-gap), so the last row keeps the columns too. */
.mlsg-sold-grid {
	--mlsg-sold-cols: 3;
	--mlsg-gap: var(--mlsg-gb-space-lg);
	display: flex;
	flex-wrap: wrap;
	gap: var(--mlsg-gap);
}

.mlsg-sold-grid > * {
	flex: 0 0 calc((100% - (var(--mlsg-sold-cols) - 1) * var(--mlsg-gap)) / var(--mlsg-sold-cols));
	min-width: 0;
	box-sizing: border-box;
}

.mlsg-sold-grid--cols-1 { --mlsg-sold-cols: 1; }
.mlsg-sold-grid--cols-2 { --mlsg-sold-cols: 2; }
.mlsg-sold-grid--cols-3 { --mlsg-sold-cols: 3; }
.mlsg-sold-grid--cols-4 { --mlsg-sold-cols: 4; }

.mlsg-sold-grid + .mlsg-sold-notice {
	margin-top: var(--mlsg-gb-space-lg);
}

.mlsg-sold-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--mlsg-gb-radius-card);
	background: var(--mlsg-gb-color-surface);
	box-shadow: var(--mlsg-gb-shadow-card);
	color: var(--mlsg-gb-color-text);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mlsg-sold-card:hover {
	box-shadow: var(--mlsg-gb-shadow-card-hover);
	transform: translateY(calc(-1 * var(--mlsg-sold-card-lift, 0px)));
}

/* Photo zoom on hover: off until an element sets --mlsg-sold-card-zoom. */
.mlsg-sold-card .mlsg-sold-card__img {
	transition: transform 0.35s ease;
}

.mlsg-sold-card:hover .mlsg-sold-card__img {
	transform: scale(var(--mlsg-sold-card-zoom, 1));
}

/* The photo takes the property-card photo settings (shape, fixed height,
   fit), from the element or Site Settings › Property Cards, so sale cards
   and listing cards match. */
.mlsg-sold-card__media {
	position: relative;
	display: block;
	aspect-ratio: var(--mlsg-gb-aspect, 4 / 3);
	height: var(--mlsg-gb-img-height, auto);
	overflow: hidden;
	background: var(--mlsg-gb-color-placeholder);
}

/* Two classes on purpose: Elementor's .elementor img { height: auto }
   outranks one class and left the photo at its own shape, taller or shorter
   than the frame. */
.mlsg-sold-card .mlsg-sold-card__img {
	height: 100%;
	object-fit: var(--mlsg-gb-img-fit, cover);
}

.mlsg-sold-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--mlsg-gb-space-xs);
	padding: var(--mlsg-gb-space-md);
	font-size: var(--mlsg-gb-font-meta);
}

.mlsg-sold-card__body p,
.mlsg-sold-card__facts {
	margin: 0;
}

.mlsg-sold-card__price {
	font-size: var(--mlsg-gb-font-price);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* The address component (mlsg-address.css); the card's own sizes. */
.mlsg-sold-card__where .mlsg-address__street {
	font-size: 1.0625rem;
	line-height: 1.35;
}

.mlsg-sold-card__where .mlsg-address__place,
.mlsg-sold-card__date,
.mlsg-sold-card__credit {
	color: var(--mlsg-gb-color-muted);
}

.mlsg-sold-card__credit {
	margin-top: auto;
	padding-top: var(--mlsg-gb-space-sm);
	border-top: 1px solid var(--mlsg-gb-color-border);
}

.mlsg-sold-grid__empty {
	margin: 0;
	color: var(--mlsg-gb-color-muted);
}

/* ── Agent sales pages (/transactions/{agent}/) ─────────────────────────── */

/* A figure's explanation under its value: "of original asking price". */
.mlsg-sold__figure .mlsg-sold__figure-note {
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--mlsg-gb-color-muted);
}

/* Drawn with the Agent Sales Page template: its sections set their own width
   and spacing, so the page frame steps aside. */
.mlsg-sold-page--designed {
	max-width: none;
	padding: 0;
}

.mlsg-sold__office {
	font-size: 1.0625rem;
	font-weight: 600;
}

.mlsg-sold-card__badge--buyer {
	border: 1px solid var(--mlsg-gb-color-primary);
	background: var(--mlsg-gb-color-surface);
	color: var(--mlsg-gb-color-primary);
}

.mlsg-sold__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mlsg-gb-space-md);
}

.mlsg-sold__filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--mlsg-gb-space-sm);
}

.mlsg-sold__filter {
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-space-xs);
	font-size: 0.9375rem;
	color: var(--mlsg-gb-color-muted);
}

.mlsg-sold__filter select {
	min-height: 2.75rem;
	padding: 0 var(--mlsg-gb-space-sm);
	border: 1px solid var(--mlsg-gb-color-border);
	border-radius: var(--mlsg-gb-radius-badge);
	background: var(--mlsg-gb-color-surface);
	color: var(--mlsg-gb-color-text);
	font-size: 1rem;
}

/* The pills carry the side on a computer; the menu carries it on a phone. */
.mlsg-sold__filter--side {
	display: none;
}

.mlsg-sold__filter-btn {
	min-height: 2.75rem;
	padding: 0 var(--mlsg-gb-space-lg);
	border: 0;
	border-radius: var(--mlsg-gb-radius-badge);
	background: var(--mlsg-gb-color-primary);
	color: var(--mlsg-gb-color-badge-text);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.mlsg-sold__filter select:focus-visible,
.mlsg-sold__filter-btn:focus-visible,
.mlsg-sold__city-list .mlsg-sold__city:focus-visible {
	outline: 2px solid var(--mlsg-gb-color-primary);
	outline-offset: 2px;
}

/* ── More sales: a button or on scroll (mlsg-sold-more.js) ──────────────── */

.mlsg-sold-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mlsg-gb-space-sm);
}

/* Without the script the page numbers stay; with it they give way. */
.mlsg-sold-more.is-live .mlsg-sold__pages,
.mlsg-sold-more__btn,
.mlsg-sold-more.is-done .mlsg-sold-more__btn {
	display: none;
}

.mlsg-sold-more.is-live[data-mode="button"]:not(.is-done) .mlsg-sold-more__btn,
.mlsg-sold-more.is-live.is-manual:not(.is-done) .mlsg-sold-more__btn {
	display: inline-flex;
}

.mlsg-sold-more__btn {
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 var(--mlsg-gb-space-lg);
	border: 1px solid var(--mlsg-gb-color-primary);
	border-radius: var(--mlsg-gb-radius-badge);
	background: var(--mlsg-gb-color-surface);
	color: var(--mlsg-gb-color-primary);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.mlsg-sold-more__btn:focus-visible {
	outline: 2px solid var(--mlsg-gb-color-primary);
	outline-offset: 2px;
}

.mlsg-sold-more.is-loading .mlsg-sold-more__btn {
	opacity: 0.6;
	cursor: progress;
}

.mlsg-sold-more__status {
	margin: 0;
	color: var(--mlsg-gb-color-muted);
	font-size: 0.9375rem;
}

.mlsg-sold-more__status:empty {
	display: none;
}

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 64rem) {
	.mlsg-sold-grid--cols-3,
	.mlsg-sold-grid--cols-4 {
		--mlsg-sold-cols: 2;
	}
}

@media (max-width: 48rem) {
	.mlsg-sold__hero {
		flex-direction: column;
		align-items: stretch;
	}

	.mlsg-sold__hero > .mlsg-sold__media,
	.mlsg-sold__hero > .mlsg-sold__sale {
		flex: 0 0 auto;
	}

	.mlsg-sold--photo-right .mlsg-sold__media {
		order: 0;
	}

	.mlsg-sold-grid {
		--mlsg-sold-cols: 1;
	}

	.mlsg-sold__sides {
		display: none;
	}

	.mlsg-sold__filter-form,
	.mlsg-sold__filter {
		width: 100%;
	}

	.mlsg-sold__filter--side {
		display: flex;
	}

	.mlsg-sold__cities {
		display: none;
	}

	.mlsg-sold__city-form {
		display: flex;
	}

	.mlsg-sold__filter-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlsg-sold-card,
	.mlsg-sold-card .mlsg-sold-card__img {
		transition: none;
	}
}