/* ============================================================
   Image-to-Video modal
   Pairs with site-image-to-video.js (which builds #video-modal).
   Every selector is scoped under #video-modal, so nothing here
   affects any other element on the page.
   ============================================================ */

/* The dialog fills the viewport so clicks on the dimmed area can close it.
   A closed <dialog> stays display:none (UA default); we only switch it to
   flex while it's open. */
#video-modal {
	position: fixed;
	inset: 0;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#video-modal[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Dimmed backdrop behind the video */
#video-modal::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

/* Centered wrapper: caps width on desktop, scales down on mobile */
#video-modal .video-modal__inner {
	position: relative;
	width: min(92vw, 960px);
}

/* Responsive 16:9 video box */
#video-modal .video-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

#video-modal .video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Close button: the X is drawn from two bars (::before / ::after) so it
   never depends on a font glyph or on the site's global button text styles.
   font-size:0 collapses the &times; fallback text in the markup. */
#video-modal .video-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;            /* lift above the iframe, which otherwise paints over it */
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
	font-size: 0;
	line-height: 0;
}

#video-modal .video-modal__close:hover {
	background: rgba(0, 0, 0, 0.8);
}

#video-modal .video-modal__close::before,
#video-modal .video-modal__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	background: #fff;
}

#video-modal .video-modal__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

#video-modal .video-modal__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ============================================================
   VIDEO PREVIEW  --  SITE-WIDE, reusable
   A poster image, a centered play button, and a decorative
   control bar pinned to the bottom. The whole thing is an
   .image-to-video trigger, so clicking it opens the #video-modal
   above. Standard everywhere; the surrounding FRAME is left
   entirely to the page designer (see the frame layer below).

   One implementation replaces the old per-section variants
   (Section 3 "how-to" thumbs and the SWPG framed booklet), which
   had drifted apart. Rounding of the bar's bottom corners comes
   from the rounded, clipped .video-preview__stage -- the bar is
   absolutely positioned to the stage edges, so the clip shapes
   it. No per-corner rules needed.

   DOM contract (frame optional -- omit the wrapper for no frame):
     <div class="video-preview-frame">            <!-- OPTIONAL -->
       <a class="image-to-video video-preview" data-video-url="...">
         <span class="video-preview__stage">
           <img class="video-preview__poster" src="..." alt="..." />
           <img class="video-preview__play" src=".../video_play-button.png" alt="" />
           <span class="video-preview__bar" aria-hidden="true">
             <svg class="video-preview__bar-icon"><use href="...#ico-video-play"/></svg>
             <span class="video-preview__bar-track"><span class="video-preview__bar-knob"></span></span>
             <span class="video-preview__bar-time">1:05</span>
             <svg class="video-preview__bar-icon"><use href="...#ico-video-settings"/></svg>
             <svg class="video-preview__bar-icon"><use href="...#ico-video-fullscreen"/></svg>
           </span>
         </span>
       </a>
     </div>

   Component variables (override on .video-preview per page):
     --vp-radius     stage corner radius   (default 0.5em)
     --vp-bar-bg     control bar colour     (default #3b3b3b, or theme --color-dark)
     --vp-bar-fg     bar icon/text colour   (default #ffffff)
     --vp-play-size  play button width      (default 20% of container)
     --vp-play-color play button circle grey (default #333333; triangle fixed white)
     --vp-accent     scrubber knob colour    (default #4792bc, or theme --color-water-ozonator)
     --vp-aspect     stage aspect-ratio     (default auto -- poster sets height)
   ============================================================ */

.video-preview {
	--vp-radius:    var(--radius-card, 0.5em);
	--vp-bar-bg:    var(--color-dark, #3b3b3b);
	--vp-bar-fg:    var(--color-white, #ffffff);
	--vp-play-size: 20%;
	--vp-accent:    var(--color-water-ozonator, #4792bc);

	display: block;
	width: 100%;
}

/* Stage: rounded, clipped box holding poster + play + bar. The clip
   is what rounds the bar corners. */
.video-preview__stage {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--vp-radius);
	aspect-ratio: var(--vp-aspect, auto);
}

.video-preview__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Centered play button (100x100 PNG rendered responsively). */
.video-preview__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--vp-play-size);
	height: auto;
	aspect-ratio: 1; /* keep square; width may be a % of container */
	color: var(--vp-play-color, #333333); /* adjustable circle grey (currentColor); triangle stays white */
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform 0.2s;
}
.video-preview:hover .video-preview__play {
	transform: translate(-50%, -50%) scale(1.08);
}

/* Decorative control bar pinned to the stage bottom (non-functional;
   real controls are in #video-modal). */
.video-preview__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 0.278em; /* 5px */
	padding: 0.278em 0.556em; /* 5px 10px */
	background: var(--vp-bar-bg);
	pointer-events: none;
}
.video-preview__bar-icon {
	width: 0.556em;  /* 10px */
	height: 0.556em;
	flex-shrink: 0;
	color: var(--vp-bar-fg); /* currentColor sprite icons */
}
.video-preview__bar-track {
	position: relative;
	flex: 1;
	height: 5px;
	min-width: 0;
	margin: 0 0.278em;
	border-radius: 6px;
	background: linear-gradient(90deg, #adadad 0% 56%, #d0d0d0 56% 100%);
}
.video-preview__bar-knob {
	position: absolute;
	left: 56%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	border-radius: 9999px;
	background: var(--vp-accent);
	border: 1px solid var(--vp-bar-fg);
	box-shadow: 0 0 3px 0 #adadad;
}
.video-preview__bar-time {
	flex-shrink: 0;
	font-size: 0.778em; /* 14px */
	line-height: 1;
	color: var(--vp-bar-fg);
}

/* ------------------------------------------------------------
   FRAME (optional) -- entirely the designer's choice. Wrap the
   .video-preview in .video-preview-frame and set any of these
   variables per instance. Defaults draw NOTHING (no padding, no
   border, no background), so an unstyled wrapper is invisible and
   the preview looks exactly as if there were no frame. Set only
   what you want: a hairline, a grey card, a shadow, etc.

     --vpf-pad      padding around the preview   (default 0)
     --vpf-bg       frame background             (default transparent)
     --vpf-border   frame border (shorthand)     (default none)
     --vpf-radius   frame corner radius          (default 0)
     --vpf-shadow   frame box-shadow             (default none)

   Examples:
     Thin line:  style="--vpf-border:1px solid #ccc; --vpf-radius:12px"
     Grey card:  style="--vpf-pad:8px; --vpf-bg:#f5f5f5; --vpf-radius:20px"
   ------------------------------------------------------------ */
.video-preview-frame {
	padding: var(--vpf-pad, 0);
	background: var(--vpf-bg, transparent);
	border: var(--vpf-border, none);
	border-radius: var(--vpf-radius, 0);
	box-shadow: var(--vpf-shadow, none);
}