/* Cluster — horizontal layout primitive.
 * Renders children in a row with consistent gap; wraps to a new line on overflow.
 * Variants are switched via class names; see ClusterComponent.
 */

.cluster {
  display: flex;
  flex-direction: row;
}

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

.cluster--gap-xs { gap: 0.25rem; }
.cluster--gap-sm { gap: 0.5rem;  }
.cluster--gap-md { gap: 1rem;    }
.cluster--gap-lg { gap: 1.5rem;  }
.cluster--gap-xl { gap: 2rem;    }

.cluster--align-start    { align-items: flex-start; }
.cluster--align-center   { align-items: center;     }
.cluster--align-end      { align-items: flex-end;   }
.cluster--align-baseline { align-items: baseline;   }
.cluster--align-stretch  { align-items: stretch;    }

.cluster--justify-start   { justify-content: flex-start;    }
.cluster--justify-center  { justify-content: center;        }
.cluster--justify-end     { justify-content: flex-end;      }
.cluster--justify-between { justify-content: space-between; }
.cluster--justify-around  { justify-content: space-around;  }
.cluster--justify-evenly  { justify-content: space-evenly;  }