/**
 * pmgix — Layout System
 * Containers, grids, flex, and structural primitives (mobile-first base).
 * Responsive breakpoints live in responsive.css.
 */

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

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

.flex {
  display: flex;
}

.flex--column {
  flex-direction: column;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  align-items: center;
  justify-content: space-between;
}

.flex--gap-sm { gap: var(--space-2); }
.flex--gap-md { gap: var(--space-4); }
.flex--gap-lg { gap: var(--space-6); }

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

.grid--cards {
  grid-template-columns: 1fr;
}

.grid--industries {
  grid-template-columns: repeat(2, 1fr);
}

.grid--insights {
  grid-template-columns: 1fr;
}

.grid--insights-categories {
  grid-template-columns: 1fr;
}

.grid--footer {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.layout--sidebar {
  display: grid;
  gap: var(--space-8);
}

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

.stack--lg {
  gap: var(--space-6);
}

.stack--xl {
  gap: var(--space-8);
}