/* =========================================================================
   layout.css - LAYER 3 of 4: layout primitives
   -------------------------------------------------------------------------
   Composition only: how things are arranged, never how they look. No colour
   beyond section surfaces, no typography, no component styling.

   Before adding a new grid or flex rule to a component, check whether one of
   these primitives already does it. That is the difference between a design
   system and a stylesheet.

   Contents
     1. Section
     2. Grid
     3. Stack and cluster
     4. Split
     5. Document layout
     6. Page header and footer shells
     7. Responsive
     8. Print
   ========================================================================= */

/* ============================= 1. SECTION ============================== */

/* Section rhythm comes from --section-space, which steps at the breakpoints
   in part 7. A section never writes its own padding value. */
.section { padding-block: var(--section-space); }
.section--tight { padding-block: var(--space-8); }

/* Surface variants. Anything painted inverse also carries .on-inverse so the
   focus ring and text helpers invert with it. */
.section--inverse {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}
.section--accent {
  background: var(--color-accent-wash);
  border-block: var(--hairline);
}
.section--sunken { background: var(--color-surface-sunken); }

.section__head { max-width: var(--measure); margin-bottom: var(--section-head-space); }
.section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
}



/* ============================== 2. GRID =============================== */

/* One grid primitive. Column counts are applied at breakpoints below, so a
   component never writes its own grid-template-columns. */
.grid { display: grid; gap: var(--space-5); }
.grid--wide  { gap: var(--space-6); }
.grid--tight { gap: var(--space-4); }


/* ========================= 3. STACK AND CLUSTER ======================== */

/* Vertical rhythm without margins on children. */
.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }

/* Horizontal group that wraps. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}


/* ============================== 4. SPLIT ============================== */

/* Main content beside a supporting aside. */
.split { display: grid; gap: var(--space-7); }

/* .split--late waits for 64rem instead of going two-column at 48rem. For
   prose beside a list, 48rem is right. For prose beside a diagram it is not:
   at that width the aside is about 330px, and a diagram drawn in a 480-unit
   viewBox has labels under eight pixels there. Both column counts are declared
   in part 7 with every other column count. */


/* ========================= 5. DOCUMENT LAYOUT ========================== */

/* Long-form page with a sibling navigation column. */
.doc-layout {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-9);
}
.doc-layout--single { max-width: var(--wrap-narrow); }

.doc { min-width: 0; }
.doc > section { margin-bottom: var(--space-8); }
.doc > section:last-child { margin-bottom: 0; }


/* ==================== 6. PAGE HEADER AND FOOTER SHELLS ================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface-default);
  border-bottom: var(--hairline);
}
.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.page-head {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}
.page-head__inner {
  max-width: var(--measure);
  padding-block: var(--space-9) var(--space-8);
}
.page-head--compact .page-head__inner { padding-block: var(--space-7) var(--space-8); }

.hero { background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.hero__inner { padding-block: var(--space-9); }

.site-footer {
  padding-block: var(--space-9);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse-muted);
  border-top: var(--border-width-accent) solid var(--color-accent);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
  border-bottom: var(--hairline-inverse);
}
.site-footer__base {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-6);
}

/* Catalogue: filter sidebar beside results. */
.catalogue__layout { display: grid; gap: var(--space-7); }
.results { min-width: 0; }


/* ============================ 7. RESPONSIVE ============================ */

@media (min-width: 48rem) {
  :root {
    --wrap-gutter:        var(--space-6);
    --section-space:      var(--space-9);
    --section-head-space: var(--space-7);
    --card-padding:       var(--space-6);
  }

  .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-5);
  }

  .hero__inner { padding-block: var(--space-10); }

  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
  /* After .split, not before it: same specificity, so this only holds the
     single column because it is declared later. */
  .split--late { grid-template-columns: minmax(0, 1fr); }

  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__base { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (min-width: 64rem) {
  :root {
    --wrap-gutter:        var(--space-7);
    --section-space:      var(--space-10);
    --section-head-space: var(--space-8);
  }

  .split--late { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

  .hero__inner { padding-block: var(--space-12) var(--space-10); }

  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .split--reverse .split__main  { order: 2; }
  .split--reverse .split__aside { order: 1; }

  .doc-layout {
    grid-template-columns: var(--sidenav-width) minmax(0, 1fr);
    gap: var(--space-9);
  }
  .doc-layout--single { grid-template-columns: minmax(0, 1fr); }

  .catalogue__layout {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: var(--space-8);
  }

  /* Positioning statement, then contact, then three link columns. Contact is
     given the same weight as a navigation column because it is the only
     route on the site that currently reaches anyone. */
  .site-footer__grid { grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr; gap: var(--space-6); }
}

@media (min-width: 80rem) {
  :root {
    /* Past the two-row navigation band, so the header is 96px again. */
    --scroll-offset: 6.5rem;
  }

  .grid--3-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ============================== 8. PRINT ============================== */

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  /* .alert--banner is the prototype notice. This rule previously named
     .alert--preview, a class that exists nowhere, so "Internal prototype -
     not published" printed at the top of every page anyone saved as a PDF.
     Nothing caught it, because the design-system validator checked that
     every class in the markup exists in the CSS and never asked the reverse
     question. It does now. */
  .alert--banner,
  .nav-toggle,
  .nav,
  .toolbar,
  .filters-column,
  .sidenav__actions,
  .card__actions,
  .section__actions,
  .form { display: none !important; }

  body {
    background: var(--color-print-paper);
    color: var(--color-print-ink);
    font-size: var(--text-print);
  }
  .section--inverse,
  .page-head,
  .hero,
  .cta {
    background: var(--color-print-paper);
    color: var(--color-print-ink);
  }
  .on-inverse h1,
  .on-inverse h2,
  .on-inverse h3,
  .on-inverse h4 { color: var(--color-print-ink); }
  .doc-layout,
  .catalogue__layout,
  .split { display: block; }
  .card {
    break-inside: avoid;
    border: var(--border-width) solid var(--color-print-rule);
  }
}