/* ═══════════════════════════════════════════════════════════════════════
   IT LIVE DESIGN ENGINE v3.0 — LAYOUT & GRID SYSTEM
   ═══════════════════════════════════════════════════════════════════════
   Eigen grid/kolommen systeem (geen Bootstrap nodig voor layouts)
   Vervangt: Elementor columns, Section layouts, Spacing utilities
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   L1. FLEXBOX COLUMN GRID (1-6 kolommen)
   ══════════════════════════════════════ */
.e-row { display:flex; flex-wrap:wrap; gap:var(--e-gap, 24px); }
.e-col { flex:1 1 0; min-width:0; }
.e-col-1 { flex:0 0 calc(100% / 6 * 1 - var(--e-gap, 24px)); }
.e-col-2 { flex:0 0 calc(100% / 6 * 2 - var(--e-gap, 24px)); }
.e-col-3 { flex:0 0 calc(50% - var(--e-gap, 24px) / 2); }
.e-col-4 { flex:0 0 calc(100% / 6 * 4 - var(--e-gap, 24px)); }
.e-col-5 { flex:0 0 calc(100% / 6 * 5 - var(--e-gap, 24px)); }
.e-col-6 { flex:0 0 100%; }

/* ══════════════════════════════════════
   L2. CSS GRID AUTO LAYOUTS
   ══════════════════════════════════════ */
.e-grid-2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--e-gap, 24px); }
.e-grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--e-gap, 24px); }
.e-grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--e-gap, 24px); }
.e-grid-auto { display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--e-min-col, 280px), 1fr)); gap:var(--e-gap, 24px); }

/* Masonry-like (CSS columns) */
.e-masonry { column-count:var(--e-cols, 3); column-gap:var(--e-gap, 24px); }
.e-masonry > * { break-inside:avoid; margin-bottom:var(--e-gap, 24px); }

/* ══════════════════════════════════════
   L3. CONTAINER VARIANTS
   ══════════════════════════════════════ */
.e-container { max-width:1200px; margin:0 auto; padding:0 20px; }
.e-container-sm { max-width:800px; margin:0 auto; padding:0 20px; }
.e-container-lg { max-width:1400px; margin:0 auto; padding:0 20px; }
.e-container-full { width:100%; padding:0 20px; }

/* ══════════════════════════════════════
   L4. SPACING SYSTEM (4px grid)
   ══════════════════════════════════════ */
.e-p-0{padding:0}.e-p-1{padding:4px}.e-p-2{padding:8px}.e-p-3{padding:12px}
.e-p-4{padding:16px}.e-p-5{padding:20px}.e-p-6{padding:24px}.e-p-8{padding:32px}
.e-p-10{padding:40px}.e-p-12{padding:48px}.e-p-16{padding:64px}.e-p-20{padding:80px}

.e-m-0{margin:0}.e-m-1{margin:4px}.e-m-2{margin:8px}.e-m-3{margin:12px}
.e-m-4{margin:16px}.e-m-auto{margin:0 auto}

.e-mt-0{margin-top:0}.e-mt-4{margin-top:16px}.e-mt-8{margin-top:32px}
.e-mt-12{margin-top:48px}.e-mt-16{margin-top:64px}.e-mt-20{margin-top:80px}
.e-mb-0{margin-bottom:0}.e-mb-4{margin-bottom:16px}.e-mb-8{margin-bottom:32px}

.e-py-4{padding-top:16px;padding-bottom:16px}
.e-py-8{padding-top:32px;padding-bottom:32px}
.e-py-12{padding-top:48px;padding-bottom:48px}
.e-py-16{padding-top:64px;padding-bottom:64px}
.e-py-20{padding-top:80px;padding-bottom:80px}

.e-gap-1{gap:4px}.e-gap-2{gap:8px}.e-gap-3{gap:12px}.e-gap-4{gap:16px}
.e-gap-6{gap:24px}.e-gap-8{gap:32px}.e-gap-10{gap:40px}

/* ══════════════════════════════════════
   L5. FLEXBOX UTILITIES
   ══════════════════════════════════════ */
.e-flex{display:flex}.e-flex-col{flex-direction:column}.e-flex-row{flex-direction:row}
.e-flex-wrap{flex-wrap:wrap}.e-flex-center{align-items:center;justify-content:center}
.e-items-center{align-items:center}.e-items-start{align-items:flex-start}.e-items-end{align-items:flex-end}
.e-justify-center{justify-content:center}.e-justify-between{justify-content:space-between}
.e-justify-end{justify-content:flex-end}.e-justify-start{justify-content:flex-start}
.e-flex-1{flex:1 1 0}.e-flex-none{flex:none}

/* ══════════════════════════════════════
   L6. TYPOGRAPHY SCALE
   ══════════════════════════════════════ */
.e-text-xs{font-size:12px}.e-text-sm{font-size:14px}.e-text-base{font-size:16px}
.e-text-lg{font-size:18px}.e-text-xl{font-size:20px}.e-text-2xl{font-size:24px}
.e-text-3xl{font-size:30px}.e-text-4xl{font-size:36px}.e-text-5xl{font-size:48px}

.e-font-normal{font-weight:400}.e-font-medium{font-weight:500}.e-font-semibold{font-weight:600}
.e-font-bold{font-weight:700}.e-font-extrabold{font-weight:800}.e-font-black{font-weight:900}

.e-leading-tight{line-height:1.2}.e-leading-normal{line-height:1.6}.e-leading-relaxed{line-height:1.8}
.e-tracking-tight{letter-spacing:-.02em}.e-tracking-normal{letter-spacing:0}.e-tracking-wide{letter-spacing:.05em}
.e-text-center{text-align:center}.e-text-left{text-align:left}.e-text-right{text-align:right}
.e-uppercase{text-transform:uppercase}.e-capitalize{text-transform:capitalize}

/* ══════════════════════════════════════
   L7. SIZING
   ══════════════════════════════════════ */
.e-w-full{width:100%}.e-w-auto{width:auto}.e-w-half{width:50%}
.e-h-full{height:100%}.e-h-screen{height:100vh}.e-h-auto{height:auto}
.e-min-h-screen{min-height:100vh}
.e-max-w-xs{max-width:320px}.e-max-w-sm{max-width:480px}.e-max-w-md{max-width:640px}
.e-max-w-lg{max-width:800px}.e-max-w-xl{max-width:960px}.e-max-w-2xl{max-width:1200px}
.e-max-w-none{max-width:none}

/* ══════════════════════════════════════
   L8. BORDERS & RADIUS
   ══════════════════════════════════════ */
.e-border{border:1px solid var(--e-border)}.e-border-t{border-top:1px solid var(--e-border)}
.e-border-b{border-bottom:1px solid var(--e-border)}
.e-rounded{border-radius:var(--e-radius)}.e-rounded-lg{border-radius:var(--e-radius-lg)}
.e-rounded-xl{border-radius:var(--e-radius-xl)}.e-rounded-full{border-radius:999px}
.e-rounded-none{border-radius:0}

/* ══════════════════════════════════════
   L9. COLORS
   ══════════════════════════════════════ */
.e-bg-surface{background:var(--e-surface)}.e-bg-surface2{background:var(--e-surface2)}
.e-bg-accent{background:var(--e-accent)}.e-bg-dark{background:#0f172a}
.e-bg-white{background:#fff}
.e-text-color{color:var(--e-text)}.e-text-muted{color:var(--e-muted)}
.e-text-accent{color:var(--e-accent)}.e-text-white{color:#fff}

/* ══════════════════════════════════════
   L10. POSITION & DISPLAY
   ══════════════════════════════════════ */
.e-relative{position:relative}.e-absolute{position:absolute}.e-fixed{position:fixed}
.e-sticky{position:sticky;top:0}.e-z-10{z-index:10}.e-z-50{z-index:50}.e-z-100{z-index:100}
.e-block{display:block}.e-inline{display:inline}.e-inline-block{display:inline-block}
.e-hidden{display:none}.e-overflow-hidden{overflow:hidden}
.e-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ══════════════════════════════════════
   L11. SHADOWS
   ══════════════════════════════════════ */
.e-shadow-sm{box-shadow:var(--e-shadow-sm)}.e-shadow{box-shadow:var(--e-shadow)}
.e-shadow-lg{box-shadow:var(--e-shadow-lg)}.e-shadow-xl{box-shadow:var(--e-shadow-xl)}
.e-shadow-glow{box-shadow:var(--e-shadow-glow)}.e-shadow-none{box-shadow:none}

/* ══════════════════════════════════════
   RESPONSIVE GRID
   ══════════════════════════════════════ */
@media (max-width:768px) {
  .e-grid-2, .e-grid-3, .e-grid-4 { grid-template-columns:1fr; }
  .e-row { flex-direction:column; }
  .e-col-1, .e-col-2, .e-col-3, .e-col-4, .e-col-5 { flex:0 0 100%; }
  .e-masonry { column-count:1; }
  .e-md-hidden { display:none !important; }
}
@media (min-width:769px) and (max-width:1024px) {
  .e-grid-3 { grid-template-columns:repeat(2, 1fr); }
  .e-grid-4 { grid-template-columns:repeat(2, 1fr); }
  .e-masonry { column-count:2; }
}