/*
 * Block: video
 * Source: prototypes/kitchen-sink-dncg.html  .video / .duo (side-by-side).
 * Root: .video (section) with display_style video | video-left | video-right.
 * The generic expand utilities (.js-expandmore, .js-to_expand,
 * .expandmore__button) and the Foundation .responsive-embed base are shared
 * globals; only .video-scoped rules live here. Tokens only.
 * FLAG: the prototype .video__play (lime circle) / .video__tag are the poster
 * of a placeholder box. The real block embeds <lite-youtube>, which renders its
 * own poster + play control, so those overlay elements are not added; the media
 * frame (16:9, radius, shadow) is applied to .responsive-embed.
 */

.video {
  padding: 4rem 0;
}

/* Media frame: prototype .video (rounded, soft shadow). lite-youtube fills it;
   the gradient is only a fallback ground before its thumbnail paints. */
.video .responsive-embed {
  margin-bottom: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: linear-gradient(150deg, var(--navy) 0%, var(--dblue) 100%);
}

/* Side-by-side (video-left / video-right): a two-up split like prototype .duo.
   video-right keeps markup order (content left, media right); video-left
   reverses so the media sits left. */
@media print, screen and (min-width: 40em) {
  .video-left .row,
  .video-right .row {
    display: flex;
    align-items: center;
    gap: 3rem;
  }
  .video-left .row > .columns,
  .video-right .row > .columns {
    padding-left: 0;
    padding-right: 0;
  }
  .video-left .row {
    flex-direction: row-reverse;
  }
}

/* Transcript CSS REMOVED alongside the transcript_status /
   transcript_content fields and the render block. It styled a pane that
   never opened: the .js-expandmore / .js-to_expand toggle it sat behind is
   bound by no shipped script. About 60 lines (.video-transcript-pane and
   .video-transcript) went with it; recoverable from git if transcripts
   return. */