/**
 * [customer_story_video] — framed, click-to-play customer story video.
 *
 * Markup: includes/customer-story-video.php. Behaviour: assets/js/customer-story-video.js.
 *
 * Sizing: the design is drawn at 710px wide. Inside the screen, every size is
 * written as  calc(N * var(--u))  where N is the pixel value at 710px and --u
 * is one design pixel. Where container query units exist, --u = screen width
 * / 710, so the whole thing scales exactly with its box; otherwise it falls
 * back to plain pixels. max() keeps text and controls from getting too small.
 */

.av-csv {
	--av-csv-pad: clamp(6px, 1.4vw, 10px);   /* gap between the frame and the screen */
	--av-csv-r: clamp(16px, 3.9vw, 28px);    /* screen corner radius */
	--av-csv-red: #f5193c;
	--av-csv-red-hover: #ff2147;

	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.av-csv,
.av-csv *,
.av-csv *::before,
.av-csv *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------- inside Elementor
 * An Elementor widget in a flex container is only as wide as its content, and
 * everything in this player is positioned over the thumbnail, so the content
 * has no width: the widget collapsed to about 22px and the player vanished
 * (only the play button was left). Make the widget and its wrapper fill the
 * column. Two separate rules on purpose: a browser without :has() drops the
 * rule that uses it, and the script's .av-csv-host class covers that one.
 */
.elementor-widget:has(.av-csv) {
	width: 100%;
	max-width: 100%;
}

.av-csv-host {
	width: 100%;
	max-width: 100%;
}

.av-csv-host > .elementor-shortcode,
.av-csv-host > .elementor-widget-container,
.av-csv-host > .elementor-widget-container > .elementor-shortcode {
	width: 100%;
}

/* ---------------------------------------------------------------- frame */

.av-csv .av-csv__frame {
	padding: var(--av-csv-pad);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: calc(var(--av-csv-r) + var(--av-csv-pad));
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow:
		0 36px 80px -34px rgba(8, 36, 120, 0.6),
		inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ---------------------------------------------------------------- screen */

.av-csv .av-csv__screen {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--av-csv-r);
	background: #05070d;
	isolation: isolate;
	cursor: pointer;
	container-type: inline-size;
}

.av-csv .av-csv__screen.is-playing {
	cursor: default;
}

/* One design pixel, for every direct child of the screen. */
.av-csv .av-csv__screen > * {
	--u: 1px;
}

@supports (width: 1cqw) {
	.av-csv .av-csv__screen > * {
		--u: calc(100cqw / 710);
	}
}

.av-csv .av-csv__poster {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Darkening: a strong top (for the title) and a soft bottom (for the pills). */
.av-csv .av-csv__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0.3) calc(85 * var(--u)), rgba(0, 0, 0, 0) calc(160 * var(--u))),
		linear-gradient(0deg, rgba(0, 0, 0, 0.42) 0, rgba(0, 0, 0, 0) calc(130 * var(--u)));
}

/* ------------------------------------------------------------ title bar */

.av-csv .av-csv__top {
	position: absolute;
	z-index: 2;
	top: calc(21 * var(--u));
	left: calc(38 * var(--u));
	right: calc(38 * var(--u));
	display: flex;
	align-items: center;
	gap: calc(14 * var(--u));
	pointer-events: none;
}

.av-csv .av-csv__avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: max(28px, calc(46 * var(--u)));
	height: max(28px, calc(46 * var(--u)));
	overflow: hidden;
	border-radius: 50%;
	background: #0b0f19;
}

.av-csv .av-csv__avatar svg,
.av-csv .av-csv__avatar img {
	display: block;
	width: 64%;
	height: 64%;
	max-width: none;
	object-fit: contain;
}

/* A supplied image fills the circle instead of sitting inside it. */
.av-csv .av-csv__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.av-csv .av-csv__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	gap: calc(3 * var(--u));
	color: #fff;
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.av-csv .av-csv__title {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	font-size: max(12px, calc(20.5 * var(--u)));
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	/* The long title fades out at the edge instead of being cut with dots. */
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3em), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 3em), transparent);
}

.av-csv .av-csv__channel {
	display: block;
	font-size: max(10px, calc(14.5 * var(--u)));
	font-weight: 700;
	line-height: 1.2;
	opacity: 0.95;
}

/* ------------------------------------------------------------ play button */

.av-csv .av-csv__play,
.av-csv .av-csv__play:hover,
.av-csv .av-csv__play:focus,
.av-csv .av-csv__play:active {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	width: max(54px, calc(83 * var(--u)));
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	line-height: 0;
	text-transform: none;
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.av-csv .av-csv__play svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.av-csv .av-csv__play-bg {
	fill: var(--av-csv-red);
	transition: fill 0.2s ease;
}

.av-csv .av-csv__play-icon {
	fill: #fff;
}

.av-csv .av-csv__play:hover {
	transform: translate(-50%, -50%) scale(1.06);
}

.av-csv .av-csv__play:hover .av-csv__play-bg {
	fill: var(--av-csv-red-hover);
}

/* Any non-YouTube video: a plain round blue play button. */
.av-csv .av-csv__play--brand,
.av-csv .av-csv__play--brand:hover,
.av-csv .av-csv__play--brand:focus,
.av-csv .av-csv__play--brand:active {
	width: max(54px, calc(80 * var(--u)));
}

.av-csv .av-csv__play-disc {
	fill: #3086e3;
	transition: fill 0.2s ease;
}

.av-csv .av-csv__play--brand:hover .av-csv__play-disc {
	fill: #3d93f0;
}

.av-csv .av-csv__play:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 6px;
	border-radius: 14px;
}

/* -------------------------------------------------- bottom pills */

.av-csv .av-csv__bar {
	position: absolute;
	z-index: 4;
	left: calc(38 * var(--u));
	right: calc(38 * var(--u));
	bottom: calc(17 * var(--u));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(16 * var(--u));
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.av-csv .av-csv__tools,
.av-csv .av-csv__watch {
	display: inline-flex;
	align-items: center;
	height: max(30px, calc(56 * var(--u)));
	border-radius: 999px;
	background: rgba(14, 17, 28, 0.74);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
}

.av-csv .av-csv__tools {
	gap: calc(32 * var(--u));
	padding: 0 calc(21 * var(--u)) 0 calc(20 * var(--u));
}

.av-csv .av-csv__tool,
.av-csv .av-csv__tool:hover,
.av-csv .av-csv__tool:focus {
	position: relative;
	display: grid;
	place-items: center;
	width: max(16px, calc(28 * var(--u)));
	height: max(16px, calc(28 * var(--u)));
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #fff;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.av-csv .av-csv__tool svg {
	display: block;
	width: 100%;
	height: 100%;
}

.av-csv .av-csv__tool:hover {
	opacity: 0.8;
}

/* "Link copied" note shown by the script after Share copies the address. */
.av-csv .av-csv__tool[data-copied]::after {
	content: attr(data-copied);
	position: absolute;
	left: 0;
	bottom: calc(100% + 10px);
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(14, 17, 28, 0.92);
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
}

.av-csv .av-csv__watch,
.av-csv .av-csv__watch:hover,
.av-csv .av-csv__watch:focus {
	gap: calc(6 * var(--u));
	margin-left: auto;
	padding: 0 calc(34 * var(--u)) 0 calc(30 * var(--u));
	color: #fff;
	text-decoration: none;
}

.av-csv .av-csv__watch-label {
	font-size: max(11px, calc(22 * var(--u)));
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

.av-csv .av-csv__brand {
	display: inline-flex;
	align-items: center;
	gap: calc(5 * var(--u));
}

.av-csv .av-csv__brand .av-csv__mark {
	display: block;
	width: max(14px, calc(28 * var(--u)));
	height: auto;
}

.av-csv .av-csv__brand .av-csv__wordmark {
	display: block;
	width: max(36px, calc(74 * var(--u)));
	height: auto;
	overflow: visible;
}

/* Other providers (Vimeo...): the name as plain text. */
.av-csv .av-csv__brand-name {
	font-size: max(12px, calc(24 * var(--u)));
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.av-csv .av-csv__watch:hover {
	background: rgba(14, 17, 28, 0.9);
}

.av-csv .av-csv__watch:focus-visible,
.av-csv .av-csv__tool:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* On a narrow screen the pills keep only what fits. */
@container (max-width: 430px) {
	.av-csv .av-csv__watch-label {
		display: none;
	}
}

/* ------------------------------------------------------------ playing */

.av-csv .av-csv__live {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

@media (prefers-reduced-motion: reduce) {
	.av-csv .av-csv__play,
	.av-csv .av-csv__play-bg {
		transition: none;
	}

	.av-csv .av-csv__play:hover {
		transform: translate(-50%, -50%);
	}
}