/* Outer wrapper – géén achtergrond meer hier */
.bth-hero-sep {
  position: relative;
  overflow: visible;
}

/* De “band” draagt de achtergrond en schaalt mee met breedte */
.bth-hero-sep__band {
  position: relative;
  background: var(--bth-hero-bg, transparent);
  max-width: var(--wp--style--global--content-size, 1200px);
  margin-inline: auto;
}

.bth-hero-sep__content{
  position: relative;
  z-index: 10;
}

.bth-hero-sep__inner {
  position: relative; z-index: 1;
  padding-inline: clamp(12px, 2vw, 24px);
  padding-block: clamp(32px, 6vw, 96px);
  max-width: var(--wp--style--global--content-size, 1200px);
  margin: 0 auto;
}

/* === Align via Gutenberg (ancestor of on-element) === */
.wp-block-btheme-hero-sep.alignwide .bth-hero-sep__band,
.bth-hero-sep.alignwide .bth-hero-sep__band {
  max-width: var(--wp--style--global--wide-size, 1980px) !important;
}
.wp-block-btheme-hero-sep.alignfull .bth-hero-sep__band,
.bth-hero-sep.alignfull .bth-hero-sep__band {
  max-width: none !important;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* === Binnenbreedte (onafhankelijk van align) === */
.bth-hero-sep.is-inner-content .bth-hero-sep__band {
  max-width: var(--wp--style--global--content-size, 1200px);
  
}
.bth-hero-sep.is-inner-wide .bth-hero-sep__band {
  max-width: var(--wp--style--global--wide-size, 1980px) !important;
  margin: 0 auto;
}
.bth-hero-sep.is-inner-full .bth-hero-sep__band {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  /* optioneel: inhoud rand-tot-rand */
  /* .bth-hero-sep__inner { padding-inline: 0; } (voeg toe als je dat wilt) */
}

/* Tekst uitlijning */
.bth-hero-sep.is-text-left  .bth-hero-sep__content { text-align: left; }
.bth-hero-sep.is-text-center .bth-hero-sep__content { text-align: center; }
.bth-hero-sep.is-text-right .bth-hero-sep__content { text-align: right; }

/* === Separators – zitten in de band en schalen dus automatisch mee === */
.bth-hero-sep__cap {
  position: relative;
  width: 100%;
  line-height: 0;
  z-index: 10;
}
.bth-hero-sep .bth-hero-sep {
  position: relative; width: 100%; line-height: 0;
}
.bth-hero-sep .bth-hero-sep--top { transform-origin: center; }
.bth-hero-sep .bth-hero-sep--bottom { transform-origin: center; }
.bth-hero-sep .bth-hero-sep.is-flip { transform: scale(-1, -1); }

@media (max-width:768px){
  .bth-hero-sep .bth-hero-sep--top { height: 50px!important; top:-1px; }
  .bth-hero-sep .bth-hero-sep--bottom { height: 50px!important; bottom: -1px;}
}

.bth-hero-sep .bth-hero-sep svg,
.bth-hero-sep .bth-hero-sep img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Safety */
.bth-hero-sep .bth-hero-sep__content > * { min-width: 0; }

.bth-hero-sep__overlay { position:absolute; inset:0; pointer-events:none; z-index:0; background-repeat:no-repeat; background-size:cover; background-position:center; }
.bth-hero-sep__inner { position:relative; z-index:1; }