/* ClearTrust — the video band: one Synthesia player under a section heading.
   Product, not review scaffolding: it survives the bake.

   Spec: video/embeds.md from the design side (2026-09-08). One component,
   ct-video-embed, used four times: Capabilities, Intelligent Orchestration,
   Financial Infrastructure, Digital Assets. Since R12 (2026-10-09) the player is the
   browser's own and the file is the site's; see ct-video.js.

   Classes, not inline styles, for the same reason as ct-diagrams.css: ct-mobile.css
   overrides the pages' inline declarations by matching their literal text, and a
   wrapper written inline would be caught by rules meant for the copy. So this file
   carries its own breakpoints, mirroring the section rhythm ct-mobile.css gives the
   inline sections (72/96 desktop, 48/56 phone) and the h3 scale (36 / 31 / 25 / 24).

   Nothing here sets a hex value. The spec named a few tokens from memory that the
   site does not declare; per the spec they are aliased below to the nearest token
   the site owns, under --vb-* names. No --ct-* token is redeclared.

     spec                  site                        alias
     --ct-ink              --ct-text                   --vb-ink
     --ct-border           --ct-rule                   --vb-border
     --ct-radius-lg        (none: the site is square)  --vb-radius: 0
     --ct-font-display     --ct-f-display              --vb-font-display
     --ct-space-band       section padding 72px/96px   written directly
     --ct-measure-wide     page container, 1280px      inherited, not re-imposed
     --ct-space-inline     page gutter, 56px           inherited, not re-imposed

   The band sits inside the page's content container, as every other section
   does, so the container already supplies measure and gutter. The band's own
   background is left transparent: the page surface is --ct-surface with the
   fixed grid drawn over it, and an opaque fill here would blank the grid behind
   the band alone. The band is on --ct-surface in every palette by inheritance. */

.ct-video-band {
  --vb-ink: var(--ct-text);
  --vb-border: var(--ct-rule);
  --vb-radius: 0;
  --vb-font-display: var(--ct-f-display);

  display: block;
  padding-block: 72px 96px;
  border-top: 1px solid var(--ct-rule);
}
.ct-video-band__inner {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
.ct-video-band__heading {
  font-family: var(--vb-font-display);
  font-weight: var(--ct-w-display);
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: var(--ct-track-h2);
  color: var(--vb-ink);
  margin: 0 0 24px;
  max-width: 30ch;
  text-wrap: pretty;
}
.ct-video-embed {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--vb-radius);
  border: 1px solid var(--vb-border);
  background: var(--ct-surface-raised);
}
/* R12 (2026-10-09): the player is the browser's <video>; R6a..R11 it was an iframe. */
.ct-video-embed video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0;
  display: block; background: var(--ct-surface-raised); object-fit: contain;
}

@media (max-width: 1024px) {
  .ct-video-band__heading { font-size: 31px; }
}
@media (max-width: 720px) {
  .ct-video-band { padding-block: 48px 56px; }
  .ct-video-band__heading { font-size: 25px; line-height: 1.18; max-width: none; }
}
@media (max-width: 400px) {
  .ct-video-band__heading { font-size: 24px; }
}

/* R6a — poster facade. The band opens on a local still of the video's title card with a
   Play control; ct-video.js swaps in the player on click. The poster is the brand's dark
   surface in every theme, so the badge uses the two header tokens that are light-on-dark
   in both palettes rather than the theme-following button tokens. */
.ct-video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; padding: 0; margin: 0; border: 0;
  background: var(--ct-surface-raised); cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.ct-video-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.ct-video-play:hover .ct-video-poster, .ct-video-play:focus-visible .ct-video-poster { transform: scale(1.015); }
.ct-video-badge {
  position: absolute; left: 24px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 16px;
  background: var(--ct-word-clear); color: var(--ct-header);
  font-family: var(--ct-f-text); font-size: 14px; font-weight: 500; letter-spacing: .02em; line-height: 1;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.ct-video-badge svg { width: 12px; height: 12px; display: block; fill: currentColor; }
.ct-video-play:hover .ct-video-badge, .ct-video-play:focus-visible .ct-video-badge { transform: translateY(-2px); }
.ct-video-play:focus-visible { outline: 2px solid var(--ct-word-clear); outline-offset: -4px; }
@media (max-width: 720px) {
  .ct-video-badge { left: 14px; bottom: 14px; padding: 10px 16px 10px 13px; font-size: 13px; }
}