refactor(synced-scroll): rewrite with global metrics + per-row clamping

Replace the fragile per-row tail/maxVirtual state with a clean global-
metrics approach:

- Measure cardWidth, stride, paddingLeft, viewportWidth, rightDeadzone
  once from the first synced row; use the same values for all rows.
- Per-row max scroll computed purely from math:
    max(0, paddingLeft + (N-1)*stride - maxVisibleLeft)
  where maxVisibleLeft = viewportWidth - cardWidth - rightDeadzone.
- Global virtual offset (syncedRowsCurrentOffset/targetOffset) is shared
  across all rows; each row clamps independently in applySyncedRowScroll.
- Tail is a global constant (= rightDeadzone) applied to all rows.
- Fix scrolling-back bug: desiredOffset was stuck at currentOffset when
  moving left; now always computed from anchor column position.
- Avoid full animation sweep on view entry: init current/target offset
  from existing DOM scrollLeft on first use.

Also removes per-row --sync-row-max-virtual CSS var and simplifies
.media-row padding to use only --sync-row-tail.

frontend/src/components/CollageHero.vue

@@ -1097,63 +1097,4 @@ html:not(.mouse-active) .collage-item:not(.collage-featured).nav-focused .collag
     display: none;
   }
 }
-
-@media (max-width: 600px) {
-  .collage-hero {
-    height: 45vh;
-    min-height: 280px;
-    --h: clamp(280px, 45vh, 600px);
-  }
-
-  .collage-item-0 {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .hex-showcase .hex-clip {
-    clip-path: none;
-    aspect-ratio: auto;
-    height: 100%;
-  }
-
-  .collage-item-1,
-  .collage-item-2,
-  .collage-item-3,
-  .collage-item-4,
-  .collage-item-5,
-  .collage-item-6,
-  .collage-item-7,
-  .collage-item-8,
-  .collage-item-9,
-  .collage-item-10,
-  .collage-item-11,
-  .collage-item-12,
-  .collage-item-13,
-  .collage-item-14,
-  .collage-item-15,
-  .collage-item-16,
-  .collage-item-17,
-  .collage-item-18,
-  .collage-item-19,
-  .collage-item-20,
-  .collage-item-21,
-  .collage-item-22,
-  .collage-item-23,
-  .collage-item-24,
-  .collage-item-25,
-  .collage-item-26 {
-    display: none;
-  }
-
-  .collage-item-info {
-    left: 4%;
-    right: 4%;
-    bottom: 15%;
-  }
-
-  .collage-buttons .btn {
-    padding: 8px 16px;
-    font-size: 0.85rem;
-  }
-}
 </style>