/**
 * Chamber Fusion — Public Directory Grid ([cf_directory_grid]).
 *
 * Polite by design: this stylesheet sets LAYOUT only (grid, card shape,
 * shadows, the letter-avatar engine). It deliberately does NOT set font
 * families or button background colors — those inherit from the active theme
 * (Divi, Elementor, etc.) so the directory always feels native to the site.
 */

/* Full-width search + category filter bar. Polite: structural only, inherits
   the theme's font + text color. */
.cfdg-search {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.5rem 0;
}

/* Premium Vercel/Linear search field (v1.83.0): THEME-ADAPTIVE — light
   surface/dark text on light themes, dark surface/light text on dark themes —
   while always keeping the brand-accent focus ring/glow, clean placeholder, and
   smooth transitions. Adapts via prefers-color-scheme so it never clashes with
   the host theme. */
.cfdg-search__input,
.cfdg-search__cat {
	padding: 0.78rem 1rem;
	border: 1px solid rgba( 120, 130, 150, 0.32 );
	border-radius: 10px;
	background: #ffffff;
	color: #1e293b;
	font-size: 1rem;
	line-height: 1.2;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.cfdg-search__input {
	flex: 1 1 280px;
	min-width: 0;
}

.cfdg-search__cat {
	flex: 0 0 auto;
	cursor: pointer;
}

.cfdg-search__input::placeholder {
	color: #64748b;
}

.cfdg-search__input:hover,
.cfdg-search__cat:hover {
	border-color: rgba( 120, 130, 150, 0.55 );
}

/* The brand-accent focus ring is preserved on every theme. */
.cfdg-search__input:focus,
.cfdg-search__cat:focus {
	outline: none;
	border-color: var( --cf-brand-primary, #2563eb );
	box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.25 );
}

@media ( prefers-color-scheme: dark ) {
	.cfdg-search__input,
	.cfdg-search__cat {
		background: #14161c;
		color: #e7e9ee;
		border-color: rgba( 150, 160, 180, 0.22 );
	}

	.cfdg-search__input::placeholder {
		color: #8b919e;
	}

	.cfdg-search__input:hover,
	.cfdg-search__cat:hover {
		border-color: rgba( 150, 160, 180, 0.4 );
	}

	.cfdg-search__input:focus,
	.cfdg-search__cat:focus {
		background: #171a21;
		border-color: var( --cf-brand-primary, #2563eb );
		box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.32 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cfdg-search__input,
	.cfdg-search__cat {
		transition: none;
	}
}

.cfdg-noresults {
	opacity: 0.7;
	padding: 1rem 0;
}

/* Load More: polite button — inherits theme text/link color, no forced bg. */
.cfdg-loadmore-wrap {
	text-align: center;
	/* Generous bottom gap so the control never crowds the site footer. */
	margin: 1.5rem 0 3rem;
}

.cfdg-loadmore {
	padding: 0.7rem 1.7rem;
	border: 1px solid currentColor;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.cfdg-loadmore:hover {
	opacity: 0.8;
}

.cfdg-loadmore[disabled] {
	opacity: 0.5;
	cursor: default;
}

.cfdg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0;
}

.cfdg-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

/* Featured (premium) members: subtle accent ring + corner badge. */
.cfdg-card--featured {
	box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.35), 0 6px 16px rgba(0, 0, 0, 0.08);
}

.cfdg-featured-badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	background: #b45309;
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.2rem 0.55rem;
	border-radius: 9999px;
}

/* Media + heading are the click target for the single profile. */
.cfdg-card__top {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Strict 16:9 image box. */
.cfdg-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	background: #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cfdg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* Logos touch the edges without stretching. */
}

/* Dynamic letter avatar (no logo). White, centered, sans-serif glyph. */
.cfdg-avatar {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
}

.cfdg-card__head {
	padding: 1rem 1.25rem 0.5rem;
}

.cfdg-card__title {
	margin: 0 0 0.25rem;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.cfdg-card__cat {
	font-size: 0.85rem;
	opacity: 0.7;
}

.cfdg-card__foot {
	padding: 0.5rem 1.25rem 1.25rem;
	margin-top: auto; /* Pin the action row to the bottom on uneven cards. */
}

.cfdg-card__addr {
	font-size: 0.9rem;
	line-height: 1.4;
	opacity: 0.8;
	margin-bottom: 0.85rem;
}

/* Polite button: structural only — inherits the theme's text/link color, no
   forced brand background. */
.cfdg-btn {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}

.cfdg-btn:hover {
	opacity: 0.8;
}

.cfdg-phone {
	font-size: 0.95rem;
	font-weight: 600;
}

.cfdg-empty {
	opacity: 0.7;
	padding: 1rem 0;
}