/* =============================================================================
   bio-split — Bio-Sektion: Portrait neben Text, mit Beleg-Chips
   =============================================================================
   Geerntet aus der Kunden-Präzedenz (Sektions-Ernte 2026-09-01, recfX55otwCPVGo4Z):
   .trust/.portrait/.cred der praesenz-check-lp. Portrait im 4:5-Format mit
   Primary-Ring und Innen-Vignette, daneben Headline, Absätze und eine Zeile
   Beleg-Chips (Pill-Form). Für das Zitat unter der Bio: quote-cards--single
   mit Akzentkante in denselben Block setzen, kein eigenes Zitat-Element hier.

   TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix()
   daraus. Die --bs-* sind komponenten-lokale Layout-Konstanten
   (rules/lp-components-token-disziplin.md).

   Statisch: braucht KEIN eigenes JS. Mit [data-reveal] kompatibel.

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

.bio-split {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --bs-bp-split:      860px;   /* ab hier zweispaltig */
  --bs-portrait-max:  340px;   /* Breite des Portraits */
  --bs-portrait-ratio: 4 / 5;  /* Seitenverhältnis des Portraits */

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: start;
  margin-top: var(--space-l);
}

@media (min-width: 860px) {
  .bio-split {
    grid-template-columns: var(--bs-portrait-max) 1fr;
    gap: var(--space-xl);
  }
}

.bio-split__media {
  position: relative;
  width: 100%;
  max-width: var(--bs-portrait-max);
  margin: 0 auto;
  aspect-ratio: var(--bs-portrait-ratio);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.bio-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Innen-Vignette plus feiner Primary-Rand (das .portrait::after-Detail). */
.bio-split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 60px -20px color-mix(in srgb, var(--color-ink) 70%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Platzhalter-Zustand ohne echtes Foto (Konvention wie team-cards). */
.bio-split__media--placeholder {
  background: var(--color-bg-wash);
}

.bio-split__title {
  margin: 0 0 var(--space-s);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--font-scale-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-wrap: balance;
}

.bio-split__body p {
  margin: 0 0 var(--space-s);
  color: var(--color-ink-soft);
  font-size: var(--font-scale-body);
  line-height: 1.65;
}
.bio-split__body p:last-child { margin-bottom: 0; }
.bio-split__body strong { color: var(--color-ink); font-weight: 600; }

/* Beleg-Chips: Pill-Reihe unter dem Text (.cred-Muster). Nur belegbare Werte. */
.bio-split__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-m);
  padding: 0;
  list-style: none;
}

.bio-split__chip {
  font-size: var(--font-scale-small);
  font-weight: 600;
  color: var(--color-ink-soft);
  padding: 6px 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.bio-split__chip b {
  color: var(--color-primary);
  font-weight: 800;
}