.breadcrumbs {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  color: var(--color-text-soft);
  font-size: var(--font-size-small);
  list-style: none;
}

.breadcrumbs__item:not(:last-child)::after { margin-left: 0.5rem; content: "→"; }
.breadcrumbs__link:hover { color: var(--color-primary-dark); }

.doctor-hero { padding-block: clamp(2.5rem, 6vw, 5rem); }
.doctor-hero__grid { display: grid; grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.doctor-hero__media { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--color-bg-alt); box-shadow: var(--shadow-md); }
.doctor-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.doctor-hero__image--top { object-position: center 15%; }
.doctor-hero__role { margin-top: var(--space-3); color: var(--color-primary-dark); font-weight: 600; }
.doctor-hero__experience { margin-top: var(--space-1); color: var(--color-text-soft); }
.doctor-hero .button { margin-top: var(--space-3); }

.doctor-biography__layout { display: grid; grid-template-columns: minmax(0, 48rem); justify-content: center; }
.doctor-biography__content { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.doctor-biography__content > * + * { margin-top: var(--space-2); }
.doctor-biography__content h2 { margin-top: var(--space-4); font-size: clamp(1.5rem, 2.5vw, 2rem); }
.doctor-biography__content h2:first-child { margin-top: 0; }
.doctor-biography__content h3 { margin-top: var(--space-3); font-size: clamp(1.2rem, 2vw, 1.5rem); }
.doctor-biography__content ul,
.doctor-biography__content ol { display: grid; gap: 0.5rem; padding-left: 1.4rem; }

@media (max-width: 48rem) {
  .doctor-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .doctor-hero__media { width: min(100%, 28rem); }
}

@media (max-width: 30rem) {
  .doctor-hero__media { border-radius: var(--radius-md); }
  .doctor-biography__content { padding: var(--space-3); }
}