/* ============================================================================
   vda355.com — de eigen laag bovenop avantis.css + kern.css.

   Bewust klein. Het designsysteem van Avantis 2.0 dekt vrijwel alles al af
   (.prose, .kern-hero, .kern-cta, .blog-lijst, .site-foot). Wat hier staat is
   alleen wat deze site nodig heeft en Avantis niet:

   1. .vda-eind    — het doorverwijsblok onderaan elke pagina. Dit is de reden
                     dat vda355.com bestaat: linkwaarde en bezoekers doorgeven
                     aan avantisenergy.eu. Het is dus geen voetnoot maar een
                     volwaardig blok, op élke pagina, met een echte ankertekst.
   2. .vda-verwant — verwante pagina's, zodat geen enkele pagina doodloopt.
   3. .vda-kaart   — de vier onderwerpen op de homepage.

   Voeg hier niets toe dat in avantis.css thuishoort; dat bestand is een kopie
   en moet gelijk blijven aan het origineel.
   ========================================================================== */

/* --------------------------------------------- 1. doorverwijzing naar Avantis */
.vda-eind {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line-strong);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.vda-eind-label {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--metal-dark);
  margin-bottom: .9rem;
}
.vda-eind h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  max-width: 22ch;
}
.vda-eind p {
  margin-top: .9rem;
  color: var(--ink-soft);
  max-width: 60ch;
}
.vda-eind-ctas {
  margin-top: 1.6rem;
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------------ 2. verwante pagina's */
.vda-verwant {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}
.vda-verwant-label {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--metal-dark);
  margin-bottom: .9rem;
}
.vda-verwant ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
}
.vda-verwant a {
  text-decoration: none;
  font-weight: 500;
  box-shadow: inset 0 -1px 0 var(--line-strong);
  transition: box-shadow .2s var(--ease-out);
}
.vda-verwant a:hover { box-shadow: inset 0 -2px 0 var(--accent); }

/* -------------------------------------------- 3. onderwerpkaarten (homepage) */
.vda-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.vda-kaart {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transition: background .25s var(--ease-out);
}
.vda-kaart:hover { background: var(--white); }
.vda-kaart-nr {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--accent);
}
.vda-kaart h3 { font-size: 1.25rem; }
.vda-kaart p {
  font-size: .95rem;
  color: var(--ink-soft);
  /* Vier kaarten naast elkaar: gelijke hoogte leest rustiger dan vier
     verschillende. Afkappen op vier regels, de hele tekst staat op de
     onderliggende pagina. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vda-kaart-lees {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--ink);
}

/* ------------------------------------------------------------------ artikel */
/* Blogposts zijn lopende tekst zonder beeld: iets meer regelafstand dan de
   productpagina's van Avantis, want hier leest iemand 300-800 woorden achter
   elkaar. */
.vda-artikel .prose p { line-height: 1.75; }
.vda-artikel-datum {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--metal-dark);
}