/* Shared native filter pills must not add an inline baseline below the control. */
html body :is(.filter-form, .cie-project-filter-form, .cie-resources__filters) select {
	display: block !important;
	vertical-align: middle;
	margin-block: 0 !important;
}

/* The select defines the wrapper height; its visible caption uses that same box. */
html body .filter-form .cie-blog-select-control {
	position: relative;
	display: grid !important;
	align-items: stretch;
	height: auto;
	min-height: 0;
	line-height: normal;
}

html body .filter-form .cie-blog-select-control::after {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Keep the existing Blogs-only mobile layout, with reusable pill sizing. */
@media (max-width: 767px) {
	html body.page-id-1230 .filter-form {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: clamp(10px, 2.91vw, 16px) !important;
		align-items: center;
		justify-content: center;
	}

	html body .filter-form .cie-blog-select-control {
		--cie-filter-font-size: clamp(14px, 3.884vw, 16px);
		--cie-filter-padding-inline: clamp(12px, 3.884vw, 18px);
		width: 100%;
		min-width: 0;
	}

	html body .filter-form .cie-blog-select-control select {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
		min-height: 44px;
		height: auto;
		margin: 0 !important;
		padding: clamp(10px, 2.91vw, 12px) var(--cie-filter-padding-inline);
		font-size: var(--cie-filter-font-size);
		line-height: 1.25;
	}

	html body .filter-form .cie-blog-select-control::after {
		box-sizing: border-box;
		padding-inline: var(--cie-filter-padding-inline);
		font-size: var(--cie-filter-font-size);
		line-height: 1.25;
		white-space: nowrap;
	}
}