.wp-block-mavmedia-video-slot.mavmedia-video-slot,
.wp-block-mavmedia-video-slot,
.mavmedia-video-slot {
	box-sizing: border-box;
	width: 100%;
	border-radius: var(--mavmedia-slot-card-radius, 0px);
	background-clip: padding-box;
}


/*
 * Content Slot sizing guard.
 *
 * Thumbnail-only Content Slots should collapse tightly to their visible poster
 * unless the editor deliberately sets a native Gutenberg Minimum Height. This
 * preserves the v1.1.1 fix while allowing the new v1.2.0 Dimensions controls.
 */
.wp-block-mavmedia-video-slot.mavmedia-content-slot-block--media-only:not(.mavmedia-content-slot-block--has-custom-min-height),
.mavmedia-video-slot-editor-preview--media-only,
.mavmedia-video-slot-editor-preview--media-only > div,
.mavmedia-video-slot--media-only:not(.mavmedia-video-slot--has-custom-min-height) {
	min-height: 0 !important;
	height: fit-content !important;
	max-height: none !important;
	flex-grow: 0 !important;
	flex-basis: auto !important;
	align-self: flex-start !important;
}

.wp-block-mavmedia-video-slot.mavmedia-content-slot-block--media-only,
.mavmedia-video-slot--media-only {
	width: 100%;
}

/*
 * Thumbnail-only rounded-shadow guard.
 *
 * The visible card in media-only mode is the poster itself. Native Gutenberg
 * shadows, however, are applied to the outer block wrapper. Give that wrapper
 * the same radius as the poster so a square outer corner cannot show beneath
 * the rounded thumbnail/shadow. Keep clipping on the poster layer only so the
 * outer box-shadow remains visible.
 */
.wp-block-mavmedia-video-slot.mavmedia-content-slot-block--media-only,
.mavmedia-video-slot--media-only {
	border-radius: var(--mavmedia-slot-poster-radius, 0px) !important;
	background-clip: padding-box;
}

.mavmedia-video-slot--media-only > .mavmedia-video-slot__link {
	border-radius: var(--mavmedia-slot-poster-radius, 0px);
}

.mavmedia-video-slot--media-only .mavmedia-video-slot__image {
	border-radius: var(--mavmedia-slot-poster-radius, 0px);
	overflow: hidden;
}

/* The editor has an extra preview wrapper around the server-rendered card. */
.mavmedia-video-slot-editor-preview {
	border-radius: var(--mavmedia-slot-card-radius, 0px);
	background-clip: padding-box;
}
.mavmedia-content-slot-block--media-only .mavmedia-video-slot-editor-preview--media-only {
	border-radius: var(--mavmedia-slot-poster-radius, 0px);
	background-clip: padding-box;
}

.mavmedia-video-slot--media-only .mavmedia-video-slot__link,
.mavmedia-video-slot--media-only .mavmedia-video-slot__image {
	min-height: 0;
	height: auto;
	margin-bottom: 0;
}

/* The poster aspect-ratio box remains the natural height-setting element. */
.mavmedia-video-slot--media-only .mavmedia-video-slot__image[style*="aspect-ratio"] {
	height: auto;
}

/* Native Gutenberg + MavMedia design controls. */
.mavmedia-video-slot {
	--mavmedia-slot-poster-radius: 0px;
	--mavmedia-slot-card-radius: 0px;
	--mavmedia-slot-poster-fit: cover;
	--mavmedia-slot-hover-lift: 0px;
	--mavmedia-slot-hover-zoom: 1;
	--mavmedia-slot-motion-duration: 220ms;
	--mavmedia-slot-animation-duration: 500ms;
	transition: transform var(--mavmedia-slot-motion-duration) ease, box-shadow var(--mavmedia-slot-motion-duration) ease, opacity var(--mavmedia-slot-motion-duration) ease;
}
.mavmedia-video-slot--clip { overflow: hidden; }
.mavmedia-video-slot__image { border-radius: var(--mavmedia-slot-poster-radius); }
.mavmedia-video-slot__poster,
.mavmedia-video-slot__animated-preview {
	transform: scale(1);
	transform-origin: center center;
	transition: opacity .16s ease, transform var(--mavmedia-slot-motion-duration) ease;
}
@media (hover:hover) and (pointer:fine) {
	.mavmedia-video-slot--has-hover:hover {
		transform: translateY(calc(var(--mavmedia-slot-hover-lift) * -1));
	}
	.mavmedia-video-slot--has-hover:hover .mavmedia-video-slot__poster,
	.mavmedia-video-slot--has-hover:hover .mavmedia-video-slot__animated-preview {
		transform: scale(var(--mavmedia-slot-hover-zoom));
	}
	.mavmedia-video-slot--hover-shadow:hover {
		box-shadow: 0 12px 28px rgba(0,0,0,.22);
	}
}

@keyframes mavmediaSlotFade { from { opacity:0; } to { opacity:1; } }
@keyframes mavmediaSlotFadeDown { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
@keyframes mavmediaSlotFadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes mavmediaSlotFadeLeft { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } }
@keyframes mavmediaSlotFadeRight { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:translateX(0); } }
.mavmedia-video-slot--animate { animation-duration:var(--mavmedia-slot-animation-duration); animation-fill-mode:backwards; animation-timing-function:ease-out; }
.mavmedia-video-slot--animation-fade { animation-name:mavmediaSlotFade; }
.mavmedia-video-slot--animation-fade-down { animation-name:mavmediaSlotFadeDown; }
.mavmedia-video-slot--animation-fade-up { animation-name:mavmediaSlotFadeUp; }
.mavmedia-video-slot--animation-fade-left { animation-name:mavmediaSlotFadeLeft; }
.mavmedia-video-slot--animation-fade-right { animation-name:mavmediaSlotFadeRight; }

@media (min-width: 1025px) {
	.mavmedia-video-slot--hide-desktop { display:none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.mavmedia-video-slot--hide-tablet { display:none !important; }
}
@media (max-width: 767px) {
	.mavmedia-video-slot--hide-mobile { display:none !important; }
}

/* Keep responsive-hidden and animated blocks selectable in the editor. */
.editor-styles-wrapper .mavmedia-video-slot--hide-desktop,
.editor-styles-wrapper .mavmedia-video-slot--hide-tablet,
.editor-styles-wrapper .mavmedia-video-slot--hide-mobile {
	display:block !important;
	opacity:.45;
	outline:1px dashed currentColor;
	outline-offset:2px;
}
.editor-styles-wrapper .mavmedia-video-slot--animate { animation:none !important; }

@media (prefers-reduced-motion: reduce) {
	.mavmedia-video-slot,
	.mavmedia-video-slot__poster,
	.mavmedia-video-slot__animated-preview {
		animation: none !important;
		transition: none !important;
	}
	.mavmedia-video-slot--has-hover:hover { transform: none !important; }
	.mavmedia-video-slot--has-hover:hover .mavmedia-video-slot__poster,
	.mavmedia-video-slot--has-hover:hover .mavmedia-video-slot__animated-preview { transform: none !important; }
}

.mavmedia-video-slot__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mavmedia-video-slot__image {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #111;
}

.mavmedia-video-slot__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mavmedia-slot-poster-fit, cover);
}

.mavmedia-video-slot__duration {
	position: absolute;
	right: 7px;
	bottom: 7px;
	padding: 2px 5px;
	border-radius: 3px;
	background: rgba( 0, 0, 0, .82 );
	color: #fff;
	font-size: var(--mavmedia-slot-duration-font-size, 12px);
	font-weight: 600;
	line-height: 1.35;
}

.mavmedia-video-slot__category,
.mavmedia-video-slot__show,
.mavmedia-video-slot__tags,
.mavmedia-video-slot__date {
	margin-top: 7px;
	font-size: .82em;
	opacity: .72;
}

.mavmedia-video-slot__title {
	margin: 5px 0 3px;
	font-size: 1.15em;
	line-height: 1.2;
}

.mavmedia-video-slot__excerpt {
	margin: 4px 0 0;
	line-height: 1.4;
}

.mavmedia-video-slot__watch-link {
	display: inline-block;
	margin-top: 8px;
}

.mavmedia-video-slot--empty {
	padding: 16px;
	border: 1px dashed currentColor;
	opacity: .7;
}

.mavmedia-video-slot__trend-rank {
	position: absolute;
	left: 7px;
	top: 7px;
	padding: 3px 6px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .86);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
}

.mavmedia-video-slot__viewers {
	margin-top: 7px;
	font-size: .82em;
	opacity: .72;
}


.mavmedia-video-slot__animated-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--mavmedia-slot-poster-fit, cover);
	opacity: 0;
	pointer-events: none;
}
.mavmedia-video-slot.is-preview-active .mavmedia-video-slot__animated-preview { opacity: 1; }
.mavmedia-video-slot.is-preview-active .mavmedia-video-slot__poster { opacity: 0; }

/* Description length controls */
.mavmedia-video-slot__excerpt--compact,
.mavmedia-video-slot__excerpt--standard,
.mavmedia-video-slot__excerpt--extended {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mavmedia-video-slot__excerpt--compact,
.mavmedia-video-slot__excerpt--standard { -webkit-line-clamp: 2; }
.mavmedia-video-slot__excerpt--extended { -webkit-line-clamp: 4; }
.mavmedia-video-slot.is-description-expanded .mavmedia-video-slot__excerpt--compact,
.mavmedia-video-slot.is-description-expanded .mavmedia-video-slot__excerpt--standard,
.mavmedia-video-slot.is-description-expanded .mavmedia-video-slot__excerpt--extended {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}
.mavmedia-video-slot__description-toggle {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	padding: 0;
	margin-top: 7px;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.mavmedia-video-slot__description-toggle[hidden] { display: none !important; }


/* Optional live takeover for normal Video Slot blocks. */
.mavmedia-video-slot__live-badge {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 8px;
	border-radius: 3px;
	background: #b00020;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .05em;
	line-height: 1.2;
}
.mavmedia-video-slot__live-player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}
.mavmedia-video-slot__live-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.mavmedia-video-slot__live-editor {
	padding: 18px;
	border: 1px dashed currentColor;
	opacity: .78;
}
.mavmedia-video-slot__live-editor span {
	display: block;
	margin-top: 5px;
	font-size: .9em;
}
.mavmedia-video-slot__live-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 10px;
	padding: 9px 11px;
	border-radius: 4px;
	background: #b00020;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.25;
}
.mavmedia-video-slot__live-banner:hover,
.mavmedia-video-slot__live-banner:focus {
	color: #fff;
	text-decoration: none;
}
.mavmedia-video-slot__live-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}
.mavmedia-video-slot__live-banner-channel {
	margin-left: auto;
	font-size: .8em;
	font-weight: 600;
	opacity: .85;
}

/* Automatic recommendations on individual MavMedia Video pages. */
.mavmedia-more-like-this {
	box-sizing: border-box;
	width: 100%;
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid rgba( 127, 127, 127, .28 );
}
.mavmedia-more-like-this__heading {
	margin: 0 0 16px;
	font-size: 1.45em;
	line-height: 1.2;
}
.mavmedia-more-like-this__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 20px;
}
.mavmedia-more-like-this__card {
	min-width: 0;
}
.mavmedia-more-like-this__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.mavmedia-more-like-this__image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
}
.mavmedia-more-like-this__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mavmedia-more-like-this__duration {
	position: absolute;
	right: 7px;
	bottom: 7px;
	padding: 2px 5px;
	border-radius: 3px;
	background: rgba( 0, 0, 0, .82 );
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}
.mavmedia-more-like-this__show {
	margin-top: 8px;
	font-size: .82em;
	opacity: .72;
}
.mavmedia-more-like-this__title {
	margin: 5px 0 3px;
	font-size: 1.05em;
	line-height: 1.22;
}
.mavmedia-more-like-this__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 4px 0 0;
	font-size: .9em;
	line-height: 1.4;
	opacity: .82;
}
@media ( max-width: 780px ) {
	.mavmedia-more-like-this__grid { grid-template-columns: 1fr; }
}

/* Read-only rolling Wowza live-viewer indicator. Not an exact concurrent count. */
.mavmedia-live-slot__viewers { display:inline-flex; align-items:center; margin:0 0 8px 8px; padding:4px 8px; border-radius:3px; border:1px solid rgba(127,127,127,.30); color:inherit; font-size:12px; font-weight:650; line-height:1.2; }
.mavmedia-live-slot__viewers[hidden] { display:none !important; }