/* ==============================================================================
   PAGE LAYOUT
   ============================================================================== */

/* One column of blocks, centred and capped at a reading-friendly width, as
   a three-track grid: the middle track is that column, and the two outer
   ones are the gutters, never narrower than --page-gutter. A block that
   must run edge to edge (the full-screen slideshow, ADR-035) spans all
   three with grid-column: full instead of fighting the cap with negative
   margins or 100vw, which counts the scrollbar and overflows by its width.
   The gap between blocks lives here, once, instead of on every block's
   own margin, so a new block type never has to remember to add it. */
.page {
  --page-gutter: var(--spacing-lg);
  /* The content column on its own, so a page that needs it in two parts
     (the contact page, 03-components/contact.css) redefines only this and
     never repeats the gutters. Whatever replaces it must keep the
     content-start and content-end lines and the same total width, or the
     blocks stop lining up with the header and the footer. */
  --page-content-tracks: [content-start] minmax(0, var(--content-max-width)) [content-end];

  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-gutter), 1fr)
    var(--page-content-tracks)
    minmax(var(--page-gutter), 1fr) [full-end];
  align-content: start;
  row-gap: var(--spacing-xl);
  padding-block: var(--spacing-xl);
}

/* The footer sits at the bottom of the window on a page shorter than it
   (the CV at 1440 px left a band of empty page under the footer): body
   already measures at least the window's height (main.css), and as a
   column the page takes whatever the header and the footer leave. The
   selector only matches the public layout, so the admin's own shell,
   which shares main.css, keeps its layout. */
body:has(> .page) {
  display: flex;
  flex-direction: column;
}

body > .page {
  flex-grow: 1;
}

/* min-width: 0 lets a block with a long word or a wide image shrink with
   the track instead of pushing the page sideways. */
.page > * {
  grid-column: content;
  min-width: 0;
}

.page > .block-slideshow--fullscreen {
  grid-column: full;
}

/* A full-screen slideshow that opens the page sits right under the
   header, with no band of page background above it. The visually hidden
   h1 page.html renders first is absolutely positioned, so it takes no
   grid row and the slideshow is still the first thing on screen. */
.page > .block-slideshow--fullscreen:first-child,
.page > .visually-hidden:first-child + .block-slideshow--fullscreen {
  margin-block-start: calc(var(--spacing-xl) * -1);
}

@media (max-width: 480px) {
  .page {
    --page-gutter: var(--spacing-md);

    padding-block: var(--spacing-lg);
  }

  .page > .block-slideshow--fullscreen:first-child,
  .page > .visually-hidden:first-child + .block-slideshow--fullscreen {
    margin-block-start: calc(var(--spacing-lg) * -1);
  }
}