/* Clarify · Grid system
 * Source: Figma /Grids (360, 1440, 2700)
 *
 * Three named layouts ipv generic columns: mobile (4-col), desktop
 * (12-col) en 4K (12-col, ruimere gutter). Margins en gutters volgen
 * de waarden zoals ontworpen in Figma.
 *
 * Use:
 *   <div class="grid"> ... </div>            (auto, picks scale)
 *   <div class="grid grid--12 grid--gutter-xl"> ... </div>
 *
 * Span helpers:
 *   .col-3 .col-6 .col-12 etc. (1–12)
 *
 * Tokens are exposed for layout work without classes.
 */

:root {
  /* Mobile (xS, 360 → ~767) */
  --grid-mobile-cols: 4; /* @kind other */
  --grid-mobile-margin: 24px;
  --grid-mobile-gutter: 16px;

  /* Tablet (S/M, 768 → 1439) — same 12-col, smaller margin */
  --grid-tablet-cols: 12; /* @kind other */
  --grid-tablet-margin: 32px;
  --grid-tablet-gutter: 20px;

  /* Desktop (L, 1440 → 1919) — design baseline */
  --grid-desktop-cols: 12; /* @kind other */
  --grid-desktop-margin: 80px;
  --grid-desktop-gutter: 24px;

  /* Wide (xL, 1920 → 2699) */
  --grid-wide-cols: 12; /* @kind other */
  --grid-wide-margin: 120px;
  --grid-wide-gutter: 32px;

  /* 4K (xxL, 2700+) */
  --grid-4k-cols: 12; /* @kind other */
  --grid-4k-margin: 200px;
  --grid-4k-gutter: 48px;

  /* Active values — overridden per breakpoint */
  --grid-cols:   var(--grid-mobile-cols);
  --grid-margin: var(--grid-mobile-margin);
  --grid-gutter: var(--grid-mobile-gutter);
  --grid-max-width: 100%;
}

@media (min-width: 768px) {
  :root {
    --grid-cols:   var(--grid-tablet-cols);
    --grid-margin: var(--grid-tablet-margin);
    --grid-gutter: var(--grid-tablet-gutter);
  }
}
@media (min-width: 1440px) {
  :root {
    --grid-cols:   var(--grid-desktop-cols);
    --grid-margin: var(--grid-desktop-margin);
    --grid-gutter: var(--grid-desktop-gutter);
    --grid-max-width: 1280px;
  }
}
@media (min-width: 1920px) {
  :root {
    --grid-cols:   var(--grid-wide-cols);
    --grid-margin: var(--grid-wide-margin);
    --grid-gutter: var(--grid-wide-gutter);
    --grid-max-width: 1680px;
  }
}
@media (min-width: 2700px) {
  :root {
    --grid-cols:   var(--grid-4k-cols);
    --grid-margin: var(--grid-4k-margin);
    --grid-gutter: var(--grid-4k-gutter);
    --grid-max-width: 2300px;
  }
}

/* ─── Container ─────────────────────────────────────────────── */
.grid-container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  box-sizing: border-box;
}

/* ─── Grid ──────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gutter);
}
.grid--4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid--gutter-s   { gap: 8px;  }
.grid--gutter-m   { gap: 16px; }
.grid--gutter-l   { gap: 24px; }
.grid--gutter-xl  { gap: 32px; }

/* ─── Spans ─────────────────────────────────────────────────── */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
.col-full { grid-column: 1 / -1; }

/* Responsive overrides */
@media (max-width: 767px) {
  .col-md-1, .col-md-2 { grid-column: span 2; }       /* on mobile, half */
  .col-md-3, .col-md-4 { grid-column: span 4; }       /* on mobile, full */
  .col-md-6, .col-md-8, .col-md-12 { grid-column: 1 / -1; }
}

/* ─── Visual debug helper ───────────────────────────────────── */
.grid-debug > * {
  outline: 1px dashed rgba(255, 65, 38, 0.4);
  background: rgba(255, 65, 38, 0.04);
  min-height: 80px;
}