/* ===============================
   EBC Page Builder — Frontend
================================ */

.ebc-row,
.ebc-column,
.ebc-image {
    box-sizing: border-box;
}

.ebc-row {
    width: 100%;
}

/* ---- default content rhythm inside a column -------------------------
   Every rule in this block is wrapped in :where(), which contributes ZERO
   specificity. That is deliberate and load-bearing: these are DEFAULTS the
   author must be able to override. Each element's own scoped <style> emits
   `.ebc-<uid>{margin:…}` at specificity (0,1,0), so any value typed into a
   Margin field — including 0 — beats everything here. Written as plain
   selectors, the resets below would score (0,1,1) and (0,2,0) and silently
   swallow the author's top margin instead. Within the block, ordering does
   the work: all four selectors tie at (0,0,0), so the later resets win over
   the rhythm rule above them. */

:where(.ebc-column > * + *) {
    margin-top: 0.75em;
}

/* The rule above should space CONTENT elements — but the column's own
   <style> tag and the overlay link of a linked column are element siblings
   too, so without these resets they count as "the previous element" and the
   FIRST real element inherits a phantom 0.75em top margin. Neutralise the
   element that follows either utility sibling so the rhythm only ever
   applies between two pieces of actual content. (The column's <style> is
   always its first child; per-element <style> tags live inside each
   element's own wrapper, so they never trigger the rhythm rule here.) */
:where(.ebc-column > style + *),
:where(.ebc-column > .ebc-cell-link + *),

/* …and a nested ROW manages its own spacing (its gap, padding and margin),
   so it does NOT take the column's content-rhythm margin either. Without
   this, a row stacked beneath another element — or a second row in the same
   column — picks up an unwanted 0.75em gap above it, which is most obvious
   once its columns stack. Add deliberate space between stacked rows via the
   row's own Margin field, which now wins (see the :where() note above). */
:where(.ebc-column > .ebc-row) {
    margin-top: 0;
}

.ebc-image__img {
    height: auto;
}

/* ===============================
   ROW WIDTH MODES
   (stretch: default | full | full_bg)
================================ */

/* Full-width background wrapper: the band that breaks out to the screen
   edges. The per-row scoped <style> sets the 100vw breakout and any
   background; this base rule just guards against horizontal overflow and
   ensures predictable box sizing. */
.ebc-row--full-bg {
    box-sizing: border-box;
}

/* The inner container that holds the columns for a full-bg row. Width/max-width
   and centring are emitted per-row in the scoped style; this keeps the flex
   children behaving like any other row. */
.ebc-row__container {
    box-sizing: border-box;
    width: 100%;
}

/* Full-width (row + content) rows: nothing extra needed here — the scoped
   style applies the breakout — but we keep the box model predictable. */
.ebc-row--full {
    box-sizing: border-box;
}