/* =========================================================================
   LAYOUT
   Page-level layout primitives: containers, stacks, regions, grids.
   Consumes tier 2 theme tokens only.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Containers — horizontal constraints with gutters
   ------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--theme-container-wide);
  margin-inline: auto;
  padding-inline: var(--theme-space-inline-lg);
}

.container--narrow {
  max-width: var(--theme-container-narrow);
}

.container--body {
  max-width: var(--theme-container-body);
}

.container--full {
  max-width: var(--theme-container-full);
}

@media (min-width: 56rem) {
  .container {
    padding-inline: var(--theme-space-stack-xl);
  }
}

/* -------------------------------------------------------------------------
   Stack — vertical rhythm. Direct children get consistent spacing.
   ------------------------------------------------------------------------- */

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

.stack--xs > * + * { margin-top: var(--theme-space-stack-xs); }
.stack--sm > * + * { margin-top: var(--theme-space-stack-sm); }
.stack--md > * + * { margin-top: var(--theme-space-stack-md); }
.stack--lg > * + * { margin-top: var(--theme-space-stack-lg); }
.stack--xl > * + * { margin-top: var(--theme-space-stack-xl); }

/* -------------------------------------------------------------------------
   Region — page sections with generous vertical breathing room
   ------------------------------------------------------------------------- */

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

.region--tight {
  padding-block: var(--theme-space-stack-xl);
}

.region--loose {
  padding-block: var(--theme-space-region);
}

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

.region--quiet {
  background-color: var(--theme-color-brand-quiet);
  color: var(--theme-color-text-inverse);
}

.region--quiet :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-color-text-inverse);
}

/* -------------------------------------------------------------------------
   Cluster — horizontal wrapping rows with consistent gaps
   ------------------------------------------------------------------------- */

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

.cluster--tight {
  gap: var(--theme-space-inline-sm);
}

.cluster--loose {
  gap: var(--theme-space-inline-lg);
}

/* -------------------------------------------------------------------------
   Grid — auto-fit card grids
   ------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--theme-space-stack-lg);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

.grid--2col {
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .grid--2col {
    grid-template-columns: 1fr 1fr;
  }
}

/* Two-up — explicit two-column grid for paired prose blocks. Stacks on
   narrow viewports. Headings inside get an underline accent matching the
   primary nav hover state. */
.grid--two-up {
  grid-template-columns: 1fr;
  gap: var(--theme-space-stack-xl);
  margin-block: var(--theme-space-stack-xl);
}

@media (min-width: 44rem) {
  .grid--two-up {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--theme-space-section);
  }
}

.grid--two-up > * {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-stack-sm);
}

.grid--two-up > * > :first-child {
  margin-top: 0;
}

.grid--two-up h2 {
  margin-bottom: var(--theme-space-stack-xs);
}

.grid--two-up h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  background-color: var(--theme-color-brand-emphasis);
  margin-top: var(--theme-space-stack-xs);
}

/* -------------------------------------------------------------------------
   Split — two-column layout with prose on one side, aside on the other
   ------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--theme-space-stack-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--theme-space-section);
  }

  .split--aside-left {
    grid-template-columns: 1fr 1.4fr;
  }
}

/* -------------------------------------------------------------------------
   Center — center text content in a container
   ------------------------------------------------------------------------- */

.center {
  text-align: center;
}

.center > * {
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Flow — natural text flow with paragraph spacing
   ------------------------------------------------------------------------- */

.flow > * + * {
  margin-top: var(--theme-space-stack-sm);
}

.flow > :is(h2, h3, h4) {
  margin-top: var(--theme-space-stack-xl);
}

/* -------------------------------------------------------------------------
   Section header (eyebrow + title + optional description)
   ------------------------------------------------------------------------- */

.section-header {
  max-width: var(--theme-container-body);
  margin-inline: auto;
  margin-bottom: var(--theme-space-stack-xl);
  text-align: center;
}

.section-header .eyebrow {
  margin-bottom: var(--theme-space-stack-xs);
}

.section-header p {
  margin-inline: auto;
  color: var(--theme-color-text-muted);
}