/* ============================================================================
   cursus.css: gedeeld door de vier cursuspagina's
   De kop en het stappenplan zijn dezelfde componenten als op de
   servicepagina's; die staan hier opnieuw omdat service.css bij een
   pagina-overgang wordt weggehaald.
   ========================================================================== */

/* ---- 01 Kop -------------------------------------------------------------- */
.service-hero { position: relative; background-color: var(--color-groen); overflow: hidden; }
.service-hero--beeld { position: absolute; inset: 0; }
.service-hero--beeld img { width: 100%; height: 100%; object-fit: cover; }
.service-hero--sluier {
  position: absolute; inset: 0;
  background:
    /* 1. de gradient uit Figma: #017E84, lineair, 20% dekking boven naar 80%
          onder. Zelfde instelling als de hero op de homepage. */
    linear-gradient(rgba(1, 126, 132, .20) 0%, rgba(1, 126, 132, .80) 100%),
    /* 2. eronder een donkere laag, puur voor de leesbaarheid. Anders dan op de
          homepage begint die hier niet op nul: daar staat de tekst onderin,
          hier al op een derde van de hoogte, en daar is de gradient nog licht.
          Met alleen de gradient haalt het label 1,76:1.

          Doorgerekend over de vier herofoto's, op de lichtste vijf procent van
          elk tekstvak: label 5,37:1, kop 5,66:1, introtekst 5,90:1, knoppen
          5,98:1 en de bewijsregel 5,94:1. Eis is 4,5:1, en 3:1 voor de kop.
          Samen dekken de twee lagen 74% af waar het label staat; de groene
          sluier die hier stond dekte daar 79%, dus dit is nog iets lichter. */
    linear-gradient(rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, .75) 100%);
}
.service-hero--inner { position: relative; z-index: var(--z-content);
                       padding: 200px var(--inset-x) var(--space-section-y);
                       max-width: var(--container-max); margin-inline: auto; }
@media (max-width: 576px) {
  .service-hero--inner { padding: 140px var(--inset-x) var(--space-800); }
}
.service-hero--titel { color: var(--color-white); margin: var(--space-500) 0;
                       font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem); line-height: 1.1; }
.service-hero--intro { color: var(--color-white); max-width: var(--content-max-half); }
.service-hero--intro p + p { margin-top: 1.6em; }
.hero--actions { margin-top: var(--space-700); display: flex; flex-wrap: wrap; gap: var(--space-300); }

/* ---- 04 Tijdlijn als oplopende trap -------------------------------------- */
.trap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.trede {
  display: flex; gap: var(--space-500);
  padding: var(--space-panel) var(--inset-x);
  background-color: var(--color-white);
  margin-left: calc(var(--trede) * 6%);
  border-left: 4px solid var(--color-geel);
}
.trede:nth-child(even) { background-color: var(--color-grey); }
@media (max-width: 991px) { .trede { margin-left: 0; padding: var(--space-panel-md) var(--inset-x); } }
@media (max-width: 576px) {
  .trede { flex-direction: column; gap: var(--space-300); padding: var(--space-panel-sm) var(--inset-x); }
}
.trede__nummer { flex-shrink: 0; font-family: var(--font-light); font-weight: var(--weight-light);
                 font-size: 2rem; line-height: 1; }
.trede__inhoud { display: flex; flex-direction: column; gap: var(--space-300); }
.trede__titel { font-size: clamp(1.25rem, 1rem + 1vw, 2rem); line-height: 1.1; }
.trede__tekst { font-family: var(--font-regular); font-weight: var(--weight-regular);
                font-size: 1rem; line-height: 1.5; margin: 0; }
.trede__gedrag { font-family: var(--font-regular); font-weight: var(--weight-regular);
                 font-size: 0.875rem; line-height: 1.5; margin: 0; }
.trede__gedrag span {
  display: block; margin-bottom: var(--space-100);
  font-family: var(--font-medium); font-weight: var(--weight-medium);
  font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* ---- 03 Wat je na afloop kunt -------------------------------------------- */
.opzet__kop {
  margin: var(--space-700) 0 var(--space-500);
  font-family: var(--font-medium); font-weight: var(--weight-medium);
  font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.check-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-400); }
.check-lijst li { display: flex; align-items: flex-start; gap: var(--space-300);
                  font-family: var(--font-regular); font-weight: var(--weight-regular);
                  font-size: 1rem; line-height: 1.5; }
.check-lijst svg { flex-shrink: 0; margin-top: 4px; fill: none; color: var(--color-text-primary); }

/* ---- Certificaat --------------------------------------------------------- */
/* Op klasse en niet op id: het sectienummer verandert als de volgorde wijzigt. */
.certificaat strong { font-family: var(--font-medium); font-weight: var(--weight-medium); }

/* ---- Wat je na afloop kunt ----------------------------------------------- */
/* De leerresultaten staan in een eigen sectie en krijgen daar twee kolommen;
   vier punten onder elkaar over de volle breedte leest als een restlijstje. */
@media (min-width: 768px) {
  .check-lijst--twee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-500) var(--space-700); }
}

/* ---- Statement ----------------------------------------------------------- */
/* .statement__actie staat sinds 2 september 2026 in styleguide.css: de
   dienstpagina's gebruiken het blok nu ook, en die laden dit bestand niet. */

/* ---- Sociale onderbouwing onder de knoppen in de kop --------------------- */
.hero--bewijs {
  margin: var(--space-500) 0 0;
  font-family: var(--font-regular); font-weight: var(--weight-regular);
  font-size: 1rem; line-height: 1.5; color: var(--color-white);
}
.hero--bewijs strong { font-family: var(--font-medium); font-weight: var(--weight-medium); }