/* ——— Repertoire demo showcase ———
   Shared by the Repertoire page and the homepage, so both render the same
   five looped product clips. Extracted from style_all_openings.css so the
   homepage does not have to load that whole sheet. */

.repertoire-demo {
  display: grid;
  gap: 18px;
  padding: 8px 0 12px;
}

/* The Repertoire page carries the three showcase clips, and at the global
   1,240px shell each one rendered about 400px wide from a 1,120px source — the
   board inside was too small to follow. Widened to match the landing page, and
   scoped to this page so every other page keeps the 1,240px measure.

   The 1560px cap still applies above 1592px, so an ultrawide monitor does not
   get three enormous clips. */
/* Keyed on the body class, not .repertoire-view — that class is on <main>,
   which is a DESCENDANT of .page-shell, so a `.repertoire-view .page-shell`
   selector can never match it. */
.repertoire-page .page-shell {
  width: min(1560px, calc(100% - 32px));
}

.repertoire-demo-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--cream);
}

.repertoire-demo-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

/* The three-clip showcase: an even 3-up row, full width each.

   The cards were sized by whatever container they landed in, and on the
   Repertoire page that was the global 1,240px shell — so each clip rendered
   about 400px wide from a 1,120px source, and the board inside it was too
   small to read. The page shell is widened for this page (see
   `.repertoire-view .page-shell`) and the cards are given a floor of their own
   so they cannot be squeezed below a readable size on a narrower window. */
.repertoire-demo-grid-3 {
  grid-template-columns: repeat(3, minmax(280px, 1fr));
}

.repertoire-demo-grid-3 .repertoire-demo-card,
.repertoire-demo-grid-3 .repertoire-demo-card:nth-child(4),
.repertoire-demo-grid-3 .repertoire-demo-card:nth-child(5) {
  grid-column: auto;
}

.repertoire-demo-card {
  margin: 0;
  /* Trimmed from 12px/14px. On a ~500px card that padding was 5% of the width
     taken off the clip, and the clip is the thing worth looking at. */
  padding: 8px 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: none;
  /* A grid, not a block, so the label and the clip are two rows of one box
     with one gap between them. As a block the two were laid out by their own
     margins, which is how they ended up on different left edges. */
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  grid-column: span 2;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.repertoire-demo-card:hover,
.repertoire-demo-card:focus-visible {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line-strong));
  transform: translateY(-2px);
}

.repertoire-demo-card:nth-child(4),
.repertoire-demo-card:nth-child(5) {
  grid-column: span 3;
}

.repertoire-demo-card .repertoire-demo-label {
  display: block;
  /* The label and the clip are flush-left edges in a card. The label used to
     carry a 4px side margin and a 10px bottom gap while the video carried
     neither, so the two sat on different left edges and the clip started
     lower than the row beside it. The gap is now row-gap on the card and the
     side margin is gone, so label and clip share one left edge. */
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.repertoire-showcase-video {
  display: block;
  /* The clips are the app window itself, cropped to 1500x1188 of the original
     2560x1440 screen capture and re-encoded at 1120x888 (140:111 ≈ 1.261:1).
     The crop is deliberately a few pixels wider than the measured content
     (x 496..1995, y 196..1380) so no board rank is ever clipped on any edge.
     Matching the ratio exactly is what makes the app fill the box with no dead
     space — any other ratio either letterboxes or crops the interface. */
  width: 100%;
  aspect-ratio: 140 / 111;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg);
  pointer-events: none;
  /* Decorative loops: never show transport controls, never let a stray
     gesture scrub the clip, and never let it contribute a scrollbar. */
  max-width: 100%;
  height: auto;
  overflow: hidden;
  scrollbar-width: none;
}

.repertoire-showcase-video::-webkit-media-controls,
.repertoire-showcase-video::-webkit-media-controls-panel,
.repertoire-showcase-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.repertoire-demo-card .repertoire-showcase-video {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .repertoire-demo-card {
    transition: none;
  }
  .repertoire-demo-card:hover,
  .repertoire-demo-card:focus-visible {
    transform: none;
  }
}

@media (max-width: 980px) {
  .repertoire-demo-grid,
  .repertoire-demo-grid-3 {
    grid-template-columns: 1fr;
  }

  .repertoire-demo-card,
  .repertoire-demo-card:nth-child(4),
  .repertoire-demo-card:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .repertoire-demo-card {
    padding: 10px 10px 12px;
  }
}