/* ==========================================================================
   Layout – page container, 12 column grid, section rhythm, surfaces
   ========================================================================== */

/* -------------------------------------------------------------- container */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--container-gutter));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* ------------------------------------------------------------------- grid */

/*
  One column by default. The 12 column canvas of the approved design is only
  applied from the lg breakpoint up, so intermediate viewports never inherit
  desktop column maths.
*/
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  }
}

.grid--align-end {
  align-items: end;
}

.grid--align-start {
  align-items: start;
}

.grid--align-center {
  align-items: center;
}

/* Column helpers – they only take effect on the 12 column canvas. */
.col-full {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .col-1-5 { grid-column: 1 / 5; }
  .col-1-6 { grid-column: 1 / 6; }
  .col-1-7 { grid-column: 1 / 7; }
  .col-1-8 { grid-column: 1 / 8; }
  .col-1-9 { grid-column: 1 / 9; }
  .col-5-13 { grid-column: 5 / 13; }
  .col-6-13 { grid-column: 6 / 13; }
  .col-7-13 { grid-column: 7 / 13; }
  .col-8-13 { grid-column: 8 / 13; }
  .col-9-13 { grid-column: 9 / 13; }
}

/* --------------------------------------------------------------- sections */

.section {
  padding-block: var(--section-padding-block);
}

.section--tight {
  padding-block: var(--section-padding-block-sm);
}

.section--flush-top {
  padding-block-start: 0;
}

/* Surfaces – the light/dark rhythm of the approved page */
.surface-base {
  background-color: var(--color-surface);
}

.surface-warm {
  background-color: var(--color-surface-warm);
}

.surface-cool {
  background-color: var(--color-surface-cool);
}

.surface-ink {
  background-color: var(--color-ink);
  color: var(--color-text-on-ink-muted);
}

.surface-ink-raised {
  background-color: var(--color-ink-raised);
  color: var(--color-text-on-ink-muted);
}

.surface-ink h1,
.surface-ink h2,
.surface-ink h3,
.surface-ink-raised h1,
.surface-ink-raised h2,
.surface-ink-raised h3 {
  color: var(--color-text-on-ink);
}

/* ------------------------------------------------------------ page shell */

.page-main {
  display: block;
}

/* The skip link moves focus into the landmark, which only accepts it because
   <main> carries tabindex="-1". That focus is programmatic, never reached by
   tabbing, so the whole page must not draw a focus ring around itself. The
   controls inside keep their own :focus-visible outline. */
.page-main:focus {
  outline: none;
}