/* ============================================================
   VitaService — Grid & Layout System
   grid.css  ·  v1.0
   ============================================================ */

/* ── CONTAINER ────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.container-sm  { max-width: var(--container-sm); }
.container-md  { max-width: var(--container-md); }
.container-lg  { max-width: var(--container-lg); }
.container-2xl { max-width: var(--container-2xl); }

@media (max-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ── CSS GRID ─────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-8);
}

/* Kolomrasters */
.grid-1  { grid-template-columns: 1fr; }
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
.grid-5  { grid-template-columns: repeat(5, 1fr); }
.grid-6  { grid-template-columns: repeat(6, 1fr); }

/* Auto-fit rasters (responsief zonder media queries) */
.grid-auto-sm  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-auto-md  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-auto-lg  { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* Gap varianten */
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

/* ── FLEXBOX UTILITIES ──────────────────────────────────────── */

.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.flex-wrap      { flex-wrap: wrap; }
.flex-nowrap    { flex-wrap: nowrap; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.gap-x-4  { column-gap: var(--space-4); }
.gap-x-6  { column-gap: var(--space-6); }
.gap-x-8  { column-gap: var(--space-8); }
.gap-y-4  { row-gap: var(--space-4); }
.gap-y-6  { row-gap: var(--space-6); }
.gap-y-8  { row-gap: var(--space-8); }

.flex-1    { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* ── SECTIE LAYOUT ────────────────────────────────────────── */

.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.section-sm {
  padding-top: var(--section-padding-y-sm);
  padding-bottom: var(--section-padding-y-sm);
}

.section-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height-desktop) + var(--space-24));
  padding-bottom: var(--space-24);
}

@media (max-width: 768px) {
  .section {
    padding-top: var(--section-padding-y-sm);
    padding-bottom: var(--section-padding-y-sm);
  }
  .section-hero {
    min-height: auto;
    padding-top: calc(var(--nav-height-mobile) + var(--space-16));
    padding-bottom: var(--space-16);
  }
}

/* ── SPLIT LAYOUT (content + afbeelding naast elkaar) ─────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.split-reverse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  direction: rtl;
}

.split-reverse > * {
  direction: ltr;
}

.split-60-40 {
  grid-template-columns: 3fr 2fr;
}

.split-40-60 {
  grid-template-columns: 2fr 3fr;
}

@media (max-width: 768px) {
  .split,
  .split-reverse,
  .split-60-40,
  .split-40-60 {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    direction: ltr;
  }
}

/* ── CENTREER BLOK ────────────────────────────────────────── */

.center-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-16);
  gap: var(--space-4);
}

.section-header .eyebrow {
  margin-bottom: var(--space-2);
}

/* ── SPACING UTILITIES ────────────────────────────────────── */

/* Margin top */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

/* Margin bottom */
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* Padding */
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }

.px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8  { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* ── VISIBILITY ───────────────────────────────────────────── */

.hidden        { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── RESPONSIVE GRID OVERRIDES ────────────────────────────── */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }

  .md\:hidden { display: none; }
  .md\:block  { display: block; }
  .md\:flex   { display: flex; }

  .md\:grid-1 { grid-template-columns: 1fr; }
  .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .grid-6 { grid-template-columns: 1fr; }
  .sm\:hidden { display: none; }
  .sm\:block  { display: block; }
}

/* ── POSITIE UTILITIES ────────────────────────────────────── */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.inset-0  { inset: 0; }
.top-0    { top: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }

/* ── DIVIDERS ─────────────────────────────────────────────── */

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-8) 0;
}

.divider-accent {
  width: 48px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  margin: var(--space-4) 0;
}

/* ── ASPECT RATIOS ────────────────────────────────────────── */

.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-video     { aspect-ratio: 16 / 9; }
.aspect-4-3       { aspect-ratio: 4 / 3; }
.aspect-3-2       { aspect-ratio: 3 / 2; }
.aspect-golden    { aspect-ratio: 1.618 / 1; }