/*
 * Chennai Home Guide — Project archive (/projects/).
 *
 * Only enqueued on the Project archive. Card styling comes from
 * assets/css/components/card.css and project-card.css; this file only
 * covers what's specific to this page (the filter form, heading rhythm).
 * See CLAUDE.md, "CSS Architecture."
 */

.chg-project-archive > h1 {
	margin-top: var(--wp--preset--spacing--lg);
}

.chg-archive-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--sm);
	margin-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--sm);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md, 10px);
	box-shadow: var(--wp--custom--shadow--sm);
}

.chg-archive-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.chg-archive-filters__field label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-archive-filters__field select {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm, 6px);
	background-color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Reconciled onto the shared button system (V3 Foundation Slice 1,
 * base.css) rather than kept as its own one-off implementation --
 * .chg-btn--primary's rules apply here via this shared selector, so
 * this class no longer needs its own padding/border/color/etc.
 */
.chg-archive-filters__submit {
	/* extends .chg-btn--primary — see base.css */
}

/*
 * Active-filters summary — only rendered by
 * Content\ProjectArchiveFilters when at least one filter is applied.
 * Deliberately its own small set of classes rather than reusing the
 * homepage's .chg-chip (Slice 2): that chip is a single <a> filling
 * the whole pill; this one has plain text plus a small inline remove
 * link, a different enough structure that sharing the class would mean
 * restructuring a proven, working homepage component for one page's
 * benefit. Visually matched via the same tokens instead.
 */
.chg-archive-filters__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block: calc(-1 * var(--wp--preset--spacing--sm)) var(--wp--preset--spacing--lg);
}

.chg-active-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 0.25rem 0.375rem 0.25rem 0.75rem;
	background-color: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.chg-active-filter__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	line-height: 1;
}

.chg-active-filter__remove:hover {
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--background);
}

.chg-archive-filters__clear {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
}

.chg-archive-filters__clear:hover {
	color: var(--wp--preset--color--accent);
}