/* Hero explainer videos (YouTube Shorts, vertical 9:16) in a native <dialog>. Used by /trail/ and /sign/ in RU/KK/EN.
   Builds on the site's .sheet styles (landing.css); adds only the player frame. */
.sheet-hv{
  background:linear-gradient(180deg,#10161f,#0a0e15);
  border:1px solid rgba(170,131,50,.45);border-radius:16px;
  padding:30px clamp(16px,4vw,28px) 22px;max-width:min(430px,94vw);
  box-shadow:0 32px 80px rgba(0,0,0,.65);
}
.sheet-hv::backdrop{background:rgba(4,6,10,.8);backdrop-filter:blur(4px)}
.sheet-hv .sheet-kicker{margin-bottom:16px;padding-right:46px}
.hv-frame{
  /* the Short is 9:16: WIDTH is the constrained dimension (dialog width, or the height budget converted at 9:16, max 360px); height follows from the ratio */
  aspect-ratio:9/16;width:min(100%,calc((100dvh - 190px) * 9 / 16),360px);height:auto;margin:0 auto;
  background:#05080d;border-radius:10px;overflow:hidden;
}
.hv-frame iframe{display:block;width:100%;height:100%;border:0}
.hv-yt{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px auto 0;color:var(--au-hi,#c9a24e);font:600 14.5px/1 var(--font-text,inherit);text-decoration:none;min-height:40px}
.hv-yt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.hv-yt:hover{text-decoration:underline;text-underline-offset:3px}}
.hv-yt:focus-visible{outline:2px solid var(--au-hi,#c9a24e);outline-offset:3px;border-radius:6px}
@media (max-width:480px){.sheet-hv{padding:26px 12px 16px}}