/* ============================================================
   Bitkoning Master Brand — Spacing utilities (§14.8)
   Stack / Cluster / Section — vervangen ~90% van de margin/padding-code.
   Bouwt op de gap-aliases uit bitkoning-spacing.css (laad die eerst).
   ============================================================ */

/* .bk-stack — verticale spacing tussen direct children.
   Default-gap = --bk-gap-medium (16px); override inline via --stack. */
.bk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack, var(--bk-gap-medium));
}
.bk-stack-tight   { --stack: var(--bk-gap-tight); }    /* 8  */
.bk-stack-snug    { --stack: var(--bk-gap-snug); }     /* 12 */
.bk-stack-medium  { --stack: var(--bk-gap-medium); }   /* 16 */
.bk-stack-relaxed { --stack: var(--bk-gap-relaxed); }  /* 24 */
.bk-stack-loose   { --stack: var(--bk-gap-loose); }    /* 32 */
.bk-stack-section { --stack: var(--bk-gap-section); }  /* 48 */

/* .bk-cluster — horizontale versie met flex-wrap.
   Voor pill-rows, button-groups, inline tag-lists. */
.bk-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster, var(--bk-gap-medium));
}
.bk-cluster-snug   { --cluster: var(--bk-gap-snug); }    /* 12 */
.bk-cluster-medium { --cluster: var(--bk-gap-medium); }  /* 16 */

/* .bk-section — vertikaal page-level rhythm voor major page-sections. */
.bk-section      { padding-block: var(--bk-gap-section); }  /* 48 */
.bk-section-lg   { padding-block: var(--bk-gap-page); }     /* 64 */
.bk-section-hero { padding-block: var(--bk-gap-hero); }     /* 96 */