.wp-block-cover.is-style-case-study-gallery {
	--kbd-case-study-gallery-gap: var(--wp--style--block-gap, min(4vw, 46px));
	margin-block: var(--kbd-case-study-gallery-gap);
}

.wp-block-cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & > .wp-block-cover__inner-container {
    display: flex;
    justify-content: inherit;
    align-items: inherit;

    & .wp-block-gb-lottieplayer:has([objectfit='contain']) {
      max-height: 100% !important;
      max-width: 100% !important;

      & dotlottie-player {
        max-height: 100% !important;
        max-width: 100% !important;
        display: block;
      }
    }
  }

  @media screen and (max-width: 768px) {
    &[style*="border-bottom-right-radius:60px"] {
			border-bottom-right-radius: 30px !important;
		}
		&[style*="border-bottom-left-radius:60px"] {
			border-bottom-left-radius: 30px !important;
		}
		&[style*="border-top-right-radius:60px"] {
			border-top-right-radius: 30px !important;
		}
		&[style*="border-top-left-radius:60px"] {
			border-top-left-radius: 30px !important;
		}
		&[style*="border-radius: 60px"] {
			border-radius: 30px !important;
		}
  }
}

.is-style-rounded.wp-block-cover,
.is-style-rounded.wp-block-gb-lottiecover {
  border-radius: var(--wp--custom--radius--cover, 22px);
  overflow: hidden;

  & .wp-block-cover__image-background,
  & .wp-block-cover__video-background,
  & iframe.wp-block-cover__video-background,
  & .wp-block-gb-lottiecover__background,
  & .block-library-lottiecover__resize-container,
  & .lottie-element,
  & dotlottie-player {
    border-radius: inherit;
  }
}

.wp-block-gb-lottiecover[style*='aspect-ratio'] {
  min-height: auto !important;
  height: auto;
}

a:has(+ .is-style-hover-circle:not(.block-editor-block-list__block)) {
  overflow: clip;
  display: block;
  clip-path: circle(50% at 50% 50%);
}

.is-style-hover-circle.block-editor-block-list__block  > .wp-block-cover__inner-container {
  flex-direction: column;
}
  
.is-style-hover-circle:not(.block-editor-block-list__block) {
  border-radius: 50%;
  & > .has-background-dim-0 {

    transition: opacity 0.3s ease-in-out;
  }

  --kbd-underline-transition-duration: 0s !important;



   a:hover + & {
    & > .has-background-dim-0 {
      opacity: 1 !important;
    }

    --kbd-underline-transition-duration: 1s !important;
  }

  & > .wp-block-cover__inner-container {
    display: grid;
    place-items: center; 

    & .kbd-underline {

      background-size: 0% max(4%, 2px) !important;
    }

    & .kbd-underline--hover {
      background-size: 100% max(4%, 2px) !important;
    }
    

     & > * {
        grid-column: 1;
        grid-row: 1;
        transition: opacity 0.3s ease-in-out;
     }

     & > :first-child {
        opacity: 1;
        text-decoration: underline !important;
        text-underline-offset: 0.2em !important;
        text-decoration-thickness: 0.05em !important;
        a:hover + .is-style-hover-circle & {
          opacity: 0;
        }
     }

     & > :last-child {
        opacity: 0;
        a:hover + .is-style-hover-circle & {
          opacity: 1;
        }
     }
  
  }

  
}
/*
 * Vimeo letterboxes when the iframe shape differs from the video. The wrapper
 * (.kbd-video-fit on the site, the embed background in the editor) is
 * measured as a size container, and the iframe grows to the video's ratio
 * until it covers it, cropping the overflow evenly.
 */
.wp-block-cover .kbd-video-fit {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	container-type: size;
	pointer-events: none;
}

.wp-block-cover > .wp-block-cover__embed-background:has(> iframe[src*='vimeo.com']) {
	overflow: hidden;
	container-type: size;
}

.wp-block-cover .kbd-video-fit > iframe,
.wp-block-cover > .wp-block-cover__embed-background > iframe[src*='vimeo.com'] {
	position: absolute;
	inset: auto;
	top: 50%;
	left: 50%;
	width: max(100cqw, calc(100cqh * (var(--kbd-video-ar, 16 / 9))));
	height: max(100cqh, calc(100cqw / (var(--kbd-video-ar, 16 / 9))));
	min-width: 0;
	min-height: 0;
	max-width: none;
	max-height: none;
	aspect-ratio: auto;
	transform: translate(-50%, -50%);
	border: 0;
	display: block;
	pointer-events: none;
}

/* Editor: a cover with no aspect ratio or minimum height takes its video's ratio, as on the site. */
.wp-block-cover.kbd-video-matched {
	aspect-ratio: var(--kbd-video-ar);
	min-height: 0;
}