/*
 * Praxiszentrum — Team (Ärzte-Grid) Page CSS
 * S2.3-B revision (2026-04-19): doctor grid with avatar placeholders,
 * specialty, language chips and self-introduction.
 *
 * Selector-Namespace: .pxz-team-*
 * Token-Quelle: tokens.css v2 Schicht 2. Typografie aus components.css
 * (.pxz-title-2, .pxz-title-3, .pxz-eyebrow, .pxz-lead, .pxz-btn).
 */

/* ----------------------------------------------------------------------------
 * Page container
 * ------------------------------------------------------------------------- */
.pxz-team {
  background: var(--pxz-c-bg);
  color: var(--pxz-c-ink);
  font-size: var(--pxz-t6-size);    /* S40-B: Body-Base 26px */
  line-height: var(--pxz-t6-line);
}

/* ----------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */
.pxz-team-hero {
  padding: var(--space-11) var(--pxz-space-container-x-desktop) var(--space-9);
  text-align: center;
}
.pxz-team-hero-inner {
  max-width: var(--pxz-c2-max);  /* S55d */
  margin: 0 auto;
}
.pxz-team-eyebrow {
  color: var(--pxz-c-accent);
  margin: 0 0 var(--space-4);
}
.pxz-team-title {
  color: var(--pxz-c-ink);
  margin: 0 0 var(--space-5);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.pxz-team-sub {
  color: var(--pxz-c-ink-muted);
  max-width: var(--pxz-c1-max);  /* S55d */
  margin: 0 auto;
  font-size: var(--pxz-t5-size);
}

/* ----------------------------------------------------------------------------
 * Narrative intro (post_content)
 * S58 (2026-05-01, Dr. Stracke): outer container width unified to 1600px
 * (matches homepage .pxz-mfa-inner / .pxz-hero-img-wrap). Inner reading
 * lane stays at 75ch via direct-child rule so long lines do not hurt
 * readability on wide displays. Headings + lists keep the same lane so
 * the block reads like a single column even when the wrapper is wide.
 * ------------------------------------------------------------------------- */
.pxz-team-intro {
  padding: 0 var(--pxz-space-container-x-desktop) var(--space-11);
}
.pxz-team-intro-inner {
  max-width: var(--pxz-c3-max);  /* S55d */
  margin: 0 auto;
  color: var(--pxz-c-ink-muted);
  font-size: var(--pxz-t6-size);
  line-height: 1.55;
}
.pxz-team-intro-inner > * {
  max-width: var(--pxz-c1-max);  /* S55d */
  margin-left: auto;
  margin-right: auto;
}
.pxz-team-intro-inner p { margin: 0 auto var(--space-5); max-width: var(--pxz-c1-max); }  /* S55d C1 */
.pxz-team-intro-inner p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
 * Grid section
 * ------------------------------------------------------------------------- */
.pxz-team-grid-section {
  padding: var(--space-11) var(--pxz-space-container-x-desktop) var(--space-13);
  background: var(--pxz-c-surface-alt);
}
.pxz-team-grid-inner {
  max-width: var(--pxz-c3-max);  /* S55d */ /* S58 (2026-05-01, Dr. Stracke): unified to homepage container width */
  margin: 0 auto;
}
.pxz-team-grid-title {
  color: var(--pxz-c-ink);
  text-align: center;
  margin: 0 0 var(--space-9);
}

.pxz-team-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* ----------------------------------------------------------------------------
 * Doctor card
 * ------------------------------------------------------------------------- */
/* S65b (2026-05-10): Easing auf Apple-Spring + Lift -2 → -3 px (konsistent
 * mit homepage `.pxz-team-card`). Hover-Duration 120ms war zu schnappig
 * für Premium-Eindruck — 280ms wirkt ruhiger. */
.pxz-team-card {
  background: var(--pxz-c-surface);
  border-radius: var(--pxz-radius-card);
  box-shadow: var(--pxz-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 280ms var(--pxz-easing-spring), transform 280ms var(--pxz-easing-spring);
}
.pxz-team-card:hover,
.pxz-team-card:focus-within {
  box-shadow: var(--pxz-shadow-card-hi);
  transform: translateY(-3px);
}

/* S2.3-aerzte-services — clickable card wrapper */
.pxz-team-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.pxz-team-card-link:focus-visible {
  outline: var(--pxz-focus-ring-width) solid var(--pxz-focus-ring-color);
  outline-offset: var(--pxz-focus-ring-offset);
  border-radius: var(--pxz-radius-card);
}
.pxz-team-card-cta {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--pxz-font-body);
  font-size: var(--pxz-t8-size);
  font-weight: var(--font-weight-semibold);
  color: var(--pxz-c-accent);
  letter-spacing: 0.005em;
}
.pxz-team-card-link:hover .pxz-team-card-cta {
  color: var(--pxz-c-accent-hover);
}

.pxz-team-card-avatar {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pxz-font-display);
  font-weight: var(--font-weight-semibold);
  font-size: 56px;
  letter-spacing: -0.015em;
  color: var(--pxz-c-surface);
  position: relative;
  overflow: hidden;
}
/* S65-photo-3 (2026-05-02): card-avatar is 4:3 (or 16:9 mobile), but the
   uploaded portraits are 1:1 — `object-fit: cover` therefore center-clips
   top + bottom and decapitates the head. Fix: anchor at the top edge. */
.pxz-team-card-img,
.pxz-team-card-img.pxz-team-card-img { /* tiny specificity boost */
  object-position: 50% 0%;
}

/* S65-photo-6 (2026-05-02, Dr.-Stracke-Direktive):
   Seelig / Jawich / Shahin haben ein eng gerahmtes 1:1-Source-Bild —
   `object-fit: cover` schneidet im 4:3-Container Stirn oder Kinn ab.
   Lösung: für diese 3 Cards `object-fit: contain` — das vollständige
   Bild bleibt sichtbar (nichts gecroppt, nicht verzerrt), die Akzent-
   Hintergrundfarbe der Card wird seitlich als ~12 %-Rahmen sichtbar.
   Sarwari: Source-Bild trägt bereits 380 px Pillow-Headroom, kein
   Override nötig. */
.pxz-team-card[data-slug="dr-seelig"]  .pxz-team-card-img,
.pxz-team-card[data-slug="dr-jawich"]  .pxz-team-card-img,
.pxz-team-card[data-slug="dr-shahin"]  .pxz-team-card-img {
  object-fit: contain;
  object-position: center;
}

/* S76 (2026-05-16, Iter5): Emily Böhne — Foto auf 1280×960 (4:3) gepaddet
   via Edge-Replication (originale Studio-Wand-Pixel seitlich gestreckt).
   Bild-Aspect = Card-Aspect → object-fit cover passt perfekt ohne Crop
   und ohne Card-BG-Lücken. Card-aspect bleibt Default (4:3) wie alle
   anderen Cards. Kein Pro-Slug-Override mehr nötig. */

.pxz-team-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bugs-Welle 2026-05-13 (Bug #3): picture liegt absolut über dem Initialen-
 * Span. Bei 404 setzt das img-onerror picture auf display:none — Initialen
 * scheinen als Fallback durch. Verhindert leere gelbe Box wenn Foto fehlt. */
.pxz-team-card-picture {
  position: absolute;
  inset: 0;
  display: block;
}
.pxz-team-card-picture img { width: 100%; height: 100%; display: block; }
.pxz-team-card-initials {
  display: block;
  line-height: 1;
}
/* Bugs-Welle 2026-05-13 (Bug #2): Köpfe waren auf iPhone teils abgeschnitten,
 * weil object-position: 50% 0% bei manchen Fotos das Kinn raussschneidet.
 * Auf schmalen Viewports großzügiger nach unten verlagern, sodass Stirn+Kinn
 * Platz haben — der Hintergrund-Akzent zeigt dann oben ggf. einen schmalen
 * Streifen, das ist akzeptabel. */
@media (max-width: 540px) {
  .pxz-team-card-avatar { aspect-ratio: 1 / 1; }
  .pxz-team-card-img { object-position: 50% 10%; }
}

.pxz-avatar-accent-red   { background: var(--pxz-c-accent); }
.pxz-avatar-accent-amber { background: var(--pxz-c-accent-dark); color: var(--pxz-c-ink); }
.pxz-avatar-accent-ink   { background: var(--pxz-c-ink); }
/* S65-photo (2026-05-02): zusätzliche Akzente für Praxisteam — Corporate-Mint
   für „Rest ohne Fotos", medizinisches Blau für IT, Teal als sekundäre Variante. */
.pxz-avatar-accent-mint  { background: #00A896; color: #fff; }
.pxz-avatar-accent-blue  { background: #0277BD; color: #fff; }
.pxz-avatar-accent-teal  { background: #028090; color: #fff; }
.pxz-avatar-accent-rose  { background: #C8607A; color: #fff; }

.pxz-team-card-body {
  padding: var(--space-6) var(--space-7) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pxz-team-card-name {
  margin: 0;
  font-family: var(--pxz-font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--pxz-t5-size);
  line-height: 1.25;
  color: var(--pxz-c-ink);
  letter-spacing: -0.005em;
}

.pxz-team-card-role {
  margin: 0;
  font-family: var(--pxz-font-body);
  font-size: var(--pxz-t8-size);
  line-height: var(--pxz-t8-line);
  color: var(--pxz-c-accent);
  font-weight: var(--font-weight-medium);
}

.pxz-team-card-langs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pxz-team-card-langs li {
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--pxz-c-surface-alt);
  color: var(--pxz-c-ink-muted);
  font-family: var(--pxz-font-body);
  font-size: var(--pxz-t8-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.pxz-team-card-intro {
  margin: var(--space-2) 0 0;
  font-family: var(--pxz-font-body);
  font-size: var(--pxz-t7-size);
  line-height: 1.55;
  color: var(--pxz-c-ink-muted);
}

/* ----------------------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------------------- */
.pxz-team-cta {
  padding: var(--pxz-space-section-y-desktop) var(--pxz-space-container-x-desktop);
  text-align: center;
}
.pxz-team-cta-inner {
  max-width: var(--pxz-c1-max);  /* S55d */
  margin: 0 auto;
  padding: var(--space-11) var(--space-9);
  background: var(--pxz-c-surface-alt);
  border-radius: var(--pxz-radius-card);
}
.pxz-team-cta-title {
  margin: 0 0 var(--space-4);
  color: var(--pxz-c-ink);
}
.pxz-team-cta-sub {
  margin: 0 0 var(--space-7);
  font-family: var(--pxz-font-body);
  font-size: var(--pxz-t6-size);
  line-height: 1.55;
  color: var(--pxz-c-ink-muted);
}

/* ----------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .pxz-team-hero {
    padding: var(--space-9) var(--pxz-space-container-x-tablet) var(--space-7);
  }
  .pxz-team-intro {
    padding: 0 var(--pxz-space-container-x-tablet) var(--space-9);
  }
  .pxz-team-grid-section {
    padding: var(--space-9) var(--pxz-space-container-x-tablet) var(--space-11);
  }
  .pxz-team-cta {
    padding: var(--pxz-space-section-y-tablet) var(--pxz-space-container-x-tablet);
  }
  .pxz-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
  .pxz-team-sub { font-size: var(--pxz-t6-size); }
}

@media (max-width: 600px) {
  .pxz-team-hero {
    padding: var(--space-8) var(--pxz-space-container-x-mobile) var(--space-6);
  }
  .pxz-team-intro {
    padding: 0 var(--pxz-space-container-x-mobile) var(--space-8);
  }
  .pxz-team-grid-section {
    padding: var(--space-8) var(--pxz-space-container-x-mobile) var(--space-9);
  }
  .pxz-team-cta {
    padding: var(--pxz-space-section-y-mobile) var(--pxz-space-container-x-mobile);
  }
  .pxz-team-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .pxz-team-card-avatar {
    aspect-ratio: 16 / 9;
    font-size: 42px;
  }
  .pxz-team-cta-inner {
    padding: var(--space-9) var(--space-6);
  }
}