/*
 * Cover media + dim (core block-library rules are often missing in Playground).
 * Without absolute layers, the photo sits in-flow and dim spans never cover it.
 */
.wp-block-cover {
  position: relative;
  overflow: hidden;
}
.wp-block-cover > .wp-block-cover__background,
.wp-block-cover > .wp-block-cover__image-background,
.wp-block-cover > .wp-block-cover__video-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
.wp-block-cover > .wp-block-cover__image-background {
  z-index: 0;
}
.wp-block-cover > .wp-block-cover__background {
  z-index: 1;
}
.wp-block-cover > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/*
 * Cover content positions (core block-library rules are often missing in
 * Playground). Native compiles emit is-position-* on wp:cover.
 * Use margin-top/bottom:auto on the inner container — works for both flex and grid.
 */
.wp-block-cover.has-custom-content-position {
  display: flex !important;
  flex-direction: column !important;
}
.wp-block-cover.has-custom-content-position.is-position-top-left,
.wp-block-cover.has-custom-content-position.is-position-top-center,
.wp-block-cover.has-custom-content-position.is-position-top-right {
  justify-content: flex-start !important;
}
.wp-block-cover.has-custom-content-position.is-position-center-left,
.wp-block-cover.has-custom-content-position.is-position-center-center,
.wp-block-cover.has-custom-content-position.is-position-center-right {
  justify-content: center !important;
}
.wp-block-cover.has-custom-content-position.is-position-bottom-left,
.wp-block-cover.has-custom-content-position.is-position-bottom-center,
.wp-block-cover.has-custom-content-position.is-position-bottom-right {
  justify-content: flex-end !important;
}
.wp-block-cover.has-custom-content-position.is-position-top-left > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-center-left > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-bottom-left > .wp-block-cover__inner-container {
  margin-right: auto !important;
  margin-left: 0 !important;
  width: auto !important;
  max-width: 100%;
}
.wp-block-cover.has-custom-content-position.is-position-top-right > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-center-right > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-bottom-right > .wp-block-cover__inner-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 100%;
}
.wp-block-cover.has-custom-content-position.is-position-bottom-left > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-bottom-center > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-bottom-right > .wp-block-cover__inner-container {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}
.wp-block-cover.has-custom-content-position.is-position-top-left > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-top-center > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-top-right > .wp-block-cover__inner-container {
  margin-bottom: auto !important;
  margin-top: 0 !important;
}