/**
 * Page-builder base layout — always loaded on any page that uses builder
 * widgets. Holds only the shared width/spacing scaffolding; the heavy visual
 * base (.container, .section, .panel, buttons, typography) comes from the
 * theme's global style.css.
 *
 * Width model: every direct child of .page-content is centered and constrained
 * to the container width, EXCEPT a full-width space wrapper, which breaks out to
 * the full viewport so its background can go edge-to-edge.
 *
 * The full-bleed breakout uses the viewport technique (width:100vw + negative
 * inline margins) instead of a `.page-content > *` override, so it works no
 * matter how deeply wpautop nests the block (e.g. inside a <p>). `overflow-x:
 * clip` on the root swallows the scrollbar-width overflow that 100vw can add,
 * without breaking sticky positioning the way `hidden` would.
 */

/* flow-root establishes a block formatting context so a first/last block's
   top/bottom margin (the .mt-*/.mb-* spacing utilities on bare widgets like the
   breadcrumb) doesn't collapse THROUGH .page-content and vanish. It does not
   clip, so the full-bleed .is-full breakout still works. */
.page-content {
  display: flow-root;
}

.page-content > * {
  max-width: var(--container);
  margin-inline: auto;
  box-sizing: border-box;
}

.directory-sc-space {
  box-sizing: border-box;
}

/* Full-bleed band — nesting-independent breakout to the viewport width. */
.directory-sc-space.is-full {
  max-width: none;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

html {
  overflow-x: clip;
}

/* A full-bleed section re-centers its own body inside .container. */
.directory-sc-space.is-full > .directory-sc.is-full > .container {
  width: var(--container);
  margin-inline: auto;
}

.directory-sc {
  position: relative;
}

/* ------------------------------------------------------------------ */
/* Spacing utilities (4px scale; 70/100 and negatives are literal px). */
/* Applied to the .directory-sc-space wrapper by apply_spacing().      */
/* ------------------------------------------------------------------ */

.mt-0   { margin-top: 0 !important; }
.mt-2   { margin-top: 8px; }
.mt-4   { margin-top: 16px; }
.mt-6   { margin-top: 24px; }
.mt-8   { margin-top: 32px; }
.mt-12  { margin-top: 48px; }
.mt-70  { margin-top: 70px; }
.mt-100 { margin-top: 100px; }
.mt-n42 { margin-top: -42px; }
.mt-n62 { margin-top: -62px; }

.mb-0   { margin-bottom: 0 !important; }
.mb-2   { margin-bottom: 8px; }
.mb-4   { margin-bottom: 16px; }
.mb-6   { margin-bottom: 24px; }
.mb-8   { margin-bottom: 32px; }
.mb-12  { margin-bottom: 48px; }
.mb-70  { margin-bottom: 70px; }
.mb-100 { margin-bottom: 100px; }

.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }