/* =========================================================
   Dental Implants Team page (/dental-implants/implants-team/)
   Built on css/pages/design-system.css; this file only adds what the design system doesn't cover.
   Every rule is scoped under .page-implants-team.
   ========================================================= */

/* Anchors (#elifriedman, #surgicalteam …) land below the floating header */
.page-implants-team [id] { scroll-margin-top: 120px; }

/* ---------- Hero: team quick links + wide team photo ---------- */
.page-implants-team .iteam-jump {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 28px;
}
.page-implants-team .iteam-jump .ds-pill { text-decoration: none; transition: background-color .2s, color .2s; }
.page-implants-team .iteam-jump .ds-pill:hover,
.page-implants-team .iteam-jump .ds-pill:focus-visible { background: var(--ds-brand); color: #fff; }
.page-implants-team .iteam-banner { aspect-ratio: 1500 / 522; }

/* ---------- Dr. Eli Friedman ---------- */
.page-implants-team .iteam-eli-bio { margin-top: 26px; }
.page-implants-team .iteam-eli-bio strong { color: #fff; font-weight: 600; }
.page-implants-team .iteam-logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 30px;
}
.page-implants-team .iteam-logos img {
  width: auto; max-width: 100%; height: 64px;
  padding: 10px 16px; border-radius: var(--ds-radius-sm);
  background: #fff; object-fit: contain;
}

/* Team carousels: .ds-carousel of .ds-person cards (design system) */

/* ---------- Bio dialog ---------- */
.page-implants-team .iteam-bio[open] { animation: iteam-pop .3s var(--ds-ease); }
@keyframes iteam-pop {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.page-implants-team .iteam-bio .ds-dialog-body { color: var(--ds-text); font-family: var(--ds-font-body); font-size: 15.5px; line-height: 1.7; }
.page-implants-team .iteam-bio-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.page-implants-team .iteam-bio-head img { flex: none; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.page-implants-team .iteam-bio-head .ds-pill { margin: 8px 0 0; }
.page-implants-team .iteam-bio-list-title {
  margin: 24px 0 0;
  font-family: var(--ds-font-head); font-weight: 700; font-size: 16px; color: var(--ds-navy);
}
.page-implants-team .iteam-bio .ds-list { margin-top: 12px; gap: 8px; }

@media (max-width: 991px) {
  .page-implants-team .iteam-eli-photo { width: 100%; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 767px) {
  /* keep portraits phone-sized on large phones / small tablets (design system: 86% per card) */
  .page-implants-team .iteam-track { grid-auto-columns: min(86%, 300px); }
  .page-implants-team .iteam-logos img { height: 52px; }
  .page-implants-team .iteam-bio-head img { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-implants-team .iteam-bio[open] { animation: none; }
}

/* ---------- Dallas Team page (/dallas-team/, body class page-implants-team page-dallas-team) ---------- */
.page-dallas-team .dal-banner { aspect-ratio: 1920 / 750; background: #fff; }
.page-dallas-team .dal-team { list-style: none; margin: 0; padding: 0; }
/* photo placeholder: the member's initials (the live page's photos are missing) */
.page-dallas-team .dal-initials {
  display: grid; place-items: center;
  background: var(--ds-gradient); color: #fff;
  font-family: var(--ds-font-head); font-weight: 700; font-size: clamp(44px, 5vw, 64px); letter-spacing: 0.04em;
}
.page-dallas-team .dal-initials--sm { flex: none; width: 84px; height: 84px; border-radius: 50%; font-size: 28px; }
@media (max-width: 767px) {
  .page-dallas-team .ds-person-photo.dal-initials { width: min(200px, 70%); margin-inline: auto; }
  .page-dallas-team .dal-initials--sm { width: 64px; height: 64px; font-size: 22px; }
}