/* ==========================================================================
   layout.css — containers, section rhythm and grids
   Structural scaffolding only; visual styling of components lives elsewhere.
   ========================================================================== */

/* ---- Containers --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--text { max-width: var(--container-text); }

/* ---- Section rhythm ----------------------------------------------------- */
.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--color-surface-alt); }

/* Heading block that introduces a section. */
.section-head { max-width: 48rem; margin-bottom: var(--space-lg); }
.section-head > * + * { margin-top: var(--space-sm); }

/* ---- Grids -------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-md); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }   /* the homepage Division cards */

@media (max-width: 900px) {          /* tablet breakpoint */
  .grid--3 { grid-template-columns: repeat(2, 1fr); }  /* 3 cards → 2 across */
}
@media (max-width: 600px) {          /* phone breakpoint */
  .grid--3 { grid-template-columns: 1fr; }             /* → single column */
}

/* ---- Flow: even vertical spacing between stacked children --------------- */
.flow--md > * + * { margin-top: var(--space-md); }

/* ---- Cluster: inline groups (button rows, meta) ------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.cluster--between { justify-content: space-between; }

/* ---- Spacing utilities (token-based; keep HTML free of inline styles) ---- */
.mb-2xl { margin-bottom: var(--space-2xl); }