/*
 * JSBO Critical CSS — loaded before the main Vite bundle.
 *
 * PURPOSE
 * Rules here must be present on first paint; they cannot wait for the Vite
 * CSS (plugin.css) to finish loading. The main stylesheet restates or extends
 * every rule in this file, so normal cascade order handles overrides — no
 * specificity problems, no !important.
 *
 * WHAT BELONGS HERE
 * Only add rules that prevent a visible layout shift or flash on first render:
 *   - Container dimensions that images or other media depend on
 *   - Skeleton/placeholder geometry
 * Do NOT add decorative rules (colours, shadows, typography). Those wait for
 * the full stylesheet.
 */

/* Reserve 4:3 space for property card media containers on first paint.
	Without these rules, images render at their native dimensions before
	plugin.css applies layout constraints, causing a visible layout shift.
	aspect-ratio alone is sufficient — no max-width needed here. */
.jsbo .jsbo-property-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
}
.jsbo .jsbo-property-card-wide__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
}
.jsbo .jsbo-property-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	/* Must match plugin.css: z-index 1, not 2, so the strip stays strictly below
	the carousel controls (z-index 2) and document order can never decide which
	wins (BOS-503). Keep these two files in agreement — an unmirrored value here
	is exactly how BOS-503 happened. */
	z-index: 1;
	/* Mirrors plugin.css: the strip is inert, so hover/click over any overlap with
	the carousel arrows reaches the arrow, not this div. */
	pointer-events: none;
}

/* Group-level collapse for the amenities / "What's nearby" sections (BOS-533).

Lives here rather than only in plugin.css because the toggle that depends on it
(public/js/categorized-toggle.js) is likewise served outside the Vite bundle.
If this rule shipped only in the bundled stylesheet, a page that loaded the
plain script but not the bundle would reveal the button, collapse the wrapper,
and hide nothing — the class would have no styling behind it. Keep the two
files in agreement; plugin.css carries the same rule for the bundled path. */
.jsbo .jsbo-categorized--collapsed .jsbo-categorized__group--overflow {
	display: none;
}