/* demo_page_video.css — page-specific styles for /demo_page_video/
   (in-content video ad demo). Loaded after demo-common.css. */

/* In-content video ad slot. The Clickio tag (360.js) renders a 16:9 viralize
   player into #video-desktop / #video-mobile; reserve the space up front. */
.video-slot { max-width: 810px; margin: 0 auto 40px; padding: 0 20px; }
.video-slot__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #101114;
  border-radius: 6px;
  overflow: hidden;
}
#video-desktop, #video-mobile { position: absolute; inset: 0; }

/* ---- Viralize wide-wrapper positioning — preserved BYTE-FOR-BYTE from the
   live Tilda page; keys off the preserved slot ids #video-desktop / #video-mobile. */
@media (min-width: 961px) {
	#video-mobile [id$="-viralize-wide-wrapper"] [id$="-wrapper"][class$="-bottom-right-position"] {
		width: 360px !important;
		right: calc((100vw - 420px) / 2 ) !important;
	}
	#video-desktop [id$="-viralize-wide-wrapper"] [id$="-wrapper"][class$="-bottom-right-position"] {
		width: 535px !important;
		right: calc((100vw - 865px) / 2 ) !important;
	}
}

@media (max-width: 640px) {
  .video-slot__inner { aspect-ratio: 16 / 10; }
}