/* noAarchitecten - homepage: one full-bleed picture behind, news over it
   ---------------------------------------------------------------------------
   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.

   Pairs with homepage.js, which advances the pictures one at a time. Without
   that script the page still works - it simply keeps app.js's own pairing.

   To switch the whole thing off, remove the two lines that load these files.
   --------------------------------------------------------------------------- */

:root{
  /* The veil behind the news. Raise the last number towards 1 for a flatter,
     more legible panel; lower it to let more of the photograph through. */
  --noaa-veil: rgba(255, 226, 84, .78);

  /* How much photograph is left uncovered on a phone before the news begins. */
  --noaa-phone-reveal: 42vh;
}

/* ---- the slideshow fills the window and sits behind everything ----------- */

body.home main{
  padding:0;
  margin-left:0;
}

body.home .split-presentation{
  position:fixed;
  inset:0;
  height:auto;
  margin:0;
  z-index:0;
}

/* One picture at a time, edge to edge. app.css lays these out as a 60/40 pair
   inside a panel; :nth-child(n) matches its specificity so this wins on order,
   and homepage.js drives .is-solo in place of its .is-active. */
body.home .split-presentation .slideshow figure:nth-child(n){
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:auto;
  height:auto;
  opacity:0;
  transition:opacity 1s linear;
  /* app.js sets a 2s delay inline on every second figure, for the staggered
     pair. There is no pair any more, so it has to go. */
  transition-delay:0s !important;
}
body.home .split-presentation .slideshow figure.is-solo{
  opacity:1;
}

body.home .split-presentation .slideshow figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center !important;
}

/* ---- the reading column, over it ---------------------------------------- */

body.home #main-header,
body.home .sidebar.news{
  z-index:2;
  background:var(--noaa-veil);
}

@media screen and (min-width: 1024px){
  body.home #main-header,
  body.home .sidebar.news{
    position:absolute;
    left:0;
    width:var(--sidebarwidth);
  }
  body.home #main-header{top:0}

  /* runs to the foot of the window even when the news is short, so the veil
     reads as a column rather than a label */
  body.home .sidebar.news{
    top:var(--headerheight);
    padding-bottom:var(--offsetblockmargin);
    min-height:calc(100vh - var(--headerheight));
  }
}

/* ---- phones and tablets -------------------------------------------------
   The picture is the point, so it is not buried. Below the sidebar breakpoint
   the wordmark sits on the veil at the top, then a full band of photograph,
   and the news rises over it as you scroll. */

@media screen and (max-width: 1023px){
  body.home .split-presentation{
    position:fixed;
    inset:0;
    height:auto;
  }

  body.home #main-header{
    position:relative;
    z-index:2;
  }

  body.home .sidebar.news{
    position:relative;
    z-index:2;
    margin-top:var(--noaa-phone-reveal);
    padding:var(--blockmargin);
    min-height:100vh;
  }
}