/**
 * @appname     RI Stack Video
 * @file        SITE-ROOT/css/stack-video.css
 * @version     2025.09.10.2318.00-EST
 * @author      
 * @license     © tommyshutter@gmail.com
 * @description Inline tile styles for MP4 and YouTube players.
 */

:root{ --stack-video-ratio: 16/9; }

/* MP4 video tile we inject */
.ri-inline-video{
  width:100%;
  aspect-ratio: var(--stack-video-ratio);
  display:block;
  border-radius:8px;
  object-fit:cover;
  background:#000;
}

/* YouTube inline tile */
.ri-inline-yt{
  position:relative;
  width:100%;
  aspect-ratio: var(--stack-video-ratio);
  border-radius:8px;
  overflow:hidden;
  background:#000;
}
.ri-inline-yt-frame{
  width:100%; height:100%; display:block; border:0;
  /* cover-crop to remove letterbox; tunable via --stack-yt-crop (default set by JS) */
  transform: scale(var(--stack-yt-crop, 1.08));
  transform-origin: center center;
  pointer-events:none; /* click passes to <a> */
}

/* Hide broken <img> if swapped to player */
.ri-thumb-missing{ display:none !important; }

/* Fallback placeholder (rare) */
.ri-video-ph{
  display:grid; place-items:center;
  width:100%;
  aspect-ratio: var(--stack-video-ratio);
  background:#0f1620;
  color:#9fb0c3;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  font-weight:700; letter-spacing:.08em; font-size:12px;
}

/* Subtle outline when a real <video> is actively playing */
.ri-video-playing{ outline:2px solid rgba(255,255,255,.12); outline-offset:0 }