Match the listing pager and event cards to the design

Problem/Motivation

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

Pager:

• The page-number label rendered at 20px instead of 14px. Bootstrap sets font-size on .page-link itself from --bs-pagination-font-size, so a rule on .pagination never reached the label.
• First and last used a double chevron; the design pairs a chevron with a vertical bar, and only the bar takes the accent colour on hover, which one icon-font glyph cannot express.
• Hover filled a page number, making it indistinguishable from the current page.
• First/previous vanished on page one (and next/last on the final page), so the page numbers shifted sideways between pages.

Event cards:

• 16px corner radius, 48px bottom padding, a 16px date strip and an 18px description, against the design's 20px, 40px, 12px and 16px.
• The listing grid used 24px gutters where the design uses 32px, and the pager sat 16px below the grid instead of 40px.

Steps to reproduce

1. Visit an events listing view with more than one page of results.
2. Compare the pager and the event cards against the design.

Proposed resolution

• Pagination: 28px steps with a 20px radius and a 4px gap; 14px/500 labels driven through $pagination-font-size; hover outlines the step in the accent colour instead of filling it; the current page keeps its filled marker; :focus-visible keeps its own ring since the design defines no keyboard state; first/previous and next/last render as disabled steps at the ends (0.5 opacity), so the page numbers stop shifting.
• First and last now use an inline two-path glyph (bar + chevron, the second mirrored) via a Twig macro, so hover recolours only the bar; previous and next stay a single chevron and do not change on hover.
• Event card: 20px corners, 40px bottom padding on the upper half, 12px on the date strip, 16px description.
• Tokens: the largest radius step is retuned from 1.5rem to 1.25rem so rounded-5 becomes the design's 20px block radius, and $gutters gains a 32px grid step declared as its own map, so it generates g-grid/gx-grid/gy-grid and no margin or padding utilities.
• 40px above the pager.

Verified in 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 with a navy label, hovered step outlined gold with a transparent fill, first/last glyph 16×16 with the bar alone turning gold on 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.

Two things for the reviewer to weigh:

1. Retuning the largest radius step changes what rounded-5 means theme-wide. Nothing in the theme's Sass reads that variable directly; rounded-5 otherwise appears only as a component enum option plus two uses on the About page, which shift 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 resolves newer stylelint/postcss that reformats every component CSS file (an untouched file is identical ignoring whitespace). The ported files are byte-identical to the build output ignoring whitespace. Regenerating that lockfile is worth a separate issue.

Remaining tasks

• ✅ File an issue
• ✅ Addition/Change/Update/Fix
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ➖ 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

• Pagination step size, glyphs and hover state; event card corner radius, padding and description size; listing grid gutters.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Fixed pagination and event card styling on the events listing to match the design.