/*
 * Lab video lightbox for the Wi-Fi Device Testing & Validation page.
 * Ported verbatim from thinkpalm.com assets/css/section-business-stats.css
 * (the homepage corporate-video lightbox), lightbox rules only, so the lab
 * video behaves exactly like the homepage one (FRD section 8).
 */

html.tp2026-lightbox-lock {
	overflow: hidden;
	scrollbar-gutter: stable;
}

.tp2026-video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(14px, 4vw, 24px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--tp-speed) var(--tp-ease), visibility var(--tp-speed) var(--tp-ease);
}

.tp2026-video-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

/* FRD Video Widget Functionality: "The content underneath the video window
   must not be masked (darkened or hidden) by overlay." So the backdrop paints
   nothing at all — no tint, no blur. It exists only to swallow clicks aimed at
   the page behind the panel, which also keeps the "clicking anywhere else must
   not close the widget" rule from being defeated by an accidental link hit. */
.tp2026-video-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: transparent;
}

/* Figma 1795:15257 puts no white panel/padding around the player — the frame
   itself is the popup (bg-white, rounded-16, overflow-clip), with the close
   button sitting inside its own top-right corner. So the panel here is just
   the positioning/rise-transform wrapper; all the visible chrome (radius,
   shadow, overflow) lives on __frame below. */
.tp2026-video-lightbox__panel {
	position: relative;
	z-index: 1;
	/* 1137px is the Figma frame's own width — at that width or above, the
	   player renders pixel-exact. Third term keeps 16/9 inside a short
	   viewport (landscape phones, split-screen): 48px covers the outer gutter
	   only now that the panel carries no padding of its own. */
	width: min(1137px, 100%, calc((100dvh - 48px) * 16 / 9));
	transform: translateY(64px);
	transition: transform var(--tp-speed-slow) var(--tp-ease-gentle);
}

.tp2026-video-lightbox.is-open .tp2026-video-lightbox__panel {
	transform: translateY(0);
}

/* container-type turns the frame's own rendered width into `cqw` units for
   every child below, so the whole chrome — padding, buttons, icons, type —
   scales in the exact proportions Figma specified at 1137px, at any width,
   instead of jumping between hand-tuned breakpoints. Radius stays a fixed
   token (corner radii don't scale with component size anywhere else on this
   site) and so does the 58px play disc (shared with the video card). */
.tp2026-video-lightbox__frame {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 16 / 9;
	border-radius: var(--tp-radius-md);
	overflow: hidden;
	background: var(--tp-navy-900);
	box-shadow: 0 30px 90px rgba(10, 20, 50, 0.3);
}

.tp2026-video-lightbox__video {
	display: block;
	width: 100%;
	height: 100%;
	/* The stand-in clip and the poster are both wider than 16/9; cover keeps
	   the frame filled rather than letterboxing the placeholder. Swap to
	   `contain` if the delivered corporate video is not 16/9. */
	object-fit: cover;
	background: var(--tp-navy-900);
}

/* Thumbnail over the video until real frames play (page-wifi-testing.js);
   painted under the play disc, close button and chrome that follow it. */
.tp2026-video-lightbox__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.tp2026-video-lightbox__thumb.is-hidden {
	opacity: 0;
}

/* z-index 2 puts the disc above the chrome — before the first play, it is the
   one clickable thing in the frame. Hidden after that via .has-started rather
   than .is-playing, so pausing later doesn't bring the big disc back over the
   small transport play icon. */
.tp2026-video-lightbox__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
	transition: transform var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-video-lightbox__play svg {
	width: 100%;
	height: 100%;
}

.tp2026-video-lightbox__play:hover,
.tp2026-video-lightbox__play:focus-visible {
	transform: translate(-50%, -50%) scale(1.08);
}

.tp2026-video-lightbox__frame.has-started .tp2026-video-lightbox__play {
	display: none;
}

/* Figma 1795:19895 — a single self-contained SVG (circle + X baked in), inset
   inside the frame's own corner. clamp() floors it well above the 24px WCAG
   2.5.8 minimum before cqw would otherwise shrink it past readable. */
.tp2026-video-lightbox__close {
	position: absolute;
	top: clamp(10px, 2.1795cqw, 24.78px);
	right: clamp(10px, 2.1108cqw, 24px);
	z-index: 3;
	width: clamp(32px, 3.6939cqw, 42px);
	height: clamp(32px, 3.6939cqw, 42px);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-video-lightbox__close svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tp2026-video-lightbox__close:hover,
.tp2026-video-lightbox__close:focus-visible {
	transform: scale(1.06);
}

/* Figma splits "Info" and "Web / Player Controllers" into two frames with the
   gradient only on the shorter one; visually they only ever appear together,
   so one wrapper reproduces the same band with one fewer layer. 80.37% is
   Figma's own gradient stop. */
.tp2026-video-lightbox__chrome {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1.505cqw, 17.11px);
	padding: clamp(8px, 1cqw, 11.37px) clamp(12px, 2.5cqw, 28.425px);
	background: linear-gradient(180deg, rgba(8, 9, 13, 0) 0%, rgba(8, 9, 13, 0.9) 80.37%, rgba(8, 9, 13, 0.9) 100%);
	backdrop-filter: blur(0.711px);
	-webkit-backdrop-filter: blur(0.711px);
}

.tp2026-video-lightbox__info {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.tp2026-video-lightbox__title {
	margin: 0;
	font-family: var(--tp-font-body);
	font-weight: 400;
	font-size: clamp(12px, 1.5cqw, 17.055px);
	line-height: 1;
	color: var(--tp-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	/* Client QA (13-08-2026): descenders were being sliced off. `overflow:
	   hidden` (there for the ellipsis) clips to the padding box, and Figma's
	   line-height of exactly 1 makes that box 17px while Plus Jakarta Sans
	   needs 19 — so "g/y/p" and the cap tops were cut. The padding enlarges
	   the clip box only; the equal negative margin cancels its effect on
	   layout, so the caption row keeps Figma's height and the ellipsis still
	   works horizontally. */
	padding: 0.25em 0;
	margin: -0.25em 0;
}

/* Figma specifies Helvetica Neue Light for the time readout; the site only
   ships Plus Jakarta Sans, so this falls back to the platform's own
   Helvetica/Arial rather than loading a second family for one line of text. */
.tp2026-video-lightbox__time {
	flex: 0 0 auto;
	margin: 0;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: clamp(9px, 1cqw, 11.37px);
	line-height: 1;
	color: var(--tp-white);
	white-space: nowrap;
}

.tp2026-video-lightbox__transport {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1cqw, 11.37px);
	/* Client QA (13-08-2026): "check the space between the text and the seek
	   bar". Merging Figma's two frames into one `__chrome` wrapper (see above)
	   dropped the inner "Web / Player Controllers" frame's own 11.37 padding-top
	   — 1795:15314. The caption-to-bar gap is Figma's 17.11 *plus* that 11.37,
	   and only the 17.11 was being drawn. Restored here rather than by widening
	   the chrome gap, so each number still traces to one Figma property. */
	padding-top: clamp(8px, 1cqw, 11.37px);
}

.tp2026-video-lightbox__progress {
	position: relative;
	/* Figma's "Progress bar" frame 1795:15320 is 1.42 tall and nothing more, so
	   the box has to be the bar — the 4px it used to carry was phantom height
	   that pushed the visible line 1.29px above where the design puts it. The
	   tappable area is now an overflowing pseudo-element instead, which gives
	   the same generous target with no layout cost. Figma doesn't specify
	   seek-by-click, but a 1.4px-tall click target would be unusable. */
	height: 1.4212px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.tp2026-video-lightbox__progress::before {
	content: '';
	position: absolute;
	inset: -8px 0;
}

.tp2026-video-lightbox__progress-track,
.tp2026-video-lightbox__progress-fill {
	position: absolute;
	left: 0;
	height: 1.4212px;
	border-radius: 14.2125px;
}

.tp2026-video-lightbox__progress-track {
	right: 2.84px;
	width: auto;
	background: #d9d9d9;
	opacity: 0.4;
}

.tp2026-video-lightbox__progress-fill {
	width: 0%;
	background: var(--tp-white);
}

.tp2026-video-lightbox__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tp2026-video-lightbox__controls-left,
.tp2026-video-lightbox__controls-right {
	display: flex;
	align-items: center;
	gap: clamp(4px, 0.5cqw, 5.685px);
}

.tp2026-video-lightbox__ctrl {
	width: clamp(26px, 3cqw, 34.11px);
	height: clamp(26px, 3cqw, 34.11px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tp-white);
	cursor: pointer;
	transition: background var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-video-lightbox__ctrl:hover,
.tp2026-video-lightbox__ctrl:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

.tp2026-video-lightbox__ctrl svg {
	width: clamp(13px, 1.5cqw, 17.055px);
	height: clamp(13px, 1.5cqw, 17.055px);
	display: block;
}

/* Play/pause and mute each carry both icon states in the markup; the frame's
   state classes pick which one shows, so no JS ever touches an SVG. */
.tp2026-video-lightbox__ctrl--playpause .tp2026-video-lightbox__icon-pause,
.tp2026-video-lightbox__ctrl--mute .tp2026-video-lightbox__icon-muted {
	display: none;
}

.tp2026-video-lightbox__frame.is-playing .tp2026-video-lightbox__icon-play {
	display: none;
}

.tp2026-video-lightbox__frame.is-playing .tp2026-video-lightbox__icon-pause {
	display: block;
}

.tp2026-video-lightbox__frame.is-muted .tp2026-video-lightbox__icon-unmuted {
	display: none;
}

.tp2026-video-lightbox__frame.is-muted .tp2026-video-lightbox__icon-muted {
	display: block;
}

/* ---------------------------------------------------------------------
 * Responsive
 * --------------------------------------------------------------------- */


@media (max-width: 600px) {
	.tp2026-video-lightbox__play {
		width: 48px;
		height: 48px;
	}
}

/* Motion pass: the lightbox rules live further down the file than the badge's
   reduced-motion block, so their resets have to come last to win on source
   order. Everything becomes instant; the panel loses its rise entirely. */
@media (prefers-reduced-motion: reduce) {
	.tp2026-video-lightbox,
	.tp2026-video-card__play,
	.tp2026-video-lightbox__thumb {
		transition: none;
	}

	.tp2026-video-lightbox__panel {
		transform: none;
		transition: none;
	}

	/* Keep the centring translate — only the hover scale is motion. */
	.tp2026-video-lightbox__play,
	.tp2026-video-lightbox__play:hover,
	.tp2026-video-lightbox__play:focus-visible {
		transform: translate(-50%, -50%);
		transition: none;
	}
}