Style the Program listing and the Program card component to the design

Problem/Motivation

The Educare site template adds a Program content type and a filterable programs listing (see the Educare recipe issue). The listing and the Program card need to be styled to the design: the listing title, the result summary, the study-level pill toggle sharing the title line, the exposed filter row, and a Program card that renders the degrees offered as separate right-side columns.

Steps to reproduce

1. Install the Educare site template with the Program content type and programs listing.
2. Open /programs: the listing, the study-level toggle and the Program cards are unstyled relative to the design.

Proposed resolution

• Add a degrees array prop to the card-program component so a multi-value field binds whole and renders each value as its own right-side column, and refine the card's spacing to the design.
• Style the programs listing in the base stylesheet: the listing title, the result summary, and the study-level pill toggle (bef-links) lifted to the top-right so it shares the title line on desktop.
• Use Bootstrap 5.3 utilities and CSS variables (--bs-*, spacers, border-radius) throughout; all sizes in rem.

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ✅ UX/UI designer responsibilities
• ✅ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes
• ✅ Release

User interface changes

• Styles the programs listing (title, result summary, study-level pill toggle, exposed filter row) and the Program card, which renders the degrees offered as separate columns.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Styles the Program listing and adds a degrees array prop to the Program card component.