/* Expereo Video Carousel — a stage with a segmented progress bar beneath it, one
   segment per clip, a pause button, a sound button, and a caption for the clip
   that is playing. */

.evc {
	--evc-ratio: 16 / 9;
	--evc-radius: 16px;
	--evc-stage-bg: #0b1b34;
	--evc-track: rgba(11, 27, 52, 0.15);
	--evc-fill: #0b1b34;
	--evc-bar-h: 3px;
	--evc-panel-bg: #f2f2f3;
	--evc-panel-radius: 20px;
	--evc-panel-pad-y: 14px;
	--evc-panel-pad-x: 22px;
	--evc-label: #0b1b34;
	--evc-label-bg: #ffffff;
	--evc-label-radius: 6px;
	--evc-label-pad-y: 4px;
	--evc-label-pad-x: 10px;
	--evc-toggle: var(--evc-fill);
	--evc-toggle-hover: var(--evc-toggle);
	--evc-toggle-size: 28px;
	--evc-label-offset: 0px;
	--evc-label-notch: 12px;
	--evc-label-space: 44px;
	/* The frame the video sits in, and how far the controls ride up onto it. */
	--evc-frame-bg: #e8e9ee;
	--evc-frame-pad: 14px;
	--evc-frame-radius: 28px;
	--evc-overlap: 22px;
	--evc-controls-inset: 5%;
	/* Room held at the end of the timeline for the clip length. */
	--evc-time-w: 38px;
}

.evc__frame {
	padding: var(--evc-frame-pad);
	border-radius: var(--evc-frame-radius);
	background: var(--evc-frame-bg);
	/* Keeps a border inside the width set in Elementor rather than adding to it. */
	box-sizing: border-box;
}

.evc__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--evc-radius);
	/* The ratio holds the height while a clip loads. Without it the page jumps
	   every time the source changes, and the controls move under the pointer. */
	aspect-ratio: var(--evc-ratio);
	background: var(--evc-stage-bg);
}

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

.evc__controls {
	display: flex;
	/* Stretch, not flex-start: the segments then reach the full height of the
	   row, so "below the segment" and "below the panel" are the same place. The
	   panel is as tall as the button, and measuring from the 3px track instead
	   left the label sitting inside it. */
	align-items: stretch;
	gap: 16px;
	margin-top: 18px;
	padding: var(--evc-panel-pad-y) var(--evc-panel-pad-x);
	/* Square along the top so the panel butts cleanly against the frame it rides
	   on; rounded below, where it is a free edge. */
	border-radius: 0 0 var(--evc-panel-radius) var(--evc-panel-radius);
	background: var(--evc-panel-bg);
	/* The label hangs below, so the panel must not clip it, and the space it
	   occupies has to be reserved or it would sit over whatever follows. */
	overflow: visible;
	margin-bottom: var(--evc-label-space);
	/* Pulled up onto the frame's bottom edge rather than sitting under it, and
	   inset from the sides so the frame still shows either side. */
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--evc-overlap));
	margin-left: var(--evc-controls-inset);
	margin-right: var(--evc-controls-inset);
}

/* ---------------------------------------------------------------- Play / pause */
.evc__toggle {
	flex: 0 0 auto;
	align-self: center;
	width: var(--evc-toggle-size);
	height: var(--evc-toggle-size);
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--evc-toggle);
	cursor: pointer;
	transition: color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Pinned for every state: a bare button picks up the theme's own button colours
   otherwise, and this one is drawn entirely in currentColor. */
.evc__toggle:hover,
.evc__toggle:focus,
.evc__toggle:focus-visible,
.evc__toggle:active {
	background: transparent;
	color: var(--evc-toggle-hover);
	box-shadow: none;
}

.evc__toggle:focus-visible {
	outline: 2px solid var(--evc-toggle);
	outline-offset: 3px;
}

/* Two bars for pause, a triangle for play, drawn rather than shipped as icons. */
.evc__icon {
	width: 12px;
	height: 14px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.evc--paused .evc__icon {
	width: 0;
	height: 0;
	border-left: 12px solid currentColor;
	border-right: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}

/* ---------------------------------------------------------------- Sound button
   Sits beside the play / pause button and shares its size and colours. */
.evc__sound {
	flex: 0 0 auto;
	align-self: center;
	width: var(--evc-toggle-size);
	height: var(--evc-toggle-size);
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--evc-toggle);
	cursor: pointer;
	transition: color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Pinned for every state, as for the pause button: a bare button takes the
   theme's own button colours otherwise. */
.evc__sound:hover,
.evc__sound:focus,
.evc__sound:focus-visible,
.evc__sound:active {
	background: transparent;
	color: var(--evc-toggle-hover);
	box-shadow: none;
}

.evc__sound:focus-visible {
	outline: 2px solid var(--evc-toggle);
	outline-offset: 3px;
}

.evc__speaker {
	display: block;
	width: 70%;
	height: 70%;
}

/* Muted shows the cross; sound on shows the waves. */
.evc__slash {
	display: none;
}

.evc--muted .evc__waves {
	display: none;
}

.evc--muted .evc__slash {
	display: inline;
}

/* ---------------------------------------------------------------- Timeline */
.evc__segments {
	display: flex;
	flex: 1 1 auto;
	gap: 14px;
}

.evc__segment {
	position: relative;
	flex: 1 1 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.evc__track {
	display: block;
	height: var(--evc-bar-h);
	border-radius: var(--evc-bar-h);
	background: var(--evc-track);
	overflow: hidden;
}

.evc__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--evc-fill);
	transform-origin: left center;
}

/* Only the playing segment animates. A completed one is set to full width with
   no transition, so jumping back does not animate it emptying. */
.evc__segment.is-active .evc__fill {
	transition: width 0.12s linear;
}

.evc__segment.is-done .evc__fill {
	width: 100%;
}

/* Progress bar off: remove the whole bottom toolbar, controls and the phone
   caption list alike, whatever the clip count. */
.evc--no-progress .evc__controls,
.evc--no-progress .evc__captions {
	display: none;
}

.evc__label {
	position: absolute;
	/* Clear the track, then the panel's own bottom padding, then the gap: this
	   is what puts the label outside the panel rather than on it. */
	top: calc(100% + var(--evc-panel-pad-y) + var(--evc-label-offset));
	left: 0;
	display: none;
	padding: var(--evc-label-pad-y) var(--evc-label-pad-x);
	/* Bottom corners only. The top edge meets the panel, so rounding it would
	   break the join the notches are there to make. */
	border-radius: 0 0 var(--evc-label-radius) var(--evc-label-radius);
	background: var(--evc-label-bg);
	color: var(--evc-label);
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
}

/* The concave corners. Each is a square of label colour sitting outside the
   label's top corner with a quarter disc masked out of it, so the fill curves
   away from the label and the panel appears to flow around it. A mask is used
   rather than a second background because the panel behind may be any colour,
   including a gradient or an image. */
.evc__label::before,
.evc__label::after {
	content: "";
	position: absolute;
	top: 0;
	width: var(--evc-label-notch);
	height: var(--evc-label-notch);
	background: var(--evc-label-bg);
	pointer-events: none;
}

.evc__label::before {
	left: calc(-1 * var(--evc-label-notch));
	-webkit-mask: radial-gradient( circle var(--evc-label-notch) at 0 100%, transparent 99%, #000 100% );
	mask: radial-gradient( circle var(--evc-label-notch) at 0 100%, transparent 99%, #000 100% );
}

.evc__label::after {
	right: calc(-1 * var(--evc-label-notch));
	-webkit-mask: radial-gradient( circle var(--evc-label-notch) at 100% 100%, transparent 99%, #000 100% );
	mask: radial-gradient( circle var(--evc-label-notch) at 100% 100%, transparent 99%, #000 100% );
}

/* The playing clip is always named. Hovering or tabbing to another names that
   one too, so the whole set is readable without waiting for it to come round —
   they sit under their own segments, so two can never collide. */
.evc__segment.is-active .evc__label,
.evc__segment:hover .evc__label,
.evc__segment:focus-visible .evc__label {
	display: block;
}

/* The segments are bare buttons, so a theme's button rules will otherwise
   recolour them on hover and focus. Every state is pinned to no change: the
   feedback that matters is the bar filling, not the control behind it. */
.evc__segment,
.evc__segment:hover,
.evc__segment:focus,
.evc__segment:active,
.evc__segment:focus-visible {
	background: none;
	border: 0;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
	transform: none;
	opacity: 1;
}

/* The ring goes on the track rather than the button, whose box is mostly the
   empty space the label hangs in. Keyboard focus only, never a mouse click. */
.evc__segment:focus-visible {
	outline: none;
}

.evc__segment:focus-visible .evc__track {
	outline: 2px solid var(--evc-fill);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- Clip length
   One label at the far end of the whole timeline, centred on the bars. It is
   its own item in the controls row, so the bars end before it and the two never
   overlap. Its width is held from the start, so the bars do not change size when
   the length arrives or changes between clips. */
.evc__time {
	flex: 0 0 var(--evc-time-w);
	/* Centred on the row. The segments are buttons, which centre their content,
	   so each bar sits in the middle of the row and this lines up with it. */
	align-self: center;
	width: var(--evc-time-w);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--evc-time, var(--evc-toggle));
	white-space: nowrap;
	pointer-events: none;
}

/* ---------------------------------------------------------------- Embedded clips
   A YouTube or Vimeo clip plays in an iframe laid over the stage in place of the
   <video>. The stage keeps its aspect ratio, so nothing jumps when the source
   changes, and its poster shows behind the player until the picture arrives. */
.evc__embed {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--evc-stage-bg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.evc__embed[hidden] {
	display: none;
}

.evc__embed iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* Kept invisible until the clip is actually playing. A player the browser has
	   refused to autoplay is an opaque black box; this lets the poster show in its
	   place instead. */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.evc__embed.is-live iframe {
	opacity: 1;
}

.evc--embed .evc__video {
	visibility: hidden;
}

/* ---------------------------------------------------------------- Phone captions
   The stacked-caption list is for phones only; the segments carry their own
   labels everywhere else. */
@media (min-width: 768px) {
	.evc__captions {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evc__segment.is-active .evc__fill,
	.evc__toggle,
	.evc__sound,
	.evc__embed iframe {
		transition: none;
	}
}

@media (max-width: 767px) {
	.evc__label {
		font-size: 12px;
	}

	/* Captions move out from under the segments, where they collide, into one
	   row centred under the panel. They sit side by side and wrap onto a new
	   line when they are too wide for it. */
	.evc__label {
		display: none !important;
	}

	.evc__controls {
		gap: 10px;
		margin-bottom: 0;
	}

	.evc__segments {
		gap: 8px;
	}

	.evc__captions {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 6px;
		/* The same side inset as the panel, so the list is centred on it. */
		margin: 12px var(--evc-controls-inset) 0;
		text-align: center;
	}

	.evc__caption {
		display: block;
		max-width: 100%;
		padding: var(--evc-label-pad-y) var(--evc-label-pad-x);
		border-radius: var(--evc-label-radius);
		background: var(--evc-label-bg);
		color: var(--evc-label);
		font-size: 13px;
		line-height: 1.3;
		opacity: 0.5;
		transition: opacity 0.2s ease;
	}

	/* The clip on screen reads at full strength. */
	.evc__caption.is-active {
		opacity: 1;
	}

	/* A little tighter on a phone. */
	.evc {
		--evc-time-w: 32px;
	}

	.evc__time {
		font-size: 11px;
	}
}