/*
  Visual codes for video — page-local styles.
  Everything shared with the image page (cards, steps, chips, notes, hero
  grid) comes from /visual-codes/visual-codes.css. This file only adds what
  video needs. Colours come from tokens.css only.
*/

/* ───── The clip frame: same 4:3 frame and corners as the image sliders ───── */
.vcv-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}
.vcv-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.vcv-video:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ───── Start image: a small framed inset in the lower-left corner, so the
         reader always sees what the model started from ───── */
.vcv-start {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  width: clamp(104px, 30%, 180px);   /* never so narrow that the caption wraps */
  margin: 0;
  border: 2px solid var(--color-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.vcv-start img { display: block; width: 100%; height: auto; }
.vcv-start figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 1.4;
  white-space: nowrap;
  padding: 1px var(--space-2);
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
}

/* ───── Status badges: only for partial, failed and spot-the-error cards ───── */
.vcv-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vcv-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  background: var(--color-bg);
}
.vcv-badge--partial { background: var(--color-bg-alt); }
.vcv-badge--fails   { background: var(--color-dark-bg); color: var(--color-dark-text); border-color: var(--color-dark-bg); }
/* Copper is a surface colour, never text: the readable ink tone goes on the
   light card, and copper only marks the border. */
.vcv-badge--spot    { color: var(--color-highlight-ink); border-color: var(--color-highlight); }

/* ───── Part headings (Part 1 / Part 2) sit above the category sections ───── */
.vcv-part { margin-top: var(--space-9); }
.vcv-part + div > .vc-category:first-child { margin-top: var(--space-5); }

/* ───── The "doesn't work yet" box: a framed surface so it reads as a
         separate report, not as more codes to use ───── */
.vcv-box {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding-block: var(--space-6);
}

/* Callout lists and long intros fill the column, as on the image page */
.page-video-codes .callout li,
.page-video-codes .vc-category > p { max-width: none; }

/* ───── Side-by-side cards line up ─────
   Each card takes six rows of the grid (code, description, Add line, badges,
   clip, note) and shares them with the card next to it via subgrid. A longer
   Add line in one card makes that row taller in both, so the two clips always
   start and end on the same horizontal lines. The grid's own row gap must be
   0 here — a subgrid inherits it between every row inside the card — so the
   spacing between parts and between cards is set on the cards instead.
   Browsers without subgrid keep the image page's plain column layout. */
@supports (grid-template-rows: subgrid) {
  .page-video-codes .vc-grid { row-gap: 0; }
  .page-video-codes .vcv-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    row-gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
}

/* ───── Play cue: a round play symbol over a paused clip. Hidden while the
         clip runs; clicks pass straight through to the video. ───── */
.vcv-play {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-dark-bg);
  opacity: 0.85;
  pointer-events: none;
}
.vcv-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--color-dark-text);
}
.vcv-media.is-paused .vcv-play { display: block; }