/* ══ Over ons ════════════════════════════════════════════════════════
   Twee portretten op een pistache boog in de hero, daaronder de twee
   rollen op lavendel. Alle kleuren en maten komen uit tokens.css. */

/* ── hero met de twee portretten ──────────────────────────────────── */
.hero--overons { padding-block: clamp(28px, 4vw, 64px) clamp(48px, 6vw, 88px); }
.hero--overons h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); }

.portretten { position: relative; justify-self: center; width: 100%; max-width: 560px; aspect-ratio: 1.05; }
/* de pistache boog ligt achter de portretten */
.portretten__boog {
  position: absolute; z-index: -1;
  right: 0; top: 2%;
  width: 84%; aspect-ratio: 1;
  background: var(--pistache);
  border-radius: 50% 50% 8% 50% / 50% 50% 8% 50%;
}
.portret {
  position: absolute; margin: 0;
  width: 56%;
  padding: 10px 10px 0;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-floating);
}
.portret img { width: 100%; height: auto; border-radius: 10px; }
.portret figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s12);
  padding: 10px 2px 12px;
}
.portret figcaption b { display: block; font-size: 0.875rem; color: var(--text-heading); }
.portret figcaption span span { display: block; font-size: 0.75rem; color: var(--text-muted); }
.portret .li { width: 18px; height: 18px; flex: none; color: var(--aubergine); }

/* de twee kaarten staan los van elkaar en licht gedraaid */
.portret--john   { right: 0; top: 0; transform: rotate(3.5deg); z-index: 2; }
.portret--sheraz { left: 0; bottom: 10%; transform: rotate(-4deg); z-index: 1; }

.portretten__chip {
  position: absolute; right: 4%; bottom: 0;
  display: flex; align-items: center; gap: var(--s12);
  padding: 10px 18px;
  border-radius: var(--radius-button);
  background: var(--aubergine); color: var(--bg);
  font-size: var(--label-size); font-weight: 600;
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  white-space: nowrap;
}
.portretten__chip span { width: 5px; height: 5px; border-radius: 50%; background: var(--pistache); }

@media (max-width: 760px) {
  /* op een telefoon naast elkaar in plaats van over elkaar: zo blijven
     naam, rol en LinkedIn van beide kaarten zichtbaar. De versprongen
     hoogte en de lichte draai houden het speelse van desktop. */
  .portretten {
    max-width: 420px; aspect-ratio: auto; margin-top: var(--s24);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s12); align-items: start;
    padding-top: var(--s8);
  }
  .portret { position: relative; inset: auto; width: auto; padding: 8px 8px 0; border-radius: 16px; }
  .portret--sheraz { margin-top: var(--s32); transform: rotate(-2.5deg); }
  .portret--john { transform: rotate(2.5deg); }
  .portret figcaption { gap: var(--s8); padding: 8px 2px 10px; align-items: flex-start; }
  .portret figcaption b { font-size: 0.8125rem; }
  .portret figcaption span span { font-size: 0.6875rem; line-height: 1.35; }
  .portret .li-link { margin-top: 1px; }
  /* krappere letterafstand, zodat het label ook op 320px niet wordt afgesneden */
  .portretten__chip { grid-column: 1 / -1; position: static; margin-top: var(--s8); justify-content: center; gap: var(--s8); padding: 10px 14px; font-size: 0.6875rem; letter-spacing: .08em; }
}
@media (max-width: 360px) { .portretten__chip { font-size: 0.625rem; letter-spacing: .06em; } }

/* ── twee rollen ──────────────────────────────────────────────────── */
.rollen { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 900px) { .rollen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.rollen__kop { display: grid; gap: var(--s16); align-content: start; }
.rollen__kop .label { color: var(--label-op-lavendel); }
.rollen__kop .lede { font-size: 1rem; }
.rollen__lijst { display: grid; }
.rol {
  display: grid; gap: var(--s8) var(--s24);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--line-on-lavendel);
}
.rol:last-child { border-bottom: 1px solid var(--line-on-lavendel); }
@media (min-width: 620px) { .rol { grid-template-columns: 150px minmax(0, 1fr) auto; align-items: start; } }
.rol__n {
  font-size: var(--label-size); font-weight: 600;
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--label-op-lavendel);
}
.rol h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.rol p { margin-top: var(--s8); color: var(--text-body); }
/* LinkedIn-links */
.li-link { display: inline-grid; place-items: center; color: var(--aubergine); border-radius: 6px; transition: color var(--t-fast) ease; }
.li-link:hover { color: var(--aubergine-hover); }
.rol__li .li { width: 20px; height: 20px; }

/* ── waarom we dit doen ───────────────────────────────────────────── */
.overtuiging { display: grid; gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (min-width: 900px) { .overtuiging { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.overtuiging h2 { margin-top: var(--s16); }