/* ==========================================================================
   Connect 2026 - Video player                                           T-31
   --------------------------------------------------------------------------
   The reader video on Webinar (p16) and Filmed Interview (p18). Also the
   affordance the Audio shell (p20) and the Home "Latest Videos & Audio" strip
   reuse - see .cn-card__play in card.css for the small 56px variant.

   MEASURED, both artboards agree:
     frame          771px wide - the full reader column, no hero still beside it
     play circle    160px, --cn-cyan
     play triangle  82 x 92px, white, centroid-centred in the circle

   The circle is sized as a PERCENTAGE of the frame (160/771 = 20.75%), not a
   fixed 160px, so it scales with the video at every width instead of turning
   into a lid on a phone. Same for the triangle (82/771 = 10.635%).

   TRIANGLE CENTRING - a triangle looks off-centre when its bounding box is
   centred, because its visual mass sits at the centroid, 1/3 from the base.
   Shifting right by width/6 puts the centroid on the circle's centre, which is
   what the artboard does: circle centre x=196.15pt, triangle centroid x=195.3.

   NOT AN <img> WITH AN OVERLAY. It is a <button>, so it is keyboard-reachable
   and announced as a control. Phase 0 renders the poster only; wiring the real
   player is a Phase 2 task once the client confirms the video host (open
   question 12 in CONNECT2026.md).

   DEPENDS ON: tokens.css
   ========================================================================== */

.cn-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--cn-ph-img);
  cursor: pointer;
  /* The frame is the click target; nothing inside needs its own hit area. */
  color: inherit;
  font: inherit;
}

.cn-video__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------- play ----- */

.cn-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;   /* the button underneath takes the click */
}

.cn-video__play::before {
  content: "";
  width: max(48px, 20.75%);          /* 160 / 771 */
  aspect-ratio: 1;
  border-radius: var(--cn-radius-pill);
  background: var(--cn-cyan);
  transition: transform var(--cn-dur) var(--cn-ease);
}

.cn-video__play::after {
  content: "";
  position: absolute;
  width: max(24px, 10.635%);         /* 82 / 771 */
  aspect-ratio: 82 / 92;
  background: var(--cn-ink-invert);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  margin-left: max(4px, 1.773%);     /* width/6 - centroid, not bounding box */
  transition: transform var(--cn-dur) var(--cn-ease);
}

.cn-video:hover .cn-video__play::before,
.cn-video:focus-visible .cn-video__play::before { transform: scale(1.06); }

/* Focus ring comes from the global :focus-visible in shell.css. */

/* ------------------------------------------------------ placeholder ----- */
/*
   Artboard state - the black block used everywhere a stock still belongs.
   Same MUST NOT SHIP rule as .cn-ad--placeholder:
     grep -rn "cn-video--placeholder" src/main/webapp/WEB-INF/views/connect2026/
*/
.cn-video--placeholder { background: var(--cn-ph-img); }

/* A caption under the frame, used when a transcript link is present. */
.cn-video__caption {
  margin-top: var(--cn-space-3);
  font-size: var(--cn-text-meta);
  color: var(--cn-ink-muted);
}

/* =========================================================== RESPONSIVE == */
/*
   Nothing to switch: the frame is 100% wide with a fixed ratio and the play
   button is proportional, so it works from a watch to a projector unchanged.
   The max() floors stop the circle collapsing below a 48px touch target on
   very narrow screens - at 320px the proportional size would be 66px anyway,
   so the floor only bites inside embedded/rail contexts.
*/

/* ============================================================= PLAYING == */
/*
   After js/video.js swaps the facade for the provider's iframe.

   The wrapper keeps .cn-video so the 16:9 ratio and the frame's own box are
   unchanged - the page must not reflow at the moment someone presses play,
   which is the one moment they are certainly looking at it. Only the inside
   differs: an iframe filling the frame instead of a poster and a circle.
*/
.cn-video--playing {
  cursor: default;
  background: var(--cn-ink);   /* letterbox bars, not the placeholder grey */
}

.cn-video__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}