/* Teamkaarten en profielen, los van het gegenereerde MAG-blok. */
.team-grid { gap: var(--ruimte-5); }
.persoon-kaart {
  display: flex; flex-direction: column; min-width: 0; padding: var(--ruimte-5);
  border-color: var(--line-strong); box-shadow: none;
}
.persoon-kaart:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.persoon-portret {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-1); background: var(--lichtgrijs); margin-bottom: var(--ruimte-5);
}
.persoon-kaart .eyebrow { min-height: 3.2em; align-items: flex-start; margin-bottom: var(--ruimte-3); }
.persoon-kaart .eyebrow::before { margin-top: .8em; flex: 0 0 auto; }
.persoon-kaart h3 { margin: 0 0 var(--ruimte-3); font-size: var(--t-h4); font-weight: 300; }
.persoon-bio { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.persoon-quote {
  color: var(--ink); font-size: var(--t-lead); line-height: 1.5;
  padding-left: var(--ruimte-4); border-left: 1px solid var(--accent);
}
.persoon-mail { align-self: flex-start; margin-top: auto; overflow-wrap: anywhere; }
.team-actief .persoon-bio, .team-actief .persoon-quote { display: none; }
.persoon-open {
  align-self: flex-start; margin-top: var(--ruimte-5); padding: var(--ruimte-3) var(--ruimte-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-1);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px;
}
.persoon-open::after { content: ''; position: absolute; inset: 0; }
.team-actief .persoon-mail { position: relative; z-index: 1; }
.persoon-open:hover { border-color: var(--accent); color: var(--accent); }
.persoon-kaart:has(.persoon-open:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.persoon-open:focus-visible, .team-venster a:focus-visible, .team-sluit:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.team-venster {
  width: min(920px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-2);
  background: var(--bg); color: var(--ink); box-shadow: none; overflow-y: auto;
}
.team-venster::backdrop { background: var(--antraciet); opacity: .55; }
.team-venster[open] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); animation: team-in var(--dur-1) var(--ease-out); }
.team-foto { margin: 0; background: var(--lichtgrijs); }
.team-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.team-info { min-width: 0; padding: var(--ruimte-7) var(--ruimte-6) var(--ruimte-6); }
.team-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.team-inhoud h3 { margin-bottom: var(--ruimte-3); font-size: var(--t-h3); font-weight: 300; }
.team-inhoud .eyebrow { margin-bottom: var(--ruimte-5); letter-spacing: .1em; }
.team-inhoud .eyebrow::before { content: none; }
.team-inhoud .persoon-mail {
  display: inline-block; margin-top: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--antraciet); color: var(--wit); border-radius: var(--radius-1); font-size: 14px;
}
.team-inhoud .persoon-mail:hover { background: var(--accent); }
.team-linkedin { display: inline-block; margin-top: var(--ruimte-4); text-decoration: underline; text-underline-offset: 3px; }
.team-sluit {
  position: absolute; top: var(--ruimte-3); right: var(--ruimte-3); z-index: 2;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-1);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 24px;
}
.team-sluit:hover { border-color: var(--accent); color: var(--accent); }
.team-profiel-open { overflow: hidden; }
.persoon-open[hidden], .team-linkedin[hidden] { display: none; }
html[data-beweging="uit"] .team-venster[open] { animation: none; }
@keyframes team-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .team-venster { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .team-venster[open] { grid-template-columns: minmax(0, 1fr); }
  .team-foto img { max-height: 48dvh; object-fit: contain; }
  .team-info { padding: var(--ruimte-5); }
  .team-inhoud h3 { font-size: var(--t-h4); }
}