/* Watch a race video - Pages/Videos/Watch.cshtml (MainClass "page watch-page").
   The player column and the "More from" rail; the player, cards and banner themselves are
   components/video-card.css. */


/* .page centres itself with auto margins, which in the body's flex column shrinks it to its
   content. With no "More from" rail (a driver's only video) nothing widened it and the player
   collapsed to a thumbnail - so the watch page always takes the full column (still capped by
   .page's max-width). */
.watch-page { width: 100%; }

.watch-crumbs {display: flex; flex-wrap: wrap; gap: .5rem; font-size: .88rem; color: var(--muted); }
.watch-crumbs a { color: var(--muted); }
.watch-crumbs a:hover { color: var(--blue-ink); }
.watch-crumbs a[aria-current] { color: var(--ink); }

.watch-preview { margin: 1.25rem 0 0; }

.watch-grid { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.watch-main { flex: 999 1 36rem; min-width: 0; }
.watch-side { flex: 1 1 18rem; min-width: 0; }

.watch-tags { margin-top: 1.4rem; }
.watch-title { margin-top: .85rem; font-size: clamp(1.6rem, 3.6vw, 2.15rem); line-height: 1.1; letter-spacing: -.015em; }
.watch-meta { margin-top: .5rem; font-size: .92rem; }

.watch-bar {
    margin-top: 1.35rem; padding-block: 1rem; border-block: 1px solid var(--border);
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
}
.watch-driver { display: flex; align-items: center; gap: .75rem; margin-right: auto; color: var(--ink); }
.watch-driver img {
    width: 3rem; height: 3rem; flex: none; object-fit: cover; object-position: top;
    border-radius: .6rem; border: 1px solid var(--border); background: var(--surface-2);
}
.watch-driver b { display: block; font-weight: 600; }
.watch-driver small { display: block; font-size: .8rem; color: var(--muted); }
.watch-driver:hover small { color: var(--blue-ink); }
.watch-copy { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; font-size: .9rem; }

.watch-desc { margin: 1.35rem 0 0; max-width: 42rem; color: var(--ink-soft); white-space: pre-line; text-wrap: pretty; }

.watch-side-title { font-size: 1.3rem; }
.watch-more { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.watch-more-item { display: flex; gap: .85rem; color: var(--ink); }
.watch-more-item .vthumb-xs { width: 9rem; }
.watch-more-item b { display: block; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.watch-more-item small { display: block; margin-top: .2rem; font-size: .8rem; color: var(--muted); }
.watch-more-item:hover b { color: var(--blue-ink); }

.watch-moments-title { margin-top: 2rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }