/* Gratis shortlist op de dienstpagina's (Timo 20 oktober 2026).
   Twee blokken:
     .sl-uitleg  uitleg in drie stappen, tussen "Waar het misgaat" en "Onze aanpak";
     .sl-ctabar  dunne balk, tussen "Wat er in de opdracht zit" en "Wat klanten zeggen".
   De balk is een letterlijke kopie van de CTA-balk op de homepage (css/sections/s5.css,
   .s5 .s5-ctabar ...), met eigen klassenamen omdat die regels onder .s5 hangen. Verandert
   daar iets, neem het hier dan mee. */

/* ---------- Uitleg ---------- */

/* Dunne banner (Timo 20 okt: "nu is het bijna een hele sectie", daarna "maak het gewoon alleen
   dat bovenste deel"): kop, één zin en de knop. */
/* Geen eigen padding: het is een <aside> buiten de ritmeregel (ritme-licht.css), de secties
   ervoor en erna dragen elk hun halve stap. */
.sl-uitleg {
  display: block;
}
.sl-uitleg-kaart {
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px);
  background: var(--surface-card);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-band);
  box-shadow: var(--shadow-card);
}
.sl-uitleg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}
.sl-uitleg-titel {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.05;
}
.sl-uitleg-lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-body);
}
.sl-uitleg-actie {
  flex: none;
  text-align: center;
}
.sl-uitleg-micro {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-body);
}


/* ---------- Dunne balk (kopie van .s5-ctabar) ---------- */

/* Dicht op het paneel erboven (Timo 20 okt: "wat dichter bij die sectie erboven"). Een <div>
   buiten de ritmeregel (ritme-licht.css): de afstand is alleen nog de onderkant van de sectie
   erboven. */
.sl-balk-sectie {
  display: block;
}
.sl-ctabar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: 24px 28px 24px 32px;
  background: var(--surface-card);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-band);
  box-shadow: var(--shadow-card);
}
.sl-ctabar-left {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}
.sl-avatars {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-avatars li + li {
  margin-left: -14px;
}
.sl-avatars img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  object-fit: cover;
}
.sl-ctabar-divider {
  flex: none;
  width: 1px;
  height: 44px;
  background: var(--line);
}
.sl-ctabar-title {
  font-size: 22px;
}
.sl-ctabar-sub {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
}
.sl-ctabar-sub-line {
  display: block;
}
.sl-ctabar-btn {
  flex: none;
}
.sl-ctabar-btn .arr svg {
  display: block;
}
.sl-ctabar-btn:hover .arr {
  transform: translate(2px, -2px);
}

/* ---------- Tablet ---------- */

@media (max-width: 880px) {
  .sl-uitleg-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .sl-uitleg-actie {
    text-align: left;
  }
  .sl-ctabar {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
  }
  .sl-ctabar-btn {
    flex: initial;
  }
}

/* ---------- Mobiel ---------- */

@media (max-width: 560px) {
  .sl-uitleg-kaart {
    padding: 28px 22px;
  }
  /* Zelfde als de knop in de balk hieronder: smallere zijkanten, anders loopt
     "Ontvang 20 gratis profielen" op 390px over twee regels. */
  .sl-uitleg-actie {
    width: 100%;
  }
  .sl-uitleg-btn {
    width: 100%;
    padding-inline: 16px;
  }
  .sl-ctabar {
    padding: 24px 20px;
  }
  .sl-ctabar-left {
    flex-wrap: wrap;
    gap: 16px 20px;
  }
  .sl-ctabar-divider {
    display: none;
  }
  .sl-ctabar-sub-line {
    display: inline;
  }
  .sl-ctabar-btn {
    width: 100%;
    padding-inline: 16px;
  }
}