/* ==========================================================================
   Layout primitives — 07 §6
   Container, Section, Stack, Cluster, Grid, Split, Divider.
   These are tools, not a look. They must not impose one rhythm on every page.
   ========================================================================== */

/* --- Container — 07 §6.1 --------------------------------------------------
   Never nest two containers that both apply side padding. */

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

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

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

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

/* `full` removes the width cap but keeps inner padding, so text never touches
   the viewport edge (07 §6.1). */
.container--full {
  max-width: none;
}

/* --- Section — 07 §6.2 ---------------------------------------------------- */

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

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

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

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

/* Tones. Used sparingly — do not alternate light/dark automatically (03 §7.8). */

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

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

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

.surface-dark .h-display,
.surface-dark .h-1,
.surface-dark .h-2,
.surface-dark .h-3,
.surface-dark .h-4,
.surface-dark h1,
.surface-dark h2,
.surface-dark h3,
.surface-dark h4 {
  color: var(--text-on-dark);
}

.surface-dark .text-muted,
.surface-dark .lead,
.surface-dark .eyebrow,
.surface-dark figcaption,
.surface-dark dt {
  color: var(--text-on-dark-muted);
}

/* Editorial links on a dark surface only. Buttons are excluded on purpose:
   `.surface-dark a` (0,1,1) outranks `.btn--inverse` (0,1,0), so without the
   :not() an inverse button on a dark section would render light text on its
   own light background and the label would disappear. */
.surface-dark a:not(.btn) {
  color: var(--text-on-dark);
}

.surface-dark hr {
  border-top-color: var(--border-on-dark);
}

/* --- Stack — 07 §6.3 ------------------------------------------------------
   Vertical rhythm through a single gap, not through per-element margins. */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

.stack--1 { --stack-gap: var(--space-1); }
.stack--2 { --stack-gap: var(--space-2); }
.stack--3 { --stack-gap: var(--space-3); }
.stack--4 { --stack-gap: var(--space-4); }
.stack--5 { --stack-gap: var(--space-5); }
.stack--6 { --stack-gap: var(--space-6); }
.stack--7 { --stack-gap: var(--space-7); }
.stack--8 { --stack-gap: var(--space-8); }

.stack--center { align-items: center; }
.stack--start { align-items: flex-start; }

/* --- Cluster — 07 §6.4 ----------------------------------------------------
   Inline group that wraps: CTAs, tags, metadata, trust bar. */

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

.cluster--2 { --cluster-gap: var(--space-2); }
.cluster--3 { --cluster-gap: var(--space-3); }
.cluster--5 { --cluster-gap: var(--space-5); }
.cluster--6 { --cluster-gap: var(--space-6); }

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

/* --- Grid — 07 §6.5 -------------------------------------------------------
   Auto-fit by default so the number of columns follows available width
   rather than a device breakpoint. */

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-6));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min, 18rem), 100%), 1fr)
  );
}

.grid--fixed-2,
.grid--fixed-3,
.grid--fixed-4 {
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .grid--fixed-2 { grid-template-columns: repeat(2, 1fr); }
  .grid--fixed-3 { grid-template-columns: repeat(2, 1fr); }
  .grid--fixed-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .grid--fixed-3 { grid-template-columns: repeat(3, 1fr); }
  .grid--fixed-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Split — 07 §6.6 ------------------------------------------------------
   Two areas. Mobile order is explicit, never left to source accident.
   `reverse` swaps the visual columns on desktop only, leaving DOM order — and
   therefore reading and focus order — untouched. */

.split {
  display: grid;
  gap: var(--space-6);
  align-items: var(--split-align, center);
}

@media (min-width: 64rem) {
  .split {
    gap: var(--space-8);
    grid-template-columns: 1fr 1fr;
  }

  .split--media-dominant { grid-template-columns: 1.6fr 1fr; }
  .split--text-dominant { grid-template-columns: 1fr 1.6fr; }
  .split--asymmetric { grid-template-columns: 1fr 2.2fr; }

  .split--reverse > :first-child { order: 2; }
  .split--reverse > :last-child { order: 1; }
}

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

/* --- Divider — 07 §6.7. Not a substitute for space. ----------------------- */

.divider {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

/* --- Flow ----------------------------------------------------------------
   Rhythm for editorial prose where a Stack would be too rigid (08 §8.5). */

.flow > * + * {
  margin-top: var(--flow-space, var(--space-5));
}

.flow p {
  max-width: var(--measure-body);
}