/*
 * Praxiszentrum — Arzt (Einzel-Profil) Page CSS
 * S2.3-aerzte-services (2026-04-22): Skelett aus S2.2 → produktiv.
 *
 * Selector-Namespace: .pxz-arzt-* (gemäß S2.2 §2.3)
 * Token-Quelle: tokens.css v2 Schicht 2 (var(--pxz-*)) — DG §0/§2.
 * Komponenten: .pxz-eyebrow / .pxz-title-2 / .pxz-title-3 / .pxz-lead /
 *              .pxz-body / .pxz-callout / .pxz-btn aus components.css.
 * Avatar-Accents: .pxz-avatar-accent-{red,amber,ink} aus team.css (geteilt).
 */

/* ----------------------------------------------------------------------------
 * Page container
 * ------------------------------------------------------------------------- */
.pxz-arzt {
  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 (avatar + name + sub + languages)
 * ------------------------------------------------------------------------- */
.pxz-arzt-hero {
  padding: var(--space-11) var(--pxz-space-container-x-desktop) var(--space-9);
  background: var(--pxz-c-surface-alt);
}
.pxz-arzt-hero-inner {
  max-width: var(--pxz-c2-max);  /* S55d C2 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: var(--space-9);
  align-items: center;
}

.pxz-arzt-hero-photo {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pxz-radius-card-hero);
  overflow: hidden;
  font-family: var(--pxz-font-display);
  font-weight: var(--font-weight-semibold);
  font-size: 96px;
  color: var(--pxz-c-surface);
  letter-spacing: -0.02em;
}
.pxz-arzt-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pxz-arzt-hero-initials {
  display: block;
  line-height: 1;
}

.pxz-arzt-hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pxz-arzt-eyebrow {
  margin: 0;
  color: var(--pxz-c-accent);
}
.pxz-arzt-title {
  margin: 0;
  color: var(--pxz-c-ink);
  letter-spacing: -0.01em;
}
.pxz-arzt-sub {
  margin: 0;
  color: var(--pxz-c-ink-muted);
}

.pxz-arzt-langs {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pxz-arzt-langs li {
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--pxz-c-surface);
  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;
}

/* S35 B-1-template (2026-04-24): Qualification chips under the bio. */
.pxz-arzt-chips {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pxz-arzt-chip {
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--pxz-c-surface);
  color: var(--pxz-c-ink);
  font-family: var(--pxz-font-body);
  font-size: var(--pxz-t8-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  border: 1px solid color-mix(in srgb, var(--pxz-c-ink) 8%, transparent);
}
.pxz-arzt-vita-subtitle {
  margin: var(--space-7) 0 var(--space-3);
  color: var(--pxz-c-ink);
}

/* ----------------------------------------------------------------------------
 * Vita (curated content for Stracke; placeholder block for stubs)
 * ------------------------------------------------------------------------- */
.pxz-arzt-vita {
  padding: var(--space-11) var(--pxz-space-container-x-desktop);
}
.pxz-arzt-vita-inner {
  /* S47 (2026-04-26): width an Hero-Container angeglichen (vorher 760px,
   * sah neben dem 1080px-Hero schmal aus). */
  max-width: var(--pxz-c2-max);  /* S55d C2 */
  margin: 0 auto;
  color: var(--pxz-c-ink);
}
.pxz-arzt-vita-title {
  margin: 0 0 var(--space-6);
  color: var(--pxz-c-ink);
}
.pxz-arzt-vita-intro {
  margin: 0 0 var(--space-6);
  color: var(--pxz-c-ink-muted);
}
.pxz-arzt-vita-stub {
  margin: var(--space-7) 0 0;
}

/* Curated content — re-style the Block-Editor markup so it inherits
 * the page typography rather than the WP-default. */
.pxz-arzt-vita-body h2,
.pxz-arzt-vita-body h3 {
  margin: var(--space-9) 0 var(--space-4);
  color: var(--pxz-c-ink);
  font-family: var(--pxz-font-display);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
}
.pxz-arzt-vita-body h2 { font-size: var(--pxz-t4-size); line-height: var(--pxz-t4-line); }
.pxz-arzt-vita-body h3 { font-size: var(--pxz-t5-size); line-height: var(--pxz-t5-line); }
.pxz-arzt-vita-body p {
  margin: 0 0 var(--space-5);
  font-family: var(--pxz-font-body);
  font-size: var(--pxz-t6-size);
  line-height: 1.6;
  color: var(--pxz-c-ink-muted);
}
.pxz-arzt-vita-body strong {
  color: var(--pxz-c-ink);
  font-weight: var(--font-weight-semibold);
}
.pxz-arzt-vita-body em { font-style: italic; }
.pxz-arzt-vita-body ul,
.pxz-arzt-vita-body ol {
  margin: 0 0 var(--space-5) var(--space-6);
  font-family: var(--pxz-font-body);
  font-size: var(--pxz-t6-size);
  line-height: 1.6;
  color: var(--pxz-c-ink-muted);
}
.pxz-arzt-vita-body li { margin: 0 0 var(--space-2); }
.pxz-arzt-vita-body figure { margin: var(--space-7) 0; }
.pxz-arzt-vita-body img { max-width: 100%; height: auto; border-radius: var(--pxz-radius-card); }

/* ----------------------------------------------------------------------------
 * Other doctors — cross-link mini-grid (Dr. Stracke constraint:
 * every doctor profile surfaces all colleagues so none stands isolated)
 * ------------------------------------------------------------------------- */
.pxz-arzt-others {
  padding: var(--space-11) var(--pxz-space-container-x-desktop);
  background: var(--pxz-c-surface-alt);
}
.pxz-arzt-others-inner {
  max-width: var(--pxz-c3-max);  /* S55d C3 */
  margin: 0 auto;
}
.pxz-arzt-others-title {
  margin: 0 0 var(--space-3);
  color: var(--pxz-c-ink);
  text-align: center;
}
.pxz-arzt-others-sub {
  margin: 0 auto var(--space-9);
  color: var(--pxz-c-ink-muted);
  text-align: center;
  max-width: var(--pxz-c1-max);  /* S55d C1 reading */
  font-family: var(--pxz-font-body);
  font-size: var(--pxz-t6-size);
}

.pxz-arzt-others-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.pxz-arzt-others-card {
  display: flex;
}
.pxz-arzt-others-link {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-5);
  background: var(--pxz-c-surface);
  border-radius: var(--pxz-radius-card);
  box-shadow: var(--pxz-shadow-card);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 180ms var(--pxz-easing-standard), transform 180ms var(--pxz-easing-standard);
}
.pxz-arzt-others-link:hover,
.pxz-arzt-others-link:focus-visible {
  box-shadow: var(--pxz-shadow-card-hi);
  transform: translateY(-3px);
  outline: none;
}
.pxz-arzt-others-link:focus-visible {
  outline: var(--pxz-focus-ring-width) solid var(--pxz-focus-ring-color);
  outline-offset: var(--pxz-focus-ring-offset);
}

.pxz-arzt-others-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pxz-font-display);
  font-weight: var(--font-weight-semibold);
  font-size: 22px;
  color: var(--pxz-c-surface);
  overflow: hidden;
}
.pxz-arzt-others-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}
.pxz-arzt-others-initials { display: block; line-height: 1; }

.pxz-arzt-others-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pxz-arzt-others-name {
  font-family: var(--pxz-font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--pxz-t6-size);
  line-height: 1.25;
  color: var(--pxz-c-ink);
  letter-spacing: -0.005em;
}
.pxz-arzt-others-role {
  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-arzt-others-back {
  margin: var(--space-9) 0 0;
  text-align: center;
}

/* ----------------------------------------------------------------------------
 * CTA (Termin / Sprechzeiten / Kontakt)
 * ------------------------------------------------------------------------- */
.pxz-arzt-cta {
  padding: var(--space-11) var(--pxz-space-container-x-desktop);
}
.pxz-arzt-cta-inner {
  /* S47 (2026-04-26): width an Hero-Container angeglichen. */
  max-width: var(--pxz-c2-max);  /* S55d C2 */
  margin: 0 auto;
  padding: var(--space-11) var(--space-9);
  background: var(--pxz-c-surface);
  border-radius: var(--pxz-radius-card-hero);
  box-shadow: var(--pxz-shadow-card);
  text-align: center;
}
.pxz-arzt-cta-title {
  margin: 0 0 var(--space-4);
  color: var(--pxz-c-ink);
}
.pxz-arzt-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);
}
.pxz-arzt-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ----------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .pxz-arzt-hero {
    padding: var(--space-9) var(--pxz-space-container-x-tablet) var(--space-7);
  }
  .pxz-arzt-hero-inner {
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: var(--space-7);
  }
  .pxz-arzt-hero-photo { font-size: 76px; }
  .pxz-arzt-vita,
  .pxz-arzt-others,
  .pxz-arzt-cta {
    padding-left: var(--pxz-space-container-x-tablet);
    padding-right: var(--pxz-space-container-x-tablet);
  }
}

@media (max-width: 720px) {
  .pxz-arzt-hero {
    padding: var(--space-9) var(--pxz-space-container-x-mobile) var(--space-7);
  }
  .pxz-arzt-hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }
  .pxz-arzt-hero-photo {
    margin: 0 auto;
    max-width: 220px;
    font-size: 64px;
  }
  .pxz-arzt-langs { justify-content: center; }
  .pxz-arzt-vita,
  .pxz-arzt-others,
  .pxz-arzt-cta {
    padding-left: var(--pxz-space-container-x-mobile);
    padding-right: var(--pxz-space-container-x-mobile);
  }
  .pxz-arzt-cta-inner {
    padding: var(--space-9) var(--space-6);
  }
  .pxz-arzt-others-link {
    gap: var(--space-4);
  }
}