/* =========================================================
   MIRACLE LIQUORS – GRIDS v2.0
   Verantwoordelijkheid: grids, kolommen, split-layouts en grid-gaps
   ========================================================= */

/* =========================================================
   1. GRID PRIMITIVE
   ========================================================= */

.ml-grid {
  display: grid;
  min-width: 0;
  gap: var(--ml-grid-gap-md);
}

.ml-grid > * {
  min-width: 0;
}

/* =========================================================
   2. GELIJKE KOLOMMEN
   ========================================================= */

.ml-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ml-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ml-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* =========================================================
   3. RESPONSIVE AUTO-GRIDS
   Voor kaarten/tegels wanneer het exacte kolomaantal minder
   belangrijk is dan een natuurlijke responsive verdeling.
   ========================================================= */

.ml-grid--auto-sm {
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.ml-grid--auto-md {
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.ml-grid--auto-lg {
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* =========================================================
   4. SPLIT LAYOUT
   Semantische tweekoloms-layout voor media + content.
   ========================================================= */

.ml-split,
.ml-grid--split {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);
  align-items: center;
  gap: var(--ml-grid-gap-split);
  min-width: 0;
}

.ml-split > *,
.ml-grid--split > * {
  min-width: 0;
}

.ml-split--media-wide,
.ml-grid--split-media-wide {
  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(0, 0.84fr);
}

.ml-split--content-wide,
.ml-grid--split-content-wide {
  grid-template-columns:
    minmax(0, 0.84fr)
    minmax(0, 1.16fr);
}

/* Legacy-compatible subtielere verhoudingen. */
.ml-grid--split-wide-left {
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr);
}

.ml-grid--split-wide-right {
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);
}

/* =========================================================
   5. UITLIJNING
   ========================================================= */

.ml-grid--align-start,
.ml-split--align-start {
  align-items: start;
}

.ml-grid--align-center,
.ml-split--align-center {
  align-items: center;
}

.ml-grid--align-end,
.ml-split--align-end {
  align-items: end;
}

.ml-grid--align-stretch,
.ml-split--align-stretch {
  align-items: stretch;
}

/* =========================================================
   6. GAP VARIANTS
   ========================================================= */

.ml-grid--gap-sm,
.ml-split--gap-sm {
  gap: var(--ml-grid-gap-sm);
}

.ml-grid--gap-md,
.ml-split--gap-md {
  gap: var(--ml-grid-gap-md);
}

.ml-grid--gap-lg,
.ml-split--gap-lg {
  gap: var(--ml-grid-gap-lg);
}

.ml-grid--gap-xl,
.ml-split--gap-xl {
  gap: var(--ml-grid-gap-xl);
}

/* Legacy namen */
.ml-grid--gap-small {
  gap: var(--ml-grid-gap-sm);
}

.ml-grid--gap-medium {
  gap: var(--ml-grid-gap-md);
}

.ml-grid--gap-large {
  gap: clamp(32px, 5vw, 64px);
}

.ml-grid--gap-xlarge {
  gap: var(--ml-grid-gap-split);
}

/* =========================================================
   7. GRID ITEMS
   ========================================================= */

.ml-grid__item--full {
  grid-column: 1 / -1;
}

.ml-grid__item--span-2 {
  grid-column: span 2;
}

.ml-grid__item--span-3 {
  grid-column: span 3;
}

/* =========================================================
   8. VISUELE VOLGORDE
   Alleen gebruiken als de semantische HTML-volgorde logisch blijft.
   ========================================================= */

.ml-grid--reverse > :first-child,
.ml-split--reverse > :first-child {
  order: 2;
}

.ml-grid--reverse > :last-child,
.ml-split--reverse > :last-child {
  order: 1;
}

/* =========================================================
   9. TABLET
   ========================================================= */

@media (max-width: 980px) {
  .ml-grid--3,
  .ml-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(.ml-split,
         .ml-grid--split,
         .ml-grid--split-wide-left,
         .ml-grid--split-wide-right,
         .ml-grid--split-content-wide,
         .ml-grid--split-media-wide) {
    grid-template-columns: 1fr;
    gap: var(--ml-space-048);
  }

  .ml-grid--reverse > :first-child,
  .ml-grid--reverse > :last-child,
  .ml-split--reverse > :first-child,
  .ml-split--reverse > :last-child {
    order: initial;
  }

  .ml-grid__item--span-3 {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   10. MOBILE
   ========================================================= */

@media (max-width: 680px) {
  .ml-grid {
    gap: var(--ml-grid-gap-sm);
  }

  .ml-grid--2,
  .ml-grid--3,
  .ml-grid--4 {
    grid-template-columns: 1fr;
  }

  :where(.ml-split,
         .ml-grid--split,
         .ml-grid--split-wide-left,
         .ml-grid--split-wide-right,
         .ml-grid--split-content-wide,
         .ml-grid--split-media-wide) {
    gap: var(--ml-space-032);
  }

  .ml-grid__item--full,
  .ml-grid__item--span-2,
  .ml-grid__item--span-3 {
    grid-column: auto;
  }

  .ml-grid--gap-small,
  .ml-grid--gap-sm {
    gap: var(--ml-space-012);
  }

  .ml-grid--gap-medium,
  .ml-grid--gap-md {
    gap: var(--ml-space-016);
  }

  .ml-grid--gap-large,
  .ml-grid--gap-lg {
    gap: var(--ml-space-032);
  }

  .ml-grid--gap-xlarge,
  .ml-grid--gap-xl {
    gap: var(--ml-space-040);
  }
}