/**
 * @file
 * Page shell.
 *
 * Two-column tracks reproduce the former 12-column grid widths exactly:
 * a column spanning p% of a row with gutter g is p * (100% + g) - g wide.
 */

.page {
  display: flex;
  flex-direction: column;
  /* The admin toolbar pads the body; keep the footer at the viewport bottom. */
  min-height: calc(100vh - var(--drupal-displace-offset-top, 0px));
}

.page__main {
  flex: 1 0 auto;
  color: var(--imtm-color-text);
  background-color: var(--imtm-color-white);
}

.page__body {
  margin-bottom: var(--imtm-space-5);
}

.page__body--aside {
  margin-top: var(--imtm-space-4);
}

.page__header {
  margin-top: var(--imtm-space-4);
}

.page__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--imtm-gutter);
}

@media (min-width: 768px) {
  .page__columns--side-menu {
    grid-template-columns: calc(25% - var(--imtm-gutter) * 0.75) calc(75% - var(--imtm-gutter) * 0.25);
  }

  .page__columns--aside {
    --page-gutter: 3rem;
    grid-template-columns: calc(75% + var(--page-gutter) * 0.25) calc(25% - var(--page-gutter) * 0.25);
    column-gap: 0;
  }

  .page__content--bordered {
    padding-right: calc(var(--page-gutter) / 2);
    border-right: 1px solid #dee2e6;
  }

  .page__aside {
    padding-left: calc(var(--page-gutter) / 2);
  }
}

@media (min-width: 992px) {
  .page__columns--halves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}