/* layout — flexbox grid, containers, sections, spacing utils */

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

.section     { padding-block: var(--space-6); }
.section--sm { padding-block: var(--space-4); }
.section--lg { padding-block: var(--space-9); }
.section--flush-top { padding-top: 0; }

.row { display: flex; flex-wrap: wrap; gap: var(--gutter); }
.row--tight   { gap: var(--space-3); }
.row--loose   { gap: var(--space-6); }
.row--center  { align-items: center; }
.row--between { justify-content: space-between; }
.row--middle  { justify-content: center; }
.row--stretch { align-items: stretch; }
.row--nowrap  { flex-wrap: nowrap; }
.row--column  { flex-direction: column; }

.col       { flex: 1 1 0; min-width: 0; }
.col--auto { flex: 0 0 auto; }
.col--grow { flex: 1 1 auto; min-width: 0; }

.col-6  { flex: 1 1 calc(50%     - var(--gutter)); min-width: 0; }
.col-4  { flex: 1 1 calc(33.333% - var(--gutter)); min-width: 0; }
.col-3  { flex: 1 1 calc(25%     - var(--gutter)); min-width: 0; }
.col-8  { flex: 1 1 calc(66.666% - var(--gutter)); min-width: 0; }
.col-9  { flex: 1 1 calc(75%     - var(--gutter)); min-width: 0; }
.col-12 { flex: 1 1 100%; min-width: 0; }

.grid-auto { display: flex; flex-wrap: wrap; gap: var(--gutter); }
.grid-auto > * { flex: 1 1 var(--min-col, 280px); min-width: 0; }

/* equal-height cells: each row/grid child fills the row, so cards match height */
.row > *, .grid-auto > * { display: flex; flex-direction: column; }
.row > * > .card, .grid-auto > * > .card, .grid-auto > .card { flex: 1 1 auto; }

.stack        { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm    { gap: var(--space-2); }
.stack--lg    { gap: var(--space-6); }
.stack--xl    { gap: var(--space-8); }
.stack--center{ align-items: center; text-align: center; }

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

.text-center { text-align: center; }
.text-left   { text-align: left; }
.mx-auto     { margin-inline: auto; }
.measure     { max-width: 46ch; }
.measure-wide{ max-width: 62ch; }
.full        { width: 100%; }

.mt-0{margin-top:0}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}
.mt-8{margin-top:var(--space-8)}
.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}

@media (max-width: 860px) {
  .col-6, .col-4, .col-3, .col-8, .col-9 { flex-basis: 100%; }
  .row--nowrap { flex-wrap: wrap; }
}

@media (min-width: 560px) and (max-width: 860px) {
  .row--keep-2 .col-4, .row--keep-2 .col-3 { flex-basis: calc(50% - var(--gutter)); }
}