/* Composer Assistant — the Videos page only (templates/site/videos.html, A58).
   ---------------------------------------------------------------------------
   Loaded by that page alone, and every selector starts with .videos, so
   nothing here reaches another page. The cards themselves are site.css's .vid
   (Marc's, shared with the manual and the home): this file only lays them out.

   ⚠️ THE SAME DISCIPLINE AS site.css AND home.css (asserted by test_site.py
   [10]): tokens only, no raw colour, no token declared here, no selector
   declared twice or taken from main.css / site.css, no accent fill as text.
   --------------------------------------------------------------------------- */

/* A little wider than a text page, so three cards share a row. */
.videos-page { max-width: var(--measure); }

.videos-group { margin: 0 0 3rem; scroll-margin-top: 1rem; }

.videos-group__title {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.01em;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 1.75rem 1.5rem;
}

/* The presentation is the first thing to watch: one card as wide as the page
   (two would share it). */
.videos-grid--lead { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }

.videos-grid .vid { scroll-margin-top: 1rem; }