/* =============================================================
   SM Teamkaart
   Persoonskaart(en): foto met ronde hoeken in een donkere kaart,
   ronde social-knopjes onderin de foto, naam links en rol rechts
   met een stip ervoor. Licht en donker via de band-keuze,
   accent via --tk-accent. Statisch, geen JavaScript.
   ============================================================= */

.sm-tk {
  /* licht is de standaard */
  --tk-bg: #f4f6f5;
  --tk-ink: #0d1512;
  --tk-stil: rgba(13, 21, 18, .62);
  --tk-rand: rgba(13, 21, 18, .13);
  --tk-kaart: rgba(13, 21, 18, .04);
  --tk-soc: rgba(13, 21, 18, .55);
  --tk-rol: rgba(13, 21, 18, .72);
  --tk-accent: #0f8f74;
  --tk-kol: 3;

  box-sizing: border-box;
  background: var(--tk-bg);
  color: var(--tk-ink);
  padding: var(--sm-sectie-ruimte) 0;
  font-family: "Google Sans", "Product Sans", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.sm-tk *, .sm-tk *::before, .sm-tk *::after { box-sizing: inherit; }

.sm-tk--donker {
  --tk-bg: #0a0909;
  --tk-ink: #ffffff;
  --tk-stil: rgba(255, 255, 255, .62);
  --tk-rand: rgba(255, 255, 255, .10);
  --tk-kaart: rgba(255, 255, 255, .045);
  --tk-soc: #1c1c1c;
  --tk-rol: rgba(255, 255, 255, .82);
  --tk-accent: #3DC78F;
}

.sm-tk-top { max-width: 880px; margin: 0 auto; text-align: center; padding: 0 22px; }
.sm-tk-kop {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.15; margin: 0 0 12px; color: var(--tk-ink);
}
/* het verloop-woord in de kop */
.sm-tk-groen {
  background: linear-gradient(96deg, var(--tk-accent), color-mix(in srgb, var(--tk-accent) 55%, var(--tk-ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sm-tk-groen { background: none; color: var(--tk-accent); }
}
.sm-tk-sub { color: var(--tk-stil); font-size: 1.02rem; line-height: 1.7; margin: 0 0 8px; }
.sm-tk-top + .sm-tk-raster { margin-top: 34px; }

/* het raster: 1, 2 of 3 kolommen */
.sm-tk-raster {
  max-width: 1080px; margin: 0 auto; padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(var(--tk-kol, 3), minmax(0, 1fr));
  gap: 20px;
  justify-content: center;
}
/* een kaart alleen wordt niet kaart-breed uitgerekt */
.sm-tk-raster:has(.sm-tk-kaart:only-child) { max-width: 491px; grid-template-columns: 1fr; }

.sm-tk-kaart {
  background: var(--tk-kaart);
  border: 1px solid var(--tk-rand);
  border-radius: 15px;
  padding: 25px;
  transition: transform .35s ease, border-color .35s ease;
}
.sm-tk-kaart:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--tk-accent) 45%, transparent); }

/* de foto: staand, ronde hoeken, socials eroverheen */
.sm-tk-foto {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: auto;
  /* kaart schaalt mee met de breedte: de foto (395:450) past altijd helemaal, ook op mobiel */
  aspect-ratio: 395 / 450;
  margin-bottom: 20px;
  background: color-mix(in srgb, var(--tk-ink) 6%, var(--tk-bg));
}
.sm-tk-foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
}
.sm-tk-leeg { position: absolute; inset: 0; }

/* de ronde social-knopjes onderin de foto */
.sm-tk-socials {
  position: absolute; left: 15px; bottom: 15px;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.sm-tk-soc {
  width: 50px; height: 50px; border-radius: 999px;
  background: var(--tk-soc);
  border: 1px solid var(--tk-rand);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; place-items: center;
  color: #fff; text-decoration: none;
  transition: background .3s ease, transform .3s ease, color .3s ease;
}
.sm-tk-soc svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.sm-tk-soc:hover { background: var(--tk-accent); color: #04261a; transform: translateY(-3px); }

/* naam links, rol rechts met een stip ervoor */
.sm-tk-rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.sm-tk-naam { font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--tk-ink); }
.sm-tk-rol {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; line-height: 1.6; color: var(--tk-rol, var(--tk-stil)); white-space: nowrap;
}
.sm-tk-rol::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .75; flex: 0 0 auto;
}

/* smaller: 2 kolommen, daaronder 1 */
@media (max-width: 989px) {
  .sm-tk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-tk-raster:has(.sm-tk-kaart:only-child) { grid-template-columns: 1fr; }
}
@media (max-width: 749px) {
  .sm-tk-raster { grid-template-columns: 1fr; max-width: 491px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-tk-kaart, html:not(.sm-rustig):not(.sm-beweeg) .sm-tk-soc { transition: none; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-tk-kaart:hover { transform: none; }
}