/* ==========================================================================
   layout.css — containers, sections and editorial composition primitives
   Composition is asymmetric by default. Resist the urge to reduce a page to
   repeated equal-width columns.
   ========================================================================== */

/* --- Container ------------------------------------------------------------ */

.container {
  inline-size: 100%;
  max-inline-size: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-inline-size: var(--container-narrow);
}

.container--reading {
  max-inline-size: calc(var(--reading-width) + (var(--gutter) * 2));
}

.container--flush {
  max-inline-size: none;
  padding-inline: 0;
}

/* --- Section -------------------------------------------------------------- */

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

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

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

.section--flush-bottom {
  padding-block-end: 0;
}

.section--alt {
  background-color: var(--colour-background-alt);
}

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

.section--ruled {
  border-block-start: var(--rule-width) solid var(--colour-border);
}

/*
  Section header: title on the left, supporting copy offset to the right.
  This asymmetry is a defining characteristic of the design system.
*/
.section__header {
  display: grid;
  gap: var(--space-lg) var(--grid-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
}

.section__header > * {
  min-inline-size: 0;
}

.section__title {
  max-inline-size: 18ch;
}

.section__intro {
  max-inline-size: 46ch;
  color: var(--colour-text-muted);
}

.section__aside {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
}

/* --- Grid ----------------------------------------------------------------- */
/*
  Mobile-first: every grid is a single column until responsive.css widens it.
  All breakpoint logic lives in responsive.css — do not add media queries here.
*/

.grid {
  display: grid;
  gap: var(--grid-gap);
}

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

.grid--tight {
  gap: var(--space-md);
}

/*
  Rows separated by a hairline rule rather than by whitespace alone. The rule is
  carried by each item's leading edge, so the first row must opt out — at this
  width the grid is a single column, so that is the first child. The multi-column
  cases are handled in responsive.css.
*/
.grid--rows-ruled {
  gap: var(--space-lg) var(--grid-gap);
}

.grid--rows-ruled > * {
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.grid--rows-ruled > :first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

/* --- Editorial grid ------------------------------------------------------- */
/*
  An intentionally uneven, rule-separated grid. Used for services, solutions
  and industries in place of a generic card grid.
*/
.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.editorial-grid > * {
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-block-end: var(--rule-width) solid var(--colour-border);
}

/* --- Split section -------------------------------------------------------- */
/*
  Two-part composition with a deliberate imbalance between media and text.
  Add .split--reverse on alternating sections to keep rhythm across a page.
*/
.split {
  display: grid;
  gap: var(--grid-gap);
  align-items: center;
}

.split__media {
  position: relative;
  min-inline-size: 0;
}

.split__content {
  min-inline-size: 0;
  max-inline-size: 48ch;
}

.split--top {
  align-items: start;
}

.split--baseline {
  align-items: end;
}

/* --- Full-bleed ----------------------------------------------------------- */

.bleed {
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* --- Stacks and clusters -------------------------------------------------- */

.stack > * + * {
  margin-block-start: var(--space-md);
}

.stack--sm > * + * {
  margin-block-start: var(--space-2xs);
}

.stack--lg > * + * {
  margin-block-start: var(--space-lg);
}

.stack--xl > * + * {
  margin-block-start: var(--space-xl);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.cluster--between {
  justify-content: space-between;
}

.cluster--tight {
  gap: var(--space-2xs);
}

/* --- Ruled list ----------------------------------------------------------- */

.ruled-list {
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.ruled-list > * {
  padding-block: clamp(0.875rem, 1.4vw, 1.25rem);
  border-block-end: var(--rule-width) solid var(--colour-border);
}

/* --- Sticky rail ---------------------------------------------------------- */

.sticky-rail {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-lg));
  align-self: start;
}

/* --- Aspect ratios -------------------------------------------------------- */

.ratio-portrait { aspect-ratio: 4 / 5; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-landscape { aspect-ratio: 3 / 2; }
.ratio-wide { aspect-ratio: 16 / 9; }
.ratio-panorama { aspect-ratio: 21 / 9; }