/* ==========================================================================
   Block: video-grid — section head, then a 2-column grid of hover-to-play 16:9 video cards with captions
   (src/blocks/video-grid.html; behaviour js/shared/video-cards.js via js/blocks/video-grid.js).
   Figma "Videography" 5050:499 at 1920 (page y):
     eyebrow  dot x106, label x127 y1298 (20px, 24.8 tall)
     title    x106  y1336  48px Blauer Nue Regular, 59 tall        → 13px under the eyebrow
     rule     x103  y1427  125 × 2 green                            → 32px under the title
     cards    823 × 462, square corners; columns x112 | x998 (63 gap, right edge 1818); rows y1507 / 2044 /
              2581 (537 pitch) → the grid starts 80px under the rule, inset 12px left / 2px right of the gutters
     disc     79px black, ≈15 × 17 green triangle (its box sits 1.5px right of centre, as drawn)
     caption  24px Blauer Nue Medium caps, box 13 under the card (caps 16 under), 40px to the next row
              (the last row's captions drift to 29 under their cards in the Figma — normalised to 13)
     next block's eyebrow at y3275 (≈181 under the last caption)
   Desktop sizes are the 1920 values scaled with the viewport (vw, capped at the Figma px).
   Tablet (≤1024): two columns, 24px gap. Mobile (≤640, derived — no mobile frame): one column of
   full-width cards, Mobile Category head (16px eyebrow, 36px title, 64px rule), 16px captions.
   Card states (set by js/shared/video-cards.js on .block-video-grid__media[data-video-card]):
     data-state idle | preview | sound | paused · .is-live (video layer showing) · .is-playing (disc hidden,
     sound badge shown) · .is-unavailable (mp4 missing / failed: disc hidden, card stays a still).
   ========================================================================== */

.block-video-grid {
  --nudge: min(0.3125vw, 6px);                      /* eyebrow + title sit 6px inside the 100px gutter */
  --disc: clamp(56px, 4.1146vw, 79px);              /* 79 */
  padding: min(3.3333vw, 64px) 0 min(5.7292vw, 110px);  /* hero intro → eyebrow 184 (as the Figma) · last caption → next
                                                           eyebrow 181 = 110 here + numbered-cards' 70 top padding */
}

/* ---- Head ---------------------------------------------------------------- */
.block-video-grid__eyebrow { margin-left: var(--nudge); }
.block-video-grid__title {
  max-width: 729px;
  margin: min(0.6771vw, 13px) 0 0 var(--nudge);    /* eyebrow bottom 1323 → title 1336 */
  font-family: var(--font-display);
  font-weight: 400;                                 /* Blauer Nue Regular, sentence case */
  font-size: 48px;
  line-height: 1.23;                                /* 59px box */
}
.block-video-grid__rule {
  display: block;
  width: 125px;
  height: 2px;
  margin: min(1.6146vw, 31px) 0 0 min(0.1563vw, 3px);   /* title bottom 1395 → 2px line centred on y1427 */
  background: var(--accent);
}

/* ---- Grid ---------------------------------------------------------------- */
.block-video-grid__list {
  display: grid;
  grid-template-columns: minmax(0, 823fr) minmax(0, 820fr);
  column-gap: min(3.2813vw, 63px);
  row-gap: min(1.9792vw, 38px);                     /* 462 + 13 + 24 caption + 38 = the 537 row pitch */
  align-items: start;
  margin: min(4.1146vw, 79px) min(0.1042vw, 2px) 0 min(0.625vw, 12px);   /* rule bottom 1428 → cards 1507; x112 → 1818 */
}
.block-video-grid__figure { margin: 0; }

/* ---- Card: still → video (cross-fade) → one button over the whole card --- */
.block-video-grid__media {
  position: relative;
  aspect-ratio: 823 / 462;                          /* the Figma card (16:9 within a pixel) */
  overflow: hidden;
  background: var(--black);
}
.block-video-grid__poster,
.block-video-grid__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block-video-grid__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;                    /* = FADE_MS in js/shared/video-cards.js */
}
.block-video-grid__media.is-live .block-video-grid__video { opacity: 1; }

.block-video-grid__play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.block-video-grid__play:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; }   /* inside the clipped card */
.block-video-grid__media.is-unavailable .block-video-grid__play { cursor: default; }

/* Play disc: Figma Ellipse (79px black) + Polygon (green triangle) */
.block-video-grid__disc {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--disc);
  height: var(--disc);
  border-radius: 50%;
  background: var(--black);
  color: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}
.block-video-grid__disc svg {
  width: calc(var(--disc) * 15 / 79);
  height: calc(var(--disc) * 17 / 79);
  margin-left: calc(var(--disc) * 3 / 79);          /* the Figma triangle's box sits 1.5px right of centre */
}
.block-video-grid__play:hover .block-video-grid__disc { transform: translate(-50%, -50%) scale(1.08); }
.block-video-grid__media.is-playing .block-video-grid__disc,
.block-video-grid__media.is-unavailable .block-video-grid__disc {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
}

/* Sound badge (bottom right, the homepage cards' black-disc language): white speaker + cross while
   muted, green speaker + waves with sound on */
.block-video-grid__sound {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--black);
  color: var(--fg);
  opacity: 0;
  transform: scale(.8);
  transition: transform .25s ease, opacity .25s ease;
}
.block-video-grid__media.is-playing .block-video-grid__sound { opacity: 1; transform: none; }
.block-video-grid__sound svg { width: 20px; height: 20px; }
.block-video-grid__sound-on { display: none; }
.block-video-grid__media[data-state="sound"] .block-video-grid__sound { color: var(--accent); }
.block-video-grid__media[data-state="sound"] .block-video-grid__sound-on { display: block; }
.block-video-grid__media[data-state="sound"] .block-video-grid__sound-off { display: none; }

/* ---- Caption --------------------------------------------------------------- */
.block-video-grid__caption {
  margin-top: min(0.6771vw, 13px);                  /* box 13 under the card → caps 16 under, as the Figma */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.25vw, 24px);             /* 24 */
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;                               /* a caption that wraps (tablet / mobile) splits evenly; the
                                                       partial ties the dash to the client with a no-break space */
}

/* ---- Tablet: two columns, tighter -------------------------------------- */
@media (max-width: 1024px) {
  .block-video-grid__list { column-gap: 24px; row-gap: 32px; margin: 56px 0 0; }
  .block-video-grid__caption { margin-top: 10px; font-size: 18px; }
  .block-video-grid__sound { right: 12px; bottom: 12px; width: 34px; height: 34px; }
  .block-video-grid__sound svg { width: 17px; height: 17px; }
}

/* ---- Mobile (402, derived): Mobile Category head, one column of full-width cards ---------------------- */
@media (max-width: 640px) {
  .block-video-grid {
    --nudge: 0px;
    --disc: 56px;
    padding: 10px 0 36px;                           /* as work-showcase after the hero: 66px hero intro → eyebrow; 72 between blocks, split */
  }
  .block-video-grid__eyebrow { gap: 12px; margin-left: 4px; }   /* dot x24, label x42 */
  .block-video-grid__title { margin-top: 12px; font-size: 36px; line-height: 1.222; }
  .block-video-grid__rule { width: 64px; margin: 32px 0 0; }
  .block-video-grid__list { grid-template-columns: minmax(0, 1fr); row-gap: 28px; margin-top: 32px; }
  .block-video-grid__caption { margin-top: 10px; font-size: 16px; line-height: 1.15; }
  .block-video-grid__sound { right: 10px; bottom: 10px; width: 30px; height: 30px; }
  .block-video-grid__sound svg { width: 15px; height: 15px; }
}