/* =========================================================================
   MCM 2001 — layout.css
   The page frame, the inset hero and the strict two-column project grid.
   Structure only. Anything with a colour or a state lives in components.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Page frame
   The wireframe holds the whole page inside a generous white margin.
   Every top-level section pads itself by --page-margin so sections can be
   full-bleed later without unwinding a wrapper.
   ---------------------------------------------------------------------- */

[data-barba="wrapper"] {
  position: relative;
}

[data-barba="container"] {
  display: block;
}

/* -------------------------------------------------------------------------
   2. Hero
   Full bleed and flush to the top of the viewport, so the fixed header sits
   over the photograph rather than over white.
   ---------------------------------------------------------------------- */

/* The hero runs edge to edge and flush to the top, as the wireframe draws it.
   It is the one section that does not take the page margin, so the photograph
   carries the full width of the viewport and the header sits over it. */
.hero {
  position: relative;
  padding-inline: 0;
  padding-block: 0;
}

.hero__img {
  width: 100%;
  height: clamp(20rem, 58vw, 90svh);
  object-fit: cover;
  object-position: center;
}

/* -------------------------------------------------------------------------
   3. Project grid
   Two equal columns, a plain caption beneath each image, and a deep run of
   white before the footer.
   ---------------------------------------------------------------------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-xl);
  align-items: start;
  padding-inline: var(--page-margin);
  padding-block: var(--space-l) var(--space-3xl);
}

/* -------------------------------------------------------------------------
   4. Footer frame
   Nav and the Accessibility link stack down the left, the MCM lockup and the
   address block sit hard right, matching the wireframe.
   ---------------------------------------------------------------------- */

.site-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
  padding-inline: var(--page-margin);
  /* The bottom padding equals the colophon's own padding-block-start, so the
     credit line sits the same distance below the page edge as it does below
     the rule above it. */
  padding-block: var(--space-xl) var(--space-s);
}

/* Each column flows on its own.

   These used to be four items in a shared two by two grid, which meant grid
   rows, and grid rows are shared across columns. The left column is four nav
   items tall and the right is a lockup, so row one was sized by the nav and the
   address could not start until the nav had finished, stranding it a long way
   under the mark it belongs to. Measured against the wireframe the gap was
   three and a half times too large, and no margin on the address could fix it,
   because the space was the row, not the margin. Two independent columns remove
   the coupling entirely. */
.site-footer__col {
  display: flex;
  flex-direction: column;
}

.site-footer__col--start {
  grid-column: 1;
  align-items: flex-start;
}

.site-footer__col--end {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

/* Both gaps are tuned against the wireframe, measured as a ratio of the footer
   nav's own line pitch so they hold as the fluid type scale resizes. The
   wireframe sits at 1.54 pitches here and 0.90 below the lockup. */
.site-footer__accessibility {
  margin-block-start: calc(var(--space-xl) + var(--space-s));
}

.site-footer__address {
  margin-block-start: var(--space-l);
}

/* The colophon runs the full width beneath both columns, so the rule above it
   reads as a line under the whole footer rather than under one column. */
.site-footer__colophon {
  grid-column: 1 / -1;
  margin-block-start: var(--space-l);
}

/* -------------------------------------------------------------------------
   5. Narrow viewports
   The grid collapses to a single column and the footer unstacks into one
   left-aligned run.
   ---------------------------------------------------------------------- */

@media (max-width: 767px) {
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-l);
  }

  .hero__img {
    height: clamp(18rem, 92vw, 34rem);
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column, so both stacks run left aligned and the second follows the
     first rather than sitting beside it. */
  .site-footer__col--start,
  .site-footer__col--end {
    grid-column: 1;
    align-items: flex-start;
    text-align: left;
  }

  .site-footer__col--end {
    margin-block-start: var(--space-xl);
  }

  .site-footer__colophon {
    margin-block-start: var(--space-l);
  }
}