feat(design): one media card, and Home's hero and shelves as cards (E28 S3h)

- ui/MediaCard + mediaCardStyles: one frame for every video, Plex title and
  Home tile; the meta line pinned to the bottom edge, the length a badge on
  the picture, the media Play only where the click plays, the hover row at
  the picture's bottom-right (the owner's pick C).
- Shelf density: on any strip a one-line title over one meta line; mixed
  Home shelves are landscape; rails turn content-visibility off (a card's
  reserved height had become the strip's). Home slot 232px, so the Play
  and the hover row no longer touch; a landscape shelf takes the small Play.
- Home hero is a card (hover row, the whole menu, a touch "…"), three
  quarters wide and centred; channel / playlist tiles get Play, open and
  "…"; a show tile acts on its next episode, ⓘ opens the show.
- Plex preview: a ~0.9 s mouse rest opens a passive panel with the whole
  title, facts and synopsis (popover `pointerOnly`); the synopsis and title
  tooltips are gone.
- Compact list row B: the title leads, "…" at the end, toggles over the
  date on hover.
- Media-info layout B (collections, crew, cast beside the facts sidebar;
  an empty column is not drawn); filtering values are chips there and on
  the show page; "Cast" over the cast-only strips.
- Browse tiles hover like a card; prose capped by the `measure` utility.

frontend/src/components/PosterTile.tsx

@@ -1,12 +1,17 @@
 import { type ReactNode } from "react";
 import { hueOf, hueTileGradient } from "../lib/hueTile";
 import { navItemAttrs } from "../lib/listNav";
+import { MEDIA_IMG } from "./ui/mediaCardStyles";
 import { Pressable } from "./ui/Pressable";
 
 // A browse tile split in two: the TOP half shows up to 2 montage posters (from /api/plex/image/{key}),
 // the BOTTOM half is a solid colour-hash band that carries the label — so the text is always readable
 // (a full-bleed poster collage drowned it). A group with no art falls back to an all-colour tile, never
 // blank. Shared by the Discover genre tiles and the Playlist/Collection browse tiles.
+//
+// Hover = the media card's (E28 S3h): the shadow lifts and the art zooms inside its half, plus the
+// accent edge glass-hover gives a pressable panel. It had `glass-hover` on a tile with no border, so
+// the only visible change was a shadow under a colour band — the owner read it as no hover at all.
 export default function PosterTile({
   title,
   subtitle,
@@ -32,11 +37,11 @@ export default function PosterTile({
       onClick={onClick}
       title={title}
       {...(navIndex !== undefined && navItemAttrs(navIndex))}
-      className={`glass-hover group relative flex flex-col overflow-hidden rounded-xl transition ${className ?? ""}`}
+      className={`group relative flex flex-col overflow-hidden rounded-xl border border-border shadow-md transition hover:border-accent/55 hover:shadow-2xl ${className ?? ""}`}
     >
       {/* Top half: 2 montage posters, or the colour hash when a group has no art. */}
       <div
-        className="grid h-1/2 min-h-0 grid-cols-2"
+        className="grid h-1/2 min-h-0 grid-cols-2 overflow-hidden"
         aria-hidden
         style={posters.length === 0 ? { background: band } : undefined}
       >
@@ -48,7 +53,7 @@ export default function PosterTile({
                 src={`/api/plex/image/${posters[i]}`}
                 alt=""
                 loading="lazy"
-                className="h-full w-full object-cover"
+                className={MEDIA_IMG}
               />
             ) : (
               <div key={i} style={{ background: hueTileGradient(hueOf(title + i)) }} />