/* ==========================================================================
   6b — DEMO LIGHTBOX                                    opened by the band
   A native <dialog>, so the top layer, the focus trap, Esc and the inert
   background come from the browser rather than from a z-index war with the
   nav pill and the dropdown panels. Everything inside is the page's own
   language: paper card, --zr-r-md corners, the reveal's rise-out-of-blur,
   and the band's own gradient reused for the footer bar so the panel reads
   as the band itself opening up.
   ========================================================================== */
.zr-vid{
  width:100%; max-width:none; height:100%; max-height:none;
  margin:0; padding:clamp(12px,3vw,32px);
  border:0; background:transparent; overflow:hidden;
  color:var(--zr-body);
}
/* the display lives on [open] — an unscoped one beats the UA's
   dialog:not([open]){display:none} and leaves a viewport-tall blank block
   sitting in the flow after the footer */
.zr-vid[open]{ display:grid; place-items:center; }
.zr-vid::backdrop{
  background:rgba(12,20,38,.62);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
  opacity:0; transition:opacity .28s var(--zr-ease-out-quad);
}
.zr-vid.is-in::backdrop{ opacity:1; }

.zr-vid__card{
  width:min(1040px,100%); max-height:100%;
  /* a flex column so a short viewport takes it out of the stage rather than
     scrolling the CTA off the bottom — head and foot hold their size, the
     stage shrinks past 16:9 and object-fit letterboxes it on the navy */
  display:flex; flex-direction:column;
  overflow:auto; overscroll-behavior:contain;
  background:var(--zr-paper);
  border:1px solid var(--zr-line);
  border-radius:var(--zr-r-md);
  box-shadow:0 40px 90px rgba(11,23,48,.30), 0 6px 18px rgba(11,23,48,.10);
  opacity:0; translate:0 16px; scale:.985; filter:blur(5px);
  transition:opacity .34s var(--zr-ease-out-quart),
             translate .34s var(--zr-ease-out-quart),
             scale .34s var(--zr-ease-out-quart),
             filter .3s var(--zr-ease-out-quart);
}
.zr-vid.is-in .zr-vid__card{ opacity:1; translate:0 0; scale:1; filter:blur(0); }

/* 16px inline, so the mark's left edge lines up with the stage and the
   footer bar rather than sitting 4px inside them */
.zr-vid__head{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:18px 16px 14px; }
.zr-vid__mark{
  flex:0 0 auto; width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,#1B2A44,#0B1730);
}
.zr-vid__mark svg{ width:20px; height:20px; }
.zr-vid__titles{ flex:1 1 auto; min-width:0; }
.zr-vid__title{
  margin:0; font-size:17px; line-height:24px; font-weight:500;
  letter-spacing:-.012em; color:var(--zr-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.zr-vid__by{ margin:2px 0 0; font-size:13px; line-height:18px; color:var(--zr-muted); }
.zr-vid__x{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--zr-line); background:#fff; color:var(--zr-ink);
  transition:background .16s var(--zr-ease-out-quad),
             border-color .16s var(--zr-ease-out-quad);
}
.zr-vid__x:hover{ background:#F5F7FB; border-color:var(--zr-line); }
.zr-vid__x:focus-visible{ outline:2px solid var(--zr-blue); outline-offset:2px; }
.zr-vid__x svg{ width:16px; height:16px; }

.zr-vid__stage{
  flex:0 1 auto; min-height:0;
  position:relative; margin-inline:16px;
  aspect-ratio:16 / 9; border-radius:14px; overflow:hidden;
  background:linear-gradient(140deg,#1B2A44,#0B1730);
}
.zr-vid__stage > *{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; border:0; background:#0B1730;
}
.zr-vid__stage video{ object-fit:contain; }

.zr-vid__foot{
  flex:0 0 auto;
  display:flex; flex-wrap:wrap; gap:20px 24px;
  align-items:center; justify-content:space-between;
  margin:16px; padding:20px 24px;
  border-radius:16px;
  background:linear-gradient(100deg,#F6F9FE,#EDF3FD);
  border:1px solid var(--zr-line-soft);
}
.zr-vid__foot .zr-h4{ font-size:clamp(19px,1.6vw,24px); margin-bottom:6px; }
.zr-vid__foot .zr-lead{ margin:0; }
.zr-vid__ticks{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; }
.zr-vid__tick{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; line-height:18px; color:var(--zr-body);
}
.zr-vid__tick svg{ width:16px; height:16px; color:var(--zr-blue); }
.zr-vid__foot .zr-btn svg{ width:18px; height:18px; }

/* Phones get it as a bottom sheet — a 16px gutter either side of a 16:9
   stage leaves nothing to look at, and the thumb is at the bottom anyway. */
@media (max-width:680px){
  .zr-vid{ padding:0; }
  .zr-vid[open]{ align-items:end; }   /* match .zr-vid[open]'s specificity */
  .zr-vid__card{ border-radius:var(--zr-r-md) var(--zr-r-md) 0 0; border-bottom:0; }
  .zr-vid__head{ padding:16px 12px 12px; }
  /* two lines beat an ellipsis on a 375px header */
  .zr-vid__title{ font-size:16px; line-height:22px; white-space:normal; overflow:visible; }
  .zr-vid__stage{ margin-inline:12px; border-radius:12px; }
  .zr-vid__foot{ margin:12px; margin-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); padding:18px; }
  .zr-vid__foot .zr-btn{ width:100%; }
}