/* =========================================================
   Spacing — Autogloss Detailing

   Schaal overgenomen uit het concept (concept.leadsprint.nl/autogloss).

   Het concept werkt niet met een strikte 8px-grid maar met een
   ritme rond 18px: dat is de gap tussen kaarten, grids en kolommen
   door de hele site heen. Die waarde is hier --space-gap en is het
   anker van de schaal. Daaromheen de gebruikelijke stappen.
========================================================= */

:root {

  /* ======================================================
     RUIMTESCHAAL — binnen componenten
  ====================================================== */

  --space-3xs:  6px;
  --space-2xs:  8px;
  --space-xs:  10px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-gap: 18px;  /* standaard gap in elk grid */
  --space-lg:  22px;
  --space-xl:  26px;
  --space-2xl: 32px;
  --space-3xl: 44px;
  --space-4xl: 56px;
  --space-5xl: 80px;


  /* ======================================================
     SECTIERITME — verticale ruimte tussen secties

     Het concept gebruikt één hoofdwaarde:
       padding: clamp(80px, 10vw, 150px) 0
     Dat is --ls-section-md. De rest is daarvan afgeleid voor
     secties die krapper of ruimer moeten ademen.
  ====================================================== */

  /* Compact — korte blokken, aansluitende secties */
  --ls-section-sm: clamp(48px, 6vw, 90px);

  /* Standaard — de waarde uit het concept */
  --ls-section-md: clamp(80px, 10vw, 150px);

  /* Ruim — secties die op zichzelf moeten staan */
  --ls-section-lg: clamp(100px, 12vw, 170px);

  /* Statement — climax, laatste sectie voor de footer */
  --ls-section-xl: clamp(120px, 14vw, 200px);

  /* Paginakop — extra ruimte bovenin omdat de nav fixed staat */
  --ls-section-top: clamp(150px, 18vw, 230px);

}


/* =========================================================
   Section utilities

   Symmetrisch, anders dan de oude starter. In het concept is
   de padding boven en onder gelijk; de optische balans komt
   daar uit de sectie-overgangen (zie sections.css), niet uit
   scheve padding.
========================================================= */

.section-sm { padding-block: var(--ls-section-sm); }
.section-md { padding-block: var(--ls-section-md); }
.section-lg { padding-block: var(--ls-section-lg); }
.section-xl { padding-block: var(--ls-section-xl); }

/* Eerste sectie op een pagina zonder hero — duikt niet onder de nav */
.section-top {
  padding-top: var(--ls-section-top);
  padding-bottom: clamp(40px, 6vw, 70px);
}

/* Losse modifiers voor uitzonderingen */
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }