Match cards: composed title, header stage from match title, equal-sized grid

- SportsMatchController syncs Video.title with SportsMatch.title on
  store/update so the "Match title" field drives the video's display
  title everywhere.
- headerData(): "championship" now prefers event_name (event title)
  and adds a dedicated "stage" key sourced from SportsMatch.title
  (shown between the yellow lines above the weight class in both the
  in-player VS overlay and the vs-mini gallery card).
- Video cards render match titles with flags + corner colours
  ("FINALS – 🇧🇭 Blue vs 🇧🇭 Red (-61 kg)"), matching the video
  page header, and clip long titles to one line.
- Video gallery grid uses repeat(N, minmax(0, 1fr)) + grid-auto-rows:1fr
  so every card thumbnail renders at exactly the same size; hover-preview
  videos use object-fit:cover to stop portrait sources looking smaller.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

resources/views/components/partials/card-styles.blade.php

@@ -3,9 +3,16 @@
      /videos?filter=playlists. Wrapped in @once so it emits only once. --}}
 @once
 <style>
-/* Base styles for video card */
+/* Base styles for video card — every card in the grid renders at the same
+   overall size regardless of type (video / shorts / match / playlist). The
+   grid handles equal widths; height parity is enforced here by making the
+   card a column-flex container, the thumb a strict 16/9 box, and every
+   text row a fixed line-height so missing channel/meta rows never shrink
+   the card.  */
 .yt-video-card {
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
 }
 
 .yt-video-card .yt-video-thumb {
@@ -61,7 +68,11 @@
 .yt-video-card .yt-video-thumb video {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    /* Match the still-image thumbnail: always cover the 16/9 box so
+       portrait and landscape sources render at the same visible size,
+       instead of letterboxing (which made portrait previews look
+       smaller than landscape ones). */
+    object-fit: cover;
     position: absolute;
     top: 0;
     left: 0;
@@ -212,6 +223,19 @@
     display: flex;
     margin-top: 12px;
     gap: 12px;
+    /* Hard-cap the info block to guarantee every card has the same total
+       height (thumb + info). Overflow hidden so any accidental extra
+       row can't push the card taller than its neighbours. */
+    height: 76px;
+    overflow: hidden;
+}
+.yt-video-card .yt-video-details {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    overflow: hidden;
 }
 
 .yt-video-card .yt-channel-icon {
@@ -237,20 +261,28 @@
     font-weight: 500;
     color: #fff;
     margin: 0 0 4px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
     line-height: 1.3;
+    /* Single-line, no wrapping — overflow ellipses. */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .yt-video-card .yt-video-title a {
     color: inherit;
     text-decoration: none;
-    display: flex;
-    align-items: baseline;
-    gap: 5px;
+    /* Block-level with nowrap so ellipsis actually clips the excess.
+       Inline-flex would let the children overflow past the parent. */
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
 }
+/* Inline children (flags, corner-colored fighter spans) must not break
+   the single-line layout. */
+.yt-video-card .yt-video-title a > * { vertical-align: middle; }
+.yt-video-card .yt-video-title a .fi { display: inline-block; }
 .vc-lang-flag {
     display: inline-block;
     width: 16px;
@@ -274,6 +306,8 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 22px;
+    height: 22px;
 }
 
 .yt-video-card a.yt-channel-name {