/* Stijl voor /veiligheid en /veiligheid/samen.
   Stond inline in de sjabloon; sinds de pagina is opgedeeld (klant
   2026-09-09, te veel scrollen) delen twee pagina's dezelfde opmaak, en een
   kopie per pagina loopt gegarandeerd uiteen. */

/* ── Alleen deze pagina. Porto levert de opbouw, hier de EvenJij-details.
      Geen border-radius: scherpe hoeken zijn centraal geregeld. ────── */
.ej-vg > section.ej-vg-section { padding: 4.5rem 0; }
/* Om en om, van boven naar beneden:
     1 intro      paginakleur
     2 maatregelen band
     3 samen       paginakleur
     4 gegevens    band
     5 slot-CTA    eigen donkere kleur
   Porto kleurt elke section.section, dus de secties zonder band eerst
   terugzetten op de paginakleur en daarna alleen de banden aanzetten.
   LET OP bij het toevoegen of weghalen van een sectie: dan verschuift
   de hele reeks en komen er twee banden tegen elkaar aan. */
section.section.ej-vg-section { background: transparent; }
section.section.ej-vg-does,
section.section.ej-vg-privacy { background: var(--ej-band); }

/* De nuance onder de screeningbelofte: hoort er wel te staan, maar mag de
   hoofdboodschap niet overschreeuwen. */
.ej-veil-klein {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ej-muted, #6b6560);
}

/* Aftreklijst binnen een kaart: de vier screeningonderdelen. */

/* De zes tips als kaarten. Als losse tekstblokken op een band lezen ze als
   doorlopende tekst; wit met een rand maakt er zes losse adviezen van.
   Bewust alleen binnen deze sectie, want .ej-lp-feature wordt elders
   zonder kaart gebruikt. */
.ej-vg-you .ej-lp-feature {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-top: 4px solid var(--ej-primary);
  box-shadow: var(--ej-shadow-sm);
  padding: 1.5rem 1.4rem 1.35rem;
}
.ej-vg-you .ej-lp-feature .feature-box-icon { margin-bottom: 0.5rem; }

/* Porto zet h3/h4 in kapitalen met letterafstand; hier lopen de koppen als
   gewone zinnen door, dat leest rustiger. */
.ej-vg h3, .ej-vg h4 { text-transform: none; letter-spacing: 0; }

/* Beeldkader: de foto is staand, dus vaste verhouding + cover. */
.ej-vg-media { overflow: hidden; box-shadow: var(--ej-shadow); background: var(--ej-primary-soft); }
.ej-vg-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ej-vg-media-tall { aspect-ratio: 3 / 4; }

/* De vier maatregelen */
.ej-vg-card {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-top: 4px solid var(--ej-primary);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--ej-shadow-sm);
}
/* Accentkleur: deze iconen staan op een witte kaart (3,30). Op een gekleurde
   band zou de sage maar 2,60 halen; doe dat dus niet. */
.ej-vg-card-icon { display: block; font-size: 1.5rem; color: var(--ej-sage); margin-bottom: 0.7rem; }
.ej-vg-card-title {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ej-dark);
  margin: 0 0 0.6rem;
}
.ej-vg-card p { font-size: 0.92rem; color: var(--ej-ink-soft); line-height: 1.65; }
/* De uitgelichte screeningkaart: iets ruimer, met een dikkere accentrand. De
   vier controles in twee kolommen, zodat de volle breedte gevuld is en er
   geen lege ruimte overblijft. */
.ej-vg-card-feature { padding: 1.85rem 1.75rem; border-top-width: 5px; }

/* ── Screeningkaart ───────────────────────────────────────────────
   Kop: icoon naast de titel in plaats van erboven, zodat de tekst niet
   onder een losse regel met alleen een icoontje begint. */
.ej-vg-scr-kop { display: flex; align-items: flex-start; gap: 0.9rem; }
.ej-vg-scr-kop .ej-vg-card-icon { margin-bottom: 0; flex: 0 0 auto; }
.ej-vg-scr-kop p { max-width: 62ch; }

/* De vier eisen als gelijke tegels. Hier stond eerder column-count: 2,
   en die verdeelt een lijst over de hoogte: de linkerregels liepen om en
   de rechter niet, waardoor het rafelig oogde. Een grid geeft elk item
   dezelfde ruimte. */
.ej-vg-eisen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem;
  margin: 1.4rem 0;
  padding: 0;
  counter-reset: eis;
}
.ej-vg-eisen li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.1rem;
  background: var(--ej-band);
  border-top: 3px solid var(--ej-primary);
}
.ej-vg-eis-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: 0.35rem;
  background: var(--ej-primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 50%;
}
.ej-vg-eisen strong { color: var(--ej-dark); font-size: 0.97rem; line-height: 1.35; }
.ej-vg-eisen span:not(.ej-vg-eis-nr) {
  color: var(--ej-ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Lopende tekst op leesbare breedte: over de volle breedte van deze brede
   kaart werden de regels ruim 140 tekens lang. */
.ej-vg-scr-slot { max-width: 68ch; }
.ej-vg-scr-slot p { margin-bottom: 0.7rem; }

/* Nuchtere opsomming, geen kaartjes. Gebruikt in de gegevenssectie. */
.ej-vg-list { list-style: none; margin: 0; padding: 0; }
.ej-vg-list li {
  position: relative;
  padding: 1rem 0 1rem 1.6rem;
  border-bottom: 1px solid var(--ej-border);
  color: var(--ej-ink-soft);
  line-height: 1.7;
}
.ej-vg-list li:last-child { border-bottom: 0; }
.ej-vg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 0.6rem;
  height: 2px;
  background: var(--ej-primary);
}
.ej-vg-list strong { display: block; color: var(--ej-dark); margin-bottom: 0.15rem; }

/* Terzijde-notitie */
/* Witte kaart, net als de kaarten erboven: die stonden op var(--ej-surface)
   en deze op de getinte var(--ej-primary-soft), waardoor hij als een
   vreemde eend tussen de rest hing. De accentrand links blijft, zodat het
   nog steeds als losse notitie leest en niet als zomaar een vierde kaart. */
.ej-vg-note {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.1rem 1.2rem;
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-left: 4px solid var(--ej-primary);
  box-shadow: var(--ej-shadow-sm);
}
.ej-vg-note > i { color: var(--ej-primary); font-size: 1.1rem; margin-top: 0.2rem; }
.ej-vg-note p { color: var(--ej-ink); font-size: 0.93rem; }
.ej-vg-note strong { color: var(--ej-dark); }

@media (max-width: 575.98px) {
  .ej-vg > section.ej-vg-section { padding: 3rem 0; }
  .ej-vg-media-tall { aspect-ratio: 4 / 3; }
}