/* noAarchitecten - work index: keep the top arrangement at every width
   ---------------------------------------------------------------------------
   At 1024px and up, app.css moves the wordmark, the search field and the tags
   into a narrow column down the left and pushes the project grid beside it.
   Below 1024px it lays all three across the top instead, which is the
   arrangement this file keeps at every width.

   Scoped to body.projects.list, so the homepage, the project pages and the
   info pages are untouched.

   An override on top of app.css, loaded after it. Nothing here is compiled, so
   it can go up over FTP; the proper home for these rules is app.less, whenever
   the site is next built.

   To switch it off, remove the <link> that loads this file.
   --------------------------------------------------------------------------- */

@media screen and (min-width: 1024px){

  /* Back into the flow, full width, its own height - app.css pins it to the
     top left at var(--sidebarwidth) wide and var(--headerheight) tall. */
  body.projects.list #main-header{
    position:static;
    width:auto;
    height:auto;
    padding:var(--offsetblockmargin);
    padding-bottom:0;
  }

  /* wordmark left, work / info right, the way it sits on a narrow window */
  body.projects.list #main-header .nav-bar{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    width:100%;
  }

  /* no column to leave room for any more */
  body.projects.list main{
    margin-left:0;
    padding:var(--offsetblockmargin);
    padding-top:var(--blockmargin);
  }

  /* the filters are a .sidebar too, and get pinned by the same rule */
  body.projects.list .sidebar.project-filters{
    position:static;
    width:auto;
    padding:0;
  }

  /* app.css stacks the tags into one column for the narrow rail. Across the
     full width they read better in columns of their own: column-width lets the
     browser fit as many as there is room for, three on a small laptop, six on
     a wide screen, rather than a fixed count that breaks at some size. */
  body.projects.list .project-filters .tags ul{
    column-count:auto;
    column-width:14rem;
  }

  /* the grid sat flush with the top of the rail; now it follows the tags */
  body.projects.list .project-overview{
    margin-top:var(--offsetblockmargin);
  }
}