/* YouTube Cover Block — front-end */

/* Wrapper */
.youtube-cover-block{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  container-type: size; /* enables 100cqw / 100cqh for precise cover sizing */
}

/* Modes */
.youtube-cover-block.is-aspect{
  aspect-ratio: 16 / 9;
}
.youtube-cover-block.is-minvh{
  min-height: calc(var(--ycb-minvh, 60) * 1vh);
}

/* Video background */
.youtube-cover-block .video-wrapper{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.youtube-cover-block.is-aspect .video-wrapper iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.youtube-cover-block.is-minvh .video-wrapper iframe{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  /* maintain 16:9 and cover the block */
  width:  max(100cqw, calc(100cqh * (16/9)));
  height: max(100cqh, calc(100cqw * (9/16)));
}
/* Fallback for browsers without container units */
@supports not (width: 100cqw) {
  .youtube-cover-block.is-minvh .video-wrapper iframe{
    width: 100vw;
    height: calc(100vw * 9 / 16);
  }
  @media (max-aspect-ratio: 16/9) {
    .youtube-cover-block.is-minvh .video-wrapper iframe{
      width: calc(var(--ycb-minvh, 60) * 1vh * (16/9));
      height: calc(var(--ycb-minvh, 60) * 1vh);
    }
  }
}

/* Overlay */
.youtube-cover-block .overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content layer (absolute full area) */
.youtube-cover-block .content{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;                 /* let inner container take full width */
  justify-content: center;              /* default vertical center (overridden by classes) */
}

/* Vertical alignment variants */
.youtube-cover-block .content-top    { justify-content: flex-start; }
.youtube-cover-block .content-center { justify-content: center; }
.youtube-cover-block .content-bottom { justify-content: flex-end; }

/* Inner container (Bootstrap/UIkit style) */
.youtube-cover-block .content .content-inner{
  width: 100%;
  max-width: var(--ycb-container-max, 1200px);
  margin-inline: auto;
  padding: clamp(16px, 4vw, 48px);
  /* DO NOT force text-align here; let user blocks decide */
}

/* Fluid option when container is disabled */
.youtube-cover-block .content.no-container .content-inner{
  max-width: none;
}

/* Optional readability */
.youtube-cover-block .content h1,
.youtube-cover-block .content h2{
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.youtube-cover-block .content .wp-block-button__link{
  backdrop-filter: saturate(120%) blur(1px);
}