/**
 * Featured Projects category tabs (homepage) and the Projects archive page.
 *
 * The tab bar deliberately matches the Featured Products pill bar already on
 * the homepage, so the two sections read as one system. The archive page reuses
 * the theme's existing program-archive / products-page / home-program-card
 * classes, so only the few project-specific pieces live here.
 */

.home-projects__subtitle {
	max-width: 62ch;
	margin: 0.9rem auto 0;
	color: #4f5d6e;
	font-size: 1.02rem;
	line-height: 1.65;
	text-align: center;
}

/* Tab bar
--------------------------------------------- */
.home-projects__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 2.4rem;
	padding: 0.4rem;
	border: 1px solid #dde5ee;
	border-radius: 999px;
	background: #f1f5fa;
}

.home-projects__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.72rem 1.5rem;
	border-radius: 999px;
	background: transparent;
	color: #5b6b82;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

.home-projects__tab:hover,
.home-projects__tab:focus {
	background: #e2ebf6;
	color: #1f2058;
}

.home-projects__tab:focus-visible {
	outline: 2px solid #f26522;
	outline-offset: 2px;
}

.home-projects__tab.is-active,
.home-projects__tab.is-active:hover,
.home-projects__tab.is-active:focus {
	background: #1f2058;
	box-shadow: 0 8px 18px rgba(31, 32, 88, 0.22);
	color: #fff;
}

.home-projects__tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: #e2ebf6;
	color: #5b6b82;
	font-size: 0.76rem;
	font-weight: 700;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.home-projects__tab.is-active .home-projects__tab-count {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/*
 * The grid is display:grid, which would otherwise beat the [hidden] default of
 * display:none and leave filtered-out cards on screen.
 */
.home-project-card[hidden] {
	display: none;
}

/* Category label on the card, matching the products page treatment. */
.home-project-card__category {
	margin: 0 0 0.35rem;
	color: #ff6214;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
}

/* View all
--------------------------------------------- */
.home-projects__footer {
	margin-top: 2.4rem;
	text-align: center;
}

.home-projects__view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.75rem;
	border: 1px solid rgba(255, 98, 20, 0.35);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 22px rgba(16, 35, 63, 0.07);
	color: #ff6214;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		box-shadow 0.25s ease;
}

.home-projects__view-all-arrow {
	display: inline-flex;
	transition: transform 0.25s var(--ks-ease, ease);
}

.home-projects__view-all:hover,
.home-projects__view-all:focus-visible {
	border-color: #ff6214;
	background: #ff6214;
	box-shadow: 0 14px 28px rgba(255, 98, 20, 0.28);
	color: #fff;
}

.home-projects__view-all:hover .home-projects__view-all-arrow,
.home-projects__view-all:focus-visible .home-projects__view-all-arrow {
	transform: translateX(4px);
}

/* Projects archive page
--------------------------------------------- */
.projects-page__card-category {
	margin: 0 0 0.4rem;
	color: #ff6214;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
}

.projects-page__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin: 0.6rem 0 0;
	color: #66778d;
	font-size: 0.88rem;
	text-align: left;
}

.projects-page__card-meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.projects-page__card-meta i {
	color: #ff6214;
}

@media screen and (max-width: 37.5em) {

	.home-projects__tabs {
		gap: 0.35rem;
		padding: 0.35rem;
	}

	.home-projects__tab {
		padding: 0.6rem 1.05rem;
		font-size: 0.86rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.home-projects__tab,
	.home-projects__tab-count,
	.home-projects__view-all,
	.home-projects__view-all-arrow {
		transition: none;
	}
}

/* Active filter notice
--------------------------------------------- */
.projects-page__active-filter {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-wrap: wrap;
	margin: 0;
	font-size: 0.9rem;
}

.projects-page__active-filter-label {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: #fff4ec;
	color: #a8420b;
	font-weight: 700;
}

.projects-page__active-filter-clear {
	color: #ff6214;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.projects-page__active-filter-clear:hover,
.projects-page__active-filter-clear:focus-visible {
	border-bottom-color: currentColor;
}

@media screen and (max-width: 37.5em) {

	.products-page__results-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.65rem;
	}
}