/**
 * Adaptive page body: always 3 tracks (left | main | right).
 * Empty side regions keep a gutter; widgets inflate that column.
 * Hero stays full-width above .db-page-body. Grid is on the body
 * wrapper — never on .db-page (chrome/admin must stay full bleed).
 */
:root {
  --db-content-max: var(--max-width, var(--max-width-content, 52rem));
  --db-sidebar-max: 16rem;
  --db-gutter-min: 1.25rem;
  --db-page-gap: 0;
}

.db-page-body {
  display: grid;
  grid-template-columns:
    minmax(var(--db-gutter-min), 1fr)
    minmax(0, var(--db-content-max))
    minmax(var(--db-gutter-min), 1fr);
  column-gap: var(--db-page-gap);
  width: 100%;
  box-sizing: border-box;
  align-items: start;
}

.db-page-body > .region-sidebar-left,
.db-page-body > .region-sidebar-right,
.db-page-body > .region-main {
  min-width: 0;
  box-sizing: border-box;
}

.db-page-body > .region-main {
  width: 100%;
}

/* Side tracks: empty = gutter; filled = content capped toward main */
.db-page-body > .region-sidebar-left,
.db-page-body > .region-sidebar-right {
  max-width: var(--db-sidebar-max);
  width: 100%;
}

.db-page-body > .region-sidebar-left {
  justify-self: end;
}

.db-page-body > .region-sidebar-right {
  justify-self: start;
}

.db-page-body > .region-sidebar-left[data-region-empty="1"],
.db-page-body > .region-sidebar-right[data-region-empty="1"] {
  max-width: none;
  /* Occupy the fr track as pure gutter (no widget chrome). */
  min-height: 0;
}

/* Inside the body grid, the center track is the content band — don't double-center. */
.db-page-body .region-main > section.db-widget.db-content-band {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}

.db-page-body .region-sidebar-left > section.db-widget.db-content-band,
.db-page-body .region-sidebar-right > section.db-widget.db-content-band {
  max-width: none;
  margin-inline: 0;
  width: 100%;
  padding-inline: var(--spacing-sm, 0.75rem);
}

/* Bleed widgets break out of their column to the viewport */
.db-page-body section.db-widget.db-widget--bleed,
.db-page-body section.db-widget.widget--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* Layout mode: empty sides stay droppable */
html.db-layout-active .db-page-body > .region-sidebar-left[data-region-empty="1"],
html.db-layout-active .db-page-body > .region-sidebar-right[data-region-empty="1"] {
  min-height: 3rem;
  outline: 1px dashed rgba(20, 100, 60, 0.35);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .db-page-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .db-page-body > .region-sidebar-left {
    order: 2;
    justify-self: stretch;
    max-width: none;
  }

  .db-page-body > .region-main {
    order: 1;
  }

  .db-page-body > .region-sidebar-right {
    order: 3;
    justify-self: stretch;
    max-width: none;
  }

  .db-page-body > .region-sidebar-left[data-region-empty="1"],
  .db-page-body > .region-sidebar-right[data-region-empty="1"] {
    display: none;
  }

  html.db-layout-active .db-page-body > .region-sidebar-left[data-region-empty="1"],
  html.db-layout-active .db-page-body > .region-sidebar-right[data-region-empty="1"] {
    display: block;
  }
}