
/* Steentijd Tussenblokken – rustige, redactionele vormgeving */
.sttb-between-item{list-style:none!important;width:100%;clear:both;margin:30px 0!important;padding:0!important}
.sttb-between-block{--sttb-image-width:34%;display:flex;gap:28px;align-items:stretch;box-sizing:border-box;width:100%;padding:26px;background:#fff;color:inherit;border:0;border-radius:0;box-shadow:none}
.sttb-between-image{flex:0 0 var(--sttb-image-width);min-width:0;overflow:hidden}
.sttb-between-image img{display:block;width:100%;height:100%;max-height:340px;object-fit:cover}
.sttb-between-content{flex:1;min-width:0;align-self:center;font-size:1em;line-height:1.65}
.sttb-between-content>:first-child{margin-top:0}.sttb-between-content>:last-child{margin-bottom:0}
.sttb-between-content p{margin:0 0 1em}
.sttb-between-action{margin-top:18px!important}
.sttb-between-action a{display:inline-block;padding:9px 16px;background:#fff;color:inherit;text-decoration:none!important;border:1px solid currentColor;border-radius:0;transition:opacity .15s ease}
.sttb-between-action a:hover{opacity:.72}

/* Beeldgroottes */
.sttb-image-small{--sttb-image-width:24%}.sttb-image-medium{--sttb-image-width:34%}.sttb-image-large{--sttb-image-width:44%}

/* Lay-outs */
.sttb-layout-image-right{flex-direction:row-reverse}
.sttb-layout-image-top{display:block}
.sttb-layout-image-top .sttb-between-image{width:100%;margin-bottom:22px}
.sttb-layout-image-top .sttb-between-image img{height:auto;max-height:460px}
.sttb-layout-text-only .sttb-between-image{display:none}

/* Grafische stijlen — allemaal met witte achtergrond */
.sttb-style-classic{border-top:1px solid rgba(0,0,0,.18);border-bottom:1px solid rgba(0,0,0,.18)}
.sttb-style-editorial{border-left:5px solid #6b5a3e;padding-left:30px}
.sttb-style-framed{border:1px solid rgba(0,0,0,.20);padding:30px}
.sttb-style-minimal{padding-left:0;padding-right:0}
.sttb-style-minimal .sttb-between-content{max-width:820px}

@media(max-width:700px){
 .sttb-between-item{margin:22px 0!important}
 .sttb-between-block,.sttb-layout-image-right{display:block;padding:18px;gap:0}
 .sttb-style-minimal{padding-left:0;padding-right:0}
 .sttb-between-image{width:100%;margin:0 0 18px}
 .sttb-between-image img{height:auto;max-height:none}
 .sttb-style-editorial{padding-left:18px}
}


/* v1.3: handmatige beeld- en tekstinstellingen */
.sttb-between-content{font-size:var(--sttb-text-size,16px)}
.sttb-layout-image-top .sttb-between-image{
    width:var(--sttb-manual-image-width,100%);
    max-width:100%;
}
.sttb-layout-image-top.sttb-align-left .sttb-between-image{margin-left:0;margin-right:auto}
.sttb-layout-image-top.sttb-align-center .sttb-between-image{margin-left:auto;margin-right:auto}
.sttb-layout-image-top.sttb-align-right .sttb-between-image{margin-left:auto;margin-right:0}

/* Bij links/rechts bepaalt handmatige breedte de afbeelding binnen de beeldkolom. */
.sttb-layout-image-left .sttb-between-image img,
.sttb-layout-image-right .sttb-between-image img{
    width:var(--sttb-manual-image-width,100%);
}
.sttb-layout-image-left.sttb-align-left .sttb-between-image img,
.sttb-layout-image-right.sttb-align-left .sttb-between-image img{margin-left:0;margin-right:auto}
.sttb-layout-image-left.sttb-align-center .sttb-between-image img,
.sttb-layout-image-right.sttb-align-center .sttb-between-image img{margin-left:auto;margin-right:auto}
.sttb-layout-image-left.sttb-align-right .sttb-between-image img,
.sttb-layout-image-right.sttb-align-right .sttb-between-image img{margin-left:auto;margin-right:0}

@media(max-width:700px){
 .sttb-layout-image-top .sttb-between-image,
 .sttb-layout-image-left .sttb-between-image,
 .sttb-layout-image-right .sttb-between-image{max-width:100%}
}

/* v1.4 typografie */
.sttb-between-content{font-family:var(--sttb-body-font,inherit);font-size:var(--sttb-text-size,16px)}
.sttb-between-heading{
 margin:0 0 .55em!important;padding:0!important;
 font-family:var(--sttb-heading-font,inherit)!important;
 font-size:var(--sttb-heading-size,30px)!important;
 line-height:1.12!important;font-weight:700;
 color:inherit;
}

/* v1.5 – thema-onafhankelijke toepassing van instellingen */
.sttb-between-block.sttb-layout-image-left .sttb-between-image,
.sttb-between-block.sttb-layout-image-right .sttb-between-image{
    flex:0 0 var(--sttb-user-image-width,34%) !important;
    width:var(--sttb-user-image-width,34%) !important;
    max-width:var(--sttb-user-image-width,34%) !important;
}
.sttb-between-block.sttb-layout-image-top .sttb-between-image{
    width:var(--sttb-user-image-width,100%) !important;
    max-width:var(--sttb-user-image-width,100%) !important;
}
.sttb-between-block.sttb-align-left .sttb-between-image{margin-left:0!important;margin-right:auto!important}
.sttb-between-block.sttb-align-center .sttb-between-image{margin-left:auto!important;margin-right:auto!important}
.sttb-between-block.sttb-align-right .sttb-between-image{margin-left:auto!important;margin-right:0!important}

.sttb-between-content,
.sttb-between-content p,
.sttb-between-body,
.sttb-between-body p,
.sttb-between-body a,
.sttb-between-body span{
    font-family:var(--sttb-body-font,inherit)!important;
    font-size:var(--sttb-text-size,16px)!important;
}
.sttb-between-heading,
.sttb-between-content .sttb-between-heading{
    font-family:var(--sttb-heading-font,inherit)!important;
    font-size:var(--sttb-heading-size,30px)!important;
    line-height:1.12!important;
}
@media(max-width:700px){
 .sttb-between-block.sttb-layout-image-left .sttb-between-image,
 .sttb-between-block.sttb-layout-image-right .sttb-between-image{
    width:var(--sttb-user-image-width,100%)!important;
    max-width:100%!important;
 }
}

/* v1.7 HTML + Shortcode */
.sttb-custom-html{width:100%;box-sizing:border-box;margin-top:18px}
.sttb-custom-html:after{content:"";display:table;clear:both}
.sttb-custom-html img{max-width:100%;height:auto}
.sttb-custom-html iframe{max-width:100%}

/* v1.9: HTML en shortcodes boven op de afbeelding */
.sttb-between-image{position:relative;isolation:isolate}
.sttb-image-overlay{position:absolute;z-index:2;max-width:calc(100% - 24px);box-sizing:border-box;overflow-wrap:anywhere}
.sttb-image-overlay img{height:auto!important;max-width:100%!important}
.sttb-overlay-top-left{top:12px;left:12px}.sttb-overlay-top-center{top:12px;left:50%;transform:translateX(-50%)}.sttb-overlay-top-right{top:12px;right:12px}
.sttb-overlay-center{top:50%;left:50%;transform:translate(-50%,-50%)}
.sttb-overlay-bottom-left{bottom:12px;left:12px}.sttb-overlay-bottom-center{bottom:12px;left:50%;transform:translateX(-50%)}.sttb-overlay-bottom-right{bottom:12px;right:12px}
