/* Prehrávač videí Rozsvietime (video/prehravac.js).
   Bez lišty prehliadača: video beží samo bez zvuku, keď je na obrazovke, okrúhle
   tlačidlo na okraji zapína zvuk a ťuknutie inde video zastaví alebo pustí.
   Farby si stránka vie prepísať cez --video-accent a --video-ink,
   odstup nad a pod videom cez --video-hore a --video-dole. */
.video{
  --_a: var(--video-accent, var(--accent, #FFC861));
  --_i: var(--video-ink, var(--accent-ink, #201603));
  position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; margin: var(--video-hore, 0) auto var(--video-dole, 0);
  border-radius: 28px; overflow: hidden; isolation: isolate; cursor: pointer;
  background: #050A20 center / cover no-repeat;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .6);
}
.video video{ display: block; width: 100%; height: 100%; object-fit: cover; }
.video button{ font-family: inherit; -webkit-tap-highlight-color: transparent; }
.video button:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }
.video [hidden]{ display: none !important; }

.video-spustit{
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 8px;
  border: 0; border-radius: 999px; background: var(--_a); color: var(--_i);
  font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.video-spustit span{ width: 36px; height: 36px; border-radius: 50%; background: var(--_i); color: var(--_a); display: grid; place-items: center; }
.video-spustit svg{ width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }

.video-zvuk{
  position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; background: var(--_a); color: var(--_i);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.video-zvuk svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.video-zvuk[aria-pressed="true"] .vyp, .video-zvuk[aria-pressed="false"] .zap{ display: none; }
/* zastavené rukou: rovnaké tlačidlo v druhom rohu pustí video od začiatku */
.video-znova{ right: auto; left: 14px; }

@media (max-width: 380px){ .video-spustit{ gap: 6px; padding-right: 14px; font-size: 15px; } }