/* ===== Section Builder – Frontend ===== */

/* ── Section wrapper ── */
.sb-section         { width: 100%; display: block; }
.sb-container       { box-sizing: border-box; }

/* ── Layout modes ── */
.sb-layout--boxed .sb-container,
.sb-layout--wide  .sb-container  {
  /* max-width and padding are set inline by the renderer */
  margin-left: auto;
  margin-right: auto;
}
.sb-layout--full-width            { width: 100%; max-width: none !important; }
.sb-layout--full-width .sb-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.sb-layout--full-width .sb-row    { margin: 0; }
.sb-layout--full-width .sb-col    { padding: 0; }

/* ── Grid row ── */
.sb-row  { display: flex; flex-wrap: wrap; }
.sb-col  { box-sizing: border-box; }
.sb-block { margin-bottom: 16px; }

/* ── Desktop widths (default) ── */
.sb-col--1-4    { width: 25%; }
.sb-col--2-4    { width: 50%; }
.sb-col--3-4    { width: 75%; }
.sb-col--4-4    { width: 100%; }
.sb-col--hidden { display: none; }

/* ── Tablet (≤ 992px) ── */
@media (max-width: 992px) {
  .sb-col--md-1-4    { width: 25%; }
  .sb-col--md-2-4    { width: 50%; }
  .sb-col--md-3-4    { width: 75%; }
  .sb-col--md-4-4    { width: 100%; }
  .sb-col--md-hidden { display: none; }
  .sb-col:not([class*="sb-col--md-"]) { width: 100%; }
}

/* ── Mobile (≤ 576px) ── */
@media (max-width: 576px) {
  .sb-col--sm-1-4    { width: 25%; }
  .sb-col--sm-2-4    { width: 50%; }
  .sb-col--sm-3-4    { width: 75%; }
  .sb-col--sm-4-4    { width: 100%; }
  .sb-col--sm-hidden { display: none; }
  .sb-col:not([class*="sb-col--sm-"]) { width: 100%; }
}