/* Header Video plugin styles */

.kh-hv-bg{
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
}

.kh-hv-bg__media{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none; /* keep background non-interactive so foreground blocks are clickable */
}

.kh-hv-iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  /* Oversize and center to approximate "cover" since iframe has no object-fit */
  width: calc(210% * var(--kh-hv-scale, 1));
  height: calc(120% * var(--kh-hv-scale, 1));
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.kh-hv-bg__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kh-hv-bg__content{
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
}

/* Content position (similar to Cover block) */
.kh-hv-bg.is-position-top-left .kh-hv-bg__content { justify-content:flex-start; align-items:flex-start; }
.kh-hv-bg.is-position-top-center .kh-hv-bg__content { justify-content:center; align-items:flex-start; }
.kh-hv-bg.is-position-top-right .kh-hv-bg__content { justify-content:flex-end; align-items:flex-start; }

.kh-hv-bg.is-position-center-left .kh-hv-bg__content { justify-content:flex-start; align-items:center; }
.kh-hv-bg.is-position-center-center .kh-hv-bg__content { justify-content:center; align-items:center; }
.kh-hv-bg.is-position-center-right .kh-hv-bg__content { justify-content:flex-end; align-items:center; }

.kh-hv-bg.is-position-bottom-left .kh-hv-bg__content { justify-content:flex-start; align-items:flex-end; }
.kh-hv-bg.is-position-bottom-center .kh-hv-bg__content { justify-content:center; align-items:flex-end; }
.kh-hv-bg.is-position-bottom-right .kh-hv-bg__content { justify-content:flex-end; align-items:flex-end; }

/* Content width: make inner content span the full width of the background */
.kh-hv-bg.is-content-fullwidth .kh-hv-bg__content > *{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Editor-specific wrappers */
.kh-hv-bg.is-content-fullwidth .kh-hv-bg__content > .block-editor-inner-blocks,
.kh-hv-bg.is-content-fullwidth .kh-hv-bg__content > .block-editor-inner-blocks > .block-editor-block-list__layout{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.kh-hv--placeholder,
.kh-hv-bg__placeholder,
.kh-hv-embed__placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background: repeating-linear-gradient(45deg, #f6f6f6, #f6f6f6 10px, #f0f0f0 10px, #f0f0f0 20px);
  min-height: 120px;
  text-align: center;
  font-size: 14px;
}

.kh-hv-embed{
  position: relative;
  width: 100%;
}

.kh-hv-embed .kh-hv-iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  pointer-events: auto;
  border: 0;
}