/* ============================================================
   TEAM-PREVIEW — alleen voor team-preview.html
   Bouwt voort op style.css (tokens, .panel, .btn, .rider__bib, .link-arrow).
   Geen wijzigingen aan bestaande klassen.
   ============================================================ */

/* ---------- HERO ---------- */
.tp-hero {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--blue); color: var(--paper);
  padding: clamp(96px, 8.5vw, 120px) 0 0;
  --accent: var(--ink);
}
.tp-hero::before { /* zelfde lichtval + raster als de paginakop */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(255, 255, 255, .16), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 100% 88px;
}
.tp-hero__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(8px, 3vw, 48px); align-items: end;
}
.tp-hero__copy { align-self: center; padding-bottom: clamp(40px, 5vw, 72px); max-width: 560px; }
.tp-hero__title {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 80, "opsz" 96;
  font-size: clamp(2.8rem, 6.2vw, 6rem); line-height: .9; letter-spacing: -.03em;
  text-wrap: balance;
}
.tp-hero__title em { color: var(--ink); }

/* Alleen op de homepage (sectie Coureurs): donkerblauwe versie. Op de pagina Coureurs zelf blijft het gewone blauw.
   Donkerblauw = het diepe blauw van de site gemengd met inkt; de blauwe schijf achter het team blijft, de lichtval wordt blauw. */
.tp-hero--home { background: color-mix(in srgb, var(--blue-deep) 26%, var(--ink)); --accent: var(--blue-light); }
@supports not (background: color-mix(in srgb, red, blue)) { .tp-hero--home { background: #0d1a45; } }
.tp-hero--home::before {
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(31, 77, 255, .32), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 100% 88px;
}
.tp-hero--home .tp-hero__title em { color: var(--blue-light); }
.tp-hero__lead--aanpak { margin-top: 14px; font-weight: 600; color: var(--paper); }
.tp-hero__lead { margin-top: 24px; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.6; color: rgba(243, 240, 232, .92); max-width: 46ch; }
.tp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.tp-hero__photo { position: relative; margin: 0; align-self: end; }
@media (min-width: 900px) { .tp-hero__photo { max-width: calc((100svh - 120px) * 1.13); margin-left: auto; } } /* het hele team blijft in beeld op lage schermen */
.tp-cut, .tp-orig { display: block; width: 100%; height: auto; }
.tp-cut { position: relative; z-index: 2; filter: drop-shadow(0 20px 28px rgba(7, 14, 70, .32)); }
.tp-orig { display: none; }
/* Het team in kleur, zonder uitgeknipt randje. De uitsnede is opgeschoond (groep-vrijstaand-zacht-*.webp: lichte rand van de oude
   achtergrond eruit, rand zacht verlopend, iets scherper). Daarover een laag precies in de vorm van het team (masker = de uitsnede):
   een vleugje licht van rechtsboven, zoals in de achtergrond, en heel fijne korrel. Kleuren blijven zoals ze zijn. */
.tp-cut { filter: contrast(1.03) drop-shadow(0 20px 28px rgba(7, 14, 70, .32)); }
.tp-hero__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask: url("team/groep-vrijstaand-zacht-1200.webp") 0 0 / 100% 100% no-repeat;
  mask: url("team/groep-vrijstaand-zacht-1200.webp") 0 0 / 100% 100% no-repeat;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.22'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    radial-gradient(70% 55% at 88% 0%, rgba(255, 255, 255, .28), transparent 70%);
  mix-blend-mode: soft-light;
}
.tp-hero[data-variant="origineel"] .tp-hero__photo::after { display: none; }

/* subtiele vormen in bestaande kleuren: ze liggen achter de mensen */
.tp-shape { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; }
.tp-shape--disc {
  left: 4%; right: -6%; bottom: -34%; aspect-ratio: 1;
  background: radial-gradient(circle at 30% 22%, #2f5cff 0%, var(--blue-deep) 62%);
}
.tp-shape--ring { left: -3%; right: -13%; bottom: -46%; aspect-ratio: 1; border: 1.5px solid rgba(243, 240, 232, .2); }
.tp-shape--dot { width: clamp(30px, 4vw, 56px); aspect-ratio: 1; right: 5%; top: 9%; background: var(--red); }

/* intro-animatie, alleen als beweging is toegestaan */
@media (prefers-reduced-motion: no-preference) {
  .tp-cut, .tp-hero__photo::after { animation: tpRise 1s var(--ease-out) .1s both; }
  .tp-shape--disc { animation: tpDisc 1.2s var(--ease-out) both; }
  .tp-shape--dot { animation: tpPop .7s var(--ease-spring) .7s both; }
  .tp-hero__copy > * { animation: tpRise .9s var(--ease-out) both; }
  .tp-hero__copy > :nth-child(2) { animation-delay: .06s; }
  .tp-hero__copy > :nth-child(3) { animation-delay: .14s; }
  .tp-hero__copy > :nth-child(4) { animation-delay: .22s; }
}
@keyframes tpRise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes tpDisc { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes tpPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

/* variant: originele foto in gewone afbeeldingscontainer (vergelijking) */
.tp-hero[data-variant="origineel"] .tp-cut,
.tp-hero[data-variant="origineel"] .tp-shape { display: none; }
.tp-hero[data-variant="origineel"] .tp-orig {
  display: block; border-radius: 28px; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: 50% 62%;
  box-shadow: 0 24px 50px rgba(7, 14, 70, .35);
}
.tp-hero[data-variant="origineel"] .tp-hero__grid { align-items: center; padding-bottom: clamp(72px, 8vw, 120px); }

/* ---------- KAARTEN ---------- */
.tp-team { padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(56px, 6vw, 96px); }
.tp-team__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 80px); row-gap: 14px;
  align-items: end; margin-bottom: clamp(24px, 3vw, 44px);
}
.tp-team__head .section-label { grid-column: 1 / -1; }
.tp-team__head .section-title { margin: 0; }
.tp-team__head .lead { margin: 0; max-width: 52ch; }
.tp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
/* Kaart 2 en 4 staan als geheel iets lager (foto, naam, functie, tekst, iconen). translate staat los van de hover-lift en laat de rij-indeling intact. */
.tp-cards { --tp-shift: 28px; padding-bottom: var(--tp-shift); }
.tp-card--offset { translate: 0 var(--tp-shift); }
/* Gelijke hoogtes ondanks verschillende tekstlengte: elke kaart deelt de rijen (foto / naam / functie / tekst / iconen) met de andere kaarten. */
@supports (grid-template-rows: subgrid) {
  .tp-cards { row-gap: 0; }
  .tp-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .tp-card__body { display: contents; }
}
/* profielfoto: portret op blauwe achtergrond */
.tp-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 4.7; overflow: hidden; border-radius: 22px;
  background: radial-gradient(circle at 50% 18%, #3a63ff 0%, var(--blue) 55%, var(--blue-deep) 100%);
}
.tp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
@media (hover: hover) and (pointer: fine) {
  .tp-card { transition: transform .5s var(--ease-out); }
  .tp-card:hover { transform: translateY(-4px); }
  .tp-card:hover .tp-photo { box-shadow: 0 22px 40px rgba(12, 15, 29, .18); }
}
.tp-photo { transition: box-shadow .5s var(--ease-out); }
.tp-photo .rider__bib { z-index: 2; left: 14px; top: 14px; font-size: 1.15rem; padding: 8px 11px 6px; }
.tp-card__social { display: flex; align-items: center; margin: 16px 0 0 -7px; align-self: start; } /* eerste logo sluit links aan op de tekst */
.tp-card__social a { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.tp-card__social a[href*="linkedin.com"] img { width: 21px; height: 21px; } /* optische correctie: de LinkedIn-tegel oogt zwaarder dan Instagram */
.tp-card__social a + a { margin-left: -2px; } /* logo's ca. 12 px uit elkaar, klikvlakken blijven 36 x 36 px */
.tp-card__social img { display: block; width: 22px; height: 22px; transition: transform .3s var(--ease-out); } /* SVG met eigen merkkleuren, verhouding 1:1 */
.tp-card__social a:hover img, .tp-card__social a:focus-visible img { transform: scale(1.14); }
.tp-card__social a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.tp-card__body { padding-top: 16px; }
@supports (grid-template-rows: subgrid) { .tp-card__name { margin-top: 16px; } .tp-card__body { padding-top: 0; } }
.tp-card__name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 85; font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: 1; letter-spacing: -.02em; }
.tp-card [data-placeholder] { color: var(--ink-3); }
.tp-card__text[data-placeholder] { display: none; } /* persoonlijke tekst volgt: tot die tijd niets tonen */
.tp-card__role { margin: 8px 0 0; font-family: var(--f-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); }
.tp-card__text { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 12px 0 0; max-width: 38ch; }

/* ---------- hover/tik-zones op de groepsfoto ---------- */
.tp-people { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tp-zone {
  position: absolute; inset: 0; padding: 0; pointer-events: auto; cursor: pointer;
  clip-path: var(--zone); -webkit-tap-highlight-color: transparent;
}
.tp-zone:focus { outline: none; }
.tp-people.is-debug .tp-zone { background: rgba(255, 61, 46, .28); outline: 0; }
.tp-people.is-debug .tp-zone:nth-of-type(2n) { background: rgba(31, 191, 107, .3); }
.tp-tag {
  position: absolute; left: calc(var(--ax) * 1%); top: calc(var(--ay) * 1%); z-index: 4;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(240px, 46vw);
  padding: 10px 16px 10px 10px; border-radius: 16px;
  background: var(--ink); color: var(--paper); border: 1.5px solid rgba(243, 240, 232, .32);
  box-shadow: 0 16px 34px rgba(7, 14, 70, .38);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 10px) scale(.96); transform-origin: 50% 0;
  transition: opacity .22s var(--ease), transform .35s var(--ease-out), visibility 0s linear .35s;
}
.tp-tag::before { /* wijzertje naar het gezicht */
  content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; background: var(--ink);
  border-left: 1.5px solid rgba(243, 240, 232, .32); border-top: 1.5px solid rgba(243, 240, 232, .32);
  transform: translateX(-50%) rotate(45deg);
}
.tp-tag.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.tp-tag__bib {
  flex: none; background: var(--paper); color: var(--ink); border-radius: 9px; rotate: -6deg;
  font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; line-height: 1; padding: 8px 9px 6px;
}
.tp-tag__txt { display: grid; gap: 4px; min-width: 0; }
.tp-tag__name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 85; font-size: 1.15rem; line-height: 1; letter-spacing: -.015em; }
.tp-tag__role { font-family: var(--f-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-light); }
.tp-tag.is-placeholder .tp-tag__name, .tp-tag.is-placeholder .tp-tag__role { opacity: .8; }

/* desktop: de tag volgt de cursor (positie via translate, geschaald door team-preview.js met lichte vertraging) */
.tp-tag.is-follow { left: 0; top: 0; translate: var(--tx, 0px) var(--ty, 0px); transform: scale(.94); transform-origin: 0 0; }
.tp-tag.is-follow.is-open { transform: scale(1); }
.tp-tag.is-follow::before { display: none; }
@media (prefers-reduced-motion: reduce) { .tp-tag.is-follow, .tp-tag.is-follow.is-open { transform: none; } }
.tp-hero[data-variant="origineel"] .tp-people { display: none; }
@media (hover: none), (pointer: coarse) { /* touch: kleine stippen als hint dat je kunt tikken */
  .tp-dot-hint { position: absolute; left: calc(var(--ax) * 1%); top: calc(var(--ay) * 1% - 7px); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px rgba(12, 15, 29, .35); z-index: 3; pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) { .tp-dot-hint::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--paper); animation: tpHint 2.4s ease-out infinite; } }
}
@media (hover: hover) and (pointer: fine) { .tp-dot-hint { display: none; } }
@keyframes tpHint { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
@media (max-width: 559px) {
  .tp-tag { gap: 9px; padding: 8px 12px 8px 8px; max-width: 190px; }
  .tp-tag__name { font-size: 1rem; }
  .tp-tag__role { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .tp-tag, .tp-tag.is-open { transform: translate(-50%, 0); transition: opacity .2s linear, visibility 0s; } }

/* ---------- vergelijkknop (alleen preview) ---------- */
.tp-switch[hidden] { display: none; }
.tp-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  display: inline-flex; align-items: center; gap: 4px; padding: 5px;
  background: var(--ink); color: var(--paper); border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  font-size: 13px;
}
.tp-switch__tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 0 10px 0 12px; color: var(--blue-light); }
.tp-switch button { padding: 9px 14px; border-radius: 999px; font-weight: 700; color: rgba(243, 240, 232, .8); transition: background .25s, color .25s; }
.tp-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .tp-cards { --tp-shift: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  @supports (grid-template-rows: subgrid) { .tp-cards { row-gap: 0; } .tp-card__social { margin-bottom: 36px; } }
  .tp-team__head { grid-template-columns: 1fr; }
  }
@media (max-width: 899px) {
  .tp-hero__grid { grid-template-columns: 1fr; gap: 0; }
  .tp-hero__copy { padding-bottom: 36px; max-width: none; }
  .tp-hero__actions .btn { flex: 1 1 auto; }
  .tp-hero__photo { margin: 0 calc(var(--gutter) * -1); }
  .tp-shape--disc { left: 6%; right: -20%; bottom: -26%; }
  .tp-shape--ring { display: none; }
  .tp-hero[data-variant="origineel"] .tp-hero__photo { margin: 0 0 56px; }
  .tp-hero[data-variant="origineel"] .tp-hero__grid { padding-bottom: 0; }
}
@media (max-width: 559px) {
  .tp-photo { aspect-ratio: 4 / 4.4; }
  .tp-cards { --tp-shift: 0px; grid-template-columns: 1fr; max-width: 420px; }
  .tp-card--offset { translate: none; }
  @supports (grid-template-rows: subgrid) { .tp-card__social { margin-bottom: 36px; } }
  .tp-switch { position: absolute; left: auto; right: 16px; top: 76px; bottom: auto; white-space: nowrap; }
  .tp-switch__tag { display: none; }
}