/**
 * Representative card, representative grid, single-representative
 * profile. Token-driven.
 *
 * Phase 28.0: colors/border metrics/font sizes also consume the
 * `--rb-rep-card-*` custom properties emitted by RB_Card_Appearance
 * from Settings → Card Appearance. See listing-card.css's matching
 * comment for the full fallback-chain rationale.
 */

.rb-bgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rb-grid-gap);
}
@media (max-width: 1024px) {
	.rb-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.rb-bgrid { grid-template-columns: 1fr; gap: var(--rb-grid-gap-mobile); }
}

/* Phase 28.1: shadow xs -> sm, same reasoning as the listing card (a
   near-white border on a white/ivory page gave the card no perceptible
   edge at rest). Padding tightened slightly (space-6 -> space-5
   vertical) — the diagnosis for this card specifically was "large
   areas of unused space" around a small portrait; the fix is a more
   confident, slightly tighter frame, not more content. */
.rb-bcard {
	position: relative;
	text-align: center;
	background: var(--rb-rep-card-bg, var(--rb-bg));
	border-style: solid;
	border-width: var(--rb-rep-card-border-width, 1px);
	border-color: var(--rb-rep-card-border, var(--rb-border));
	border-radius: var(--rb-rep-card-radius, var(--rb-radius-md));
	box-shadow: var(--rb-shadow-sm);
	padding: var(--rb-space-5);
	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);
}
@media (hover: hover) {
	.rb-bcard:hover {
		box-shadow: var(--rb-shadow-md);
		transform: var(--rb-hover-lift);
		border-color: var(--rb-accent);
	}
	.rb-bcard:hover .rb-bcard__photo {
		box-shadow: 0 0 0 3px var(--rb-surface), 0 0 0 4px var(--rb-accent);
	}
}
.rb-bcard:focus-within {
	outline: 2px solid var(--rb-primary);
	outline-offset: 2px;
}
/* Phase 28.1: the resting ring used to be --rb-primary-tint, a nearly-
   white pink wash — effectively invisible against the card's own
   white/ivory background, so the portrait read as "just a photo in a
   circle" rather than a framed profile element. A restrained neutral
   two-layer ring (an ivory gap, then a hairline border) gives it a
   defined edge without introducing color; hover swaps the same
   structure to the gold accent as the deliberate "premium" moment.
   Portrait enlarged slightly (156 -> 168px) so it reads as an
   intentional focal point rather than a small circle lost in the
   card's whitespace. */
.rb-bcard__photo {
	width: 168px;
	height: 168px;
	margin: 0 auto var(--rb-space-4);
	border-radius: var(--rb-radius-pill);
	overflow: hidden;
	background: var(--rb-muted);
	box-shadow: 0 0 0 3px var(--rb-surface), 0 0 0 4px var(--rb-border);
	transition: box-shadow var(--rb-duration-base) var(--rb-ease);
}
.rb-bcard__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* html .elementor-kit-6 prefix: real `<h3>` tag vs. Elementor Kit Theme
   Style's `.elementor-kit-6 h3` (0,1,1) — same specificity gap as
   listing-card.css's `.rb-card__title` fix; confirmed live via a real
   settings-value change that silently never reached this element
   before this fix (matched-rule inspection, not guessed). */
html .elementor-kit-6 .rb-bcard__name {
	margin: 0 0 var(--rb-space-1);
	font-size: var(--rb-rep-card-name-size, 18px);
	color: var(--rb-rep-card-name, var(--rb-text));
}
/* Restrained uppercase/letter-spacing treatment (Phase 28.0) — a small,
   CSS-only refinement distinguishing "position" as a label rather than
   a second name, consistent with the eyebrow/label language already
   used elsewhere (e.g. .rb-shero__stat dt, .rb-broker__kicker). */
.rb-bcard__position {
	margin: 0 0 var(--rb-space-2);
	font-size: var(--rb-rep-card-position-size, 13.5px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rb-rep-card-position, var(--rb-text-secondary));
}
.rb-bcard__specialties {
	margin: 0 0 var(--rb-space-4);
	font-size: var(--rb-rep-card-specialty-size, 12.5px);
	color: var(--rb-rep-card-specialty, var(--rb-accent-dark));
}
/* Decorative only (aria-hidden) — the whole card is already the real
   link (.rb-card__link, stretched), same reasoning as .rb-card__cta
   on the listing card (Phase 27.2). Phase 28.1: previously an
   always-visible bordered pill — exactly the "generic oversized pill
   button" look this phase's brief calls out. The pill's shape/padding
   is kept (so the hover fill below doesn't shift layout), but the
   border is transparent at rest and the label follows the same
   uppercase/letter-spaced language as .rb-bcard__position and the
   listing card's CTA — a quiet label at rest, becoming a genuine
   Near Black button only on interaction. */
.rb-bcard__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--rb-space-2) var(--rb-space-4);
	border: 1px solid transparent;
	border-radius: var(--rb-radius-pill);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rb-rep-card-cta, var(--rb-text));
	transition: background var(--rb-duration-fast) var(--rb-ease), color var(--rb-duration-fast) var(--rb-ease), border-color var(--rb-duration-fast) var(--rb-ease);
}
.rb-bcard__cta::after {
	content: "\2192";
}
@media (hover: hover) {
	.rb-bcard:hover .rb-bcard__cta {
		background: var(--rb-secondary);
		border-color: var(--rb-secondary);
		color: var(--rb-rep-card-cta-hover, var(--rb-text-invert));
	}
}

/* --- Single broker profile --- */
.rb-bprofile__header {
	display: flex;
	gap: var(--rb-space-6);
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: var(--rb-space-6);
}
.rb-bprofile__photo {
	width: 160px;
	height: 160px;
	flex-shrink: 0;
	border-radius: var(--rb-radius-lg);
	overflow: hidden;
	background: var(--rb-muted);
}
.rb-bprofile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rb-bprofile__name {
	margin: 0 0 var(--rb-space-1);
}
.rb-bprofile__position {
	margin: 0 0 var(--rb-space-2);
	font-size: 17px;
	color: var(--rb-text-secondary);
}
.rb-bprofile__meta {
	margin: 0 0 var(--rb-space-4);
	font-size: 14px;
	color: var(--rb-text-secondary);
}
.rb-bprofile__actions {
	display: flex;
	gap: var(--rb-space-2);
	flex-wrap: wrap;
}
.rb-bprofile__bio {
	max-width: 760px;
	margin-bottom: var(--rb-space-6);
	line-height: 1.7;
	color: var(--rb-rep-card-body, var(--rb-text));
}
.rb-bprofile__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rb-space-5);
	margin-bottom: var(--rb-space-7);
	padding: var(--rb-space-5);
	background: var(--rb-surface);
	border: 1px solid var(--rb-border);
	border-radius: var(--rb-radius-md);
}
.rb-bprofile__facts h2 {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--rb-text-secondary);
	margin: 0 0 var(--rb-space-1);
}
.rb-bprofile__facts p {
	margin: 0;
	font-size: 14.5px;
	font-weight: 500;
}
.rb-bprofile__listings h2 {
	font-size: 24px;
	margin: 0 0 var(--rb-space-4);
}

@media (max-width: 767px) {
	.rb-bprofile__header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.rb-bprofile__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.rb-bprofile__actions {
		justify-content: center;
	}
}