/* ============================================================
   JURISTLEXONLINE.NL — LAYOUT
   Container, grid, sectiestructuur, spacing
   ============================================================ */

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--sm {
  max-width: var(--container-sm);
}

.container--narrow {
  max-width: 640px;
}

/* ── Sectie basisstructuur ── */
.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  position: relative;
}

.section--sm {
  padding-top: calc(var(--section-pad) * 0.6);
  padding-bottom: calc(var(--section-pad) * 0.6);
}

.section--lg {
  padding-top: calc(var(--section-pad) * 1.4);
  padding-bottom: calc(var(--section-pad) * 1.4);
}

.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* ── Sectionheader ── */
.section-header {
  margin-bottom: clamp(3rem, 5vw, 5rem);
  max-width: 640px;
}

.section-header--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header--center .gold-rule {
  margin-left: auto;
  margin-right: auto;
}

.section-header--center p {
  margin-left: auto;
  margin-right: auto;
}

/* ── Flexbox hulpklassen ── */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; align-items: center; }
.flex-start { align-items: flex-start; }
.flex-gap-sm { gap: var(--space-sm); }
.flex-gap-md { gap: var(--space-md); }
.flex-gap-lg { gap: var(--space-lg); }
.flex-wrap  { flex-wrap: wrap; }

/* ── Grid systeem ── */
.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

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

/* Asymmetrische grids voor premium uitstraling */
.grid--60-40 {
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
}

.grid--40-60 {
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
}

/* ── Kaart-grids ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* ── Spacers ── */
.spacer-sm  { height: var(--space-sm); }
.spacer-md  { height: var(--space-md); }
.spacer-lg  { height: var(--space-lg); }
.spacer-xl  { height: var(--space-xl); }

/* ── Positionering hulpklassen ── */
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }

/* ── Z-index schaal ── */
.z-base    { z-index: 1; }
.z-overlay { z-index: 10; }
.z-nav     { z-index: 100; }
.z-modal   { z-index: 1000; }

/* ── Responsive breakpoints ── */
@media (max-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .grid--60-40,
  .grid--40-60,
  .grid--about-split {
    grid-template-columns: 1fr;
  }
}

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

  .grid--4 {
    grid-template-columns: 1fr;
  }

  .flex-between {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}