/**
 * ContentBlocks — section + block styling (padding/margin/bg/min-height/align).
 *
 * Companion to StylingSectionDecorator / StylingBlockDecorator, which emit CSS
 * custom properties on each `.cb-section--styled` / `.cb-block--styled` element.
 * These rules turn those vars into real properties, with per-viewport overrides
 * via `@media`.
 *
 * IMPORTANT — section vs block vars are namespaced (`--cb-s-*` vs `--cb-b-*`)
 * for the properties both scopes use (padding / margin / background). CSS custom
 * properties inherit, so sharing names would make a block inherit its section's
 * padding/margin/background. Distinct names keep each scope independent.
 * Section-only (min-height, valign, gap, row max-width) and block-only
 * (max-width, align-self) vars are not shared, so they keep their plain names.
 *
 * The fallback chain inside each @media block ensures unset viewports inherit
 * from the next-wider one: mobile → tablet → desktop → 0.
 *
 * Loaded by render/content_area.html.twig at the top of every preview /
 * public render.
 */

.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);
}

/* Vertical alignment. Two complementary effects from one setting:
   1. align-items on the row aligns the COLUMNS relative to each other
      (the common case for multi-column sections — works with no min-height,
      e.g. center a short column against a taller sibling).
   2. justify-content on the section (a flex column) places the row's block
      vertically when a min-height leaves spare room (hero-style centering).
   Default (no valign) keeps columns stretched to equal height. */
.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 inner row. Falls back to the framework default (1rem in layout.css). */
.cb-section--styled > .cb-row {
    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));
    }
}

/* ----- 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)));
    }
}

/* ============================================================
   Block-side styling (StylingBlockDecorator).

   Same fallback chain as sections, but block-namespaced vars
   (--cb-b-*) applied to `.cb-block--styled`, plus max-width.
   Block backgrounds and constraints are deliberately scoped (no
   flex/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);
    /* align-self only takes effect when the block has a constrained
       width (max-width) — the column is a flex column (see layout.css)
       and otherwise the block stretches. The decorator only emits the
       var when both align-self and max-width are set. */
    align-self: var(--cb-align-self, stretch);
}

@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)));
    }
}