/* Korjin — block flow utility.

   Blocks arrive from the editor as flat siblings in whatever order the merchant
   set. `.kb-flow` is the one rule that makes that order behave: everything is
   full width and stacks, except buttons, which are auto width — so consecutive
   button blocks pair on one line and a third wraps on its own.

   Gap owns the rhythm, not per-element margins. Authored margins double against
   the gap and, worse, leave the space in the wrong place the moment a merchant
   reorders. Every section that renders blocks puts this class on the container
   rather than restating the same four rules locally.

   Tokens only, per tokens.css. */

/* Use this ONLY where a section has button blocks to pair. On a container that
   is just a stack it buys nothing, and inside a grid item it actively hurts:
   the item's `min-width: auto` leaves its main size indefinite, `flex-basis:
   100%` then resolves to content width, and the blocks lay out in a row and
   overflow. Plain stacks keep the section's authored block flow. */
.kb-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--sp-4);
  column-gap: var(--sp-4);
}

.kb-flow > * {
  flex: 0 0 100%;
  margin: 0;
}

.kb-flow > .btn {
  flex: 0 0 auto;
  /* A little more air above the action row than between the copy lines. */
  margin-top: var(--sp-2);
}

/* Centred variant, for sections whose design centres its column. */
.kb-flow--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}