/* Click-to-load video facade, standalone.

   These rules already exist inside simam-solutions.css, which the modern pages
   load. This file exists for the legacy Mobirise/Bootstrap pages, which do not
   load simam-solutions.css and would otherwise render the facade unstyled.
   Kept deliberately narrow: only .video-frame and its play button, nothing that
   could reach the rest of a Mobirise page. */

.video-frame {
  position: relative;
  background: #06080f;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
}
.video-frame video,
.video-frame .simam-lazy-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.video-frame .simam-youtube-embed {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.simam-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  background: linear-gradient(180deg, rgba(5, 8, 15, .08), rgba(5, 8, 15, .36));
  cursor: pointer;
  z-index: 2;
}
.simam-video-play span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
  position: relative;
  transition: transform .2s ease, background .2s ease;
}
.simam-video-play span:before {
  content: "";
  position: absolute;
  left: 22px;
  top: 17px;
  border-left: 16px solid #111827;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.simam-video-play:hover span,
.simam-video-play:focus-visible span {
  transform: scale(1.06);
  background: #fff;
}
.video-frame.is-playing .simam-video-play { display: none }

@media (prefers-reduced-motion: reduce) {
  .simam-video-play span { transition: none }
}