/* Background image behind header + bodytext of a content element.
   Layers (inside .ce-textbg, isolated stacking context):
   ::before = image (with opacity), ::after = optional colour overlay, then the text. */
.ce-textbg {
    position: relative;
    isolation: isolate;
    display: flow-root; /* own block formatting context: does not slide under floated gallery images */
    padding: var(--ce-textbg-padding, 1.5rem);
}

.ce-textbg::before,
.ce-textbg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ce-textbg::before {
    z-index: -2;
    background-image: var(--ce-textbg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: var(--ce-textbg-opacity, 0.3);
}

@media (max-width: 767px) {
    .ce-textbg::before {
        background-image: var(--ce-textbg-sm, var(--ce-textbg));
    }
}

.ce-textbg::after { z-index: -1; }

/* Opacity of the image */
.ce-textbg--opacity-100 { --ce-textbg-opacity: 1; }
.ce-textbg--opacity-75  { --ce-textbg-opacity: 0.75; }
.ce-textbg--opacity-50  { --ce-textbg-opacity: 0.5; }
.ce-textbg--opacity-35  { --ce-textbg-opacity: 0.35; }
.ce-textbg--opacity-20  { --ce-textbg-opacity: 0.2; }

/* Size */
.ce-textbg--size-contain::before { background-size: contain; }
.ce-textbg--size-repeat::before  { background-size: auto; background-repeat: repeat; }

/* Position */
.ce-textbg--pos-top::before    { background-position: center top; }
.ce-textbg--pos-bottom::before { background-position: center bottom; }
.ce-textbg--pos-left::before   { background-position: left center; }
.ce-textbg--pos-right::before  { background-position: right center; }

/* Colour overlay for extra readability */
.ce-textbg--overlay-light::after { background: rgba(255, 255, 255, 0.75); }
.ce-textbg--overlay-dark::after  { background: rgba(0, 0, 0, 0.55); }
.ce-textbg--overlay-dark,
.ce-textbg--overlay-dark a { color: #fff; }

.ce-textbg__inner > :last-child { margin-bottom: 0; }