/**
 * Listing card component (spec: docs/COMPONENTS.md).
 * Consumes design tokens only — no raw values outside the token sheet.
 *
 * Phase 28.0: colors/border metrics/font sizes also consume the
 * `--rb-card-*` custom properties emitted by RB_Card_Appearance from
 * Settings → Card Appearance (RB_Config `card_appearance` section).
 * Every one of them falls back to the existing sitewide token (`var(a,
 * b)` — b only applies if a is unset) so a site that never touches that
 * settings tab renders byte-identical to before this phase.
 */

/* Phase 28.1: at --rb-shadow-xs the card had no perceptible edge against
   a white page on a white card (border color is a near-white neutral by
   design) — the card read as flat, un-bounded content rather than a
   discrete object. One step up, --rb-shadow-sm, is still a soft, low
   ~8% warm-black shadow (see style.css) — not a "heavy shadow," just
   enough definition for the card to read as a physical card at rest. */
.rb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--rb-card-bg, var(--rb-bg));
	border-style: solid;
	border-width: var(--rb-card-border-width, 1px);
	border-color: var(--rb-card-border, var(--rb-border));
	border-radius: var(--rb-card-radius, var(--rb-radius-md));
	box-shadow: var(--rb-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--rb-duration-base) var(--rb-ease), transform var(--rb-duration-base) var(--rb-ease), border-color var(--rb-duration-base) var(--rb-ease);
}

/* Whole card is one link (stretched); inner CTA is decorative. */
.rb-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

@media (hover: hover) {
	/* Restrained premium touch (Phase 28.0): a hairline gold border-color
	   lift on hover, matching the same already-established pattern on
	   the feature grid and representative card (.rb-fgrid__item:hover,
	   .rb-bcard:hover) — not a new visual language, just consistency.
	   Not part of the configurable schema (kept simple, always the
	   sitewide accent), same as those siblings. */
	.rb-card:hover {
		box-shadow: var(--rb-shadow-md);
		transform: var(--rb-hover-lift);
		border-color: var(--rb-accent);
	}
	.rb-card:hover .rb-card__cta {
		color: var(--rb-card-cta-hover, var(--rb-accent-dark));
	}
	.rb-card:hover .rb-card__media img {
		transform: scale(1.03);
	}
}

/* Keyboard focus mirrors hover + visible ring on the card itself. */
.rb-card:focus-within {
	box-shadow: var(--rb-shadow-md);
	outline: 2px solid var(--rb-primary);
	outline-offset: 2px;
}
.rb-card:focus-within .rb-card__link:focus-visible {
	outline: none; /* ring is drawn by the card, avoid double outline */
}

/* Touch: no lift, larger implicit target is the whole card. */
@media (hover: none) {
	.rb-card:active {
		box-shadow: var(--rb-shadow-sm);
	}
}

/* --- Media --- */
.rb-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--rb-muted);
	overflow: hidden;
}
.rb-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--rb-duration-slow) var(--rb-ease);
}
.rb-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rb-font-display);
	font-size: 48px;
	color: var(--rb-primary);
	background: var(--rb-primary-tint);
}

/* --- Badges --- */
.rb-badge {
	position: absolute;
	top: var(--rb-space-3);
	left: var(--rb-space-3);
	padding: var(--rb-space-1) var(--rb-space-3);
	border-radius: var(--rb-radius-sm);
	font-family: var(--rb-font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--rb-text-invert);
	box-shadow: var(--rb-shadow-sm);
}
.rb-badge--success { background: var(--rb-success); }
.rb-badge--warning { background: var(--rb-warning); }
.rb-badge--sold    { background: var(--rb-secondary); color: var(--rb-accent); }
.rb-badge--muted   { background: var(--rb-gray-600); }

.rb-card__star {
	position: absolute;
	top: var(--rb-space-3);
	right: var(--rb-space-3);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--rb-radius-pill);
	background: var(--rb-secondary);
	color: var(--rb-accent);
	font-size: 14px;
	box-shadow: var(--rb-shadow-sm);
}

/* --- Body ---
   Phase 28.1: more generous padding/rhythm (space-4/space-2 -> space-5/
   space-3) — the previous tight spacing was a large part of why the
   card read as a compressed directory row rather than an editorial
   card; the content itself is unchanged, it simply has room to breathe. */
.rb-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-3);
	padding: var(--rb-space-5);
	flex-grow: 1;
}

.rb-card__pricing {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rb-space-2);
}
.rb-card__price {
	font-family: var(--rb-font-body);
	font-size: var(--rb-card-price-size, 24px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--rb-card-price, var(--rb-text));
	line-height: 1.2;
}
.rb-card__sde {
	font-size: 13px;
	font-weight: 500;
	color: var(--rb-text-secondary);
	white-space: nowrap;
}

/* html .elementor-kit-6 prefix: this is a real `<h2>` tag, and Elementor's
   Kit Theme Style emits `.elementor-kit-6 h2` (class+TAG, (0,1,1)) for
   every h1-h6 — one step more specific than a bare class selector like
   `.rb-card__title` alone (0,1,0). Confirmed live: the equivalent
   `.rb-bcard__name`/h3 rule was silently losing this exact tie before
   this fix was applied (the Card Appearance color changed correctly in
   the emitted CSS variable, but never reached the rendered element). */
html .elementor-kit-6 .rb-card__title {
	font-family: var(--rb-font-body);
	font-size: var(--rb-card-title-size, 18px);
	font-weight: 600;
	line-height: 1.4;
	color: var(--rb-card-title, var(--rb-text));
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rb-card__pill {
	align-self: flex-start;
	padding: 2px var(--rb-space-3);
	border: 1px solid var(--rb-primary);
	border-radius: var(--rb-radius-pill);
	background: var(--rb-primary-tint);
	color: var(--rb-primary);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rb-card__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rb-space-2) var(--rb-space-4);
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: var(--rb-card-meta, var(--rb-text-secondary));
}
.rb-card__meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.rb-card__location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	color: var(--rb-card-meta, var(--rb-text-secondary));
}

.rb-card__highlights {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-2);
	font-size: 14px;
	color: var(--rb-card-body, var(--rb-text));
}
.rb-card__highlights li {
	display: flex;
	align-items: baseline;
	gap: var(--rb-space-2);
}
.rb-card__highlights svg {
	flex-shrink: 0;
	color: var(--rb-accent-dark);
	transform: translateY(2px);
}

/* Phase 28.1: a touch more top padding — "clearer separation from the
   listing content" — before the existing divider (unchanged: still a
   plain hairline, not a heavier treatment). */
.rb-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rb-space-2);
	margin-top: auto;
	padding-top: var(--rb-space-4);
	border-top: 1px solid var(--rb-border);
	font-size: 14px;
}
.rb-card__representative {
	display: inline-flex;
	align-items: center;
	gap: var(--rb-space-2);
	color: var(--rb-text-secondary);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rb-card__avatar {
	width: 28px;
	height: 28px;
	border-radius: var(--rb-radius-pill);
	object-fit: cover;
	flex-shrink: 0;
}
/* Decorative only (aria-hidden) — the whole card is already the real
   link (.rb-card__link, stretched). Phase 27.2: Burgundy previously
   here doubled up the card's own brand accent without adding any
   distinct meaning, so this follows the neutral-text role instead,
   with a small gold lift on hover as the deliberate accent touch.
   Phase 28.1: given as plain sentence-case text this read as an
   afterthought caption rather than "premium and deliberate" — the
   uppercase/letter-spacing/smaller-size treatment matches the same
   label language already used for the Confidential pill and the
   representative card's position line, so it reads as an intentional
   small action label instead, without becoming a filled/oversized
   button (the whole card is already the real click target). */
.rb-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rb-card-cta, var(--rb-text));
	white-space: nowrap;
	transition: color var(--rb-duration-fast) var(--rb-ease);
}
.rb-card__cta svg {
	transition: transform var(--rb-duration-fast) var(--rb-ease);
}
@media (hover: hover) {
	.rb-card:hover .rb-card__cta svg {
		transform: translateX(2px);
	}
}

/* --- Variants --- */
.rb-card--featured {
	border-color: var(--rb-accent);
}
.rb-card--sold .rb-card__media img {
	filter: grayscale(0.45);
}
.rb-card--sold .rb-card__price {
	color: var(--rb-text-secondary);
}