/* ==========================================================================
   Communities directory — two-tab search, filterable tile grid, Leaflet map.
   Loaded only on pages containing the [vesta_communities] shortcode.
   Consumes --vesta-* design tokens.
   ========================================================================== */

.vesta-communities { width: 100%; }

/* --- Search tabs --- */
.vc-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--vesta-color-border-subtle);
	margin-bottom: var(--vesta-space-md);
}
/* Buttons are scoped under .vesta-communities to outrank the kit's global
   `.elementor-kit-5 button` style (0,1,1) — two classes (0,2,0) wins.
   background-color/border-radius are reset explicitly because the kit forces
   coral + 4px on every bare <button>. */
.vesta-communities .vc-tab {
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 14px 28px;
	font-family: var(--vesta-font-heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--vesta-color-text-muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color 0.2s, border-color 0.2s;
}
.vesta-communities .vc-tab:hover { color: var(--vesta-color-navy); background-color: transparent; }
.vesta-communities .vc-tab.is-active {
	color: var(--vesta-color-coral);
	background-color: transparent;
	border-bottom-color: var(--vesta-color-coral);
}

.vc-panel { display: none; padding: var(--vesta-space-md) 0; }
.vc-panel.is-active { display: block; }

/* --- State tab: pill buttons --- */
.vc-states { display: flex; flex-wrap: wrap; gap: 10px; }
.vesta-communities .vc-state-btn {
	appearance: none;
	border: 1px solid var(--vesta-color-border-subtle);
	background-color: var(--vesta-color-white);
	color: var(--vesta-color-navy);
	font-family: var(--vesta-font-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	padding: 8px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.2s;
}
.vesta-communities .vc-state-btn:hover { border-color: var(--vesta-color-teal); background-color: var(--vesta-color-white); }
.vesta-communities .vc-state-btn.is-active {
	background-color: var(--vesta-color-teal);
	border-color: var(--vesta-color-teal);
	color: #fff;
}

/* --- Filters tab: controls --- */
.vc-filters {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--vesta-space-sm);
}
.vc-field label {
	display: block;
	font-family: var(--vesta-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--vesta-color-navy);
	margin-bottom: 6px;
}
.vc-field input,
.vc-field select {
	width: 100%;
	background: var(--vesta-form-input-bg);
	border: var(--vesta-form-input-border-width) solid var(--vesta-form-input-border-color);
	border-radius: var(--vesta-form-input-radius);
	padding: var(--vesta-form-input-padding);
	font-family: var(--vesta-font-body);
	font-size: 14px;
	color: var(--vesta-color-navy);
}
.vc-field input:focus,
.vc-field select:focus {
	outline: none;
	border-color: var(--vesta-form-input-focus-border);
}

.vc-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: var(--vesta-space-md) 0;
	gap: var(--vesta-space-sm);
	flex-wrap: wrap;
}
.vc-count { font-family: var(--vesta-font-body); font-size: 14px; color: var(--vesta-color-text-muted); }
.vesta-communities .vc-reset {
	appearance: none; background-color: transparent; border: 0; border-radius: 0;
	padding: 0; cursor: pointer;
	font-family: var(--vesta-font-heading); font-size: 13px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.05em; color: var(--vesta-color-coral);
}
.vesta-communities .vc-reset:hover { background-color: transparent; color: var(--vesta-color-coral-hover); }

/* --- Map --- */
.vc-map {
	width: 100%;
	height: 420px;
	border-radius: var(--vesta-radius-md);
	margin-bottom: var(--vesta-space-lg);
	border: 1px solid var(--vesta-color-border-subtle);
	z-index: 0;
}

/* --- Tile grid --- */
.vc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--vesta-space-md);
}
.vc-tile {
	display: flex;
	flex-direction: column;
	background: var(--vesta-color-white);
	border: 1px solid var(--vesta-color-border-subtle);
	border-radius: var(--vesta-radius-card);
	overflow: hidden;
	box-shadow: var(--vesta-shadow-card);
	transition: box-shadow 0.2s, transform 0.2s;
}
.vc-tile:hover { box-shadow: var(--vesta-shadow-card-hover); transform: translateY(-2px); }
.vc-tile.is-hidden { display: none; }

.vc-tile-thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
	background-color: var(--vesta-color-off-white);
}

/* Age indicator (55+/62+) for senior properties — plain text, image corner. */
/* Age indicator sits bottom-right, matching the listing reference the client
   supplied. Top-left is where the Featured ribbon goes. */
.vc-tile-age {
	position: absolute;
	bottom: 8px;
	right: 8px;
	font-family: var(--vesta-font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: #fff;
	background: rgba(15, 33, 55, 0.78);
	padding: 4px 8px;
	border-radius: 4px;
}

.vc-tile-body { padding: var(--vesta-card-padding); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vc-tile-name {
	font-family: var(--vesta-font-heading);
	font-size: 16px;
	font-weight: 800;
	color: var(--vesta-color-navy);
	margin: 0;
	line-height: 1.3;
}
.vc-tile-name a { color: inherit; text-decoration: none; }
.vc-tile-name a:hover { color: var(--vesta-color-coral); }
.vc-tile-meta { font-family: var(--vesta-font-body); font-size: 14px; color: var(--vesta-color-text-muted); line-height: 1.5; }
.vc-tile-street { font-weight: 600; color: var(--vesta-color-navy); }
.vc-tile-phone a { color: var(--vesta-color-navy); text-decoration: none; }
.vc-tile-phone a:hover { color: var(--vesta-color-coral); }

.vc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vc-tag {
	font-family: var(--vesta-font-heading);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	color: #fff;
}
.vc-tag--senior      { background: var(--vesta-color-teal); }
.vc-tag--affordable  { background: var(--vesta-color-coral); }
.vc-tag--section-8   { background: var(--vesta-color-navy); }
.vc-tag--market-rate { background: var(--vesta-color-text-muted); }
.vc-tag--hettig      { background: var(--vesta-color-footer-burgundy); }

.vc-tile-link {
	margin-top: auto;
	padding-top: var(--vesta-space-sm);
}
.vc-tile-link a {
	font-family: var(--vesta-font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--vesta-color-coral);
	text-decoration: none;
}
.vc-tile-link a:hover { color: var(--vesta-color-coral-hover); }

.vc-empty {
	display: none;
	padding: var(--vesta-space-xl) 0;
	text-align: center;
	font-family: var(--vesta-font-body);
	color: var(--vesta-color-text-muted);
}
.vc-empty.is-visible { display: block; }

/* --- Leaflet popup branding --- */
.vc-popup-name { font-family: var(--vesta-font-heading); font-weight: 800; color: var(--vesta-color-navy); font-size: 14px; }
.vc-popup-meta { font-family: var(--vesta-font-body); font-size: 13px; color: var(--vesta-color-text-muted); }
.vc-popup a { color: var(--vesta-color-coral); font-weight: 600; text-decoration: none; }

/* ==========================================================================
   Communities — Dominium-style hero with embedded search form
   ========================================================================== */
.vc-hero {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	padding: 150px 24px 64px; /* top clears the floating header */
}
.vc-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( rgba(31,58,95,0.5), rgba(31,58,95,0.68) );
}
.vc-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1040px;
	text-align: center;
	color: #fff;
}
/* .vc-hero scope beats the kit's `.elementor-kit-5 h1` navy color (0,1,1). */
.vc-hero .vc-hero-title {
	font-family: var(--vesta-font-heading);
	font-size: 48px;            /* matches the bumped interior H1 (primary global) */
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.06em;     /* matches H1 tracking */
	color: #fff;
	margin: 0 0 12px;
}
.vc-hero-sub {
	font-family: var(--vesta-font-body);
	font-size: 16px;
	color: #fff;
	opacity: 0.95;
	margin: 0 0 28px;
}
.vc-hero-search {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	justify-content: center;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.28);
	border-radius: var(--vesta-radius-md);
	padding: 16px;
	backdrop-filter: blur(2px);
}
.vc-hero-search .vc-hs-field { display: flex; flex-direction: column; text-align: left; gap: 6px; }
.vc-hero-search .vc-hs-field label {
	font-family: var(--vesta-font-heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
}
.vc-split .vc-hero-search input,
.vc-split .vc-hero-search select {
	height: 46px;
	width: auto;             /* beat Elementor's form-field width:100% */
	min-width: 168px;
	border: 0;
	border-radius: var(--vesta-radius-sm);
	background: #fff;
	padding: 0 14px;
	font-family: var(--vesta-font-body);
	font-size: 14px;
	color: var(--vesta-color-navy);
	cursor: pointer;
}
.vc-split .vc-hero-search .vc-hs-search input { min-width: 280px; cursor: text; }
.vc-hero-search .vc-hs-btn {
	height: 46px;
	align-self: flex-end;
	background: var(--vesta-color-coral);
	color: #fff;
	border: 0;
	border-radius: var(--vesta-radius-sm);
	padding: 0 34px;
	cursor: pointer;
	font-family: var(--vesta-font-heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.vc-hero-search .vc-hs-btn:hover { background: var(--vesta-color-coral-hover); }

.vc-results { scroll-margin-top: 110px; }

@media ( max-width: 767px ) {
	/* Must be .vc-hero-scoped: the base rule is `.vc-hero .vc-hero-title`
	   (0,2,0) and beat a bare `.vc-hero-title` (0,1,0), so this step-down never
	   applied and the hero title had been rendering at the full 48px on every
	   phone — overflowing the page below ~390px. */
	.vc-hero .vc-hero-title { font-size: 32px; }   /* matches H1 mobile */
	/* The .vc-hs-search rule above is (0,3,1) and out-ranked this reset at
	   (0,2,1), so the search box kept its 280px desktop min-width and sat 2px
	   proud of its 278px field on a 360px phone. Matched here on specificity
	   rather than reaching for !important. */
	.vc-split .vc-hero-search .vc-hs-search input,
	.vc-split .vc-hero-search .vc-hs-field,
	.vc-split .vc-hero-search input,
	.vc-split .vc-hero-search select,
	.vc-hero-search .vc-hs-btn { width: 100%; min-width: 0; }
	.vc-hero-search { flex-direction: column; align-items: stretch; }
}
/* "COMMUNITY" is one unbreakable 9-character word: at 32px/800 with 0.06em
   tracking it measures 347px, which overflows the 312px content box of a 360px
   phone and gives the whole page a horizontal scroll. Step the hero title down
   on narrow handsets. */
@media ( max-width: 400px ) {
	.vc-hero .vc-hero-title { font-size: 26px; }
}

/* ==========================================================================
   Featured Properties strip — between the hero and the map/list
   ========================================================================== */
/* Same width formula as the header pill and the map/list below it, so all
   three share one left/right edge. */
.vc-featured {
	width: min(
		var(--vesta-header-max),
		calc(100% - 2 * var(--vesta-container-pad-x))
	);
	margin: var(--vesta-space-lg) auto;
}
.vc-featured-title {
	font-family: var(--vesta-font-heading);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--vesta-color-navy);
	margin: 0 0 var(--vesta-space-sm);
}

/* Equal columns, no gutters — the photos butt up against each other so the
   strip reads as one band. Rounded ends via overflow on the wrapper. */
.vc-featured-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	border-radius: var(--vesta-radius-md);
	overflow: hidden;
	box-shadow: var(--vesta-shadow-card);
}
.vc-fp {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: var(--vesta-color-off-white);
	text-decoration: none;
	overflow: hidden;
}

.vc-fp-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: var(--vesta-card-padding);
	/* Coral wash, matching the reference comp. Semi-transparent so the
	   building still reads through it. */
	background: rgba(232, 74, 111, 0.82);
	color: #fff;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.vc-fp-name {
	font-family: var(--vesta-font-heading);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
}
.vc-fp-meta { font-family: var(--vesta-font-body); font-size: 15px; }
.vc-fp-cta {
	margin-top: 6px;
	font-family: var(--vesta-font-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Reveal on hover only where hovering is actually possible. Keyboard users get
   the same reveal via :focus-visible. */
@media (hover: hover) {
	.vc-fp:hover .vc-fp-overlay { opacity: 1; }
}
.vc-fp:focus-visible { outline: 3px solid var(--vesta-color-teal); outline-offset: -3px; }
.vc-fp:focus-visible .vc-fp-overlay { opacity: 1; }

/* Touch devices never fire hover, so the names would be unreachable. Show a
   permanent gradient caption instead of the coral wash. */
@media (hover: none) {
	.vc-fp-overlay {
		opacity: 1;
		background: linear-gradient( rgba(31, 58, 95, 0) 45%, rgba(31, 58, 95, 0.85) 100% );
	}
	.vc-fp-cta { display: none; }
}

/* Four across gets too narrow to read below ~1024, so wrap to 2x2 — but halving
   the columns doubles each tile's width, and at 4/3 the strip would then run
   ~700px tall and swallow the viewport. Flatten the ratio to keep it a strip. */
@media (max-width: 1024px) {
	.vc-featured-strip { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
	.vc-fp { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
	/* Stay 2-up rather than stacking: four full-width banners is a lot of
	   scrolling before the map. Text scales down to fit the smaller tile. */
	.vc-fp { aspect-ratio: 4 / 3; }
	.vc-fp-overlay { padding: 12px; gap: 3px; }
	.vc-fp-name { font-size: 13px; letter-spacing: 0.03em; }
	.vc-fp-meta { font-size: 12px; }
	.vc-featured-title { font-size: 20px; }
}

/* ==========================================================================
   V2 — Split layout (Dominium-style): filter bar + map-left / list-right
   ========================================================================== */
.vc-split .vc-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 14px 16px;
	background: var(--vesta-color-navy);
	border-radius: var(--vesta-radius-md) var(--vesta-radius-md) 0 0;
}
.vc-split .vc-fb-field {
	height: 44px;
	width: auto; /* override Elementor form-field width:100% so the bar stays horizontal */
	max-width: 100%;
	border: 1px solid var(--vesta-color-border-subtle);
	border-radius: var(--vesta-radius-sm);
	background: var(--vesta-color-white);
	padding: 0 14px;
	font-family: var(--vesta-font-body);
	font-size: 14px;
	color: var(--vesta-color-navy);
}
.vc-split .vc-fb-search { flex: 1 1 220px; min-width: 180px; }
.vc-split select.vc-fb-field { flex: 0 1 auto; min-width: 150px; cursor: pointer; }
.vc-split .vc-filterbar .vc-reset {
	margin-left: auto;
	color: #fff;
	padding: 0 8px;
}
.vc-split .vc-filterbar .vc-reset:hover { color: var(--vesta-color-teal); }

/* Constrain the filter bar + map/list instead of running full-bleed, using the
   same width formula as the floating header pill (.vesta-header) so their left
   and right edges line up at every viewport width. Both sit in a full-width
   parent, so matching the formula is enough. The hero band stays full width. */
.vc-split .vc-filterbar,
.vc-split .vc-split-body {
	width: min(
		var(--vesta-header-max),
		calc(100% - 2 * var(--vesta-container-pad-x))
	);
	margin-left: auto;
	margin-right: auto;
}

.vc-split-body {
	display: flex;
	align-items: flex-start;
	gap: 0;
	border: 1px solid var(--vesta-color-border-subtle);
	border-top: 0;
	border-radius: 0 0 var(--vesta-radius-md) var(--vesta-radius-md);
	overflow: hidden;
}
.vc-split .vc-map {
	flex: 0 0 58%;
	height: 760px;
	margin: 0;
	border: 0;
	border-radius: 0;
	position: sticky;
	top: 0;
}
.vc-split .vc-list {
	/* 42% leaves each row card enough width for a square thumbnail (see
	   .vc-tile--row .vc-tile-thumb) without squeezing the text column. */
	flex: 1 1 42%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	max-height: 760px;
}
.vc-split .vc-toolbar {
	margin: 0;
	padding: 12px 20px;
	border-bottom: 1px solid var(--vesta-color-border-subtle);
	background: var(--vesta-color-off-white);
}
.vc-split .vc-list-scroll {
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Horizontal card variant — uniform card height so every thumbnail is the
   same size regardless of how many lines the name/address wrap to. Without a
   fixed height the stretched thumbs vary card-to-card (2-line names, etc.). */
.vc-tile--row { flex-direction: row; align-items: stretch; height: 210px; min-height: 210px; flex-shrink: 0; overflow: hidden; }
/* Square thumbnail. A percentage basis made the thumb narrower than the card is
   tall, so `background-size: cover` cropped landscape property photos down to a
   tall vertical sliver. Pinning the width to the card height keeps the crop
   square; the max-width is the escape hatch on narrow cards, where a 210px
   thumb would eat the text column (it goes slightly portrait there instead). */
.vc-tile--row .vc-tile-thumb {
	flex: 0 0 auto;
	width: 210px;
	max-width: 42%;
	aspect-ratio: auto;   /* height comes from the fixed card height, kept uniform */
	height: 210px;
	min-height: 210px;
	align-self: stretch;
	border-radius: 0;
}
.vc-tile--row .vc-tile-body { flex: 1 1 auto; padding: 16px 18px; gap: 4px; justify-content: center; overflow: hidden; }
.vc-tile--row .vc-tile-name {
	font-size: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.vc-tile--row .vc-tile-link { padding-top: 8px; }

/* --- Responsive --- */
/* Between the stack point and ~1240 a 42%-wide row card can't hold a 210px
   square thumb next to the text, so the crop would go portrait again. Give the
   list an even half of the row through that band to keep the thumbs square. */
@media (min-width: 1025px) and (max-width: 1240px) {
	.vc-split .vc-map  { flex: 0 0 50%; }
	.vc-split .vc-list { flex: 1 1 50%; }
}
@media (max-width: 1024px) {
	.vc-grid { grid-template-columns: repeat(2, 1fr); }
	.vc-filters { grid-template-columns: repeat(2, 1fr); }
	.vc-split-body { flex-direction: column; }
	.vc-split .vc-map { flex: none; width: 100%; height: 380px; position: relative; }
	.vc-split .vc-list { max-height: none; width: 100%; }
	.vc-split .vc-list-scroll { max-height: 720px; }
}
@media (max-width: 767px) {
	.vc-grid { grid-template-columns: 1fr; }
	.vc-filters { grid-template-columns: 1fr; }
	.vc-tabs { flex-direction: row; }
	.vc-tab { flex: 1; padding: 12px 8px; font-size: 12px; }
	.vc-split .vc-fb-field { flex: 1 1 100%; }

	/* The results list flows in the page on a phone. A 720px inner scroller
	   wrapping 13,000px of cards is a scroll trap: the page stops moving the
	   moment a finger lands on the list, and there's no way to tell you're in
	   a nested scroller. Narrowing 58 properties down is the map and filters'
	   job, not an inner scrollbar's. */
	.vc-split .vc-list-scroll { max-height: none; overflow-y: visible; }
	.vc-split .vc-map { height: 320px; }

	/* Stack the card on mobile: photo on top + full text body below.
	   height:auto is the load-bearing part — the desktop rule pins the card at
	   210px with overflow:hidden, so once stacked the 200px photo left a 32px
	   sliver for the text and the street, city, phone and "Visit Property
	   Website" link were all clipped off. Clearing min-height alone didn't
	   release it. The thumb also needs a definite height rather than an
	   aspect-ratio, which mis-sizes inside a column flex item. */
	.vc-tile--row { flex-direction: column; height: auto; min-height: 0; }
	/* max-width must be released here — the square-thumb cap above would hold
	   the stacked photo to 42% of the card instead of the full width. */
	.vc-tile--row .vc-tile-thumb { flex: 0 0 200px; width: 100%; max-width: none; height: 200px; min-height: 200px; aspect-ratio: auto; }
	.vc-tile--row .vc-tile-body { flex: 1 1 auto; }
}


/* Featured ribbon — marks a featured property in the listing itself, not just
   in the Featured Properties strip above. Coral is the palette's emphasis
   accent, so the flag reads as emphasis rather than a new colour. */
.vc-tile-flag {
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 2;
	font-family: var(--vesta-font-heading);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
	background: var(--vesta-color-coral);
	padding: 6px 12px;
	box-shadow: 0 1px 6px rgba(31, 58, 95, 0.28);
}
@media (max-width: 767px) {
	.vc-tile-flag { font-size: 10px; padding: 5px 9px; }
}

/* "All Communities" heading above the map. Same type and width as the
   Featured Properties title so the two bands line up edge to edge. */
.vc-results-title {
	width: min(
		var(--vesta-header-max),
		calc(100% - 2 * var(--vesta-container-pad-x))
	);
	margin: var(--vesta-space-lg) auto var(--vesta-space-sm);
	font-family: var(--vesta-font-heading);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--vesta-color-navy);
}
/* The map box has no top border (it used to sit flush under the filter bar),
   so give it one now that a heading sits above it. */
.vc-split .vc-split-body { border-top: 1px solid var(--vesta-color-border-subtle); border-radius: var(--vesta-radius-md); }
@media (max-width: 767px) {
	.vc-results-title { font-size: 20px; }
}

/* Listing with no photo yet (e.g. newly added Hettig properties). Same box as
   a real thumbnail so the row keeps its shape. */
.vc-tile-thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #E8F0EF 0%, #F5F7F8 100%);
}
.vc-tile-thumb--empty > span:not(.vc-tile-age) {
	font-family: var(--vesta-font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4C5B66;   /* 5.9:1 on the lighter end of the panel */
}
.vc-tile-thumb--empty { position: relative; }