/*
 * Spartan AI redesign: play affordance on /spartan-private-ai-networks/ (page 1438).
 *
 * The platform diagram in the Overview row is a WPBakery "Single image" that links to
 * the promo video (uploads/2025/Spartan-promo.mp4). Like the video still on the home
 * page (css/sprt-20-home.css, "Play affordance"), it gets a round play button drawn
 * with ::before (disc) and ::after (triangle). Differences from the home page, on
 * purpose: the diagram is light, so the colours are inverted (ink disc, paper
 * triangle); and the button sits centred on the image's bottom edge, half over the
 * frame, because the bottom corners of the diagram hold the "1" and "2" cards.
 */

body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"] {
	--sprt-play-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem);
	position: relative;
	z-index: 0;
	margin-bottom: calc(var(--sprt-play-size) / 2);
	border-radius: 20px;
}

body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]::before,
body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	pointer-events: none;
}

/* Disc: centred on the bottom edge */
body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]::before {
	bottom: calc(var(--sprt-play-size) / -2);
	width: var(--sprt-play-size);
	height: var(--sprt-play-size);
	box-sizing: border-box;
	border: 3px solid var(--sprt-paper);
	border-radius: var(--sprt-radius-pill);
	background: var(--sprt-ink);
	box-shadow: 0 6px 18px rgba(22, 10, 51, 0.28);
	transform: translateX(-50%);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Triangle: optical centre sits slightly right of the disc centre */
body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]::after {
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: calc(var(--sprt-play-size) * 0.16) 0 calc(var(--sprt-play-size) * 0.16) calc(var(--sprt-play-size) * 0.26);
	border-color: transparent transparent transparent var(--sprt-paper);
	transform: translate(-38%, 50%);
	transition: transform 0.2s ease;
}

body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]:hover::before,
body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]:focus-visible::before {
	background: var(--sprt-violet);
	transform: translateX(-50%) scale(1.08);
}

body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]:hover::after,
body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]:focus-visible::after {
	transform: translate(-38%, 50%) scale(1.08);
}

body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]:focus-visible {
	outline: 2px solid var(--sprt-violet);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]::before,
	body.sprt.page-id-1438 .wpb_single_image a.vc_single_image-wrapper[href$=".mp4"]::after {
		transition: none;
	}
}