/* video.css — the /videos/ hub and the video watch pages (server/videos.go,
   templates/videos.html + video.html). Loaded only on those routes (PageCSS).
   Tokens come from site.css.

   The .vplayer block mirrors landing/landing.css §1b: the watch page for the
   installation video renders the SAME player markup as the homepage section
   (server/install_video.go installPlayerHTML), and the landing page does not
   load site.css, nor this page landing.css. Change them together. */

/* ── the watch page ─────────────────────────────────────────────────────── */
.watch { padding: 28px 0 8px; }
.watch h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); margin: 0 0 18px; max-width: 34ch; }
.watch-player { max-width: 1120px; }
/* Phone-shot walkthroughs are PORTRAIT. Cap the height so the whole clip is on
   screen under the heading, and let the width follow the clip's own aspect
   ratio (same rule as .proj-videos in site.css). */
.watch-player--portrait video {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: min(70vh, 640px);
  border-radius: var(--radius); background: #000;
}
/* On a wide screen a portrait clip is a narrow column: put the description
   and facts BESIDE it instead of leaving two-thirds of the row empty. */
@media (min-width: 860px) {
  .watch-body--portrait {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 40px; align-items: start;
  }
  .watch-body--portrait .watch-about { margin-top: 0; }
}
.watch-about { margin-top: 22px; max-width: 68ch; }
.watch-desc { font-size: 1.08rem; color: var(--fg); margin: 0 0 16px; }
.watch-facts { margin: 0 0 16px; }
.watch-next { color: var(--fg-muted); }

/* ── video cards (hub + "More videos") ──────────────────────────────────── */
.vgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.vgrid li { min-width: 0; }
.vcard {
  display: block; height: 100%; color: var(--fg);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: border-color .15s ease;
}
.vcard:hover, .vcard:focus-visible { border-color: var(--gold); text-decoration: none; color: var(--fg); }
.vcard-thumb { color-scheme: dark; color: var(--fg); position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-deep); }
.vcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard-play {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-fill-hi), var(--gold-fill) 55%, var(--gold-fill-lo));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
.vcard-play::after {
  content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--on-gold);
}
.vcard-dur {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 4px;
  font: 600 .78rem/1 var(--mono); color: var(--fg); background: rgba(15, 15, 14, .85);
}
.vcard-body { display: block; padding: 14px 16px 16px; }
.vcard-body .pill { margin-bottom: 8px; }
.vcard-title { display: block; font-weight: 700; line-height: 1.3; }
.vcard-desc {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 6px; font-size: .92rem; color: var(--fg-muted);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── the player (mirror of landing/landing.css §1b) ─────────────────────── */
.vplayer { color-scheme: dark; color: var(--fg);
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.vplayer-poster, .vplayer-poster-img, .vplayer-video, .vplayer-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vplayer-poster-img { object-fit: cover; display: block; }
.vplayer-video { background: transparent; object-fit: contain; }
.vplayer[data-playing] .vplayer-poster { visibility: hidden; }
.vplayer-cover {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  color: var(--fg);
  background: linear-gradient(180deg, rgba(15, 15, 14, 0) 45%, rgba(15, 15, 14, 0.55));
}
/* An author display rule defeats [hidden] (see src/CLAUDE.md) — restate it. */
.vplayer-cover[hidden] { display: none; }
.vplayer-cover:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -6px; }
.vplayer-play {
  position: relative;
  width: clamp(64px, 11vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-fill-hi), var(--gold-fill) 55%, var(--gold-fill-lo));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}
.vplayer-play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: clamp(11px, 1.9vw, 18px) 0 clamp(11px, 1.9vw, 18px) clamp(18px, 3.1vw, 29px);
  border-color: transparent transparent transparent var(--on-gold);
}
.vplayer-cover:hover .vplayer-play, .vplayer-cover:focus-visible .vplayer-play { transform: scale(1.07); }
.vplayer-dur {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  font: 600 0.8rem/1 var(--mono);
  color: var(--fg);
  background: rgba(15, 15, 14, 0.82);
}
@media (prefers-reduced-motion: reduce) { .vplayer-play, .vcard { transition: none; } }