Add the Events listing, its card view mode, the Topic filter and demo content

Problem/Motivation

/events rendered a bare date and title list: no cards, no grid, no demo content. The Home page had no upcoming-events teaser. The design calls for a 3-up card grid with a filter row above it.

The Countries and Programs grids rendered as bare text for a related reason: their row view mode and grid prop_mappings were unset. ComponentsViewsStyle reads the column classes only from prop_mappings, never from top-level style.options, so column settings placed there are silently ignored.

The Countries listing was also squeezed into a 330px column, because its Canvas page section was columns: 25-25-25-25.

Steps to reproduce

1. Install the Horizon Aid site template on a clean site.
2. Open /events — a bare date/title list, no cards, no filter row.
3. Open /countries or /programs — the grid renders as plain text, not cards.
4. Open the front page — no upcoming-events teaser is present.

Proposed resolution

Follow the varbase_blog_base pattern, which is the house reference: one view display paired with a Canvas content template per view mode, split across all / latest / related.

• core.entity_view_display.node.event.card and canvas.content_template.node.event.card rendering card-events, binding field_when start/end to the theme's timestamp props, field_event_categories to the taxonomy label and the path alias to the link.
• A latest block display (pager some/3, filters un-exposed, no header) for the Home teaser, so the teaser can never inherit the listing's filters or pager.
• prop_mappings giving the 3-up grid, pager 9 on the full page, and a result-summary header.
• 24 demo events and an event-in-person term, reusing the existing media images.
• An event_topics vocabulary and a multi-value field_event_topics on Event, its autocomplete-tags widget, and a third exposed filter labelled "Topic" beside Type — giving the design's Search Keyword / Type / Topic row. Ten topic terms, all 24 demo events tagged.
• Countries and Programs: prop_mappings on the grid displays, row view mode overlay_card_medium → card, corrected labels.
• The Countries page section becomes full width.
• Apply Filters label and a reset button on the blog, events, countries and programs exposed forms — on display.default and the display.all overrides, which shadow it.

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

• /events shows a 3×3 card grid with a pager and a result summary.
• Home shows three upcoming-event cards with no filters and no pager.
• /countries shows 12 country cards 3-up across the full width.

API changes

• None.

Data model changes

• None. Demo content only.

Release notes snippet

• Adds the Events listing with an event card view mode, a Home teaser, demo events, and fixes the Countries and Programs grids.

AI-Generated: Yes