Match news/article/full-page components and exposed filters to the design

Problem/Motivation

Several Vartheme BS5 Educare components did not match the approved Figma design:

• The Rich Text atom had no styling at all: no paragraph rhythm, no in-body heading scale, and no marker styling on nested lists.
• Several components rendered rounded corners where the design calls for sharp corners: the Image atom, the Card Hero organism, and the Card Impressed organism.
• The Share molecule rendered small rounded-square buttons on a grey background with 24px icons; the design calls for fully circular buttons on a cream surface with 16px icons.
• The Breadcrumb molecule rendered at 16px in a dark color with an underline; the design calls for 12px SemiBold text in a subtle dark color with no underline.
• The exposed-filter styling in the base stylesheet used different, partly hardcoded values for the News and Programs listings than for the Events listing, so the three listings did not share the same label color, input/select color, border radius, or Apply/Reset button treatment.

Steps to reproduce

1. Visit the News listing page (/news) and open an article. The article body renders with no prose typography, and the page uses rounded card corners and a rounded Share block that do not match the design.
2. Compare the breadcrumb on any page against the design's breadcrumb spec (size, weight, color, underline).
3. Visit /events and compare its exposed filters to the same filters on the News or Programs listing: the styling does not match between them.

Proposed resolution

Align the affected components with the design:

• components/atoms/image/image.twig plus a new image.scss/image.css: render images with sharp corners (border-radius: 0).
• components/atoms/rich-text/rich-text.component.yml, rich-text.twig plus a new rich-text.scss/rich-text.css: add prose typography for long-form body content — paragraph rhythm, an in-body heading scale, and a 3-level nested list marker treatment. The root class is .rich-text-block (not .rich-text, which is already used by the Text atom).
• components/molecules/breadcrumb/breadcrumb.scss/.css: smaller SemiBold text in the theme's subtle-text color, no underline.
• components/molecules/share/share.scss/.css: fully circular buttons, cream background, smaller icons.
• components/organisms/card-hero/card-hero.twig plus a new card-hero.scss/.css: sharp corners, matching the Image and Card Impressed treatment.
• components/organisms/card-impressed/card-impressed.twig, .scss, .css: sharp corners on the card image, plus a block class fix.
• scss/base/vartheme.base.scss plus css/base/vartheme.base.css: bring the News/Programs exposed-filter styling to the same token treatment already used on Events.
• webpack.config.components.js: register the new image.scss, rich-text.scss, and card-hero.scss entries so they compile.

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

• N/A (visual-only CSS/Twig fix, same markup contract)

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• N/A