/* Layout: caption + player */
.medlab-offset-video-wrap {
	--mov-caption-basis: 34%;
	display: grid;
	width: 100%;
	gap: 20px;
	align-items: center;
}

.medlab-offset-video-wrap__player {
	min-width: 0;
	width: 100%;
}

.medlab-offset-video-wrap__caption {
	min-width: 0;
}

.medlab-offset-video-wrap__title {
	margin: 0 0 8px;
	font-weight: 700;
	line-height: 1.35;
	color: #0f172a;
}

.medlab-offset-video-wrap__desc {
	margin: 0;
	line-height: 1.7;
	color: #64748b;
}

/* Desktop positions (physical left/right via grid areas) */
.medlab-offset-video-wrap.mov-pos-top {
	grid-template-columns: 1fr;
	grid-template-areas:
		"caption"
		"player";
}

.medlab-offset-video-wrap.mov-pos-bottom {
	grid-template-columns: 1fr;
	grid-template-areas:
		"player"
		"caption";
}

.medlab-offset-video-wrap.mov-pos-left {
	grid-template-columns: var(--mov-caption-basis) minmax(0, 1fr);
	grid-template-areas: "caption player";
}

.medlab-offset-video-wrap.mov-pos-right {
	grid-template-columns: minmax(0, 1fr) var(--mov-caption-basis);
	grid-template-areas: "player caption";
}

.medlab-offset-video-wrap__caption {
	grid-area: caption;
}

.medlab-offset-video-wrap__player {
	grid-area: player;
}

/* Tablet overrides */
@media (max-width: 1024px) {
	.medlab-offset-video-wrap.mov-pos-tablet-top {
		grid-template-columns: 1fr;
		grid-template-areas:
			"caption"
			"player";
	}

	.medlab-offset-video-wrap.mov-pos-tablet-bottom {
		grid-template-columns: 1fr;
		grid-template-areas:
			"player"
			"caption";
	}

	.medlab-offset-video-wrap.mov-pos-tablet-left {
		grid-template-columns: var(--mov-caption-basis) minmax(0, 1fr);
		grid-template-areas: "caption player";
	}

	.medlab-offset-video-wrap.mov-pos-tablet-right {
		grid-template-columns: minmax(0, 1fr) var(--mov-caption-basis);
		grid-template-areas: "player caption";
	}
}

/* Mobile overrides */
@media (max-width: 767px) {
	.medlab-offset-video-wrap.mov-pos-mobile-top {
		grid-template-columns: 1fr;
		grid-template-areas:
			"caption"
			"player";
	}

	.medlab-offset-video-wrap.mov-pos-mobile-bottom {
		grid-template-columns: 1fr;
		grid-template-areas:
			"player"
			"caption";
	}

	.medlab-offset-video-wrap.mov-pos-mobile-left,
	.medlab-offset-video-wrap.mov-pos-mobile-right {
		grid-template-columns: 1fr;
	}

	.medlab-offset-video-wrap.mov-pos-mobile-left {
		grid-template-areas:
			"caption"
			"player";
	}

	.medlab-offset-video-wrap.mov-pos-mobile-right {
		grid-template-areas:
			"player"
			"caption";
	}
}

/* Video host / frame base */
.medlab-offset-video-host {
	width: 100%;
}

.medlab-offset-video {
	--mov-offset-x: 18px;
	--mov-offset-y: 18px;
	--mov-frame-color: #f5c518;
	--mov-frame-color-2: #fde68a;
	--mov-frame-fill: var(--mov-frame-color);
	--mov-frame-radius: 28px;
	position: relative;
	width: 100%;
	isolation: isolate;
}

.medlab-offset-video__frame,
.medlab-offset-video__frame-2 {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	border-radius: var(--mov-frame-radius);
	background: var(--mov-frame-fill);
}

.medlab-offset-video__frame-2,
.medlab-offset-video__corner {
	display: none;
}

.medlab-offset-video__media {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: #0f172a;
	border-radius: 24px;
}

/* ---- Corner offsets (shared by several patterns) ---- */
.medlab-offset-video--bottom-left .medlab-offset-video__frame {
	top: var(--mov-offset-y);
	right: var(--mov-offset-x);
	bottom: 0;
	left: 0;
}

.medlab-offset-video--bottom-left .medlab-offset-video__media {
	margin-left: var(--mov-offset-x);
	margin-bottom: var(--mov-offset-y);
}

.medlab-offset-video--bottom-right .medlab-offset-video__frame {
	top: var(--mov-offset-y);
	right: 0;
	bottom: 0;
	left: var(--mov-offset-x);
}

.medlab-offset-video--bottom-right .medlab-offset-video__media {
	margin-right: var(--mov-offset-x);
	margin-bottom: var(--mov-offset-y);
}

.medlab-offset-video--top-left .medlab-offset-video__frame {
	top: 0;
	right: var(--mov-offset-x);
	bottom: var(--mov-offset-y);
	left: 0;
}

.medlab-offset-video--top-left .medlab-offset-video__media {
	margin-left: var(--mov-offset-x);
	margin-top: var(--mov-offset-y);
}

.medlab-offset-video--top-right .medlab-offset-video__frame {
	top: 0;
	right: 0;
	bottom: var(--mov-offset-y);
	left: var(--mov-offset-x);
}

.medlab-offset-video--top-right .medlab-offset-video__media {
	margin-right: var(--mov-offset-x);
	margin-top: var(--mov-offset-y);
}

/* Pattern: double layer */
.medlab-offset-video--pattern-double .medlab-offset-video__frame-2 {
	display: block;
	background: var(--mov-frame-color-2);
	opacity: 0.9;
}

.medlab-offset-video--pattern-double.medlab-offset-video--bottom-left .medlab-offset-video__frame-2 {
	top: calc(var(--mov-offset-y) * 1.7);
	right: calc(var(--mov-offset-x) * 1.7);
	bottom: calc(var(--mov-offset-y) * -0.35);
	left: calc(var(--mov-offset-x) * -0.35);
	z-index: 0;
}

.medlab-offset-video--pattern-double.medlab-offset-video--bottom-right .medlab-offset-video__frame-2 {
	top: calc(var(--mov-offset-y) * 1.7);
	right: calc(var(--mov-offset-x) * -0.35);
	bottom: calc(var(--mov-offset-y) * -0.35);
	left: calc(var(--mov-offset-x) * 1.7);
}

.medlab-offset-video--pattern-double.medlab-offset-video--top-left .medlab-offset-video__frame-2 {
	top: calc(var(--mov-offset-y) * -0.35);
	right: calc(var(--mov-offset-x) * 1.7);
	bottom: calc(var(--mov-offset-y) * 1.7);
	left: calc(var(--mov-offset-x) * -0.35);
}

.medlab-offset-video--pattern-double.medlab-offset-video--top-right .medlab-offset-video__frame-2 {
	top: calc(var(--mov-offset-y) * -0.35);
	right: calc(var(--mov-offset-x) * -0.35);
	bottom: calc(var(--mov-offset-y) * 1.7);
	left: calc(var(--mov-offset-x) * 1.7);
}

/* Pattern: ring */
.medlab-offset-video--pattern-ring .medlab-offset-video__frame {
	inset: calc(var(--mov-offset-y) * -0.55) calc(var(--mov-offset-x) * -0.55);
	background: transparent;
	box-shadow: 0 0 0 4px var(--mov-frame-fill);
}

.medlab-offset-video--pattern-ring .medlab-offset-video__media {
	margin: 0 !important;
}

/* Pattern: soft glow */
.medlab-offset-video--pattern-glow .medlab-offset-video__frame {
	filter: blur(18px);
	opacity: 0.75;
	transform: scale(1.02);
}

/* Pattern: corner accents */
.medlab-offset-video--pattern-corners .medlab-offset-video__frame {
	display: none;
}

.medlab-offset-video--pattern-corners .medlab-offset-video__media {
	margin: calc(var(--mov-offset-y) * 0.55) calc(var(--mov-offset-x) * 0.55) !important;
}

.medlab-offset-video--pattern-corners .medlab-offset-video__corner {
	display: block;
	position: absolute;
	z-index: 0;
	width: calc(var(--mov-offset-x) * 2.2);
	height: calc(var(--mov-offset-y) * 2.2);
	border: 4px solid var(--mov-frame-fill);
	pointer-events: none;
}

.medlab-offset-video--pattern-corners .medlab-offset-video__corner--tl {
	top: 0;
	left: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: var(--mov-frame-radius) 0 0 0;
}

.medlab-offset-video--pattern-corners .medlab-offset-video__corner--tr {
	top: 0;
	right: 0;
	border-left: 0;
	border-bottom: 0;
	border-radius: 0 var(--mov-frame-radius) 0 0;
}

.medlab-offset-video--pattern-corners .medlab-offset-video__corner--bl {
	bottom: 0;
	left: 0;
	border-right: 0;
	border-top: 0;
	border-radius: 0 0 0 var(--mov-frame-radius);
}

.medlab-offset-video--pattern-corners .medlab-offset-video__corner--br {
	bottom: 0;
	right: 0;
	border-left: 0;
	border-top: 0;
	border-radius: 0 0 var(--mov-frame-radius) 0;
}

/* Pattern: diagonal stripes */
.medlab-offset-video--pattern-stripes .medlab-offset-video__frame {
	background-color: var(--mov-frame-color);
	background-image: repeating-linear-gradient(
		-32deg,
		var(--mov-frame-color),
		var(--mov-frame-color) 10px,
		var(--mov-frame-color-2) 10px,
		var(--mov-frame-color-2) 20px
	);
}

/* Pattern: polaroid */
.medlab-offset-video--pattern-polaroid .medlab-offset-video__frame {
	top: var(--mov-offset-y);
	right: var(--mov-offset-x);
	bottom: calc(var(--mov-offset-y) * -1.6);
	left: var(--mov-offset-x);
	border-radius: calc(var(--mov-frame-radius) * 0.45);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.medlab-offset-video--pattern-polaroid .medlab-offset-video__media {
	margin: var(--mov-offset-y) var(--mov-offset-x) calc(var(--mov-offset-y) * 2.4) !important;
}

/* Pattern: stacked cards */
.medlab-offset-video--pattern-stack .medlab-offset-video__frame-2 {
	display: block;
	background: var(--mov-frame-color-2);
}

.medlab-offset-video--pattern-stack.medlab-offset-video--bottom-left .medlab-offset-video__frame-2 {
	top: calc(var(--mov-offset-y) * 0.45);
	right: calc(var(--mov-offset-x) * 0.45);
	bottom: calc(var(--mov-offset-y) * 0.55);
	left: calc(var(--mov-offset-x) * 0.55);
	transform: rotate(-2.5deg);
}

.medlab-offset-video--pattern-stack.medlab-offset-video--bottom-right .medlab-offset-video__frame-2 {
	top: calc(var(--mov-offset-y) * 0.45);
	right: calc(var(--mov-offset-x) * 0.55);
	bottom: calc(var(--mov-offset-y) * 0.55);
	left: calc(var(--mov-offset-x) * 0.45);
	transform: rotate(2.5deg);
}

.medlab-offset-video--pattern-stack.medlab-offset-video--top-left .medlab-offset-video__frame-2,
.medlab-offset-video--pattern-stack.medlab-offset-video--top-right .medlab-offset-video__frame-2 {
	top: calc(var(--mov-offset-y) * 0.55);
	bottom: calc(var(--mov-offset-y) * 0.45);
	transform: rotate(-2deg);
}

.medlab-offset-video--pattern-stack.medlab-offset-video--top-left .medlab-offset-video__frame-2 {
	left: calc(var(--mov-offset-x) * 0.55);
	right: calc(var(--mov-offset-x) * 0.45);
}

.medlab-offset-video--pattern-stack.medlab-offset-video--top-right .medlab-offset-video__frame-2 {
	left: calc(var(--mov-offset-x) * 0.45);
	right: calc(var(--mov-offset-x) * 0.55);
}

/* Pattern: organic brush edge */
.medlab-offset-video--pattern-brush .medlab-offset-video__frame {
	border-radius: 42% 58% 48% 52% / 52% 42% 58% 48%;
}

.medlab-offset-video--pattern-brush .medlab-offset-video__media {
	border-radius: 28px;
}

/* Pattern: neon edge */
.medlab-offset-video--pattern-neon .medlab-offset-video__frame {
	inset: 0;
	background: transparent;
	box-shadow:
		0 0 0 3px var(--mov-frame-fill),
		0 0 24px color-mix(in srgb, var(--mov-frame-color) 55%, transparent);
	margin: 0;
}

.medlab-offset-video--pattern-neon .medlab-offset-video__media {
	margin: 6px !important;
	box-shadow: 0 0 0 1px var(--mov-frame-color-2);
}

.medlab-offset-video--ratio-16-9 .medlab-offset-video__media {
	aspect-ratio: 16 / 9;
}

.medlab-offset-video--ratio-4-3 .medlab-offset-video__media {
	aspect-ratio: 4 / 3;
}

.medlab-offset-video--ratio-1-1 .medlab-offset-video__media {
	aspect-ratio: 1 / 1;
}

.medlab-offset-video--ratio-21-9 .medlab-offset-video__media {
	aspect-ratio: 21 / 9;
}

.medlab-offset-video__player,
.medlab-offset-video__poster-only {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: middle;
	border: 0;
}

.medlab-offset-video--ratio-auto .medlab-offset-video__player,
.medlab-offset-video--ratio-auto .medlab-offset-video__poster-only {
	height: auto;
	object-fit: contain;
}

.medlab-offset-video__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: 24px;
	color: #94a3b8;
	font-size: 0.95rem;
	text-align: center;
}

.medlab-offset-video__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: rgba(15, 23, 42, 0.22);
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.medlab-offset-video.is-playing .medlab-offset-video__overlay,
.medlab-offset-video__overlay.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.medlab-offset-video__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	background: #fff;
	color: #0f172a;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
	transition: transform 0.2s ease;
}

.medlab-offset-video__overlay:hover .medlab-offset-video__play,
.medlab-offset-video__overlay:focus-visible .medlab-offset-video__play {
	transform: scale(1.06);
}

.medlab-offset-video__play svg {
	margin-left: 3px;
}

@media (max-width: 767px) {
	.medlab-offset-video {
		--mov-offset-x: 12px;
		--mov-offset-y: 12px;
	}

	.medlab-offset-video__play {
		width: 60px;
		height: 60px;
	}
}