/**
 * @DEV David Lewis
 *
 * acf/testimonial-postmeta block styles
 */
 .wp-block-acf-testimonial-postmeta--video {
	aspect-ratio: 16 / 9;
}
.wp-block-acf-testimonial-postmeta--image {
	width: 100%;
}

/* Video thumbnail */
.wp-block-acf-testimonial-postmeta__play {
	position: relative;
	width: 100%;
	padding: 0 !important;
	border: none;
	cursor: pointer;
	line-height: 0;
}
.wp-block-acf-testimonial-postmeta__play svg {
	--play-button-size: clamp(2.75rem, 2.15rem + 3vw, 5.75rem);
	position: absolute;
	width: var(--play-button-size);
	height: var(--play-button-size);
	inset: calc( 50% - var(--play-button-size) / 2 );
}

/* Video modal */
.wp-block-acf-testimonial-postmeta__iframe {
	width: 100%;
}
.wp-block-acf-testimonial-postmeta__close {
	position: absolute;
	right: 1.5rem;
	top: 0;
	font-size: 36px;
	cursor: pointer;
	color: #ffffff;
	padding: 0;
	border: 0;
	background-color: transparent;
}

/* Override default white modal background from theme styles and set layout context */
.wp-block-acf-testimonial-postmeta__modal .modal__content {
    background-color: transparent;
	display: flex;
	align-items: center;
}

/**
 * Video modal window fixes (so Sage theme works w/ WordPress blocks)
 */

/* Alter context of parent cover blocks so modal works properly */
.wp-block-cover:has(.wp-block-acf-testimonial-postmeta__modal.modal--is-visible) {
	display: block; /* Change from `display: flex;` */
}

/* Alter context of parent cover inner container so modal works properly */
.wp-block-cover:has(.wp-block-acf-testimonial-postmeta__modal.modal--is-visible) .wp-block-cover__inner-container {
	position: static; /* Change from `display: relative;` */
}

/* Change parent blocks with `container-type:inline-size` to `container-type:normal;` so `position: fixed;` works */
[class*="wp-block-"]:has(.wp-block-acf-testimonial-postmeta__modal) {
	container-type: normal;
	position: relative;
}

/* Push modal window to same z-index level of megamenu so it covers the megamenu */
.wp-block-acf-testimonial-postmeta__modal {
 	z-index: 2000 !important;
}

/**
 * Admin only styles
 */

/* Make it easier to select video block by disabling pointer events so they don't just play when you click them */
.is-root-container .wp-block-acf-testimonial-postmeta--video {
	pointer-events: none;
}

/* Hide modal markup in admin */
.is-root-container .wp-block-acf-testimonial-postmeta__modal {
	display: none;
}

/* Kill extra little space below images and videos due to line height */
.block-editor-block-list__block:has(> .wp-block-acf-testimonial-postmeta > .wp-block-acf-testimonial-postmeta--image),
.block-editor-block-list__block:has(> .wp-block-acf-testimonial-postmeta > .wp-block-acf-testimonial-postmeta--video) {
	line-height: 0;
}