/* ==========================================================================
   Meet Ovation video: "Watch" play links + bio video cards.
   The lightbox itself is built by js/video.js (styles injected there so
   WP Rocket's Remove Unused CSS can't strip classes that only exist after a click).
   Ring gradient = the site's own section gradient (.border-gradient).
   ========================================================================== */

:root {
	--ov-grad: linear-gradient(to right, #E58CD1, #CBEDB6, #EEDDB1);
	--ov-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.2 4.2v15.6c0 .8.9 1.3 1.6.9l12.2-7.8c.6-.4.6-1.4 0-1.8L7.8 3.3C7.1 2.9 6.2 3.4 6.2 4.2z' fill='%23fff'/%3E%3C/svg%3E");
}

/* --- Watch link (Option B) --- */
a.ov-watch {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: #005DA8;
	font-family: "dm-sans", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

a.ov-watch:before {
	content: "";
	flex: none;
	width: 52px;
	height: 52px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 4px solid transparent;
	background:
		var(--ov-play) 50% 50% / 17px 17px no-repeat,
		linear-gradient(#005DA8, #005DA8) padding-box,
		var(--ov-grad) border-box;
	box-shadow: 0 8px 20px rgba(17, 61, 90, .16);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

a.ov-watch:hover,
a.ov-watch:focus-visible {
	color: #113D5A;
	text-decoration: none;
}

a.ov-watch:hover:before,
a.ov-watch:focus-visible:before {
	transform: scale(1.07);
	box-shadow: 0 0 0 6px rgba(229, 140, 209, .18), 0 10px 24px rgba(17, 61, 90, .2);
}

/* Button + watch link side by side (Beaver Builder rich text) */
.ov-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	margin-top: 26px;
}

.ov-cta-row .btn {
	margin: 0;
}

/* Homepage doctors slider: stacked under "Meet the Doctors" */
body.home section.meet-the-doctors a.ov-watch {
	display: flex;
	width: max-content;
	margin: 24px 0 0 2px;
}

@media only screen and (max-width: 920px) {
	body.home section.meet-the-doctors a.ov-watch {
		margin: 22px auto 44px;
	}
}

/* --- Bio video card --- */
a.ov-vcard {
	position: relative;
	display: block;
	margin: 36px 0 0;
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #113D5A;
	box-shadow: 0 18px 40px rgba(17, 61, 90, .14);
	text-decoration: none;
}

a.ov-vcard img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

a.ov-vcard:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(17, 61, 90, 0) 55%, rgba(17, 61, 90, .28) 100%);
	pointer-events: none;
}

a.ov-vcard:after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	width: 84px;
	height: 84px;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 5px solid transparent;
	background:
		var(--ov-play) 52% 50% / 28px 28px no-repeat,
		linear-gradient(#005DA8, #005DA8) padding-box,
		var(--ov-grad) border-box;
	box-shadow: 0 14px 34px rgba(17, 61, 90, .35);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

a.ov-vcard:hover img,
a.ov-vcard:focus-visible img {
	transform: scale(1.03);
}

a.ov-vcard:hover:after,
a.ov-vcard:focus-visible:after {
	transform: translate(-50%, -50%) scale(1.07);
	box-shadow: 0 0 0 9px rgba(255, 255, 255, .28), 0 14px 34px rgba(17, 61, 90, .35);
}

/* Branded YouTube thumbnails carry their own title and logo, so the play
   button moves out of the artwork into a Watch link under the poster. */
a.ov-vcard.ov-poster:before,
a.ov-vcard.ov-poster:after {
	display: none;
}

p.ov-vcap.ov-vcap-watch {
	display: block;
	margin: 22px 0 0;
}

p.ov-vcap.ov-vcap-watch a.ov-watch {
	white-space: normal;
}

a.ov-vcard.ov-poster:hover + p.ov-vcap-watch a.ov-watch:before {
	transform: scale(1.07);
	box-shadow: 0 0 0 6px rgba(229, 140, 209, .18), 0 10px 24px rgba(17, 61, 90, .2);
}

.ov-vcap {
	display: flex;
	margin: 14px 0 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #005DA8;
}

@media only screen and (max-width: 767px) {
	a.ov-watch {
		font-size: 17px;
	}

	a.ov-watch:before {
		width: 48px;
		height: 48px;
	}

	.ov-cta-row {
		gap: 16px 22px;
	}

	a.ov-vcard:after {
		width: 66px;
		height: 66px;
		border-width: 4px;
		background-size: 22px 22px, auto, auto;
	}

	.ov-vcap {
		font-size: 16px;
	}
}