/**
 * @file blocks.css
 * Block variant styling.
 *
 * Redacteurs geven blocks een class mee via Layout Builder attributes.
 * Deze classes triggeren automatisch de juiste vormgeving.
 *
 * Vertical: 12/24px baseline grid
 * Horizontal: 4-8-16px grid
 * Border-radius: 4px
 */

/* ============================================================
   Base block styling
   ============================================================ */
.block {
  margin-bottom: var(--vg-space-2);
}

/* ============================================================
   Block variants (via class attribute in Layout Builder)
   ============================================================ */

/* Alert: rood accent, voor urgente meldingen */
.block-alert {
  padding: var(--vg-space-2) var(--vg-h-16);
  background-color: var(--vg-rood-l80);
  border-left: 4px solid var(--vg-color-accent);
  border-radius: 4px;
  color: var(--vg-rood-d40);
}

.block-alert a {
  color: var(--vg-rood-d20);
  font-weight: 700;
}

/* Notitie: goud accent, voor tips en opmerkingen */
.block-notitie {
  padding: var(--vg-space-2) var(--vg-h-16);
  background-color: var(--vg-goud-l80);
  border-left: 4px solid var(--vg-goud);
  border-radius: 4px;
  color: var(--vg-goud-d40);
}

/* Info: blauw accent, voor informatieve blokken */
.block-info {
  padding: var(--vg-space-2) var(--vg-h-16);
  background-color: var(--vg-blauw-l80);
  border-left: 4px solid var(--vg-blauw);
  border-radius: 4px;
  color: var(--vg-blauw-d40);
}

/* Succes: groen accent, voor bevestigingen */
.block-succes {
  padding: var(--vg-space-2) var(--vg-h-16);
  background-color: var(--vg-groen-l80);
  border-left: 4px solid var(--vg-groen);
  border-radius: 4px;
  color: var(--vg-groen-d40);
}

/* Highlight: lichte achtergrond, opvallend blok */
.block-highlight {
  padding: var(--vg-space-3) var(--vg-h-24);
  background-color: var(--vg-bg-1);
  border-radius: 4px;
}

/* Kader: met rand, voor afgebakende content */
.block-kader {
  padding: var(--vg-space-2) var(--vg-h-16);
  border: 1px solid var(--vg-color-border);
  border-radius: 4px;
}

/* Quote/citaat stijl */
.block-citaat {
  padding: var(--vg-space-2) var(--vg-h-24);
  border-left: 4px solid var(--vg-color-primary);
  font-style: italic;
  color: var(--vg-color-text-muted);
}

/* Donker blok (inverse kleuren) */
.block-donker {
  padding: var(--vg-space-3) var(--vg-h-24);
  background-color: var(--vg-bg-9);
  border-radius: 4px;
  color: var(--vg-bg-1);
}

.block-donker a {
  color: var(--vg-groen-l20);
}

.block-donker h2,
.block-donker h3,
.block-donker h4 {
  color: var(--vg-bg-0);
}

/* Breed blok: breekt uit content max-width */
.block-breed {
  margin-left: calc(-1 * var(--vg-side-pad));
  margin-right: calc(-1 * var(--vg-side-pad));
  padding: var(--vg-space-3) var(--vg-side-pad);
}

/* ============================================================
   Layout Builder section backgrounds
   (custom classes via section attributes)
   ============================================================ */
.vg-grijs-1 {
  background-color: var(--vg-bg-1);
  padding: var(--vg-space-3) var(--vg-h-32);
}

.vg-grijs-2 {
  background-color: var(--vg-bg-2);
  padding: var(--vg-space-3) var(--vg-h-32);
}

.vg-donker {
  background-color: var(--vg-bg-9);
  color: var(--vg-bg-1);
  padding: var(--vg-space-3) var(--vg-h-32);
}

.vg-donker a {
  color: var(--vg-groen-l20);
}

.vg-donker h2,
.vg-donker h3 {
  color: var(--vg-bg-0);
}

.vg-primair {
  background-color: var(--vg-groen-l80);
  padding: var(--vg-space-3) var(--vg-h-32);
}

.vg-secundair {
  background-color: var(--vg-goud-l80);
  padding: var(--vg-space-3) var(--vg-h-32);
}