/* =============================================================================
   team-cards — Grid aus Personen-Karten
   =============================================================================
   Ein responsives Grid von Team-Mitglied-Karten: Foto-Slot (festes Seitenverhältnis,
   Radius oben), Name (h3), Rolle (klein, in Primary), Mini-Bio, LinkedIn-Icon-Link.
   Alle Karten gleich hoch; der Link sitzt unten bündig (margin-top:auto).

   Grid reflowt mobile-first: 1 Spalte <600px, 2 Spalten <900px, 3 ab 900px.
   Per auto-fit wächst es auf großen Viewports natürlich auf 4 Spalten — die
   minimale Karten-Breite --tc-card-min deckelt das (kein Auseinanderdriften).

   TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix()
   daraus — kein hardgekodeter Marken-Wert. Siehe rules/lp-components-token-disziplin.md.
   Die --tc-* sind komponenten-lokale Layout-Konstanten (Spaltenbreite, Foto-
   Verhältnis, Icon-/Touch-Größe) — an keine Marke gekettet, laut Regel erlaubt.

   Generisch: KEINE echten Personenfotos. Der Foto-Slot rendert als neutrale
   Platzhalter-Box (color-mix aus --color-ink). Pro Projekt durch <img> ersetzen.

   Lade-Reihenfolge: _tokens/_base.css -> <brand>.css -> diese Datei.
   ============================================================================ */

.team-cards {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --tc-card-min:   220px;    /* minimale Karten-Breite -> bestimmt das auto-fit-Reflow */
  --tc-photo-ar:   4 / 5;    /* festes Foto-Seitenverhältnis (Hochformat-Portrait) */
  --tc-icon:       20px;     /* LinkedIn-Icon-Größe */
  --tc-tap:        44px;     /* Touch-Target-Mindestgröße */

  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;

  display: grid;
  /* Mobile-first: 1 Spalte. Ab --tc-card-min passt auto-fit mehr Spalten ein. */
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

/* Ab 600px: zwei Spalten. */
@media (min-width: 600px) {
  .team-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Ab 900px: drei Spalten als Default, auto-fit wächst auf großen Viewports
   bis 4+ Spalten (jede Spalte mindestens --tc-card-min breit). */
@media (min-width: 900px) {
  .team-cards {
    grid-template-columns: repeat(auto-fit, minmax(var(--tc-card-min), 1fr));
  }
}

.team-cards__card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;            /* hält den Foto-Radius oben sauber */
  box-shadow: var(--shadow-soft);
}

/* --- Foto-Slot ------------------------------------------------------------- */
.team-cards__photo {
  display: block;
  width: 100%;
  aspect-ratio: var(--tc-photo-ar);  /* hält die Höhe unabhängig vom Bild */
  object-fit: cover;                 /* greift, sobald ein echtes <img> drinsteht */
}

/* Generischer Platzhalter (kein echtes Foto): neutrale getönte Box. */
.team-cards__photo--placeholder {
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
}

/* --- Karten-Inhalt --------------------------------------------------------- */
.team-cards__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;                    /* füllt die Restkarte, damit alle gleich hoch sind */
  padding: var(--space-m);
}

.team-cards__name {
  font-family: var(--font-headline);
  font-size: var(--font-scale-h3);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0;
}

.team-cards__role {
  font-family: var(--font-body);
  font-size: var(--font-scale-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin: var(--space-xs) 0 0;
}

.team-cards__bio {
  font-family: var(--font-body);
  font-size: var(--font-scale-body);
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin: var(--space-s) 0 0;
}

/* --- LinkedIn-Link --------------------------------------------------------- */
.team-cards__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;                  /* schiebt den Link unten bündig (gleiche Karten-Höhe) */
  padding-top: var(--space-m);
  min-height: var(--tc-tap);         /* Touch-Target >= 44px */
  font-family: var(--font-body);
  font-size: var(--font-scale-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-ink-soft);
  transition: color 0.2s ease;
}
.team-cards__link:hover,
.team-cards__link:focus-visible {
  color: var(--color-primary);
}

.team-cards__icon {
  width: var(--tc-icon);
  height: var(--tc-icon);
  fill: currentColor;                /* erbt Link-Farbe: ink-soft, Hover -> primary */
  flex-shrink: 0;
}

/* Reduced-Motion: keine Hover-/Farb-Transition. */
@media (prefers-reduced-motion: reduce) {
  .team-cards__link { transition: none; }
}