/*
 * CaryTamura listings archive (/properties/, titled "Listings").
 *
 * 2026 REDESIGN. The filter bar sits in a paper search panel, controls and
 * cards are square-cornered, card badges are the white status chip and the
 * price is set in the display face, as on every other listing card; the map
 * sticks below the sticky header. Layout logic (map or no map, columns,
 * stacking) is unchanged.
 *
 * SCOPE. Everything here is scoped under .ct-properties, the class Page 800's
 * outer Elementor container carries. It styles three unmodified VM Business
 * Listings widgets placed inside it — Filter Bar, Listing Grid (browse
 * context) and Map View — and reaches nothing else on the site.
 *
 * WHAT THIS FILE DOES NOT DO. It never decides which listings, filters, sorts
 * or pins exist, nor whether the map is shown: the plugin resolves all of that
 * (Settings → Archive Layout decides the map). This file lays out what arrives
 * and collapses what does not.
 *
 * VALUES. Colours and families resolve to tokens.css. The few literals below
 * are layout measurements, plus the card radius and the split, which are
 * REFERENCE-derived from the supplied property-search capture and declared
 * once as local properties.
 */

.ct-properties {
	--ct-properties-results: 60fr;   /* REFERENCE-derived: listings wider than the map */
	--ct-properties-map: 40fr;
	--ct-properties-radius: 0;        /* 2026 redesign: square, like every card */
	--ct-properties-gutter: 32px;
	--ct-properties-map-top: calc(var(--ct-header-h) + var(--wp-admin--admin-bar--height, 0px) + 16px);
	--ct-properties-control-height: 48px;

	color: var(--ct-ink-body);
	font-family: var(--ct-font-body);
}

/* .elementor prefix: Page 800's own container rule sets these too, at the
 * same specificity; this file loads after it. */
.elementor .ct-properties.e-con {
	--padding-top: 0px;
	--padding-bottom: var(--ct-space-section);
	--padding-left: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--padding-right: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
}

/* ------------------------------------------------------------ filters --- */

.ct-properties .ct-properties__filters.e-con {
	--padding-top: 28px;
	--padding-bottom: 28px;
	--padding-left: clamp(20px, 3vw, 36px);
	--padding-right: clamp(20px, 3vw, 36px);
	margin-bottom: clamp(32px, 4vw, 56px);
	background-color: var(--ct-paper);
	border-top: 3px solid var(--ct-accent);
}

.ct-properties .rb-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.ct-properties .rb-filters__grid {
	display: flex;
	flex: 1 1 640px;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	min-width: 0;
}

.ct-properties .rb-filters__field {
	flex: 0 1 150px;
	min-width: 0;
}

.ct-properties .rb-filters__field--wide {
	flex: 1 1 260px;
}

.ct-properties .rb-filters__field label {
	margin-bottom: 6px;
	font-family: var(--ct-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ct-label);
}

.ct-properties .rb-filters__field select,
.ct-properties .rb-filters__field input[type="search"] {
	width: 100%;
	min-height: var(--ct-properties-control-height);
	padding: 0 14px;
	border: var(--ct-border-width) solid var(--ct-border);
	border-radius: 0;
	background-color: var(--ct-canvas);
	color: var(--ct-ink);
	font-family: var(--ct-font-body);
	font-size: 15px;
}

.ct-properties .rb-filters__field select:focus-visible,
.ct-properties .rb-filters__field input:focus-visible,
.ct-properties .rb-grid__sort select:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 1px;
}

.ct-properties .rb-filters__field--check {
	flex: 0 0 auto;
	align-self: center;
}

.ct-properties .rb-filters__field--check label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	min-height: var(--ct-properties-control-height);
	font-family: var(--ct-font-body);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ct-ink-body);
}

/* The baseline sizes every filter input as a full-width 44px control, which
 * turns the checkbox into a large square. */
.ct-properties .rb-filters__field--check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	padding: 0;
	accent-color: var(--ct-dark);
}

.ct-properties .rb-filters__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
}

.ct-properties .rb-filters__submit {
	min-height: var(--ct-properties-control-height);
	padding: 0 24px;
	border: 1px solid var(--ct-accent-strong);
	border-radius: 0;
	background: var(--ct-accent-strong);
	color: var(--ct-on-dark);
	font-family: var(--ct-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--ct-transition), color var(--ct-transition);
}

.ct-properties .rb-filters__submit:hover,
.ct-properties .rb-filters__submit:focus-visible {
	border-color: var(--ct-ink);
	background: var(--ct-ink);
	color: var(--ct-on-dark);
}

.ct-properties .rb-filters__submit:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

.ct-properties .rb-filters__reset {
	color: var(--ct-ink);
	font-size: 14px;
	text-decoration: underline;
	text-decoration-color: var(--ct-accent);
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------- layout --- */

/*
 * Listings + Map: results beside the map at 60/40. Elementor draws these
 * containers as flex rows; a grid states the split exactly and keeps the two
 * columns from negotiating widths with their contents.
 */
.ct-properties .ct-properties__body {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, var(--ct-properties-results)) minmax(0, var(--ct-properties-map));
	gap: var(--ct-properties-gutter);
	align-items: start;
}

.ct-properties .ct-properties__results {
	min-width: 0;
}

.ct-properties .ct-properties__map {
	position: sticky;
	top: var(--ct-properties-map-top);
	min-width: 0;
}

/*
 * Listings Only. With Settings → Archive Layout set to "Listings Only" the Map
 * View widget renders nothing and Elementor drops it (the omit-when-empty
 * behaviour property.css already relies on), leaving an empty column. The
 * column is removed and the results take the full width.
 */
.ct-properties .ct-properties__map:not(:has(.elementor-widget)) {
	display: none;
}

.ct-properties .ct-properties__body:not(:has(.ct-properties__map .elementor-widget)) {
	grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------- map --- */

/* Its own stacking context, so Leaflet's high z-index panes cannot rise over
 * the header's mobile navigation dropdown. */
.ct-properties .rb-map__region {
	position: relative;
	z-index: 0;
	isolation: isolate;
}

.ct-properties .rb-map__canvas {
	height: calc(100vh - (2 * var(--ct-properties-map-top)));
	min-height: 420px;
	border-radius: var(--ct-properties-radius);
	background: var(--ct-surface-alt);
	font-family: var(--ct-font-body);
}

.ct-properties .rb-map__status {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ct-label);
}

.ct-properties .rb-map__pin {
	display: inline-block;
	transform: translate(-50%, -50%);
	padding: 3px 9px;
	border: var(--ct-border-width) solid var(--ct-border);
	border-radius: 0;
	background: var(--ct-canvas);
	color: var(--ct-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.ct-properties .rb-map__pin--for-sale {
	border-color: var(--ct-dark);
	background: var(--ct-dark);
	color: var(--ct-on-dark);
}

.ct-properties .leaflet-marker-icon:focus-visible .rb-map__pin {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

.ct-properties .rb-map__popup {
	display: flex;
	gap: 10px;
	font-family: var(--ct-font-body);
}

.ct-properties .rb-map__popup img {
	flex: none;
	object-fit: cover;
	border-radius: 0;
}

.ct-properties .rb-map__popup-body p {
	margin: 0;
}

.ct-properties .rb-map__popup-price {
	font-weight: 700;
	color: var(--ct-ink);
}

.ct-properties .rb-map__popup-title {
	color: var(--ct-ink);
}

.ct-properties .rb-map__popup-meta {
	color: var(--ct-label);
}

/* ------------------------------------------------------------ results --- */

.ct-properties .ct-properties__heading .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h3);
	line-height: var(--ct-leading-display);
	color: var(--ct-ink);
}

.ct-properties .rb-grid__toolbar {
	margin: 4px 0 16px;
}

.ct-properties .rb-grid__count {
	margin: 0;
	font-size: 14px;
	color: var(--ct-label);
}

.ct-properties .rb-grid__sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ct-properties .rb-grid__sort label {
	white-space: nowrap;
	font-size: 14px;
	color: var(--ct-label);
}

.ct-properties .rb-grid__sort select {
	min-height: 40px;
	padding: 0 12px;
	border: var(--ct-border-width) solid var(--ct-border);
	border-radius: 0;
	background-color: var(--ct-canvas);
	color: var(--ct-ink);
	font-size: 14px;
}

.ct-properties .rb-grid__sort-apply {
	min-height: 40px;
	padding: 0 14px;
	border: var(--ct-border-width) solid var(--ct-border);
	border-radius: 0;
	background: var(--ct-canvas);
	color: var(--ct-ink);
	font-size: 14px;
	cursor: pointer;
}

.ct-properties .rb-grid__sort-apply:hover,
.ct-properties .rb-grid__sort-apply:focus-visible {
	border-color: var(--ct-dark);
}

.ct-properties .rb-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px var(--ct-properties-gutter);
}

/* Listings Only: the full width holds three cards a row. */
.ct-properties .ct-properties__body:not(:has(.ct-properties__map .elementor-widget)) .rb-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --------------------------------------------------------------- card --- */

.ct-properties .rb-card {
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

.ct-properties .rb-card__link {
	z-index: 1;
	border-radius: var(--ct-properties-radius);
}

.ct-properties .rb-card__link:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 4px;
}

.ct-properties .rb-card__media {
	border-radius: var(--ct-properties-radius);
	background: var(--ct-surface-alt);
}

.ct-properties .rb-card__media img {
	transition: transform 400ms ease;
}

/* A property with no uploaded image gets the plugin's placeholder, an
 * aria-hidden "RB" monogram meaningless to this brand. The empty media box
 * stays (it keeps the grid rhythm); the letters do not. */
.ct-properties .rb-card__placeholder {
	position: absolute;
	inset: 0;
	font-size: 0;
}

.ct-properties .rb-card:hover .rb-card__media img {
	transform: scale(1.03);
}

.ct-properties .rb-badge {
	top: 16px;
	left: 16px;
	padding: 7px 12px;
	border-radius: 0;
	background: var(--ct-canvas);
	color: var(--ct-ink);
	font-family: var(--ct-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.ct-properties .rb-card__star {
	top: 12px;
	right: 12px;
	color: var(--ct-accent);
}

/* Price, then the facts line, then the address — the reference's reading
 * order. Presentation order only; the markup order is the plugin's. */
.ct-properties .rb-card__body {
	gap: 6px;
	padding: 22px 0 0;
}

.ct-properties .rb-card__pricing { order: 1; }
.ct-properties .rb-card__meta    { order: 2; }
.ct-properties .rb-card__title   { order: 3; }
.ct-properties .rb-card__location { order: 4; }
.ct-properties .rb-card__pill    { order: 5; }

.ct-properties .rb-card__price {
	font-family: var(--ct-font-display);
	font-size: clamp(22px, 1.8vw, 26px);
	font-weight: 400;
	color: var(--ct-ink);
}

.ct-properties .rb-card__meta {
	gap: 0;
	font-size: 15px;
	color: var(--ct-ink-body);
}

.ct-properties .rb-card__meta svg {
	display: none;
}

.ct-properties .rb-card__meta li + li::before {
	content: "\00b7";
	margin: 0 6px;
	color: var(--ct-muted);
}

.ct-properties .rb-card__title {
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--ct-ink);
}

.ct-properties .rb-card__location {
	font-size: 13px;
	color: var(--ct-label);
}

.ct-properties .rb-card__location svg {
	display: none;
}

/* The whole card is the link, so the footer's "View Listing" affordance and
 * the repeated agent line are redundant in a dense results grid. */
.ct-properties .rb-card__footer {
	display: none;
}

/* --------------------------------------------------------- pagination --- */

.ct-properties .rb-grid__pagination {
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
}

.ct-properties .rb-grid__pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-properties .rb-grid__pagination a.page-numbers,
.ct-properties .rb-grid__pagination span.page-numbers {
	border-color: var(--ct-border);
	border-radius: 0;
	color: var(--ct-ink);
}

.ct-properties .rb-grid__pagination a.page-numbers:hover,
.ct-properties .rb-grid__pagination a.page-numbers:focus-visible {
	border-color: var(--ct-dark);
}

.ct-properties .rb-grid__pagination span.page-numbers.current {
	border-color: var(--ct-dark);
	background: var(--ct-dark);
	color: var(--ct-on-dark);
}

.ct-properties .rb-grid__page-info {
	margin: 0;
	font-size: 13px;
	color: var(--ct-label);
}

/* ---------------------------------------------------------- responsive --- */

/* Tablet: the map stacks under the results at a compact height. It follows
 * them in the document, so it follows them on screen too and the keyboard
 * meets the page in the order it is drawn. */
@media (max-width: 1024px) {
	.ct-properties .ct-properties__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-properties .ct-properties__map {
		position: static;
	}

	.ct-properties .rb-map__canvas {
		height: 320px;
		min-height: 0;
	}

	.ct-properties .ct-properties__body:not(:has(.ct-properties__map .elementor-widget)) .rb-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ct-properties {
		--ct-properties-gutter: 16px;
	}

	.ct-properties .rb-filters__grid {
		display: grid;
		flex-basis: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ct-properties .rb-filters__field--wide,
	.ct-properties .rb-filters__field--check {
		grid-column: 1 / -1;
	}

	.ct-properties .rb-filters__actions {
		width: 100%;
	}

	.ct-properties .rb-filters__submit {
		flex: 1 1 auto;
	}

	/* 16px on every control a phone can focus, or iOS zooms the page in. */
	.ct-properties .rb-filters__field select,
	.ct-properties .rb-filters__field input[type="search"],
	.ct-properties .rb-grid__sort select {
		font-size: 16px;
	}

	/* Touch: an inline box's vertical padding widens its target, not its line. */
	.ct-properties .rb-filters__reset {
		padding-block: 10px;
	}

	.ct-properties .rb-grid__sort select,
	.ct-properties .rb-grid__sort-apply {
		min-height: var(--ct-properties-control-height);
	}

	.ct-properties .rb-map__canvas {
		height: 260px;
	}

	.ct-properties .rb-grid,
	.ct-properties .ct-properties__body:not(:has(.ct-properties__map .elementor-widget)) .rb-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-properties .rb-grid__toolbar {
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-properties .rb-card__media img {
		transition: none;
	}

	.ct-properties .rb-card:hover .rb-card__media img {
		transform: none;
	}
}