.lsc-hero-rotator{
  position: relative;
  width: 100%;
  display:block;
  overflow:hidden;
}
.lsc-hero-rotator .lsc-hero-viewport{
  position: relative;
  width:100%;
  height:100%;
  min-height: 60vh;
}
.lsc-hero-rotator .lsc-hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: var(--lsc-fit, cover);
  object-position: var(--lsc-pos, 50% 50%);
  transition: opacity 0.5s ease;
  display:block;
  background:#000;

  z-index:1;
  pointer-events:none;
}
.lsc-hero-rotator .lsc-hero-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;

  z-index:2;
}
.lsc-hero-rotator .lsc-hero-inner{
  position: absolute;
  inset: 0;
  z-index: 3;
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:block;
  padding:0;
}

@media (max-width: 600px){
  .lsc-hero-rotator .lsc-hero-inner{
    padding: var(--wp--style--root--padding, 1rem);
  }
}
/* Editor preview tweaks */
.lsc-hero-rotator-editor{
  position: relative;
  border: 1px dashed #ccd0d4;
  background: #f9f9fb;
}
.lsc-hero-rotator-editor .lsc-hero-rotator-preview{
  position:absolute;
  top:8px; right:8px;
  background:#fff;
  border:1px solid #ddd;
  padding:4px 8px;
  border-radius:4px;
  font-size:12px;
  z-index:2;
}
.lsc-hero-rotator-editor .lsc-hero-rotator-overlay{
  position:absolute; inset:0;
}
.lsc-hero-rotator-editor .lsc-hero-rotator-inner{
  position:relative; z-index:2; min-height: inherit;
}

/* Full-bleed like native Cover */
.lsc-hero-rotator.alignfull{
  width:100vw;
  max-width:100vw;
}
:where(.wp-site-blocks) > .lsc-hero-rotator.alignfull,
:where(.wp-site-blocks) .wp-block-group > .lsc-hero-rotator.alignfull{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.has-global-padding :where(.wp-site-blocks) > .lsc-hero-rotator.alignfull,
.has-global-padding :where(.wp-site-blocks) .wp-block-group > .lsc-hero-rotator.alignfull{
  padding-left: 0;
  padding-right: 0;
}

/* Optional max-height on viewport */
.lsc-hero-rotator .lsc-hero-viewport{
  max-height: var(--lsc-maxh, none);
}


/* Full-bleed like native Cover, even when nested in constrained layouts */
.lsc-hero-rotator.alignfull{
  width:100vw;
  max-width:100vw;
}
:where(.wp-site-blocks) > .lsc-hero-rotator.alignfull,
:where(.is-layout-constrained) > .lsc-hero-rotator.alignfull,
:where(.wp-site-blocks) .wp-block-group > .lsc-hero-rotator.alignfull{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Cancel global padding on alignfull (matches core pattern) */
.has-global-padding :where(.wp-site-blocks) > .lsc-hero-rotator.alignfull,
.has-global-padding :where(.is-layout-constrained) > .lsc-hero-rotator.alignfull,
.has-global-padding :where(.wp-site-blocks) .wp-block-group > .lsc-hero-rotator.alignfull{
  padding-left: 0;
  padding-right: 0;
}

/* Layering: media behind, overlay middle, inner on top */
.lsc-hero-rotator{ position:relative; z-index:0; }
.lsc-hero-rotator .lsc-hero-media{ z-index:1; pointer-events:none; }
.lsc-hero-rotator .lsc-hero-overlay{ z-index:2; }
.lsc-hero-rotator .lsc-hero-inner{
  position: absolute;
  inset: 0;
  z-index: 3;
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:block;
  padding:0;
}

@media (max-width: 600px){
  .lsc-hero-rotator .lsc-hero-inner{
    padding: var(--wp--style--root--padding, 1rem);
  }
}


/* Full-bleed on block wrapper as well */
.wp-block-lsc-hero-rotator.alignfull{
  width:100vw;
  max-width:100vw;
}
:where(.wp-site-blocks) > .wp-block-lsc-hero-rotator.alignfull,
:where(.is-layout-constrained) > .wp-block-lsc-hero-rotator.alignfull,
:where(.wp-site-blocks) .wp-block-group > .wp-block-lsc-hero-rotator.alignfull{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.has-global-padding :where(.wp-site-blocks) > .wp-block-lsc-hero-rotator.alignfull,
.has-global-padding :where(.is-layout-constrained) > .wp-block-lsc-hero-rotator.alignfull,
.has-global-padding :where(.wp-site-blocks) .wp-block-group > .wp-block-lsc-hero-rotator.alignfull{
  padding-left: 0;
  padding-right: 0;
}


/* Optional: constrain inner content to content/wide while media stays full */
.lsc-hero-rotator .lsc-hero-inner{
  position: absolute;
  inset: 0;
  z-index: 3;
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:block;
  padding:0;
}

@media (max-width: 600px){
  .lsc-hero-rotator .lsc-hero-inner{
    padding: var(--wp--style--root--padding, 1rem);
  }
}
.lsc-hero-rotator.inner-constrain-content .lsc-hero-inner,
.wp-block-lsc-hero-rotator.inner-constrain-content .lsc-hero-inner{
  max-width: var(--wp--style--global--content-size, 720px);
  margin-left:auto;
  margin-right:auto;
}
.lsc-hero-rotator.inner-constrain-wide .lsc-hero-inner,
.wp-block-lsc-hero-rotator.inner-constrain-wide .lsc-hero-inner{
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-left:auto;
  margin-right:auto;
}


/* Inner overlay respects child alignment */
.lsc-hero-rotator .lsc-hero-inner > *{
  max-width: var(--wp--style--global--content-size, 720px);
  margin-left:auto;
  margin-right:auto;
}
.lsc-hero-rotator .lsc-hero-inner > .alignwide{
  max-width: var(--wp--style--global--wide-size, 1200px);
}
/* If user picked explicit inner constraint, that wins */
.lsc-hero-rotator.inner-constrain-content .lsc-hero-inner > *{
  max-width: var(--wp--style--global--content-size, 720px);
}
.lsc-hero-rotator.inner-constrain-wide .lsc-hero-inner > *{
  max-width: var(--wp--style--global--wide-size, 1200px);
}