fix(components): hover anywhere on a gallery card activates it

[schloerke]

Summary

On /components/, hovering a thumbnail didn't fill the arrow, and hovering the title or arrow didn't play the GIF. Now the whole column (title, arrow, and thumbnail) is one hover target: the GIF plays, the card lifts, the arrow fills, and the title darkens together.

• components-list.css: the hover and focus styles now key off .component-list-column:is(:hover, :has(:focus-visible)) instead of separate :hover rules and the old sibling selector.
• components-list.js: the play/stop listeners are on the column. Keyboard focus uses focusin/focusout with a relatedTarget check, so tabbing title → arrow → card within one column keeps the GIF playing instead of restarting it. The existing touch and reduced-motion guards are unchanged.

Verification

Open /components/ on the preview deploy and hover a component's title, arrow, and thumbnail in turn. Each one plays the GIF, lifts the card, and fills the arrow. Tabbing through the links does the same.

Checked locally with Playwright against a render of components/index.qmd:

• A real mouse hover on the arrow started the GIF and lifted the card.
• A real hover on the thumbnail filled the arrow and turned the title black, while an unhovered column stayed normal.
• Tabbing within a column kept the preview playing.
• The title hover was checked with simulated pointer events only.