/* ------------------------------------------------------------------ */
/* page-team.css — styling voor patterns/page-team.php                 */
/* Geëxtraheerd uit _preview/preview-team.html inline <style> (sessie  */
/* 27, pure-pattern refactor). page-hero / eyebrow / cta / btn /        */
/* continuum-bols komen uit preview-shared.css; hier alleen de          */
/* .team-full / .tf-person profielen-lijst.                             */
/* Conditioneel ge-enqueued op slug 'team' (functions.php).             */
/* ------------------------------------------------------------------ */

.team-full { padding: var(--space-4xl) var(--space-2xl); background: var(--color-bg-base); }
.team-full__inner { max-width: 1440px; margin: 0 auto; }
.team-full__head { margin-bottom: var(--space-3xl); max-width: 720px; }
.team-full__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.02em; margin: var(--space-md) 0; }
.team-full__title em { font-style: italic; color: var(--color-accent); }
.team-full__list { display: grid; gap: 0; border-top: 1px solid var(--color-rule); }

.tf-person {
  display: grid; grid-template-columns: 200px 1fr auto;
  gap: var(--space-2xl); align-items: start;
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-rule);
}
.tf-person__photo { aspect-ratio: 4/5; overflow: hidden; background: var(--color-petrol-900); }
.tf-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(0.18) contrast(1.02); }
.tf-person__body { display: flex; flex-direction: column; gap: var(--space-md); }
.tf-person__num { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.22em; color: var(--color-accent); }
.tf-person__name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 0; }
.tf-person__role { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); }
.tf-person__bio { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin: 0; max-width: 60ch; }
.tf-person__meta { display: flex; flex-direction: column; gap: var(--space-md); min-width: 220px; }
.tf-person__spec { padding: var(--space-md); background: var(--color-bg-subtle); border-top: 2px solid var(--color-accent); }
.tf-person__spec-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); display: block; margin-bottom: 8px; }
.tf-person__spec p { font-family: var(--font-mono); font-size: var(--text-2xs); line-height: 1.5; color: var(--color-text-primary); margin: 0; letter-spacing: 0.04em; }
.tf-person__links { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.tf-person__link { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-primary); text-decoration: none; border-bottom: 1px solid var(--color-accent); padding-bottom: 2px; }
.tf-person__link:hover { color: var(--color-accent); }

/* Actie-knoppen: LinkedIn-icoon (zelfde glyph als footer .ft__social) + vCard-download.
   Footer-button-geometrie, aangepast aan de witte laag (donker icoon, hover invert). */
.tf-person__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }
.tf-person__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--color-petrol-900);
  border: 1px solid var(--color-rule);
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.tf-person__social svg { display: block; width: 20px; height: 20px; }
.tf-person__social:hover { color: #fff; background: var(--color-petrol-900); border-color: var(--color-petrol-900); }
.tf-person__vcard {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-petrol-900); text-decoration: none;
  border: 1px solid var(--color-rule);
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.tf-person__vcard svg { display: block; width: 16px; height: 16px; }
.tf-person__vcard:hover { color: #fff; background: var(--color-petrol-900); border-color: var(--color-petrol-900); }

@media (max-width: 1024px) {
  .tf-person { grid-template-columns: 1fr; }
  .tf-person__photo { max-width: 240px; }
}