/* Zvislé videá (9:16) s veľkým tlačidlom play; kliknúť sa dá kamkoľvek na obraz.
   Bez JS ostáva natívny prehrávač s ovládaním; video.js tlačidlo odkryje
   a ovládanie schová, kým sa video nespustí. */
.video-obal {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 9 / 16; background: #0B0B0B;
}
.video-obal video {
  display: block; width: 100%; height: 100%; object-fit: cover; background: #0B0B0B;
}
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; cursor: pointer; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(11,11,11,0) 45%, rgba(11,11,11,.38) 100%);
  font: inherit;
}
.video-play[hidden] { display: none; }
.video-play-ikona {
  position: relative; width: clamp(74px, 6vw, 96px); height: clamp(74px, 6vw, 96px);
  border-radius: 50%; background: #C2521C;
  box-shadow: 0 0 0 10px rgba(194,82,28,.28), 0 18px 40px -12px rgba(0,0,0,.55);
  transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.video-play-ikona::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-36%, -50%);
  border-style: solid; border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent #FFFFFF;
}
.video-play:hover .video-play-ikona,
.video-play:focus-visible .video-play-ikona {
  transform: scale(1.08); background: #A8420F;
  box-shadow: 0 0 0 14px rgba(194,82,28,.32), 0 18px 40px -12px rgba(0,0,0,.55);
}
.video-play:focus-visible { outline: 3px solid #F0A97E; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .video-play-ikona { transition: none; }
}