﻿.case-study-left:has(.vimeo-embed) {
	background: #fafafa;
}

.video-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	min-width: 0;
}

.vimeo-embed {
	/*min-width: 100%;*/
	width: 100%;
	flex: 1 1 auto;
	min-width: 0;
}

.vimeo-embed__frame {
	/* position: relative; */
	/* height: 50vh; */ /* your current height */
	/* background: #000; */
	/* padding: 12px; */
}

.vimeo-embed__box {
	position: relative;
	height: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	/* border: 1px solid green; */
}




.vimeo-embed__iframe {
	/* position: absolute; */
	inset: 0;
	width: 100%;
	height: 100%;
}

.vimeo-clickLayer {
	position: absolute;
	inset: 0;
	z-index: 1; /* above iframe */
	background: transparent;
}

.vimeo-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 12px;
	padding: 3px 12px;
	filter: none;
	background: var(--cream);
	backdrop-filter: blur(12px);
	border-radius: 9999px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	box-shadow: 0px 3px 12px -6px #000;
	transition: opacity 180ms ease, transform 180ms ease;
}

	.vimeo-controls.is-hidden {
		opacity: 0;
		pointer-events: none;
		transform: translateY(6px);
	}



.vimeo-controls__icon--pause,
.vimeo-controls__icon--muted {
	display: none;
}

.vimeo-controls__playToggle[data-state="playing"] .vimeo-controls__icon--play {
	display: none;
}

.vimeo-controls__playToggle[data-state="playing"] .vimeo-controls__icon--pause {
	display: inline-block;
}


.vimeo-controls__muteToggle[data-state="muted"] .vimeo-controls__icon--unmuted {
	display: none;
}

.vimeo-controls__muteToggle[data-state="muted"] .vimeo-controls__icon--muted {
	display: inline;
}



/* --- Slider that looks like a thin scrollbar --- */
.vimeo-controls input[type="range"] {
	--track-h: 6px;
	--thumb: 18px;
	--thumb-width: 25%;
	--thumb-height: 4px;
	--track-bg: silver;
	--thumb-bg: var(--agency-purple);
	--thumb-border: rgba(255,255,255,.18);
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: var(--track-h);
	background: transparent;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: var(--track-bg);
	margin-right: 12px;
	border-radius: 10px;
}



.vimeo-controls__playToggle,
.vimeo-controls__muteToggle,
.vimeo-controls__fs {
	width: 16px;
	max-width: 16px;
	cursor: pointer;
	padding-right: 32px;
}

.vimeo-controls__fs {
	padding-right: 0;
}

.vimeo-controls i {
	font-size: 12px;
	color: var(--agency-purple);
	font-weight: 400;
}

.vimeo-controls__time {
	font-size: 12px;
	white-space: nowrap;
	color: var(--darK-grey);
	padding-right: 32px;
	font-weight: 400;
}

.vimeo-controls input[type="range"].vimeo-controls__volume {
	width: 10%;
}

/* WebKit track */
.vimeo-controls input[type="range"]::-webkit-slider-runnable-track {
	height: var(--track-h);
	background: var(--track-bg);
	border-radius: 999px;
}

/* WebKit thumb */
.vimeo-controls input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--thumb-width);
	height: var(--thumb-height);
	border-radius: 999px;
	background: var(--thumb-bg);
	border: 1px solid var(--thumb-border);
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
	margin-top: calc((var(--track-h) - var(--thumb-height)) / 2);
}

/* Firefox track */
.vimeo-controls input[type="range"]::-moz-range-track {
	height: var(--track-h);
	background: var(--track-bg);
	border-radius: 999px;
}

/* Firefox thumb */
.vimeo-controls input[type="range"]::-moz-range-thumb {
	width: var(--thumb-width);
	height: var(--thumb-height);
	border-radius: 999px;
	background: var(--thumb-bg);
	border: 1px solid var(--thumb-border);
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Remove extra Firefox focus outline padding */
.vimeo-controls input[type="range"]::-moz-focus-outer {
	border: 0;
}

/* Optional: focus treatment */
.vimeo-controls input[type="range"]:focus-visible::-webkit-slider-thumb {
	outline: 2px solid rgba(255,255,255,.35);
	outline-offset: 2px;
}

.vimeo-controls input[type="range"]:focus-visible::-moz-range-thumb {
	outline: 2px solid rgba(255,255,255,.35);
	outline-offset: 2px;
}
