/*
 * Atrium — listings.css
 *
 * Scope (owner C1): listings browsing UI. Property cards (grid + list), facts list (.atr-facts),
 * badges, prices, the favorite (heart) button, the property archive (filters bar + mobile sheet,
 * Buy/Rent segmented control, results bar, chips, grid/list toggle, listing grids, alerts,
 * no-results, listing disclaimer), the hero/inline search form (.atr-search--hero /
 * .atr-search--inline), neighborhood tiles (.atr-neighborhood-tile, .atr-neighborhood-grid —
 * shared with the homepage), the Saved Homes page, the save toast and shortcode notices.
 *
 * Every color, font, radius, space and shadow comes from --atr-* tokens (tokens.css + the
 * Customizer's inline tokens), so components follow all six presets and dark contexts. Over
 * photos only rgb() black/white overlays are used. Breakpoints: 600 / 782 / 1024 / 1280px.
 *
 * Note: `.atr-search` on its own is the search-results page wrapper (search.php), so the search
 * form is only ever styled through its --hero / --inline modifiers and its own elements.
 */

/* ==========================================================================
   0. Shared helpers
   ========================================================================== */

/* Elements toggled with the `hidden` attribute keep it even where a display value is set below. */
.atr-saved__toolbar[hidden],
.atr-saved__empty[hidden],
.atr-saved__form[hidden],
.atr-saved__grid[hidden],
.atr-alerts[hidden],
.atr-sort__submit[hidden],
.atr-toast[hidden],
.atr-saved-link__count[hidden] {
	display: none;
}

/* ==========================================================================
   1. Prices, badges & facts (shared with the single property page)
   ========================================================================== */

.atr-price {
	font-family: var(--atr-font-heading);
	font-weight: var(--atr-heading-weight);
	letter-spacing: var(--atr-heading-tracking);
	line-height: 1.1;
	font-variant-numeric: lining-nums tabular-nums;
}

.atr-price__amount {
	white-space: nowrap;
}

.atr-price__suffix {
	margin-inline-start: 0.12em;
	font-family: var(--atr-font-body);
	font-size: 0.55em;
	font-weight: var(--atr-body-weight);
	letter-spacing: 0;
	color: var(--atr-color-muted-ink);
}

.atr-price--text {
	font-size: 0.8em;
}

.atr-price--struck {
	color: var(--atr-color-muted-ink);
}

.atr-price--struck s {
	text-decoration-thickness: 1px;
	text-decoration-color: currentColor;
}

/*
 * Badges: the component (and its per-status colors from --atr-badge-{slug}-bg/-fg, with the
 * translucent default for unknown statuses) lives in base.css. Listings only adapt it for photos.
 */
/* Unknown statuses keep base.css's translucent default; a hairline keeps them visible on plain backgrounds. */
.atr-badge--status {
	--atr-badge-border: color-mix(in srgb, var(--atr-color-text) 18%, transparent);
}

.atr-badge--for-sale,
.atr-badge--for-rent,
.atr-badge--coming-soon,
.atr-badge--pending,
.atr-badge--sold {
	--atr-badge-border: transparent;
}

.atr-property-card__badges .atr-badge {
	font-size: max(var(--atr-step--2), 0.6875rem);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	backdrop-filter: blur(10px) saturate(1.3);
}

/* Facts list: icon + value + label (beds, baths, area, lot, garage, year). */
.atr-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--atr-space-2) var(--atr-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--atr-step--1);
	line-height: 1.4;
	color: var(--atr-color-text);
	font-variant-numeric: lining-nums tabular-nums;
}

.atr-facts__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-inline-size: 0;
	margin: 0;
}

.atr-facts__icon {
	flex: none;
	inline-size: 1.25em;
	block-size: 1.25em;
	color: var(--atr-color-accent-ink);
}

.atr-facts__text {
	min-inline-size: 0;
}

.atr-facts__value {
	font-weight: var(--atr-body-strong);
}

.atr-facts__label {
	color: var(--atr-color-muted-ink);
}

/* ==========================================================================
   2. Favorite (heart) button
   ========================================================================== */

.atr-favorite {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--atr-color-border);
	border-radius: 50%;
	background: var(--atr-color-bg);
	color: var(--atr-color-text);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--atr-transition), color var(--atr-transition), border-color var(--atr-transition), box-shadow var(--atr-transition);
}


.atr-favorite:hover {
	border-color: var(--atr-color-text);
	color: var(--atr-color-accent-ink);
}

.atr-favorite:focus-visible {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--atr-color-bg);
}

.atr-favorite__icons {
	display: grid;
	place-items: center;
	pointer-events: none;
}

.atr-favorite__icon {
	grid-area: 1 / 1;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	transition: opacity var(--atr-transition), transform var(--atr-transition);
}

.atr-favorite__icon--on {
	opacity: 0;
	transform: scale(0.6);
	color: var(--atr-color-accent-ink);
}

.atr-favorite[aria-pressed="true"] .atr-favorite__icon--on {
	opacity: 1;
	transform: scale(1);
}

.atr-favorite[aria-pressed="true"] .atr-favorite__icon--off {
	opacity: 0;
}

.atr-favorite.is-animating .atr-favorite__icon--on {
	animation: atr-heart-pop 0.45s var(--atr-ease);
}

@keyframes atr-heart-pop {
	0% {
		transform: scale(0.6);
	}

	55% {
		transform: scale(1.22);
	}

	100% {
		transform: scale(1);
	}
}

/* Text variant: heart + visible "Save" / "Saved" label. */
.atr-favorite--text {
	display: inline-flex;
	gap: 0.55em;
	inline-size: auto;
	min-block-size: 2.75rem;
	block-size: auto;
	padding-inline: 1em 1.15em;
	border-color: var(--atr-color-field-border);
	border-radius: var(--atr-radius-button);
	font-family: var(--atr-font-accent);
	font-size: var(--atr-step--1);
	font-weight: var(--atr-weight-strong);
	letter-spacing: calc(var(--atr-button-tracking) + var(--atr-button-caps-boost));
	text-transform: var(--atr-button-transform);
}

.atr-favorite__text {
	line-height: 1.2;
}

/* ==========================================================================
   3. Property card
   ========================================================================== */

.atr-property-card {
	--atr-card-pad: clamp(var(--atr-space-5), 2.2vw, var(--atr-space-6));
	position: relative;
	container: atr-card / inline-size;
	block-size: 100%;
	min-inline-size: 0;
	color: var(--atr-color-text);
}

.atr-property-card__inner {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	border-radius: var(--atr-radius);
	transition: transform var(--atr-transition), box-shadow var(--atr-transition);
}

/* --- Media ---------------------------------------------------------------- */

/* No stacking context here: the heart (z-index 2) must sit above the stretched title link. */
.atr-property-card__media {
	position: relative;
	order: -1;
	aspect-ratio: var(--atr-card-ratio, 4 / 3);
	overflow: hidden;
	border-radius: var(--atr-radius-image);
	background: var(--atr-color-surface);
}

.atr-property-card__image {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	border-radius: inherit;
	transition: transform 0.7s var(--atr-ease), filter var(--atr-transition);
}

.atr-property-card__media .atr-placeholder {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border-radius: inherit;
}

.atr-property-card--no-image .atr-property-card__media {
	background: var(--atr-color-surface);
}

.atr-card-hover--zoom .atr-property-card:hover .atr-property-card__image,
.atr-card-hover--zoom .atr-property-card:focus-within .atr-property-card__image {
	transform: scale(1.04);
}

.atr-property-card--sold .atr-property-card__image {
	filter: saturate(0.75);
}

.atr-property-card__badges {
	position: absolute;
	z-index: 1;
	inset-block-start: var(--atr-inset, 0.75rem);
	inset-inline-start: var(--atr-inset, 0.75rem);
	display: flex;
	flex-wrap: wrap;
	gap: var(--atr-space-1);
	max-inline-size: calc(100% - 3 * var(--atr-inset, 0.75rem) - 2.5rem);
	pointer-events: none;
}

.atr-property-card__favorite {
	position: absolute;
	z-index: 2;
	inset-block-start: var(--atr-inset, 0.75rem);
	inset-inline-end: var(--atr-inset, 0.75rem);
	border-color: transparent;
	background: color-mix(in srgb, var(--atr-color-bg) 85%, transparent);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 6px 16px -6px rgb(0 0 0 / 0.3);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	backdrop-filter: blur(10px) saturate(1.3);
}

/* Extends the card heart's touch target to 44 × 44px without changing its visual size. */
.atr-property-card__favorite::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
}

.atr-property-card__favorite:hover {
	border-color: transparent;
	background: var(--atr-color-bg);
}

.atr-property-card__ribbon {
	position: absolute;
	z-index: 1;
	inset-block-end: var(--atr-inset, 0.75rem);
	inset-inline-start: var(--atr-inset, 0.75rem);
	display: flex;
	align-items: center;
	gap: 0.5em;
	max-inline-size: calc(100% - 2 * var(--atr-inset, 0.75rem));
	margin: 0;
	padding: 0.4em 0.8em;
	border-radius: var(--atr-radius-sm);
	background: color-mix(in srgb, var(--atr-color-bg) 92%, transparent);
	color: var(--atr-color-text);
	font-family: var(--atr-font-accent);
	font-size: max(var(--atr-step--2), 0.75rem);
	line-height: 1.3;
	pointer-events: none;
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	backdrop-filter: blur(10px) saturate(1.3);
}

.atr-property-card__ribbon-icon {
	flex: none;
	inline-size: 1.1em;
	block-size: 1.1em;
	color: var(--atr-color-accent-ink);
}

.atr-property-card__ribbon-label {
	font-weight: var(--atr-weight-strong);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Body ----------------------------------------------------------------- */

.atr-property-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--atr-space-2);
	min-inline-size: 0;
	padding-block: var(--atr-space-4) 0;
}

.atr-property-card__pricing {
	order: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--atr-space-1) var(--atr-space-3);
}

.atr-property-card__title {
	order: 2;
	margin: 0;
	font-family: var(--atr-font-body);
	font-size: var(--atr-step-0);
	font-weight: var(--atr-body-strong);
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.atr-property-card__location {
	order: 3;
	display: flex;
	align-items: center;
	gap: 0.45em;
	min-inline-size: 0;
	margin: 0;
	font-size: var(--atr-step--1);
	line-height: 1.4;
	color: var(--atr-color-muted-ink);
}

.atr-property-card__excerpt {
	order: 4;
	display: none;
	margin: 0;
	font-size: var(--atr-step--1);
	line-height: var(--atr-line-height);
	color: var(--atr-color-muted-ink);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.atr-property-card__facts {
	order: 5;
}

.atr-property-card__courtesy {
	order: 6;
	margin: 0;
	font-size: max(var(--atr-step--1), 0.8125rem);
	line-height: 1.45;
	color: var(--atr-color-muted-ink);
}

/* Stretched link: the whole card opens the listing; the heart stays clickable above it. */
.atr-property-card__link {
	color: inherit;
	text-decoration: none;
}

.atr-property-card__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: var(--atr-radius);
}

.atr-property-card__link:hover,
.atr-property-card:hover .atr-property-card__link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.atr-property-card__link:focus {
	outline: none;
}

.atr-property-card__link:focus-visible::after {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 3px;
}

/* Price block */
.atr-property-card__price {
	margin: 0;
	font-size: var(--atr-step-2);
	color: var(--atr-color-text);
}

.atr-property-card__price.atr-price--text {
	font-size: var(--atr-step-1);
}

.atr-property-card__price.atr-price--struck {
	font-size: var(--atr-step-1);
	color: var(--atr-color-muted-ink);
}

.atr-property-card__sold {
	flex-basis: 100%;
	margin: 0;
	font-family: var(--atr-font-accent);
	font-size: max(var(--atr-step--2), 0.75rem);
	font-weight: var(--atr-weight-strong);
	line-height: 1.3;
	letter-spacing: var(--atr-label-tracking);
	text-transform: uppercase;
	color: var(--atr-color-accent-ink);
}

.atr-property-card__note {
	margin: 0;
	font-size: var(--atr-step--1);
	color: var(--atr-color-muted-ink);
}

.atr-property-card__pin {
	flex: none;
	inline-size: 1.05em;
	block-size: 1.05em;
	color: var(--atr-color-accent-ink);
}

.atr-property-card__location-text {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Facts row on cards: hairline dividers between items. Each item is pulled back 1px so the
 * divider of whichever item starts a line falls outside the list and is clipped — the row can
 * wrap at any width without a stray leading rule.
 */
.atr-property-card__facts {
	flex-wrap: wrap;
	gap: var(--atr-space-2) 0;
	margin-block-start: auto;
	margin-inline-start: calc(-1 * var(--atr-space-3));
	padding-block-start: var(--atr-space-3);
	overflow: hidden;
	background: linear-gradient(var(--atr-color-border), var(--atr-color-border)) no-repeat var(--atr-space-3) 0 / 100% 1px;
}

.atr-property-card__facts .atr-facts__item {
	margin-inline-start: -1px;
	padding-inline: var(--atr-space-3);
	border-inline-start: 1px solid var(--atr-color-border);
	white-space: nowrap;
}

.atr-property-card__facts .atr-facts__icon {
	inline-size: 1.15em;
	block-size: 1.15em;
}

[dir="rtl"] .atr-property-card__facts {
	background-position: calc(-1 * var(--atr-space-3)) 0;
}

/* Very narrow cards: tighter facts, wrapping inside items allowed. */
@container atr-card (max-width: 16.25rem) {
	.atr-property-card__facts {
		margin-inline-start: calc(-1 * var(--atr-space-2));
		background-position: var(--atr-space-2) 0;
	}

	.atr-property-card__facts .atr-facts__item {
		padding-inline: var(--atr-space-2);
		white-space: normal;
	}

	[dir="rtl"] .atr-property-card__facts {
		background-position: calc(-1 * var(--atr-space-2)) 0;
	}

	.atr-property-card__price {
		font-size: var(--atr-step-1);
	}
}

/* --- Card styles (body classes from the "Cards" setting) ---------------------- */

.atr-cards--bordered .atr-property-card__inner,
.atr-cards--elevated .atr-property-card__inner,
.atr-cards--flat .atr-property-card__inner {
	overflow: clip;
}

.atr-cards--bordered .atr-property-card__media,
.atr-cards--elevated .atr-property-card__media,
.atr-cards--flat .atr-property-card__media {
	border-radius: 0;
}

.atr-cards--bordered .atr-property-card__body,
.atr-cards--elevated .atr-property-card__body,
.atr-cards--flat .atr-property-card__body {
	padding: var(--atr-space-4) var(--atr-card-pad) var(--atr-card-pad);
}

.atr-cards--bordered .atr-property-card__inner {
	border: var(--atr-border);
	background: var(--atr-color-bg);
}

.atr-cards--elevated .atr-property-card__inner {
	background: var(--atr-color-bg);
	box-shadow: var(--atr-shadow);
}

/* Dark scheme and dark bands: shadows vanish, so elevated/bordered cards get a visible surface. */
.atr-scheme--dark.atr-cards--elevated .atr-property-card__inner,
.atr-cards--elevated :is(.atr-section--dark, .atr-dark, .has-dark-background-color) .atr-property-card__inner {
	border: var(--atr-border);
	background: var(--atr-color-surface);
}

.atr-cards--bordered :is(.atr-section--dark, .atr-dark, .has-dark-background-color) .atr-property-card__inner {
	background: var(--atr-color-surface);
}

.atr-cards--flat .atr-property-card__inner {
	background: var(--atr-card-flat-bg, var(--atr-color-surface));
}

.atr-motion--subtle.atr-cards--elevated .atr-property-card:hover .atr-property-card__inner {
	transform: translateY(-2px);
	box-shadow: var(--atr-shadow), 0 18px 40px -22px var(--atr-shadow-color);
}

/* --- List layout -------------------------------------------------------------
 * `.atr-property-card--list`, a list grid, or the archive in list view. Horizontal once the
 * card itself is wide enough; narrower list cards keep the stacked layout.
 */
@container atr-card (min-width: 34rem) {
	.atr-property-card--list .atr-property-card__inner,
	.atr-results--list .atr-property-card__inner,
	.atr-listing-grid--list .atr-property-card__inner {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--atr-space-6);
		align-items: stretch;
	}

	.atr-property-card--list .atr-property-card__media,
	.atr-results--list .atr-property-card__media,
	.atr-listing-grid--list .atr-property-card__media {
		grid-column: 1;
		grid-row: 1;
		block-size: 100%;
		min-block-size: 12rem;
	}

	.atr-property-card--list .atr-property-card__body,
	.atr-results--list .atr-property-card__body,
	.atr-listing-grid--list .atr-property-card__body {
		grid-column: 2;
		grid-row: 1;
		justify-content: center;
		padding-block: var(--atr-space-3);
	}

	.atr-property-card--list .atr-property-card__excerpt,
	.atr-results--list .atr-property-card__excerpt,
	.atr-listing-grid--list .atr-property-card__excerpt {
		display: -webkit-box;
	}

	.atr-property-card--list .atr-property-card__facts,
	.atr-results--list .atr-property-card__facts,
	.atr-listing-grid--list .atr-property-card__facts {
		margin-block-start: var(--atr-space-2);
	}

	.atr-property-card--list .atr-property-card__price,
	.atr-results--list .atr-property-card__price,
	.atr-listing-grid--list .atr-property-card__price {
		font-size: var(--atr-step-3);
	}

	.atr-property-card--list .atr-property-card__title,
	.atr-results--list .atr-property-card__title,
	.atr-listing-grid--list .atr-property-card__title {
		font-size: var(--atr-step-1);
	}

	.atr-cards--bordered .atr-property-card--list .atr-property-card__inner,
	.atr-cards--bordered .atr-results--list .atr-property-card__inner,
	.atr-cards--bordered .atr-listing-grid--list .atr-property-card__inner,
	.atr-cards--elevated .atr-property-card--list .atr-property-card__inner,
	.atr-cards--elevated .atr-results--list .atr-property-card__inner,
	.atr-cards--elevated .atr-listing-grid--list .atr-property-card__inner,
	.atr-cards--flat .atr-property-card--list .atr-property-card__inner,
	.atr-cards--flat .atr-results--list .atr-property-card__inner,
	.atr-cards--flat .atr-listing-grid--list .atr-property-card__inner {
		column-gap: 0;
	}

	.atr-cards--bordered .atr-property-card--list .atr-property-card__body,
	.atr-cards--bordered .atr-results--list .atr-property-card__body,
	.atr-cards--bordered .atr-listing-grid--list .atr-property-card__body,
	.atr-cards--elevated .atr-property-card--list .atr-property-card__body,
	.atr-cards--elevated .atr-results--list .atr-property-card__body,
	.atr-cards--elevated .atr-listing-grid--list .atr-property-card__body,
	.atr-cards--flat .atr-property-card--list .atr-property-card__body,
	.atr-cards--flat .atr-results--list .atr-property-card__body,
	.atr-cards--flat .atr-listing-grid--list .atr-property-card__body {
		padding: var(--atr-space-5) var(--atr-space-6);
	}
}

/* ==========================================================================
   4. Listing grids
   ========================================================================== */

/*
 * "At most N columns": auto-fill tracks that are never narrower than --atr-grid-min and never
 * more than --atr-grid-n per row, so grids adapt to any container (archive, page content,
 * sidebars) without breakpoints — and the 4-column archive setting only applies ≥ 1280px.
 */
.atr-listing-grid {
	--atr-grid-n: 3;
	--atr-grid-min: 17rem;
	--atr-grid-gap: var(--atr-space-6);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--atr-grid-min), calc((100% - (var(--atr-grid-n) - 1) * var(--atr-grid-gap)) / var(--atr-grid-n) - 1px))), 1fr));
	gap: var(--atr-space-7) var(--atr-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.atr-listing-grid--cols-1 {
	--atr-grid-n: 1;
}

.atr-listing-grid--cols-2 {
	--atr-grid-n: 2;
}

.atr-listing-grid--cols-3 {
	--atr-grid-n: 3;
}

.atr-listing-grid--cols-4 {
	--atr-grid-n: 4;
	--atr-grid-min: 15.5rem;
}

.atr-listing-grid--archive {
	--atr-grid-n: min(var(--atr-archive-cols, 3), 3);
}

@media (min-width: 1280px) {
	.atr-listing-grid--archive {
		--atr-grid-n: var(--atr-archive-cols, 3);
		--atr-grid-min: 15.5rem;
	}
}

.atr-listing-grid--list,
.atr-results--list .atr-listing-grid {
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--atr-space-6);
}

/* Minimal list cards are separated by hairlines. */
.atr-cards--minimal .atr-listing-grid--list > .atr-property-card,
.atr-cards--minimal .atr-results--list .atr-listing-grid > .atr-property-card {
	padding-block-end: var(--atr-space-6);
	border-block-end: var(--atr-border);
}

.atr-listings-shortcode {
	margin-block: var(--atr-space-7);
}

.atr-listings-shortcode .atr-listing-note {
	margin-block-start: var(--atr-space-6);
}

/* ==========================================================================
   5. Form fields shared by the filters and the search form
   ========================================================================== */

.atr-search-field {
	display: grid;
	gap: var(--atr-space-1);
	min-inline-size: 0;
	align-content: end;
}

.atr-search-field__label {
	font-family: var(--atr-font-accent);
	font-size: max(var(--atr-step--2), 0.75rem);
	font-weight: var(--atr-weight-strong);
	line-height: 1.3;
	letter-spacing: calc(var(--atr-label-tracking) * 0.6);
	text-transform: uppercase;
	color: var(--atr-color-muted-ink);
}

.atr-search-select {
	position: relative;
	display: block;
	min-inline-size: 0;
}

.atr-search-select__control,
.atr-search-input {
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--atr-control-h, 3rem);
	margin: 0;
	padding-block: 0.5em;
	padding-inline: 0.9em;
	border: 1px solid var(--atr-field-border, var(--atr-color-field-border));
	border-radius: var(--atr-radius-input);
	background-color: var(--atr-field-bg, var(--atr-color-bg));
	color: var(--atr-field-fg, var(--atr-color-text));
	font-family: var(--atr-font-body);
	font-size: max(1rem, var(--atr-step-0));
	font-weight: var(--atr-body-weight);
	line-height: 1.3;
	transition: border-color var(--atr-transition), box-shadow var(--atr-transition);
}

.atr-search-select__control {
	padding-inline-end: 2.6em;
	-webkit-appearance: none;
	appearance: none;
	background-image: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.atr-search-select__control:hover,
.atr-search-input:hover {
	border-color: color-mix(in srgb, var(--atr-field-border, var(--atr-color-field-border)) 55%, var(--atr-field-fg, var(--atr-color-text)));
}

.atr-search-select__control:focus-visible,
.atr-search-input:focus-visible {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 3px;
	border-color: var(--atr-color-focus);
}

.atr-search-input::placeholder {
	color: var(--atr-field-placeholder, var(--atr-color-muted-ink));
	opacity: 1;
}

.atr-search-select__icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 0.9em;
	inline-size: 1em;
	block-size: 1em;
	margin-block-start: -0.5em;
	color: var(--atr-field-fg, var(--atr-color-text));
	opacity: 0.7;
	pointer-events: none;
}

/* Buy / Rent segmented control (radio inputs; works without JS). */
.atr-segmented {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	min-inline-size: 0;
	margin: 0;
	padding: 3px;
	border: 1px solid var(--atr-field-border, var(--atr-color-field-border));
	border-radius: var(--atr-radius-button);
	background: var(--atr-field-bg, var(--atr-color-bg));
}

.atr-segmented__input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.atr-segmented__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.5rem;
	min-inline-size: 4.5rem;
	padding-inline: 1.1em;
	border-radius: max(0px, calc(var(--atr-radius-button) - 3px));
	font-family: var(--atr-font-accent);
	font-size: var(--atr-step--1);
	font-weight: var(--atr-weight-strong);
	letter-spacing: calc(var(--atr-button-tracking) + var(--atr-button-caps-boost));
	text-transform: var(--atr-button-transform);
	color: var(--atr-color-muted-ink);
	cursor: pointer;
	user-select: none;
	transition: background-color var(--atr-transition), color var(--atr-transition);
}

.atr-segmented__label:hover {
	color: var(--atr-color-text);
}

.atr-segmented__input:checked + .atr-segmented__label {
	background: var(--atr-color-primary);
	color: var(--atr-color-on-primary);
}

.atr-segmented__input:focus-visible + .atr-segmented__label {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   6. Search form — hero & inline variants
   ========================================================================== */

.atr-search--hero,
.atr-search--inline {
	display: grid;
	gap: var(--atr-space-4);
	min-inline-size: 0;
	text-align: start;
}

.atr-search__mode {
	justify-self: start;
}

.atr-search__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--atr-space-3);
	align-items: end;
}

.atr-search__field {
	min-inline-size: 0;
}

.atr-search__field.atr-search-field--location,
.atr-search__field.atr-search-field--keyword,
.atr-search__actions {
	grid-column: 1 / -1;
}

.atr-search__actions {
	display: flex;
}

.atr-search__submit {
	flex: 1 1 auto;
	justify-content: center;
}

.atr-search__submit-icon {
	inline-size: 1.15em;
	block-size: 1.15em;
}

/* Inline: a light row that sits in page content. */
@media (min-width: 782px) {
	.atr-search--inline .atr-search__fields {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	}

	.atr-search--inline .atr-search__field.atr-search-field--location,
	.atr-search--inline .atr-search__field.atr-search-field--keyword,
	.atr-search--inline .atr-search__actions {
		grid-column: auto;
	}
}

/*
 * Hero: a floating, page-colored panel that reads on a photo, a plain background, a dark band and
 * in the dark Noir scheme alike. The form also carries `.atr-light` (tokens.css), which restores
 * the page colors inside .atr-on-image / dark contexts, so its text, fields and button stay correct.
 */
.atr-search--hero {
	inline-size: 100%;
	max-inline-size: 66rem;
	padding: var(--atr-space-4);
	border: var(--atr-border);
	border-radius: var(--atr-radius-lg);
	background: var(--atr-color-bg);
	color: var(--atr-color-text);
	box-shadow: var(--atr-shadow);
	text-shadow: none;
	color-scheme: light;
}

.atr-scheme--dark .atr-search--hero {
	color-scheme: dark;
}

.atr-on-image .atr-search--hero {
	border-color: transparent;
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.08), 0 30px 60px -28px rgb(0 0 0 / 0.55);
}

.atr-search--hero .atr-search__fields {
	gap: var(--atr-space-3);
}

@media (min-width: 600px) {
	.atr-search--hero {
		padding: var(--atr-space-5);
	}
}

/* Desktop hero: one elegant bar — label-over-value cells divided by hairlines. */
@media (min-width: 782px) {
	.atr-search--hero {
		gap: var(--atr-space-3);
		padding: var(--atr-space-3);
		padding-block-start: var(--atr-space-4);
	}

	.atr-search--hero .atr-search__mode {
		margin-inline-start: var(--atr-space-2);
	}

	.atr-search--hero .atr-search__fields {
		display: flex;
		align-items: stretch;
		gap: 0;
	}

	.atr-search--hero .atr-search__field {
		flex: 1 1 0;
		align-content: center;
		gap: 0.15rem;
		padding-block: var(--atr-space-2);
		padding-inline: var(--atr-space-4);
		border-inline-start: var(--atr-border);
	}

	.atr-search--hero .atr-search__field:first-child {
		border-inline-start: 0;
	}

	.atr-search--hero .atr-search__field.atr-search-field--location,
	.atr-search--hero .atr-search__field.atr-search-field--keyword {
		flex-grow: 1.5;
	}

	.atr-search--hero .atr-search-select__control,
	.atr-search--hero .atr-search-input {
		min-block-size: 2rem;
		padding-block: 0.15em;
		padding-inline: 0 1.8em;
		border-color: transparent;
		background-color: transparent;
		font-weight: var(--atr-body-strong);
	}

	.atr-search--hero .atr-search-input {
		padding-inline-end: 0;
	}

	.atr-search--hero .atr-search-select__control:hover,
	.atr-search--hero .atr-search-input:hover {
		border-color: transparent;
	}

	.atr-search--hero .atr-search-select__control:focus-visible,
	.atr-search--hero .atr-search-input:focus-visible {
		outline-offset: 4px;
		border-color: transparent;
	}

	.atr-search--hero .atr-search-select__icon {
		inset-inline-end: 0;
	}

	.atr-search--hero .atr-search__actions {
		flex: none;
		align-items: stretch;
		padding-inline-start: var(--atr-space-3);
	}

	.atr-search--hero .atr-search__submit {
		min-block-size: 3.5rem;
		padding-inline: 1.75em;
	}
}

/* ==========================================================================
   7. Archive: wrapper, header, filters
   ========================================================================== */

.atr-archive {
	padding-block: var(--atr-space-6) calc(var(--atr-section-space) * var(--atr-space-unit) * 0.75);
}

.atr-archive-header {
	display: block;
}

.atr-page-header--listings .atr-page-header__text,
.atr-page-header--saved .atr-page-header__text {
	max-inline-size: 60ch;
}

/* Fallback header when the page-header template tag is unavailable. */
.atr-archive-header__fallback {
	padding-block: var(--atr-space-8) var(--atr-space-5);
}

.atr-archive-header__title {
	margin: var(--atr-space-2) 0 0;
	font-size: var(--atr-h1);
}

.atr-archive-header__text {
	max-inline-size: 60ch;
	margin-block-start: var(--atr-space-4);
	color: var(--atr-color-muted-ink);
}

.atr-archive--unavailable {
	padding-block: calc(var(--atr-section-space) * var(--atr-space-unit));
	text-align: center;
}

.atr-archive__unavailable-title {
	margin-block-end: var(--atr-space-4);
	font-size: var(--atr-h2);
}

/* --- Filters ---------------------------------------------------------------- */

.atr-filters-wrap {
	margin-block-end: var(--atr-space-5);
}

.atr-filters {
	margin: 0;
}

/* Mobile "Filters" button row: only with JS (`.atr-js` is set in <head>, so no layout shift). */
.atr-filters__bar {
	display: none;
}

.atr-js .atr-filters .atr-filters__bar {
	display: flex;
	align-items: center;
	gap: var(--atr-space-3);
}

.atr-filters__toggle {
	position: relative;
}

.atr-filters__toggle[aria-expanded="true"] {
	border-color: var(--atr-color-text);
}

.atr-filters__toggle-icon {
	inline-size: 1.15em;
	block-size: 1.15em;
}

.atr-filters__badge {
	display: inline-grid;
	place-items: center;
	min-inline-size: 1.5rem;
	block-size: 1.5rem;
	padding-inline: 0.4em;
	border-radius: 999px;
	background: var(--atr-color-primary);
	color: var(--atr-color-on-primary);
	font-size: 0.75rem;
	font-weight: var(--atr-weight-strong);
	letter-spacing: 0;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}

/* Panel: inline filter card (no JS, or ≥ 782px). */
.atr-filters__panel {
	padding: var(--atr-space-5);
	border-radius: var(--atr-radius-lg);
	background: var(--atr-color-surface);
}

.atr-filters__sheet-head,
.atr-filters__foot {
	display: none;
}

.atr-filters__title {
	margin: 0;
	font-size: var(--atr-step-2);
}

.atr-filters__close {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin: 0;
	margin-inline-end: calc(-1 * var(--atr-space-2));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--atr-color-text);
	font-size: 1.35rem;
	cursor: pointer;
}

.atr-filters__close:hover {
	background: var(--atr-color-surface);
}

.atr-filters__close:focus-visible {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 2px;
}

.atr-filters__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--atr-space-3) var(--atr-space-4);
	margin-block-end: var(--atr-space-4);
}

.atr-filters__mode {
	flex: none;
}

.atr-filters__top-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--atr-space-2) var(--atr-space-5);
	margin-inline-start: auto;
}

.atr-filters__more-toggle {
	display: none;
	align-items: center;
	gap: 0.5em;
	min-block-size: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--atr-color-text);
	font-family: var(--atr-font-accent);
	font-size: var(--atr-step--1);
	font-weight: var(--atr-weight-strong);
	letter-spacing: 0.04em;
	cursor: pointer;
}

.atr-js .atr-filters .atr-filters__more-toggle {
	display: inline-flex;
}

.atr-filters__more-toggle:hover span {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.atr-filters__more-toggle:focus-visible {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 3px;
}

.atr-filters__more-icon {
	inline-size: 1.1em;
	block-size: 1.1em;
	color: var(--atr-color-accent-ink);
	transition: transform var(--atr-transition);
}

.atr-filters__more-toggle[aria-expanded="true"] .atr-filters__more-icon {
	transform: rotate(45deg);
}

.atr-filters__reset--inline {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	font-family: var(--atr-font-accent);
	font-size: var(--atr-step--1);
	font-weight: var(--atr-weight-medium);
	color: var(--atr-color-primary-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.atr-filters__reset--inline:hover {
	text-decoration-thickness: 2px;
}

.atr-filters__grid,
.atr-filters__extra {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
	gap: var(--atr-space-3);
	align-items: end;
}

.atr-filters__field--location {
	grid-column: span 2;
}

.atr-filters__submit-cell {
	display: flex;
	align-items: flex-end;
}

.atr-filters__submit {
	flex: 1 1 auto;
	justify-content: center;
	min-block-size: var(--atr-control-h, 3rem);
}

.atr-filters__submit-icon {
	inline-size: 1.1em;
	block-size: 1.1em;
}

.atr-filters__extra {
	margin-block-start: var(--atr-space-4);
	padding-block-start: var(--atr-space-4);
	border-block-start: var(--atr-border);
}

/* With JS the extra filters collapse behind "More filters" (always visible without JS). */
.atr-js .atr-filters .atr-filters__extra:not(.is-open) {
	display: none;
}

.atr-filters__field--keyword {
	grid-column: span 2;
}

/* Below 600px two-column spans would overflow the 1-column grid. */
@media (max-width: 599.98px) {
	.atr-filters__field--location,
	.atr-filters__field--keyword {
		grid-column: 1 / -1;
	}
}

/* --- Mobile sheet (with JS, < 782px) ------------------------------------------------ */
@media (max-width: 781.98px) {
	.atr-js .atr-filters .atr-filters__panel {
		position: fixed;
		z-index: 1000;
		inset: 0;
		display: flex;
		flex-direction: column;
		padding: 0;
		border-radius: 0;
		background: var(--atr-color-bg);
		color: var(--atr-color-text);
		visibility: hidden;
		transform: translateY(100%);
		transition: transform 0.35s var(--atr-ease), visibility 0s linear 0.35s;
	}

	.atr-js .atr-filters .atr-filters__panel.is-open {
		visibility: visible;
		transform: none;
		transition: transform 0.35s var(--atr-ease), visibility 0s linear 0s;
	}

	.atr-js .atr-filters .atr-filters__sheet-head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		gap: var(--atr-space-3);
		padding-block: var(--atr-space-3);
		padding-inline: var(--atr-gutter);
		padding-block-start: max(var(--atr-space-3), env(safe-area-inset-top));
		border-block-end: var(--atr-border);
	}

	.atr-js .atr-filters .atr-filters__scroll {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--atr-space-5) var(--atr-gutter);
	}

	.atr-js .atr-filters .atr-filters__foot {
		display: flex;
		flex: none;
		gap: var(--atr-space-3);
		padding-block: var(--atr-space-3) max(var(--atr-space-3), env(safe-area-inset-bottom));
		padding-inline: var(--atr-gutter);
		border-block-start: var(--atr-border);
		background: var(--atr-color-bg);
	}

	.atr-js .atr-filters .atr-filters__foot .atr-btn {
		flex: 1 1 0;
		justify-content: center;
	}

	.atr-js .atr-filters .atr-filters__foot .atr-filters__show {
		flex-grow: 1.6;
		white-space: nowrap;
	}

	.atr-js .atr-filters .atr-filters__top {
		align-items: stretch;
		flex-direction: column;
	}

	.atr-js .atr-filters .atr-filters__mode {
		display: flex;
	}

	.atr-js .atr-filters .atr-filters__mode .atr-segmented__label {
		flex: 1 1 0;
	}

	.atr-js .atr-filters .atr-filters__top-actions,
	.atr-js .atr-filters .atr-filters__submit-cell {
		display: none;
	}

	.atr-js .atr-filters .atr-filters__grid,
	.atr-js .atr-filters .atr-filters__extra {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--atr-space-4) var(--atr-space-3);
	}

	.atr-js .atr-filters .atr-filters__extra:not(.is-open) {
		display: grid;
	}

	.atr-js .atr-filters .atr-filters__field--location,
	.atr-js .atr-filters .atr-filters__field--keyword,
	.atr-js .atr-filters .atr-filters__field--status,
	.atr-js .atr-filters .atr-filters__field--feature {
		grid-column: 1 / -1;
	}
}

@media (min-width: 782px) {
	.atr-js .atr-filters .atr-filters__bar {
		display: none;
	}

	.atr-filters__panel {
		padding: var(--atr-space-5) var(--atr-space-6) var(--atr-space-6);
	}
}

/* Locks page scroll while the filter sheet is open. */
html.atr-filters-locked,
html.atr-filters-locked body {
	overflow: hidden;
}

/* ==========================================================================
   8. Results bar, chips, sort & view toggle, alerts
   ========================================================================== */

.atr-results-bar {
	margin-block: var(--atr-space-6) var(--atr-space-7);
}

.atr-results-bar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--atr-space-3) var(--atr-space-5);
	padding-block-end: var(--atr-space-4);
	border-block-end: var(--atr-border);
}

.atr-results-bar__count {
	margin: 0;
	font-family: var(--atr-font-heading);
	font-size: var(--atr-step-2);
	font-weight: var(--atr-heading-weight);
	line-height: 1.1;
	letter-spacing: var(--atr-heading-tracking);
	color: var(--atr-color-muted-ink);
}

.atr-results-bar__number {
	font-weight: inherit;
	color: var(--atr-color-text);
	font-variant-numeric: lining-nums tabular-nums;
}

.atr-results-bar__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--atr-space-3);
}

.atr-alerts-toggle__icon {
	inline-size: 1.1em;
	block-size: 1.1em;
}

.atr-alerts-toggle[aria-expanded="true"] {
	border-color: var(--atr-color-text);
	background-color: var(--atr-color-text);
	color: var(--atr-color-bg);
}

/* The alerts toggle needs JS; without it the sign-up stays available in the no-results state. */
html:not(.atr-js) .atr-results-bar .atr-alerts-toggle {
	display: none;
}

.atr-sort {
	display: flex;
	align-items: center;
	gap: var(--atr-space-2);
	margin: 0;
}

.atr-sort__label {
	font-family: var(--atr-font-accent);
	font-size: max(var(--atr-step--2), 0.75rem);
	font-weight: var(--atr-weight-strong);
	letter-spacing: calc(var(--atr-label-tracking) * 0.6);
	text-transform: uppercase;
	color: var(--atr-color-muted-ink);
	white-space: nowrap;
}

.atr-sort__select {
	min-inline-size: 11.5rem;
}

.atr-sort__select .atr-search-select__control {
	min-block-size: 2.75rem;
}

.atr-sort__submit {
	flex: none;
}

/* Grid / list toggle (≥ 600px — narrow screens always show one column). */
.atr-view-toggle {
	display: none;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--atr-field-border, var(--atr-color-field-border));
	border-radius: min(var(--atr-radius-button), 999px);
	background: var(--atr-color-bg);
}

@media (min-width: 600px) {
	.atr-js .atr-view-toggle {
		display: inline-flex;
	}
}

.atr-view-toggle__button {
	display: inline-grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: max(0px, calc(var(--atr-radius-button) - 2px));
	background: transparent;
	color: var(--atr-color-muted-ink);
	font-size: 1.15rem;
	cursor: pointer;
	transition: background-color var(--atr-transition), color var(--atr-transition);
}

.atr-view-toggle__button:hover {
	color: var(--atr-color-text);
}

.atr-view-toggle__button[aria-pressed="true"] {
	background: var(--atr-color-text);
	color: var(--atr-color-bg);
}

.atr-view-toggle__button:focus-visible {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 2px;
}

/* Active filter chips */
.atr-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--atr-space-2);
	margin: var(--atr-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.atr-chips__item {
	margin: 0;
}

.atr-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-block-size: 2.25rem;
	max-inline-size: 100%;
	padding-block: 0.3em;
	padding-inline: 0.95em 0.7em;
	border: 1px solid var(--atr-field-border, var(--atr-color-field-border));
	border-radius: 999px;
	background: var(--atr-color-bg);
	color: var(--atr-color-text);
	font-size: var(--atr-step--1);
	line-height: 1.3;
	text-decoration: none;
	transition: border-color var(--atr-transition), background-color var(--atr-transition);
}

.atr-chip:hover {
	border-color: var(--atr-color-text);
	background: var(--atr-color-surface);
}

.atr-chip:focus-visible {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 2px;
}

.atr-chip__label {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.atr-chip__icon {
	flex: none;
	inline-size: 0.9em;
	block-size: 0.9em;
	color: var(--atr-color-muted-ink);
}

.atr-chip:hover .atr-chip__icon {
	color: var(--atr-color-text);
}

.atr-chips__clear {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.25rem;
	padding-inline: 0.35em;
	font-size: var(--atr-step--1);
	font-weight: var(--atr-weight-medium);
	color: var(--atr-color-primary-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.atr-chips__clear:hover {
	text-decoration-thickness: 2px;
}

.atr-chips__clear:focus-visible,
.atr-filters__reset--inline:focus-visible {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 3px;
}

/* Inline alert sign-up (compact inquiry form inside). */
.atr-alerts {
	margin-block-start: var(--atr-space-5);
	padding: var(--atr-space-5);
	border-radius: var(--atr-radius-lg);
	background: var(--atr-color-surface);
}

.atr-alerts__form {
	max-inline-size: 52rem;
}

@media (min-width: 782px) {
	.atr-alerts {
		padding: var(--atr-space-6) var(--atr-space-7);
	}
}

/* Results container & listing disclaimer */
.atr-results {
	min-inline-size: 0;
}

.atr-results--grid .atr-property-card__excerpt {
	display: none;
}

.atr-archive .atr-pagination {
	margin-block-start: var(--atr-space-8);
}

.atr-listing-note {
	max-inline-size: 80ch;
	margin-block-start: var(--atr-space-8);
	padding-block-start: var(--atr-space-4);
	border-block-start: var(--atr-border);
	font-size: max(var(--atr-step--1), 0.8125rem);
	line-height: 1.6;
	color: var(--atr-color-muted-ink);
}

.atr-listing-note p {
	margin: 0;
}

.atr-listing-note p + p {
	margin-block-start: var(--atr-space-2);
}

/* ==========================================================================
   9. No results
   ========================================================================== */

.atr-no-results {
	padding-block: var(--atr-space-7) 0;
}

.atr-no-results__intro {
	display: grid;
	justify-items: center;
	gap: var(--atr-space-3);
	max-inline-size: 38rem;
	margin-inline: auto;
	text-align: center;
}

.atr-no-results__icon {
	display: inline-grid;
	place-items: center;
	inline-size: 4rem;
	block-size: 4rem;
	margin-block-end: var(--atr-space-2);
	border-radius: 50%;
	background: var(--atr-color-accent-soft);
	color: var(--atr-color-accent-ink);
	font-size: 1.6rem;
}

.atr-no-results__title {
	margin: 0;
	font-size: var(--atr-h3);
	text-wrap: balance;
}

.atr-no-results__text {
	max-inline-size: 52ch;
	margin: 0;
	color: var(--atr-color-muted-ink);
	text-wrap: pretty;
}

.atr-no-results__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--atr-space-3);
	margin-block-start: var(--atr-space-3);
}

.atr-no-results .atr-alerts {
	max-inline-size: 46rem;
	margin-inline: auto;
	margin-block-start: var(--atr-space-6);
}

.atr-no-results__fallback {
	margin-block-start: calc(var(--atr-section-space) * var(--atr-space-unit) * 0.6);
	padding-block-start: var(--atr-space-8);
	border-block-start: var(--atr-border);
}

.atr-no-results__fallback-title {
	margin-block: 0 var(--atr-space-6);
	font-size: var(--atr-h3);
}

/* ==========================================================================
   10. Neighborhood tiles (shortcode + homepage)
   ========================================================================== */

.atr-neighborhood-grid {
	--atr-grid-n: 4;
	--atr-grid-min: 14rem;
	--atr-grid-gap: var(--atr-space-5);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--atr-grid-min), calc((100% - (var(--atr-grid-n) - 1) * var(--atr-grid-gap)) / var(--atr-grid-n) - 1px))), 1fr));
	gap: var(--atr-grid-gap);
	margin-block: var(--atr-space-6);
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

.atr-neighborhood-grid--cols-1 {
	--atr-grid-n: 1;
}

.atr-neighborhood-grid--cols-2 {
	--atr-grid-n: 2;
}

.atr-neighborhood-grid--cols-3 {
	--atr-grid-n: 3;
}

.atr-neighborhood-grid--cols-4 {
	--atr-grid-n: 4;
}

.atr-neighborhood-grid__item {
	min-inline-size: 0;
	margin: 0;
}

.atr-neighborhood-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 5;
	min-block-size: 16rem;
	border-radius: var(--atr-radius-image);
	background: var(--atr-color-band);
	color: #fff;
}

@media (min-width: 600px) {
	.atr-neighborhood-tile {
		aspect-ratio: 3 / 4;
	}
}

.atr-neighborhood-tile__media {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	background: var(--atr-color-band);
}

/* Bottom-weighted, dark-tinted scrim keeps the white text legible on any photo. */
.atr-neighborhood-tile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--atr-color-dark) 55%, transparent) 62%, color-mix(in srgb, var(--atr-color-dark) 88%, transparent) 100%);
}

.atr-neighborhood-tile__image {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	transition: transform 0.7s var(--atr-ease);
}

.atr-neighborhood-tile__media .atr-placeholder {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 0;
	background: var(--atr-color-band);
	color: color-mix(in srgb, var(--atr-color-on-dark) 28%, transparent);
}

.atr-neighborhood-tile__media .atr-placeholder::after {
	border-color: color-mix(in srgb, var(--atr-color-on-dark) 16%, transparent);
}

.atr-neighborhood-tile__media .atr-placeholder__mark {
	border-color: color-mix(in srgb, var(--atr-color-on-dark) 24%, transparent);
	background: transparent;
}

.atr-neighborhood-tile--no-image .atr-neighborhood-tile__media::after {
	background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--atr-color-dark) 60%, transparent) 100%);
}

.atr-card-hover--zoom .atr-neighborhood-tile:hover .atr-neighborhood-tile__image,
.atr-card-hover--zoom .atr-neighborhood-tile:focus-within .atr-neighborhood-tile__image {
	transform: scale(1.04);
}

.atr-neighborhood-tile__body {
	display: grid;
	gap: var(--atr-space-1);
	padding: var(--atr-space-5);
	color: #fff;
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.25);
}

@media (min-width: 1024px) {
	.atr-neighborhood-tile__body {
		padding: var(--atr-space-6);
	}
}

.atr-neighborhood-tile__eyebrow {
	margin: 0;
	font-family: var(--atr-font-accent);
	font-size: max(var(--atr-step--2), 0.75rem);
	font-weight: var(--atr-weight-strong);
	letter-spacing: var(--atr-label-tracking);
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.85);
}

.atr-neighborhood-tile__title {
	margin: 0;
	font-size: var(--atr-h3);
	color: #fff;
	text-wrap: balance;
}

.atr-neighborhood-tile__link {
	color: inherit;
	text-decoration: none;
}

.atr-neighborhood-tile__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: inherit;
}

.atr-neighborhood-tile__link:focus {
	outline: none;
}

.atr-neighborhood-tile__link:focus-visible::after {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 3px;
	border-radius: var(--atr-radius-image);
}

.atr-neighborhood-tile__count {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: var(--atr-space-1) 0 0;
	font-family: var(--atr-font-accent);
	font-size: max(var(--atr-step--1), 0.8125rem);
	font-weight: var(--atr-weight-medium);
	letter-spacing: 0.04em;
	color: rgb(255 255 255 / 0.92);
}

.atr-neighborhood-tile__arrow {
	inline-size: 1.1em;
	block-size: 1.1em;
	transition: transform var(--atr-transition);
}

.atr-neighborhood-tile:hover .atr-neighborhood-tile__arrow,
.atr-neighborhood-tile:focus-within .atr-neighborhood-tile__arrow {
	transform: translateX(3px);
}

[dir="rtl"] .atr-neighborhood-tile__arrow {
	transform: scaleX(-1);
}

[dir="rtl"] .atr-neighborhood-tile:hover .atr-neighborhood-tile__arrow,
[dir="rtl"] .atr-neighborhood-tile:focus-within .atr-neighborhood-tile__arrow {
	transform: scaleX(-1) translateX(3px);
}

/* ==========================================================================
   11. Saved homes page
   ========================================================================== */

.atr-saved-page {
	padding-block: var(--atr-space-7) calc(var(--atr-section-space) * var(--atr-space-unit) * 0.75);
}

.atr-saved-page__header {
	padding-block: var(--atr-space-8) var(--atr-space-4);
}

.atr-saved-page__content {
	max-inline-size: var(--atr-content);
	margin-block-end: var(--atr-space-7);
}

.atr-saved {
	min-inline-size: 0;
}

.atr-saved__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--atr-space-3);
	margin-block-end: var(--atr-space-6);
	padding-block-end: var(--atr-space-4);
	border-block-end: var(--atr-border);
}

.atr-saved__count {
	margin: 0;
	font-family: var(--atr-font-heading);
	font-size: var(--atr-step-2);
	font-weight: var(--atr-heading-weight);
	line-height: 1.1;
	letter-spacing: var(--atr-heading-tracking);
	font-variant-numeric: lining-nums tabular-nums;
}

.atr-saved__clear {
	flex: none;
}

.atr-saved__clear-icon {
	inline-size: 1em;
	block-size: 1em;
}

.atr-saved__status {
	font-size: var(--atr-step--1);
	color: var(--atr-color-muted-ink);
}

.atr-saved__status:not(:empty) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--atr-space-2) var(--atr-space-3);
	margin-block-end: var(--atr-space-5);
	padding: var(--atr-space-3) var(--atr-space-4);
	border-radius: var(--atr-radius);
	background: var(--atr-color-surface);
	color: var(--atr-color-text);
}

.atr-saved__undo,
.atr-saved__retry {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	margin: 0;
	padding: 0 0.25em;
	border: 0;
	background: transparent;
	color: var(--atr-color-primary-ink);
	font: inherit;
	font-weight: var(--atr-body-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.atr-saved__undo:hover,
.atr-saved__retry:hover {
	text-decoration-thickness: 2px;
}

.atr-saved__undo:focus-visible,
.atr-saved__retry:focus-visible {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 2px;
}

/* Without JS the grid (skeletons) is hidden and the <noscript> note explains why. */
html:not(.atr-js) .atr-saved__grid {
	display: none;
}

.atr-saved__noscript {
	margin: 0;
	padding: var(--atr-space-5);
	border-radius: var(--atr-radius);
	background: var(--atr-color-surface);
	text-align: center;
}

/* Loading skeletons */
.atr-skeleton-card {
	display: grid;
	gap: var(--atr-space-3);
	align-content: start;
}

.atr-skeleton-card__media,
.atr-skeleton-card__line {
	display: block;
	border-radius: var(--atr-radius-sm);
	background: linear-gradient(90deg, var(--atr-color-surface) 0%, color-mix(in srgb, var(--atr-color-surface) 55%, var(--atr-color-bg)) 50%, var(--atr-color-surface) 100%) 0 0 / 200% 100%;
	animation: atr-skeleton 1.6s ease-in-out infinite;
}

.atr-skeleton-card__media {
	aspect-ratio: var(--atr-card-ratio, 4 / 3);
	margin-block-end: var(--atr-space-2);
	border-radius: var(--atr-radius-image);
}

.atr-skeleton-card__line {
	block-size: 0.9rem;
	inline-size: 70%;
}

.atr-skeleton-card__line--title {
	block-size: 1.6rem;
	inline-size: 45%;
}

.atr-skeleton-card__line--short {
	inline-size: 55%;
}

@keyframes atr-skeleton {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: -100% 0;
	}
}

/* Empty / disabled states */
.atr-saved__empty {
	display: grid;
	justify-items: center;
	gap: var(--atr-space-3);
	max-inline-size: 36rem;
	margin-inline: auto;
	padding-block: var(--atr-space-8);
	text-align: center;
}

.atr-saved__empty-icon {
	display: inline-grid;
	place-items: center;
	inline-size: 4.5rem;
	block-size: 4.5rem;
	margin-block-end: var(--atr-space-2);
	border-radius: 50%;
	background: var(--atr-color-accent-soft);
	color: var(--atr-color-accent-ink);
	font-size: 1.75rem;
}

.atr-saved__empty-title {
	margin: 0;
	font-size: var(--atr-h3);
	text-wrap: balance;
}

.atr-saved__empty-title:focus {
	outline: none;
}

.atr-saved__empty-title:focus-visible {
	outline: 2px solid var(--atr-color-focus);
	outline-offset: 3px;
}

.atr-saved__empty-text {
	max-inline-size: 48ch;
	margin: 0 0 var(--atr-space-3);
	color: var(--atr-color-muted-ink);
	text-wrap: pretty;
}

.atr-saved__empty--off .atr-saved__empty-icon {
	background: var(--atr-color-surface);
	color: var(--atr-color-muted-ink);
}

/* "Email me this list" */
.atr-saved__form {
	margin-block-start: var(--atr-space-9);
	padding: var(--atr-space-5);
	border-radius: var(--atr-radius-lg);
	background: var(--atr-color-surface);
}

.atr-saved__inquiry {
	max-inline-size: 52rem;
	margin-inline: auto;
}

@media (min-width: 782px) {
	.atr-saved__form {
		padding: var(--atr-space-7);
	}
}

/* ==========================================================================
   12. Toast ("Saved. Want this list in your inbox?")
   ========================================================================== */

.atr-toast-host {
	position: fixed;
	z-index: 900;
	inset-inline: var(--atr-gutter);
	inset-block-end: max(var(--atr-space-4), env(safe-area-inset-bottom));
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

/* Clear the single-property mobile action bar. */
@media (max-width: 1023.98px) {
	.single-atrium_property .atr-toast-host {
		inset-block-end: calc(5.5rem + env(safe-area-inset-bottom));
	}
}

@media (min-width: 600px) {
	.atr-toast-host {
		inset-inline: auto var(--atr-space-6);
		inset-block-end: max(var(--atr-space-6), env(safe-area-inset-bottom));
	}
}

.atr-toast {
	display: flex;
	align-items: center;
	gap: var(--atr-space-3);
	inline-size: 100%;
	max-inline-size: 26rem;
	padding: var(--atr-space-3) var(--atr-space-2) var(--atr-space-3) var(--atr-space-5);
	border-radius: var(--atr-radius);
	background: var(--atr-color-band);
	color: var(--atr-color-on-dark);
	box-shadow: 0 18px 44px -18px rgb(0 0 0 / 0.5);
	pointer-events: auto;
	animation: atr-toast-in 0.4s var(--atr-ease);
}

.atr-toast__message {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--atr-step--1);
	line-height: 1.45;
}

.atr-toast__title {
	font-weight: var(--atr-body-strong);
}

.atr-toast__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.atr-toast__link:hover {
	text-decoration-thickness: 2px;
}

.atr-toast__link:focus-visible,
.atr-toast__close:focus-visible {
	outline: 2px solid var(--atr-color-focus-dark, currentColor);
	outline-offset: 2px;
}

.atr-toast__close {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.1rem;
	cursor: pointer;
}

.atr-toast__close:hover {
	background: var(--atr-color-surface-dark);
}

@keyframes atr-toast-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   13. Shortcode notices (editors only)
   ========================================================================== */

.atr-shortcode-notice {
	margin-block: var(--atr-space-5);
	padding: var(--atr-space-4) var(--atr-space-5);
	border: 1px dashed var(--atr-color-field-border);
	border-radius: var(--atr-radius);
	font-size: var(--atr-step--1);
	color: var(--atr-color-muted-ink);
}

.atr-shortcode-notice__hint {
	opacity: 0.85;
	font-style: italic;
}

/* ==========================================================================
   14. Motion, forced colors, print
   ========================================================================== */

.atr-motion--none .atr-property-card__image,
.atr-motion--none .atr-neighborhood-tile__image,
.atr-motion--none .atr-property-card__inner {
	transition: none;
	transform: none;
}

.atr-motion--none .atr-favorite.is-animating .atr-favorite__icon--on,
.atr-motion--none .atr-toast,
.atr-motion--none .atr-skeleton-card__media,
.atr-motion--none .atr-skeleton-card__line {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.atr-property-card__image,
	.atr-property-card__inner,
	.atr-neighborhood-tile__image,
	.atr-neighborhood-tile__arrow,
	.atr-favorite,
	.atr-favorite__icon,
	.atr-filters__more-icon,
	.atr-js .atr-filters .atr-filters__panel,
	.atr-js .atr-filters .atr-filters__panel.is-open {
		transition: none !important;
	}

	.atr-card-hover--zoom .atr-property-card:hover .atr-property-card__image,
	.atr-card-hover--zoom .atr-property-card:focus-within .atr-property-card__image,
	.atr-card-hover--zoom .atr-neighborhood-tile:hover .atr-neighborhood-tile__image,
	.atr-card-hover--zoom .atr-neighborhood-tile:focus-within .atr-neighborhood-tile__image,
	.atr-motion--subtle.atr-cards--elevated .atr-property-card:hover .atr-property-card__inner {
		transform: none !important;
	}

	.atr-favorite.is-animating .atr-favorite__icon--on,
	.atr-toast,
	.atr-skeleton-card__media,
	.atr-skeleton-card__line {
		animation: none !important;
	}
}

@media (forced-colors: active) {
	.atr-badge,
	.atr-property-card__ribbon,
	.atr-favorite,
	.atr-chip,
	.atr-toast {
		border: 1px solid CanvasText;
	}

	.atr-favorite[aria-pressed="true"] .atr-favorite__icon--on {
		color: Highlight;
	}

	.atr-segmented__input:checked + .atr-segmented__label,
	.atr-view-toggle__button[aria-pressed="true"] {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	.atr-property-card__link:focus-visible::after,
	.atr-neighborhood-tile__link:focus-visible::after {
		outline-color: Highlight;
	}
}

@media print {
	.atr-filters-wrap,
	.atr-results-bar__tools,
	.atr-chips,
	.atr-alerts,
	.atr-favorite,
	.atr-toast-host,
	.atr-saved__toolbar,
	.atr-saved__form,
	.atr-skeleton-card {
		display: none !important;
	}

	.atr-property-card {
		break-inside: avoid;
	}

	.atr-property-card__image {
		transform: none !important;
	}
}