feat: #3614638 Match the listing pager and event cards to the design

Issue: https://www.drupal.org/project/vartheme_bs5_horizonaid/issues/3614638

AI-Generated: Yes

Problem

The events listing pager and the event cards did not match the design:

• Page-number label rendered at 20px instead of 14px (Bootstrap sets font-size on .page-link itself via --bs-pagination-font-size; a rule on .pagination never reached it).
• First/last used a double chevron; the design pairs a chevron with a vertical bar, only the bar taking the accent colour on hover — one icon-font glyph can't express that.
• Hover filled a page number, indistinguishable from the current page.
• First/previous vanished on page one (next/last on the last page), shifting the page numbers sideways between pages.
• Event card: 16px corner radius, 48px bottom padding, 16px date strip, 18px description, against the design's 20px, 40px, 12px, 16px.
• Listing grid used 24px gutters (design: 32px); pager sat 16px below the grid (design: 40px).

Resolution

• Pagination: 28px steps, 20px radius, 4px gap; 14px/500 label via $pagination-font-size; hover outlines instead of fills; current page keeps its filled marker; :focus-visible keeps its own ring; first/previous and next/last render as disabled steps at the ends (0.5 opacity), so the numbers stop shifting.
• First/last glyph: inline two-path SVG (bar + chevron, mirrored for the second) via a Twig macro, so hover recolours only the bar; previous/next stay a single chevron.
• Event card: 20px corners, 40px/12px padding, 16px description.
• Tokens: $border-radius-xxl retuned 1.5rem → 1.25rem (so rounded-5 = the design's 20px block radius); new 32px grid step in its own $gutters map (adds g-grid/gx-grid/gy-grid only).
• 40px above the pager.

Verified with a real browser on a Varbase 11 site after yarn components:build and yarn theme:build: label 14px/500, 28×28 step at 20px radius/4px gap, active step filled gold/navy, hovered step outlined gold, first/last glyph 16×16 (bar-only hover), previous/next unchanged, disabled steps at 0.5 opacity, card radius 20px, card padding 24/24/40 and 12/24, description 16px, grid gutters 32px, 40px above the pager, zero render errors.

For the reviewer

1. Retuning $border-radius-xxl changes rounded-5 theme-wide. Nothing in the Sass reads it directly; rounded-5 is otherwise only a component enum option plus two uses on the About page, which move from 24px to 20px.
2. The committed built CSS is ported into the repo's existing compact formatting rather than pasted from a fresh build: yarn install --immutable fails because the committed yarn.lock is out of sync with package.json, and installing fresh pulls newer stylelint/postcss that reformats every component CSS file (confirmed byte-identical ignoring whitespace on an untouched file). Regenerating that lockfile is worth its own issue.

Checkpoints:

• File an issue
• Addition/Change/Update/Fix
• Testing to ensure no regression
• Automated unit testing coverage
• Automated functional testing coverage
• UX/UI designer responsibilities
• Readability
• Accessibility
• Performance
• Security
• Developer Documentation
• User Guide Documentation
• Reviewed by human
• Code review by maintainers
• Full testing and approval
• Credit contributors
• Review with the product owner
• Release notes snippet
• Release