/* =========================================================
   MIRACLE LIQUORS – SPACING & FLOW v2.0
   Verantwoordelijkheid: flow, stack, cluster en beperkte utilities

   LET OP
   Alle spacingwaarden staan in variables.css.
   Dit bestand definieert GEEN :root-variabelen.
   ========================================================= */

/* =========================================================
   1. FLOW
   Eenvoudige verticale leesflow voor rich text / content.
   Alleen directe kinderen krijgen ruimte vanaf element 2.
   ========================================================= */

.ml-flow > * {
  margin-block: 0;
}

.ml-flow > * + * {
  margin-block-start: var(--ml-space-stack-md);
}

.ml-flow--sm > * + * {
  margin-block-start: var(--ml-space-stack-sm);
}

.ml-flow--lg > * + * {
  margin-block-start: var(--ml-space-stack-lg);
}

.ml-flow--xl > * + * {
  margin-block-start: var(--ml-space-stack-xl);
}

/* =========================================================
   2. STACK
   Verticale layout primitive.
   Gebruik voor expliciete component-/contentstructuren.
   ========================================================= */

.ml-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ml-space-stack-md);
  min-width: 0;
}

.ml-stack--xs {
  gap: var(--ml-space-stack-xs);
}

.ml-stack--sm {
  gap: var(--ml-space-stack-sm);
}

.ml-stack--lg {
  gap: var(--ml-space-stack-lg);
}

.ml-stack--xl {
  gap: var(--ml-space-stack-xl);
}

/*
 * Split-after:
 * duwt alles vanaf het gemarkeerde kind naar beneden.
 * Handig in cards waarbij CTA's onderaan moeten uitlijnen.
 */
.ml-stack > .ml-stack__split-after {
  margin-block-end: auto;
}

/* =========================================================
   3. CLUSTER
   Horizontale groep die automatisch mag wrappen.
   Geschikt voor buttons, tags, icon+label en compacte acties.
   ========================================================= */

.ml-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ml-space-inline-md);
  min-width: 0;
}

.ml-cluster--xs {
  gap: var(--ml-space-inline-xs);
}

.ml-cluster--sm {
  gap: var(--ml-space-inline-sm);
}

.ml-cluster--lg {
  gap: var(--ml-space-inline-lg);
}

.ml-cluster--start {
  justify-content: flex-start;
}

.ml-cluster--center {
  justify-content: center;
}

.ml-cluster--end {
  justify-content: flex-end;
}

.ml-cluster--between {
  justify-content: space-between;
}

/* =========================================================
   4. INLINE GROUP
   Compacte niet-wrappende rij, bv. icoon + korte tekst.
   ========================================================= */

.ml-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-space-inline-sm);
  min-width: 0;
}

.ml-inline--xs {
  gap: var(--ml-space-inline-xs);
}

.ml-inline--md {
  gap: var(--ml-space-inline-md);
}

/* =========================================================
   5. DENSITY HELPERS
   Voor interne component-padding; niet voor sections.
   ========================================================= */

.ml-density--compact {
  padding: var(--ml-space-component-compact);
}

.ml-density--comfortable {
  padding: var(--ml-space-component-comfortable);
}

.ml-density--spacious {
  padding: var(--ml-space-component-spacious);
}

/* =========================================================
   6. LIMITED SPACING UTILITIES
   Alleen gebruiken voor echte uitzonderingen.
   !important is bewust: utilities moeten een lokale override
   betrouwbaar kunnen uitvoeren.
   ========================================================= */

.ml-m-0  { margin: 0 !important; }
.ml-mt-0 { margin-top: 0 !important; }
.ml-mb-0 { margin-bottom: 0 !important; }

.ml-mt-sm { margin-top: var(--ml-space-016) !important; }
.ml-mt-md { margin-top: var(--ml-space-024) !important; }
.ml-mt-lg { margin-top: var(--ml-space-040) !important; }

.ml-mb-sm { margin-bottom: var(--ml-space-016) !important; }
.ml-mb-md { margin-bottom: var(--ml-space-024) !important; }
.ml-mb-lg { margin-bottom: var(--ml-space-040) !important; }

.ml-gap-sm { gap: var(--ml-space-012) !important; }
.ml-gap-md { gap: var(--ml-space-016) !important; }
.ml-gap-lg { gap: var(--ml-space-024) !important; }
.ml-gap-xl { gap: var(--ml-space-040) !important; }

/* =========================================================
   7. LEGACY UTILITIES — DEPRECATED
   Tijdelijk behouden voor bestaande HTML.
   Nieuwe HTML gebruikt de semantische namen hierboven.
   ========================================================= */

.ml-mt-4 { margin-top: var(--ml-space-016) !important; }
.ml-mt-6 { margin-top: var(--ml-space-024) !important; }
.ml-mt-8 { margin-top: var(--ml-space-040) !important; }

.ml-mb-4 { margin-bottom: var(--ml-space-016) !important; }
.ml-mb-6 { margin-bottom: var(--ml-space-024) !important; }
.ml-mb-8 { margin-bottom: var(--ml-space-040) !important; }

.ml-gap-3 { gap: var(--ml-space-012) !important; }
.ml-gap-4 { gap: var(--ml-space-016) !important; }
.ml-gap-6 { gap: var(--ml-space-024) !important; }
.ml-gap-8 { gap: var(--ml-space-040) !important; }