/*
  The homepage, `/`. Every rule is scoped under .homepage-page
  so it cannot leak into the shared header, nav or footer this stylesheet also
  loads on.
*/

/* The two content columns are capped at 440px by core and share the row 50/50,
   but the row itself is content-sized (flex: 0 1 auto), so it shrinks to fit
   whatever the columns hold. Growing the row puts both columns on their cap;
   the max-width stops it claiming more than the two capped columns and core's
   own 32px gap can use. Only above 640px, where the row is a row — stacked,
   growing it just widens the box around the columns. Same fix as events.css. */
@media (min-width: 640px) {
  .homepage-page .dg-layout-default__rhs {
    flex-grow: 1;
    max-width: calc(440px * 2 + 32px);
  }
}

/* The account button above the sidebar (Open Dashboard when signed in, Log in
   when signed out) — one base spacing unit (UIUXRULES: x1 = 16px) between it
   and the sidebar panel. */
.homepage-page .dg-layout-default__lhs > .dg-component-button {
  margin-bottom: 1rem;
}

/* Column split. The markup is in the medium-up order: feature boxes and
   scrollers in the left column, link boxes in the right. Each
   .homepage-group is a run of boxes that sat together in the page's original
   single stack, numbered in that stack's order.

   Medium up, the groups are display: contents, so their boxes are the
   columns' own flex items and keep core's 16px __content gap.

   Small, the columns are display: contents instead. The groups become flex
   items of __rhs, and `order` puts them back in the original stack. Each
   group carries the 16px gap and 440px cap its column used to. Group 6 has an
   extra 16px above it (32px in all), the break the original stack had at
   that point. */
.homepage-page .homepage-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 440px;
}
.homepage-page .homepage-group--1 { order: 1; }
.homepage-page .homepage-group--2 { order: 2; }
.homepage-page .homepage-group--3 { order: 3; }
.homepage-page .homepage-group--4 { order: 4; }
.homepage-page .homepage-group--5 { order: 5; }
.homepage-page .homepage-group--6 { order: 6; margin-top: 1rem; }
.homepage-page .homepage-group--7 { order: 7; }
.homepage-page .homepage-group--8 { order: 8; }

@media (max-width: 639.98px) {
  .homepage-page .dg-layout-default__rhs {
    gap: 1rem;
  }
  .homepage-page .dg-layout-default__rhs > .dg-layout-default__content {
    display: contents;
  }
}

@media (min-width: 640px) {
  .homepage-page .homepage-group {
    display: contents;
  }
}