/* 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);
    }
  }
}

/* Fallback image layer */
.youtube-cover-block .fallback-image{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Fallback image positioning modes */
.youtube-cover-block .fallback-image.fallback-pos-cover{
  background-size: cover;
}
.youtube-cover-block .fallback-image.fallback-pos-contain{
  background-size: contain;
  background-color: #000;
}
.youtube-cover-block .fallback-image.fallback-pos-center{
  background-size: auto;
}

/* Fallback modes */
.youtube-cover-block .fallback-image.fallback-replace{
  z-index: 0; /* below video initially, will be shown when video ends */
}
.youtube-cover-block .fallback-image.fallback-overlay{
  z-index: 1; /* between video and overlay */
  opacity: 0; /* hidden until video ends */
}

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

/* When fallback is showing (via data-fallback-active) */
.youtube-cover-block[data-fallback-active="true"] .video-wrapper{
  display: none;
}
.youtube-cover-block[data-fallback-active="true"] .fallback-image.fallback-replace{
  z-index: 0;
}
.youtube-cover-block[data-fallback-active="true"] .fallback-image.fallback-overlay{
  opacity: 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);
  /* Let nested blocks control alignment/text */
}

/* 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);
}