/**
 * Shared chrome for every grid in this plugin: the header row, the filter
 * dropdown, focus rings and the screen-reader helper.
 *
 * Both widgets carry these tcg-* classes alongside their own prefixed ones, so
 * a change here reaches every grid, while each widget's stylesheet keeps only
 * what is genuinely its own (cards, pills, buttons).
 */

:root,
.tcg-header,
.tcg-filters {
	--tcg-focus-ring: #1a1a1a;
	--tcg-chevron: #64748b;
	--tcg-label: #475569;
	--tcg-text: #1e293b;
	--tcg-underline: #e2e8f0;
}

/**
 * Fill the Elementor container, whatever the grid currently holds.
 *
 * An Elementor container lays its widgets out with flex, and a flex item with
 * no width of its own is sized to its content. With cards on screen that comes
 * to the full column; with the cards filtered away, all that is left is the
 * header, so the widget shrank to about the width of the dropdowns and the
 * empty state sat in a narrow strip off to one side. Asking for the full width
 * makes the grid the same width whether it is full or empty.
 *
 * Direction-agnostic on purpose: width works the same whether the container
 * runs in a row or a column, while flex-grow would stretch the widget's height
 * in a column container. A widget class per grid, so nothing else on the page
 * is touched — a new grid widget needs its own class added to this list.
 */
.elementor-widget-case_study_loop_f313c49d,
.elementor-widget-bwcs_posts_loop,
.elementor-widget-doc_cards_grid_29c3a005 {
	width: 100%;
	max-width: 100%;
}

/* ------------------------------------------------------------------ Header */
.tcg-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px 32px;
	/* The gap between the filter row and the first row of cards, shared by all
	   three grids. */
	margin-bottom: 40px;
}
.tcg-count {
	margin: 0;
	flex: 0 1 auto;
	padding-bottom: 10px; /* sits on the same baseline as the dropdowns */
	font-weight: 500;
}

/* ----------------------------------------------------------------- Filters */
.tcg-filters {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin: 0;
}
/**
 * The flex basis, not the min-width, is what decides whether the row wraps:
 * the browser places items at their basis and only shrinks them afterwards. At
 * 180px two fields plus the Apply/Clear block came to a few pixels more than a
 * narrower column offers, which dropped the buttons onto a second line and left
 * the count stranded below the dropdowns. 160px keeps the row intact in a
 * narrow column and the fields still grow to fill a wide one.
 */
.tcg-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 160px;
	min-width: 160px;
	max-width: 260px;
}
.tcg-field-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tcg-label);
}
.tcg-select-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

/* Minimal control: text plus a chevron, with a quiet underline instead of a box. */
.tcg-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	min-height: 44px; /* comfortable touch target */
	margin: 0;
	padding: 10px 34px 10px 2px;
	border: 0;
	border-bottom: 2px solid var(--tcg-underline);
	border-radius: 0;
	background: transparent;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--tcg-text);
	cursor: pointer;
	/* A long selected value ("Custom Development") wrapped onto a second line
	   and made that one dropdown taller than the one beside it, tilting the
	   whole row. Ellipsis needs nowrap and a clipped box to take effect. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.tcg-select:hover {
	border-bottom-color: #94a3b8;
}
/* The open list is drawn by the browser; these are the parts it does honour. */
.tcg-select option {
	padding: 10px 12px;
	line-height: 1.6;
	background-color: #fff;
	color: var(--tcg-text);
}
.tcg-select:focus {
	outline: none;
}

.tcg-chevron {
	position: absolute;
	right: 8px;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	font-size: 13px;
	line-height: 1;
	color: var(--tcg-chevron);
	pointer-events: none;
	transition: transform 0.2s ease;
}
.tcg-chevron svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.tcg-select-wrapper:hover .tcg-chevron {
	transform: translateY(-50%) translateY(1px);
}

/* Progressive enhancement: browsers that can style the dropdown list itself get
   a properly spaced, rounded menu. Everything else keeps the native one. */
@supports (appearance: base-select) {
	/**
	 * Both halves have to opt in. Setting base-select on the control alone
	 * leaves the open list drawn by the operating system, which silently
	 * ignores everything below — the rounded panel, the option spacing and the
	 * max-height all went nowhere, and a hundred-item list opened at whatever
	 * height the OS felt like.
	 */
	.tcg-select,
	.tcg-select::picker(select) {
		appearance: base-select;
	}
	.tcg-select::picker-icon {
		display: none; /* hide the browser's own arrow; ours is the icon element */
	}
	.tcg-select:open + .tcg-chevron {
		transform: translateY(-50%) rotate(180deg);
	}
	.tcg-select::picker(select) {
		margin-top: 8px;
		padding: 8px;
		border: 1px solid var(--tcg-underline);
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.25);
		/**
		 * The tag list runs past a hundred entries, which opens as a wall of
		 * text. Cap it at eight rows of 44px.
		 *
		 * content-box so the cap counts rows only: measured against the border
		 * box, this panel's own 8px of padding and 1px of border came out of the
		 * eight rows' budget, leaving a list of exactly eight scrolling by two
		 * pixels. The slack past 352 keeps a rounding difference in the theme's
		 * font metrics from bringing that back; it is too small to show text
		 * from a ninth row, so a longer list still cuts off cleanly.
		 */
		box-sizing: content-box;
		max-height: 360px;
		overflow-y: auto;
		overscroll-behavior: contain; /* scrolling the list doesn't scroll the page */
	}
	.tcg-select option {
		padding: 10px 12px;
		border-radius: 8px;
		font-size: 15px;
	}
	.tcg-select option:hover {
		background-color: #f1f5f9;
	}
	.tcg-select option:checked {
		font-weight: 700;
	}
}

/* ------------------------------------------------- Keyboard focus and a11y */
.tcg-select:focus-visible {
	outline: 3px solid var(--tcg-focus-ring);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Visually hidden but still read by screen readers */
.tcg-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ------------------------------------------------------------- Responsive */
@media (max-width: 860px) {
	.tcg-header {
		flex-direction: column;
		align-items: stretch;
	}
	.tcg-count {
		padding-bottom: 0;
	}
	.tcg-filters {
		justify-content: flex-start;
		flex: 0 0 auto;
	}
	.tcg-field {
		max-width: none;
		flex: 0 0 auto;
	}
}
@media (max-width: 560px) {
	.tcg-filters {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcg-select,
	.tcg-chevron {
		transition: none;
	}
}