/**
 * Turns the decorators' variables into real properties. Section and block ones
 * are namespaced, since custom properties inherit.
 *
 * @see docs/internals/rendering.md#section-decorators-emit-variables
 */

.cb-section--styled {
    padding-top: var(--cb-s-pad-d-t, 0);
    padding-right: var(--cb-s-pad-d-r, 0);
    padding-bottom: var(--cb-s-pad-d-b, 0);
    padding-left: var(--cb-s-pad-d-l, 0);
    margin-top: var(--cb-s-mar-d-t, 0);
    margin-right: var(--cb-s-mar-d-r, 0);
    margin-bottom: var(--cb-s-mar-d-b, 0);
    margin-left: var(--cb-s-mar-d-l, 0);
    background-color: var(--cb-s-bg, transparent);
    min-height: var(--cb-min-h, auto);
}

/* The image sits over the colour; the veil is a pseudo-element under the
   content, kept there by `isolation`. */
.cb-section--bg-image {
    position: relative;
    isolation: isolate;
    background-image: var(--cb-s-bg-img);
    background-size: var(--cb-s-bg-size, cover);
    background-position: var(--cb-s-bg-pos, center);
    background-repeat: no-repeat;
}
.cb-section--bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--cb-s-overlay-color, #000);
    opacity: var(--cb-s-overlay, 0);
    pointer-events: none;
}

/* One setting, two effects: `align-items` aligns the columns against each
   other, `justify-content` places the row when a min-height leaves room. */
.cb-section--has-valign {
    display: flex;
    flex-direction: column;
    justify-content: var(--cb-valign, flex-start);
}
.cb-section--has-valign > .cb-row {
    align-items: var(--cb-valign, stretch);
}

/* Column gap: the --cb-gap-* vars are set on the section and inherited by
   the row; --cb-slide-gap repeats it for the slider's width maths. */
.cb-section--styled > .cb-row {
    gap: var(--cb-gap-d, 1rem);
    --cb-slide-gap: var(--cb-gap-d, 1rem);
}

/* ----- Tablet (≤ 991px) ----- */
@media (max-width: 991px) {
    .cb-section--styled {
        padding-top: var(--cb-s-pad-t-t, var(--cb-s-pad-d-t, 0));
        padding-right: var(--cb-s-pad-t-r, var(--cb-s-pad-d-r, 0));
        padding-bottom: var(--cb-s-pad-t-b, var(--cb-s-pad-d-b, 0));
        padding-left: var(--cb-s-pad-t-l, var(--cb-s-pad-d-l, 0));
        margin-top: var(--cb-s-mar-t-t, var(--cb-s-mar-d-t, 0));
        margin-right: var(--cb-s-mar-t-r, var(--cb-s-mar-d-r, 0));
        margin-bottom: var(--cb-s-mar-t-b, var(--cb-s-mar-d-b, 0));
        margin-left: var(--cb-s-mar-t-l, var(--cb-s-mar-d-l, 0));
    }
    .cb-section--styled > .cb-row {
        gap: var(--cb-gap-t, var(--cb-gap-d, 1rem));
        --cb-slide-gap: var(--cb-gap-t, var(--cb-gap-d, 1rem));
    }
}

/* ----- Mobile (≤ 575px) ----- */
@media (max-width: 575px) {
    .cb-section--styled {
        padding-top:    var(--cb-s-pad-m-t, var(--cb-s-pad-t-t, var(--cb-s-pad-d-t, 0)));
        padding-right:  var(--cb-s-pad-m-r, var(--cb-s-pad-t-r, var(--cb-s-pad-d-r, 0)));
        padding-bottom: var(--cb-s-pad-m-b, var(--cb-s-pad-t-b, var(--cb-s-pad-d-b, 0)));
        padding-left:   var(--cb-s-pad-m-l, var(--cb-s-pad-t-l, var(--cb-s-pad-d-l, 0)));
        margin-top:    var(--cb-s-mar-m-t, var(--cb-s-mar-t-t, var(--cb-s-mar-d-t, 0)));
        margin-right:  var(--cb-s-mar-m-r, var(--cb-s-mar-t-r, var(--cb-s-mar-d-r, 0)));
        margin-bottom: var(--cb-s-mar-m-b, var(--cb-s-mar-t-b, var(--cb-s-mar-d-b, 0)));
        margin-left:   var(--cb-s-mar-m-l, var(--cb-s-mar-t-l, var(--cb-s-mar-d-l, 0)));
    }
    .cb-section--styled > .cb-row {
        gap: var(--cb-gap-m, var(--cb-gap-t, var(--cb-gap-d, 1rem)));
        --cb-slide-gap: var(--cb-gap-m, var(--cb-gap-t, var(--cb-gap-d, 1rem)));
    }
}

/* ---- Block-side styling (StylingBlockDecorator) ----
   No flex or alignment: layout decisions stay at the section level. */

.cb-block--styled {
    padding-top: var(--cb-b-pad-d-t, 0);
    padding-right: var(--cb-b-pad-d-r, 0);
    padding-bottom: var(--cb-b-pad-d-b, 0);
    padding-left: var(--cb-b-pad-d-l, 0);
    margin-top: var(--cb-b-mar-d-t, 0);
    margin-right: var(--cb-b-mar-d-r, 0);
    margin-bottom: var(--cb-b-mar-d-b, 0);
    margin-left: var(--cb-b-mar-d-l, 0);
    background-color: var(--cb-b-bg, transparent);
    max-width: var(--cb-max-w, none);
    /* Only meaningful with a max-width, since the column is a flex column
       and the block otherwise stretches. */
    align-self: var(--cb-align-self, stretch);
}

/* Classes rather than variables, which a nested block would inherit. */
.cb-block--text-start { text-align: start; }
.cb-block--text-center { text-align: center; }
.cb-block--text-end { text-align: end; }
.cb-block--text-justify { text-align: justify; }

@media (max-width: 991px) {
    .cb-block--styled {
        padding-top: var(--cb-b-pad-t-t, var(--cb-b-pad-d-t, 0));
        padding-right: var(--cb-b-pad-t-r, var(--cb-b-pad-d-r, 0));
        padding-bottom: var(--cb-b-pad-t-b, var(--cb-b-pad-d-b, 0));
        padding-left: var(--cb-b-pad-t-l, var(--cb-b-pad-d-l, 0));
        margin-top: var(--cb-b-mar-t-t, var(--cb-b-mar-d-t, 0));
        margin-right: var(--cb-b-mar-t-r, var(--cb-b-mar-d-r, 0));
        margin-bottom: var(--cb-b-mar-t-b, var(--cb-b-mar-d-b, 0));
        margin-left: var(--cb-b-mar-t-l, var(--cb-b-mar-d-l, 0));
    }
}

@media (max-width: 575px) {
    .cb-block--styled {
        padding-top:    var(--cb-b-pad-m-t, var(--cb-b-pad-t-t, var(--cb-b-pad-d-t, 0)));
        padding-right:  var(--cb-b-pad-m-r, var(--cb-b-pad-t-r, var(--cb-b-pad-d-r, 0)));
        padding-bottom: var(--cb-b-pad-m-b, var(--cb-b-pad-t-b, var(--cb-b-pad-d-b, 0)));
        padding-left:   var(--cb-b-pad-m-l, var(--cb-b-pad-t-l, var(--cb-b-pad-d-l, 0)));
        margin-top:    var(--cb-b-mar-m-t, var(--cb-b-mar-t-t, var(--cb-b-mar-d-t, 0)));
        margin-right:  var(--cb-b-mar-m-r, var(--cb-b-mar-t-r, var(--cb-b-mar-d-r, 0)));
        margin-bottom: var(--cb-b-mar-m-b, var(--cb-b-mar-t-b, var(--cb-b-mar-d-b, 0)));
        margin-left:   var(--cb-b-mar-m-l, var(--cb-b-mar-t-l, var(--cb-b-mar-d-l, 0)));
    }
}