/* 
 * ==================================================================
 * WP Grid Builder - People Grid Styling to Match Reference Design
 * ==================================================================
 */

/* Hide the community facet since it's auto-filtered by URL slug */
.wpgb-facet-2 {
	display: none !important;
}

/* Add "CATEGORIES:" label before dropdown */
.wpgb-facet-1::before {
	content: "CATEGORY:" !important;
	font-family: 'Mosvita', sans-serif !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	font-size: 14px !important;
	color: #3e3e3e !important;
	/* letter-spacing: 0.05em !important; */
	margin-right: 5px !important;
}

/* Filter Bar Layout - matches reference design */
.wpgb-facet-1 {
	display: flex !important;
	/* align-items: center !important; */
	gap: 5px !important;
	margin-bottom: 50px !important;
	padding: 0 !important;
	border-bottom: 2px solid #3e3e3e !important;
	width: 100% !important;
	justify-content: flex-start !important;
	align-items: baseline !important;
}


.wpgb-facet .wpgb-input, .wpgb-facet select.wpgb-select {
	border-color: #3e3e3e !important;
}

/* Dropdown menu options background */
.wpgb-select option {
	background-color: #f5f5f5 !important;
}

/* Dropdown menu options hover/active state */
.wpgb-select option:hover,
.wpgb-select option:active,
.wpgb-select option:focus,
.wpgb-select option:checked {
	background-color: #f5f5f5 !important;
}

/* Custom dropdown arrow */
/* .wpgb-select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	background-size: 12px !important;
} */

/* Add "FILTER PEOPLE" text with arrow after dropdown */
/* .wpgb-facet::after {
	content: "FILTER PEOPLE →" !important;
	font-family: 'Roboto Mono', monospace !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	font-size: 14px !important;
	color: #333 !important;
	letter-spacing: 0.05em !important;
	margin-left: 10px !important;
} */


.wpgb-facet select {
	padding-inline-end: 0px !important;
}

.wpgb-select-facet {
	/* Width is now handled dynamically by JavaScript */
	min-width: 250px !important;
}

.wpgb-select {
	font-family: 'Mosvita', sans-serif !important;
	font-weight: 800;
	font-size: 12px !important;
	text-align: left;
	padding: 3px 8px !important;
}

/* Dropdown button active/focus states */
.wpgb-select:hover,
.wpgb-select:active,
.wpgb-select:focus {
	background-color: #f5f5f5 !important;
}
/* .wpgb-select-toggle {
	margin: 0 !important;
	width: 12px !important;
}  */


/* .wpgb-facet fieldset {
    margin-bottom: 0 !important;
} */

/* Hide the default thumbnail */
.wpgb-card-media-thumbnail {
    display: none !important;
}

/* Force the media content to flow normally instead of WP Grid Builder's positioning BS */
.wpgb-card-media-content {
    display: block !important;
    position: static !important;
}

.wpgb-card-media-content-top {
    position: unset !important;
}

.wpgb-card-media-content-bottom {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
}

/* Person Name - bold and smaller */
.wpgb-card .person-name {
	font-family: 'Mosvita', sans-serif !important;
	font-weight: 800;
	font-size: 12px !important;
	text-align: center;
	margin: 0 0 2px 0 !important;
	line-height: 1.1 !important;
}

/* Person Position - smaller text under name */
.wpgb-card .person-position {
	font-family: 'Roboto Mono', monospace !important;
	font-weight: 500;
	font-size: 10px !important;
	color: #6b7280 !important;
	text-align: center;
	margin: 0 !important;
	line-height: 1.2 !important;
}

/* Grid layout to match reference */
.wpgb-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
}

/* Responsive adjustments */
/* @media (max-width: 768px) {
	.wpgb-cards {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 16px;
	}
	
	.wpgb-card .person-name {
		font-size: 14px;
	}
	
	.wpgb-card .person-position {
		font-size: 11px;
	}
}  */