/* Artmark Video Spotlight widget — "How We Bring Components to Life": light
   section, heading left / paragraph right, a wide video poster with a round
   play button, and a decorative graphic behind it at low opacity that fades
   out toward the bottom.

   Namespaced .am-vsp. Colours, sizes, spacing, the backdrop position/fade and
   the play button are all widget controls; values here are design defaults.
   Lightbox styling is driven by --am-vsp-lb-* custom properties that the
   script copies from the widget root onto the body-level lightbox. */

.am-vsp {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: #d3edfe;
	padding: 120px 32px;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- */
/* Backdrop graphic                                                  */
/* ---------------------------------------------------------------- */

/* Anchored to the video card (.am-vsp__frame), not the section: width is a
   percent of the card width and top a percent of the card height, so the
   graphic scales with the screen exactly as the Figma frame does instead of
   drifting whenever the viewport is not 1440px. Centred on the card and
   allowed to be wider than the section (.am-vsp clips). The fade is a mask
   so it works over any background colour without a matching overlay. */
.am-vsp__bg {
	--am-vsp-bg-x: 0px;
	--am-vsp-fade-s: 60%;
	--am-vsp-fade-e: 100%;
	position: absolute;
	top: -16.3%;
	left: 50%;
	z-index: 0;
	width: 142.6%;
	max-width: none;
	transform: translateX(calc(-50% + var(--am-vsp-bg-x)));
	pointer-events: none;
}

.am-vsp__bg img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	opacity: 1;
}

.am-vsp__bg--fade {
	-webkit-mask-image: linear-gradient(180deg, #000 var(--am-vsp-fade-s), transparent var(--am-vsp-fade-e));
	mask-image: linear-gradient(180deg, #000 var(--am-vsp-fade-s), transparent var(--am-vsp-fade-e));
}

.am-vsp__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

/* ---------------------------------------------------------------- */
/* Header                                                            */
/* ---------------------------------------------------------------- */

.am-vsp__head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	margin-bottom: 100px;
}

.am-vsp__title {
	margin: 0;
	max-width: 640px;
	font-size: 52px;
	line-height: 58px;
	font-weight: 400;
	letter-spacing: -0.52px;
	color: #020713;
}

.am-vsp__para {
	margin: 20px 0 0;
	max-width: 460px;
	font-size: 16px;
	line-height: 24px;
	color: #020713;
}

/* ---------------------------------------------------------------- */
/* Video card                                                        */
/* ---------------------------------------------------------------- */

.am-vsp__stage {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Card + backdrop share this box so the backdrop's percentages track the card. */
.am-vsp__frame {
	position: relative;
	flex: 0 1 100%;
	width: 100%;
	max-width: 1200px;
	min-width: 0;
}

.am-vsp__card {
	--am-vsp-overlay: rgba(255, 255, 255, 0);
	--am-vsp-overlay-hover: rgba(2, 7, 19, 0.12);
	--am-vsp-hover-scale: 1.04;
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 0;
	box-shadow: 0 29px 59px -14px rgba(0, 0, 0, 0.25);
	background-color: #0e1a21;
	box-sizing: border-box;
}

.am-vsp__poster {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.am-vsp__poster--empty {
	background: linear-gradient(135deg, #16262f, #0e1a21);
}

.am-vsp__card:hover .am-vsp__poster {
	transform: scale(var(--am-vsp-hover-scale));
}

.am-vsp__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--am-vsp-overlay);
	transition: background-color 0.2s ease;
	pointer-events: none;
}

.am-vsp__card:hover .am-vsp__overlay {
	background-color: var(--am-vsp-overlay-hover);
}

/* ---------------------------------------------------------------- */
/* Play button                                                       */
/* ---------------------------------------------------------------- */

/* Grouped state reset: themes repaint bare <button> on hover/focus/active
   with selectors that beat a class, so every state is pinned here and the
   colours come through custom properties the controls set. */
.am-vsp__play,
.am-vsp__play:hover,
.am-vsp__play:focus,
.am-vsp__play:focus-visible,
.am-vsp__play:active {
	--am-vsp-play-bg: #d3edfe;
	--am-vsp-play-bg-h: #ffffff;
	--am-vsp-play-color: #0080b8;
	--am-vsp-play-color-h: #0080b8;
	--am-vsp-play-bc: rgba(255, 255, 255, 0.6);
	--am-vsp-play-bw: 0px;
	--am-vsp-play-scale: 1.06;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 88px;
	height: 88px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--am-vsp-play-bw) solid var(--am-vsp-play-bc);
	border-radius: 50%;
	background: none;
	background-color: var(--am-vsp-play-bg);
	color: var(--am-vsp-play-color);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	outline: 0;
	text-decoration: none;
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.am-vsp__play:hover,
.am-vsp__play:focus-visible {
	background-color: var(--am-vsp-play-bg-h);
	color: var(--am-vsp-play-color-h);
	transform: translate(-50%, -50%) scale(var(--am-vsp-play-scale));
}

/* Keyboard focus must stay visible. */
.am-vsp__play:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.am-vsp__play svg,
.am-vsp__play img {
	display: block;
	width: 28px;
	height: 28px;
	margin-left: 4px;
	object-fit: contain;
	fill: currentColor;
}

/* ---------------------------------------------------------------- */
/* Inline player                                                     */
/* ---------------------------------------------------------------- */

.am-vsp__player {
	position: absolute;
	inset: 0;
	z-index: 3;
	background-color: #000;
}

.am-vsp__player[hidden] {
	display: none;
}

.am-vsp__player video,
.am-vsp__player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background-color: #000;
}

.am-vsp__card.is-playing .am-vsp__play,
.am-vsp__card.is-playing .am-vsp__overlay {
	display: none;
}

.am-vsp__card.is-playing .am-vsp__poster {
	transform: none;
}

/* ---------------------------------------------------------------- */
/* Lightbox (moved to <body> by the script)                          */
/* ---------------------------------------------------------------- */

.am-vsp-lightbox {
	--am-vsp-lb-bg: rgba(2, 7, 19, 0.92);
	--am-vsp-lb-w: 1200px;
	--am-vsp-lb-radius: 0px;
	--am-vsp-lb-close: #ffffff;
	--am-vsp-lb-blur: 0px;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 72px 32px 32px;
	box-sizing: border-box;
	background-color: var(--am-vsp-lb-bg);
	/* The page behind the popup, blurred by the control (phones: 14px). */
	-webkit-backdrop-filter: blur(var(--am-vsp-lb-blur));
	backdrop-filter: blur(var(--am-vsp-lb-blur));
	opacity: 0;
	transition: opacity 0.2s ease;
}

.am-vsp-lightbox.is-open {
	opacity: 1;
}

.am-vsp-lightbox__box {
	position: relative;
	width: 100%;
	max-width: var(--am-vsp-lb-w);
}

.am-vsp-lightbox__dialog {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--am-vsp-lb-radius);
	background-color: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	transform: scale(0.96);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.am-vsp-lightbox.is-open .am-vsp-lightbox__dialog {
	transform: scale(1);
}

.am-vsp-lightbox__dialog video,
.am-vsp-lightbox__dialog iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.am-vsp-lightbox__close,
.am-vsp-lightbox__close:hover,
.am-vsp-lightbox__close:focus,
.am-vsp-lightbox__close:focus-visible,
.am-vsp-lightbox__close:active {
	position: absolute;
	right: 0;
	top: -48px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: none;
	background-color: transparent;
	color: var(--am-vsp-lb-close);
	box-shadow: none;
	outline: 0;
	text-decoration: none;
	cursor: pointer;
	transform: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.am-vsp-lightbox__close:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.am-vsp-lightbox__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.am-vsp-lightbox__close svg {
	display: block;
	width: 22px;
	height: 22px;
}

body.am-vsp-lock {
	overflow: hidden;
}

/* ---------------------------------------------------------------- */
/* Responsive fallbacks (the controls' tablet/mobile defaults win)   */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.am-vsp {
		padding: 80px 32px;
	}

	.am-vsp__head {
		flex-direction: column;
		gap: 24px;
		margin-bottom: 56px;
	}

	.am-vsp__title {
		max-width: 100%;
		font-size: 40px;
		line-height: 46px;
	}

	.am-vsp__para {
		margin-top: 0;
		max-width: 640px;
	}

	.am-vsp__frame {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.am-vsp {
		padding: 56px 20px;
	}

	.am-vsp__head {
		gap: 16px;
		margin-bottom: 40px;
	}

	.am-vsp__title {
		font-size: 32px;
		line-height: 38px;
		letter-spacing: -0.32px;
	}

	.am-vsp__para {
		max-width: 100%;
	}

	.am-vsp__bg {
		width: 160%;
	}

	.am-vsp-lightbox {
		padding: 64px 16px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-vsp__poster,
	.am-vsp__play,
	.am-vsp-lightbox,
	.am-vsp-lightbox__dialog {
		transition: none;
	}

	.am-vsp__card:hover .am-vsp__poster {
		transform: none;
	}
}