/**
 * Stepfox Real Estate — agents (handle `stepfox-re-agents`, dep `stepfox-re`).
 *
 * The agent card itself (article.sfre-agent-card[data-sfre-agent], variants
 * --card/--full, --compact, --horizontal, --mini) is the canonical markup from
 * card.php and is styled ONCE in cards.css, so it looks identical in grids,
 * sidebars, the map and Elementor. This sheet owns what surrounds it:
 *
 *   - the agent-card BLOCK root (also `.sfre-agent-card`, framework class
 *     sfre-<slug>, but WITHOUT data-sfre-agent) stays a neutral wrapper;
 *   - the showStats / showContact toggles (wrapper classes);
 *   - the agents-grid layout (1 → 2 → N columns, Looks-friendly --sfre-cols);
 *   - small refinements that only make sense inside these blocks.
 *
 * Load order: blocks declare style handles [stepfox-re-cards, stepfox-re-agents],
 * so these rules sit on top of cards.css at equal specificity.
 */

.sfre-agent-card:not([data-sfre-agent]),
.sfre-agents-grid {
	--sfa-line: var(--wp--preset--color--line, rgba(20, 24, 31, 0.10));
	--sfa-panel: var(--wp--preset--color--panel, #ffffff);
	--sfa-muted: var(--wp--preset--color--muted, #5d6672);
	--sfa-ink: var(--wp--preset--color--ink, #14181f);
	--sfa-accent-2: var(--wp--preset--color--accent-2, #0f766e);
	--sfa-f-ui: var(--wp--preset--font-family--ui, "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif);
	box-sizing: border-box;
}

/* ----------------------------------------------------------------------
   agent-card block wrapper
   ---------------------------------------------------------------------- */

.sfre-agent-card:not([data-sfre-agent]) {
	display: block;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.sfre-agent-card:not([data-sfre-agent]) > .sfre-agent-card[data-sfre-agent] {
	height: auto;
}

.sfre-agent-card.is-no-stats .sfre-agent-card__stats,
.sfre-agent-card.is-no-stats .sfre-agent-card__langs {
	display: none;
}

.sfre-agent-card.is-no-contact .sfre-agent-card__actions .sfre-icon-btn,
.sfre-agents-grid.is-no-contact .sfre-agent-card__actions .sfre-icon-btn {
	display: none;
}

/* Compact: the phone button carries the number — make it a readable pill. */
.sfre-agent-card--compact[data-sfre-agent] .sfre-icon-btn:has(.sfre-icon-btn__text) {
	width: auto;
	padding: 0 14px 0 12px;
	gap: 8px;
	border-radius: 999px;
}

.sfre-agent-card--compact[data-sfre-agent] .sfre-icon-btn__text {
	font: 700 14px/1 var(--sfa-f-ui);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ----------------------------------------------------------------------
   agents-grid
   ---------------------------------------------------------------------- */

/*
 * Columns follow the space the grid really has (page column, sidebar,
 * Elementor inner container, editor canvas) instead of the viewport: as many
 * tracks of at least --sfa-min as fit, capped at --sfre-cols. A card is never
 * squeezed below the width its stats and contact buttons need.
 */
.sfre-agents-grid {
	--sfa-gap: clamp(16px, 2vw, 28px);
	--sfa-min: 240px;
}

.sfre-agents-grid--compact {
	--sfa-gap: 12px;
	--sfa-min: 250px;
}

.sfre-agents-grid--horizontal {
	--sfa-min: 420px;
}

.sfre-agents-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--sfa-min), (100% - (var(--sfre-cols, 4) - 1) * var(--sfa-gap)) / var(--sfre-cols, 4))), 1fr));
	gap: var(--sfa-gap);
	align-items: stretch;
}

/* Phone layout "Swipe rail": one row of agent cards that scrolls sideways
 * with snap points (the next card peeks in) instead of a tall stack. */
@media (max-width: 599px) {
	.sfre-agents-grid.is-mobile-rail .sfre-agents-grid__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(80%, 300px);
		gap: 14px;
		padding: 4px 0 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.sfre-agents-grid.is-mobile-rail .sfre-agents-grid__list::-webkit-scrollbar {
		display: none;
	}

	.sfre-agents-grid.is-mobile-rail .sfre-agents-grid__list > * {
		scroll-snap-align: start;
	}
}

/* Stat labels ("Listings", "Years") never break inside a word. */
.sfre-agents-grid .sfre-agent-card__stats,
.sfre-agents-grid .sfre-agent-card__stats * {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.sfre-agents-grid--compact .sfre-agent-card[data-sfre-agent] {
	height: 100%;
}

/* Wide cards: keep the role line on one row in tight columns. */
.sfre-agents-grid .sfre-agent-card__role {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Compact directory cards: the role may take two lines (clamped), so
 * "Senior Agent, Brickell & Downtown · Doorstep Realty" is never cut hard. */
.sfre-agents-grid--compact .sfre-agent-card__role {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	white-space: normal;
	overflow-wrap: break-word;
}

/* A lone full card in a wide column stays a card, not a 1200px portrait. */
.sfre-agent-card:not([data-sfre-agent]).is-full {
	max-width: 420px;
	margin-inline: auto;
}

/* Empty states. */
.sfre-agents-grid > .sfre-empty,
.sfre-agent-card:not([data-sfre-agent]) > .sfre-empty {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sfre-agents-grid .sfre-agent-card[data-sfre-agent],
	.sfre-agent-card .sfre-agent-card[data-sfre-agent] {
		transition: none;
	}
}