/* What every site gets from web9: the layout with its top, middle and
   bottom, the left and right columns beside the page, the rows and their
   columns, side by side and stacked on phones, and the editor's empty page
   and rows. A site's look comes from its blocks and its head, which can set
   the --w9- variables below. */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

/* Layout */
.w9-layout {
  display: grid;
  grid-template-areas:
    'top'
    'middle'
    'bottom';
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  font-family: var(--w9-font, system-ui, sans-serif);
}

.w9-layout > .w9-top,
.w9-layout > .w9-middle,
.w9-layout > .w9-bottom {
  display: flex;
  justify-content: center;
}

.w9-layout > .w9-top {
  grid-area: top;
  position: var(--w9-top-position, static);
  top: 0;
  left: 0;
  right: 0;
  height: var(--w9-top-height, auto);
}

.w9-layout > .w9-middle {
  grid-area: middle;
  margin-top: var(--w9-top-height, 0);
}

.w9-layout > .w9-bottom {
  grid-area: bottom;
}

/* Inner */
.w9-layout > .w9-top > .w9-inner,
.w9-layout > .w9-middle > .w9-inner,
.w9-layout > .w9-bottom > .w9-inner {
  width: 100%;
}

.w9-layout > .w9-top > .w9-inner {
  max-width: var(--w9-top-max-width, var(--w9-layout-max-width, 100%));
}

.w9-layout > .w9-middle > .w9-inner {
  display: grid;
  max-width: var(--w9-middle-max-width, var(--w9-layout-max-width, 100%));
}

.w9-layout > .w9-bottom > .w9-inner {
  max-width: var(--w9-bottom-max-width, var(--w9-layout-max-width, 100%));
}

/* Columns */
.w9-layout > .w9-middle > .w9-inner {
  grid-template-columns: 1fr;
}

.w9-layout > .w9-middle > .w9-inner:where(:has(> .w9-left:not(:empty))) {
  grid-template-columns: var(--w9-column-width, 280px) 1fr;
}

.w9-layout > .w9-middle > .w9-inner:where(:has(> .w9-right:not(:empty))) {
  grid-template-columns: 1fr var(--w9-column-width, 280px);
}

.w9-layout > .w9-middle > .w9-inner:where(
    :has(> .w9-left:not(:empty)):has(> .w9-right:not(:empty))
  ) {
  grid-template-columns:
    var(--w9-column-width, 280px) 1fr
    var(--w9-column-width, 280px);
}

/* Prevent center stretch */
.w9-layout > .w9-middle > .w9-inner > * {
  min-width: 0;
  min-height: 0;
}

/* Hide empty slots and columns */
.w9-layout > .w9-middle > .w9-inner > *:empty:not(:has(*)) {
  display: none;
}

/* Contain child margins and keep center at the top */
.w9-layout > .w9-middle > .w9-inner > .w9-center {
  display: grid;
  align-content: start;
}

/* Row is balanced and full width by default */
.w9-layout > .w9-middle > .w9-inner > .w9-center > .w9-row {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

/* Rows */
.w9-row-inner {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: auto;
  padding: 0 32px;
}
.w9-block {
  flex: 1;
  min-width: 0;
}

/* Editor */
.w9-empty {
  text-align: center;
  padding: 150px 30px;
  color: #89818e;
}
.w9-empty p {
  margin: 0;
  font-size: 14px;
}
.w9-empty-row {
  width: 100%;
  text-align: center;
  padding: 45px 20px;
  color: #a29ba9;
  border: 1px dashed #e7e2ec;
  margin: 20px 0;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 992px) {
  .w9-layout > .w9-middle > .w9-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .w9-layout > .w9-middle > .w9-inner > .w9-left {
    grid-row: 1;
  }

  .w9-layout > .w9-middle > .w9-inner > .w9-center {
    grid-row: 2;
  }

  .w9-layout > .w9-middle > .w9-inner > .w9-right {
    grid-row: 3;
  }
}
@media (max-width: 640px) {
  .w9-row-inner {
    flex-direction: column;
    padding: 0 20px;
  }
  .w9-empty {
    padding-top: 100px;
  }
}