/* ============================================
   COMPONENT: Filter Buttons
   ============================================ */

/* Desktop-first base styles */
.filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-3);
	justify-content: center;
	align-items: center;
}

.filter-button {
	display: flex;
	padding: var(--sp-2) var(--sp-4);
	gap: var(--sp-2);
	justify-content: center;
	align-items: center;
	background-color: var(--color-light);
	border-radius: var(--radius-10);
	border: none;
	font-family: var(--font-family-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: 1.95rem;
	color: var(--gray-900);
	text-transform: capitalize;
	white-space: nowrap;
	box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.13);
	cursor: pointer;
	transition: all var(--transition-base);
}

.filter-button:hover {
	background-color: var(--brand-secondary);
	color: var(--color-light);
	box-shadow: 0 0 0.8rem 0 rgba(0, 0, 0, 0.2);
}

.filter-button--active {
	background-color: var(--brand-secondary);
	color: var(--color-light);
	box-shadow: none;
}

.filter-button:focus {
	outline: 0.2rem solid var(--brand-primary);
	outline-offset: 0.2rem;
}

/* Tablet */
@media (max-width: 1199px) {
	.filter-buttons {
		gap: var(--sp-3) var(--sp-2);
	}

	.filter-button {
		padding: var(--sp-2) var(--sp-4);
	}
}

/* Mobile */
@media (max-width: 575px) {
	.filter-buttons {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: var(--sp-3);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding: var(--sp-2) 0;
	}

	.filter-buttons::-webkit-scrollbar {
		display: none;
	}

	.filter-button {
		flex: 0 0 auto;
		scroll-snap-align: start;
		padding: var(--sp-2) var(--sp-5);
		font-size: var(--fs-body-sm);
		font-weight: var(--fw-medium);
		line-height: 1.4;
		border-radius: var(--radius-md);
		background-color: var(--color-light);
		border: 0.15rem solid var(--gray-200);
		box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.06);
		color: var(--gray-700);
	}

	.filter-button:hover {
		border-color: var(--brand-secondary);
		color: var(--brand-secondary);
		background-color: var(--color-light);
	}

	.filter-button--active,
	.filter-button--active:hover {
		background-color: var(--brand-secondary) !important;
		border-color: var(--brand-secondary) !important;
		color: var(--color-light) !important;
		box-shadow: 0 0.2rem 0.8rem rgba(0, 51, 102, 0.25);
	}

	.filter-button:first-child {
		margin-left: var(--sp-3);
	}

	.filter-button:last-child {
		margin-right: var(--sp-3);
	}
}