/* Verticaal ritme en sectiebreedte voor de Elementor-HTML-blokken.
 *
 * Eerder bepaalde elk blok zijn eigen padding op .shn-hub. Omdat dat telkens
 * dezelfde selector is, won simpelweg het laatste blok op de pagina voor alle
 * blokken. Hier staat nu een bron van waarheid: breedte en zijmarge op de
 * wrapper, en per sectie precies een afstand naar boven in plaats van de som
 * van twee paddings.
 *
 * Schaal op een 8px-raster: 24/32 - 40/56 - 64/88.
 */

:root {
  --shn-wrap: 1080px;
  --shn-gutter: clamp(20px, 3vw, 24px);
  --shn-gap-s: clamp(24px, 2.5vw, 32px);
  --shn-gap-m: clamp(40px, 4.5vw, 56px);
  --shn-gap-l: clamp(64px, 7vw, 88px);
}

.shn-hub,
.shn-start-wrap,
.shn-intro,
.shn-blog,
.shn-outro {
  box-sizing: border-box;
  max-width: var(--shn-wrap);
  margin-inline: auto;
  padding-inline: var(--shn-gutter);
  padding-block: 0;
}

/* De blogheader is zelf het paneel en heeft dus geen wrapper met padding.
   Onder 1128px (1080 + 2x24) krijgt hij een echte zijmarge, zodat de
   afgeronde hoeken niet tegen de schermrand liggen. */
.elementor .shn-page-hero {
  max-width: var(--shn-wrap);
  margin-inline: auto;
}
@media (max-width: 1128px) {
  .elementor .shn-page-hero { margin-inline: var(--shn-gutter); }
}

.shn-sec { margin-block-start: var(--shn-gap-m); margin-block-end: 0; }
.shn-sec--s { margin-block-start: var(--shn-gap-s); }
.shn-sec--m { margin-block-start: var(--shn-gap-m); }
.shn-sec--l { margin-block-start: var(--shn-gap-l); }
.shn-sec--first { margin-block-start: clamp(16px, 2vw, 24px); }
.shn-sec--last { margin-block-end: var(--shn-gap-l); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}