/* ============================================================
   Team overzicht (h2g/team-overzicht) — /team-pagina
   Breadcrumb · hero (A: links / B: gecentreerd + avatarstrip + snelnav) ·
   teamleden (A: profielrijen / B: profielkaarten) · contact-CTA.
   Dynamisch — data komt uit CPT 'teamlid' (inc/cpt-teamlid.php).
   Maten/kleuren 1:1 uit design/Contact+team/design_handoff_team_contact/
   team-detail-1a.html (variant A) en team-detail-1b.html (variant B).
   ============================================================ */

.team-overzicht {
  background: var(--nile-900);
  /* Eigen verticaal ritme via .tmo-main-wrapper i.p.v. de generieke
     section-padding. Padding-top = hoogte van de fixed nav (88px desktop,
     82px ≤860px — zie nav.css): de breadcrumb-balk begint direct ónder de
     nav; zonder deze ruimte valt hij erachter. */
  padding: 88px 0 0;

  /* Sectie-gescopede kleuren die niet 1-op-1 op een bestaand token vallen. */
  --tmo-bg-kaart: #0D1420;
  --tmo-rand:     rgba(255, 255, 255, .07);
  --tmo-tekst:    #DFE5ED;
  --tmo-zacht:    #7C8AA5;
  --tmo-huidig:   #ECEEF3;
  --tmo-quote:    #AFB9CA;
  --tmo-hover:    #5FD5C2;
  --tmo-radius:   14px;
}
@media (max-width: 860px) {
  .team-overzicht { padding-top: 82px; } /* mobiele nav is lager (hamburger) */
}

/* ── Breadcrumb (identiek voor beide varianten) ───────────────────────── */
.tmo-breadcrumb {
  padding: 16px 64px;
  border-bottom: 1px solid var(--tmo-rand);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--tmo-zacht);
}
.tmo-breadcrumb a { color: var(--tmo-zacht); }
.tmo-breadcrumb a:hover { color: var(--teal-300); }
.tmo-scheiding { color: var(--teal-300); }
.tmo-huidig { color: var(--tmo-huidig); font-weight: 600; }

/* ── Main-wrapper (max-width + padding uit het design, identiek A/B) ──── */
.tmo-main-wrapper { max-width: 1200px; margin: 0 auto; padding: 72px 64px 100px; }

/* ── Hero (gedeeld) ────────────────────────────────────────────────────── */
.tmo-titel {
  margin: 18px 0 14px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 54px;
  letter-spacing: -1px;
  color: #fff;
}
.tmo-sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tmo-zacht); }

/* Variant B: hero + eyebrow gecentreerd (zelfde patroon als .sec-head.centered). */
.tmo-hero--b { text-align: center; }
.tmo-hero--b .eyebrow { justify-content: center; }

/* ── Editor-only informatietekst (geen frontend-equivalent) ──────────── */
.tmo-editor-info {
  margin-top: 32px;
  padding: 16px 18px;
  border: 1px dashed var(--tmo-rand);
  border-radius: 8px;
  font-size: 14px;
  color: var(--tmo-zacht);
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────────────────
   Variant A — profielrijen
   ──────────────────────────────────────────────────────────────────────── */
.tmo-profielen { margin-top: 64px; border-top: 1px solid var(--tmo-rand); }

.tmo-rij {
  padding: 56px 0;
  border-bottom: 1px solid var(--tmo-rand);
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
}

.tmo-foto {
  aspect-ratio: 3 / 4;
  border-radius: var(--tmo-radius);
  border: 1px solid var(--tmo-rand);
  overflow: hidden;
  /* Gestreepte placeholder — zonder Courier-tekstlabel (productieklaar; het
     label uit de designreferentie was alleen bedoeld om het prototype te
     annoteren). Een <img> (indien aanwezig) dekt deze achtergrond volledig af. */
  background: #0F1826;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 12px, transparent 12px 24px);
}
.tmo-foto-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tmo-nr {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--gold-500);
}

/* ── Contact-CTA — kaart (variant A) ──────────────────────────────────── */
.tmo-cta--a {
  margin-top: 48px;
  background: var(--tmo-bg-kaart);
  border: 1px solid var(--tmo-rand);
  border-radius: var(--tmo-radius);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.tmo-cta--a h3 { margin: 0; font-family: var(--font-h); font-weight: 700; font-size: 24px; color: #fff; }
.tmo-cta--a p { margin: 8px 0 0; font-size: 15px; color: var(--tmo-zacht); }

/* ────────────────────────────────────────────────────────────────────────
   Variant B — snelnav + profielkaarten
   ──────────────────────────────────────────────────────────────────────── */

/* Avatarstrip in de hero */
.tmo-strip { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.tmo-cirkels { display: flex; padding-left: 10px; }
.tmo-cirkel { width: 44px; height: 44px; margin-left: -10px; border: 2px solid var(--nile-900); }
.tmo-strip-tekst { font-size: 14px; color: var(--tmo-zacht); }

/* Snelnavigatie-chips */
.tmo-nav { margin-top: 30px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.tmo-navchip {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--tmo-tekst);
  transition: .3s;
}
.tmo-navchip:hover {
  border-color: var(--teal-300);
  color: var(--teal-300);
  background: rgba(59, 198, 177, .08);
}

/* Profielkaarten */
.tmo-kaarten { margin-top: 64px; display: flex; flex-direction: column; gap: 24px; }
.tmo-kaart {
  background: var(--tmo-bg-kaart);
  border: 1px solid var(--tmo-rand);
  border-radius: var(--tmo-radius);
  padding: 40px;
  scroll-margin-top: 24px;
}
.tmo-kaartkop { display: flex; align-items: center; gap: 22px; }
.tmo-kaartkop-mid { flex: 1; }

.tmo-kaartlinks { display: flex; gap: 18px; flex: none; }

.tmo-inhoud { margin-top: 28px; display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }

.tmo-explabel {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-500);
}

/* ── Contact-CTA — gecentreerd slot (variant B) ───────────────────────── */
.tmo-cta--b { margin-top: 56px; text-align: center; }
.tmo-cta--b h3 { margin: 0; font-family: var(--font-h); font-weight: 700; font-size: 24px; color: #fff; }
.tmo-cta--b p { margin: 10px 0 0; font-size: 15px; color: var(--tmo-zacht); }
.tmo-cta--b .tmo-knop { margin-top: 24px; }

/* ────────────────────────────────────────────────────────────────────────
   Gedeeld tussen beide varianten — naam/rol/chips/bio/quote/links, met
   ankerscope voor de plekken waar de maten tussen A en B afwijken.
   ──────────────────────────────────────────────────────────────────────── */
.tmo-naam { font-family: var(--font-h); font-weight: 700; color: #fff; }
.tmo-rij .tmo-naam      { margin: 10px 0 4px; font-size: 30px; letter-spacing: -.4px; }
.tmo-kaartkop .tmo-naam { margin: 0; font-size: 26px; letter-spacing: -.3px; }

.tmo-rol { margin: 0; font-size: 15px; color: var(--tmo-zacht); }
.tmo-kaartkop .tmo-rol { margin-top: 4px; }

.tmo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tmo-rij .tmo-chips    { margin-top: 18px; }
.tmo-inhoud .tmo-chips { margin-top: 12px; }
.tmo-chip {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 13px;
  color: var(--tmo-tekst);
}

.tmo-bio { font-size: 16px; line-height: 1.65; color: var(--tmo-tekst); text-wrap: pretty; }
.tmo-rij .tmo-bio    { margin: 22px 0 0; }
.tmo-inhoud .tmo-bio { margin: 0; }
/* Hogere specificiteit dan de twee scope-regels hierboven (2 klassen via
   combinator) — moet ná die regels staan zodat vervolgalinea's altijd 12px
   krijgen, ongeacht variant. */
.tmo-bio + .tmo-bio { margin-top: 12px; }

.tmo-quote {
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--teal-300);
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--tmo-quote);
}
.tmo-rij .tmo-quote    { margin-top: 22px; padding-left: 16px; font-size: 17px; line-height: 1.55; }
.tmo-inhoud .tmo-quote { margin-top: 22px; padding-left: 14px; font-size: 16px; line-height: 1.55; }

.tmo-links, .tmo-kaartlinks {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 14.5px;
}
.tmo-links { margin-top: 24px; display: flex; gap: 20px; }
.tmo-links a, .tmo-kaartlinks a { color: var(--teal-300); }
.tmo-links a:hover, .tmo-kaartlinks a:hover { color: var(--tmo-hover); }

/* Avatars/cirkels (variant B) — vorm + typografie gedeeld, afmeting per plek. */
.tmo-avatar, .tmo-cirkel {
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-weight: 700;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .85);
  background-size: cover;
  background-position: center;
}
.tmo-avatar { width: 88px; height: 88px; font-size: 22px; }
.tmo-cirkel { width: 44px; height: 44px; font-size: 12.5px; }
.tmo-avatar-img, .tmo-cirkel-img { object-fit: cover; }

/* Initialen-avatar-fallbacks — vaste kleurenset, positie-index (i % 4). */
.tmo-fallback-0 { background: #1C3450; }
.tmo-fallback-1 { background: #1E4F47; }
.tmo-fallback-2 { background: #514328; }
.tmo-fallback-3 { background: #2B3A5E; }

/* Hergebruikt .btn.btn-primary (buttons.css) voor padding/radius/schaduw/
   transitie; alleen de kleur (base + hover) volgt hier exact de handoff
   (#3BC6B1 → var(--teal-300) / hover #5FD5C2) i.p.v. de sitebrede
   --teal-500/--teal-300-combinatie. */
.tmo-knop { background: var(--teal-300); }
.tmo-knop:hover { background: var(--tmo-hover); }

/* ── Responsive — media queries 1-op-1 uit team-detail-1a.html/-1b.html ── */
@media (max-width: 1024px) {
  .tmo-main-wrapper { padding: 56px 32px 80px; }
  .tmo-titel { font-size: 42px; }

  /* Variant A */
  .tmo-rij { grid-template-columns: 1fr; gap: 28px; }
  .tmo-foto { max-width: 400px; }

  /* Variant B */
  .tmo-inhoud { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
  .tmo-breadcrumb { padding: 14px 20px; }
  .tmo-main-wrapper { padding: 48px 20px 72px; }
  .tmo-titel { font-size: 32px; }

  /* Variant A */
  .tmo-cta--a { flex-direction: column; align-items: flex-start; }

  /* Variant B */
  .tmo-kaart { padding: 24px; }
  .tmo-kaartkop { flex-wrap: wrap; gap: 16px; }
}

/* ── Toetsenbord-focus: duidelijke teal ring op de donkere achtergrond ── */
.tmo-breadcrumb a:focus-visible,
.tmo-links a:focus-visible,
.tmo-kaartlinks a:focus-visible,
.tmo-navchip:focus-visible,
.tmo-cta .tmo-knop:focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 3px;
}