/* ============================================================
   #si-videos — core/video-modal.js's marketing video popup: a real
   centered dialog (backdrop + card), NOT a full-bleed screen. Layout is
   a big "stage" (the video currently picked) with a horizontal
   filmstrip of every video's thumbnail below it — clicking a filmstrip
   tile loads that video into the stage above, it never plays in the
   small tile itself.
   .video-tile-rail at the bottom is the OTHER user of the shared tile
   markup: the Home Properties panel (#shell-rail-end), a plain
   scrolling list, not this modal.
   ============================================================ */
#si-videos{position:fixed;inset:0;background:rgba(10,14,28,.72);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:24px;font-family:var(--font);}
#si-videos[hidden]{display:none;}

.si-videos-panel{width:min(920px,100%);max-height:88vh;background:#1e2748;color:#fff;
  border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;}

.si-videos-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;flex:0 0 auto;}
.si-videos-title{font-size:15px;font-weight:700;color:#fff;}
.si-videos-close{background:none;border:1px solid #3a4470;color:#c7ceeb;border-radius:var(--r-pill);
  width:32px;height:32px;font-size:14px;cursor:pointer;font-family:var(--font);flex:0 0 auto;}
.si-videos-close:hover{background:#242d4f;}

/* The big stage — this is the "center big space" a filmstrip click fills. */
.si-videos-stage{flex:0 1 auto;margin:0 24px;border-radius:10px;overflow:hidden;background:#000;
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;}
.si-videos-stage-empty{color:#8a93bd;font-size:13.5px;padding:24px;text-align:center;}
.si-videos-stage-frame{width:100%;height:100%;}
.si-videos-stage-frame iframe{width:100%;height:100%;border:0;display:block;}
.si-videos-stage-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:0 24px;padding:10px 0 0;}
.si-videos-stage-title{font-size:13px;color:#c7ceeb;}
.si-videos-stage-yt-link{font-size:12px;color:#fff;background:rgba(255,255,255,.12);
  padding:5px 10px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;}
.si-videos-stage-yt-link:hover{background:rgba(255,255,255,.22);}

/* The filmstrip — every video's thumbnail, one row, horizontal scroll
   once it overflows (the "flow in bottom horizontally" ask). */
.si-videos-strip{flex:0 0 auto;display:flex;gap:12px;padding:16px 24px 20px;overflow-x:auto;}

.video-tile{display:flex;flex-direction:column;gap:6px;}
.video-tile-strip{flex:0 0 160px;}
.video-tile-play{position:relative;display:block;padding:0;border:none;border-radius:8px;overflow:hidden;
  cursor:pointer;background:#000;aspect-ratio:16/9;width:100%;}
.video-tile-thumb{width:100%;height:100%;object-fit:cover;display:block;}
.video-tile-play-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;background:rgba(0,0,0,.25);transition:background-color .12s;}
.video-tile-play:hover .video-tile-play-icon{background:rgba(0,0,0,.45);}
.video-tile-title{font-size:11.5px;color:#c7ceeb;line-height:1.3;}
.video-tile-strip.is-active .video-tile-play{box-shadow:0 0 0 2px var(--c-primary,#5a4a8f);}
.video-tile-strip.is-active .video-tile-play-icon{background:rgba(0,0,0,.1);}

@media (max-width:720px){
  .si-videos-panel{max-height:94vh;}
  .video-tile-strip{flex:0 0 130px;}
}

/* ---- Home Properties rail: stacked video tiles, replaces the old
   .pitch-rows bullet list (still defined in css/vs-shell.css, now
   unused — left as-is, not this change's to remove). ---- */
.video-rail-tiles{display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:100%;}
.video-tile-rail{flex-direction:row;align-items:center;gap:10px;padding:6px;border-radius:var(--r-sm);
  transition:background-color .12s;cursor:pointer;}
.video-tile-rail:hover{background-color:var(--c-primary-soft);}
.video-tile-rail .video-tile-play{width:84px;flex:0 0 auto;aspect-ratio:16/9;border-radius:6px;cursor:pointer;}
.video-tile-rail .video-tile-play-icon{font-size:14px;}
.video-tile-rail .video-tile-title{color:var(--c-text2);font-size:12.5px;}