/* ============================================================
   Attending profile redesign — mirrors the homepage (redesign.css)
   and team page (team-refined.css) passes.
   Scoped to body.profile-refined. Loaded AFTER styles.css.
   Applies to the three attending profiles:
   /team/christopher-ogilvy/, /team/philipp-taussky/, /team/justin-granstein/.
   Constraints: fonts unchanged (Mukta body / Source Serif display),
   copy + images + links unchanged. Same visual language as the home/team
   pages: hairline cards, one restrained accent, calm steel-navy, no
   thick colored side-tabs. Buttons are handled by site-buttons.css.
   ============================================================ */

/* ---- Design tokens (same values as redesign.css) ---- */
.profile-refined {
  --ink-900: #0c2143;   /* deepest navy for display type */
  --accent: #12457e;    /* single restrained accent */
  --rule: #e7ecf2;      /* hairline */
  --rule-strong: #d3dbe6;
  --paper: #f5f8fc;     /* faint cool panel */
  --shadow-card: 0 18px 40px -24px rgba(12,33,67,0.45);
  accent-color: var(--accent);
}

/* ---- Browser surfaces (themed, not default) ---- */
.profile-refined ::selection { background: #cfe0f4; color: var(--ink-900); }
.profile-refined :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---- Heading colour scoped to page content; never the dark footer
   (whose headings stay white) or the banner h1 (white on the photo). ---- */
.profile-refined section h2,
.profile-refined section h3 {
  color: var(--ink-900);
  letter-spacing: -0.018em;
}

/* ============================================================
   PAGE BANNER — keep height & geometry; blue-hue overlay so the
   photo still reads. Breadcrumb + links stay white/underlined (on navy).
   ============================================================ */
.profile-refined .page-banner .hero-overlay {
  background: linear-gradient(90deg,
    rgba(16,42,82,0.77) 0%, rgba(16,42,82,0.37) 100%);
}
.profile-refined .page-banner h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.018em;
}
.profile-refined .page-banner p a { color: #fff; text-decoration: underline; }
.profile-refined .page-banner p a:hover { color: #eaf2fb; }
/* breadcrumb: white/underlined links, calm the near-neon cyan to soft steel */
.profile-refined .breadcrumb { color: #c3d4e8; }
.profile-refined .breadcrumb a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.profile-refined .breadcrumb a:hover { color: #eaf2fb; }

/* ============================================================
   HEADSHOT CARD — hairline frame + rounded, consistent with the
   homepage team cards. Image size/aspect kept from the live site.
   ============================================================ */
.profile-refined .physician-card {
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.profile-refined .physician-card h2 {
  font-family: var(--serif); font-weight: 600;
  color: var(--ink-900); letter-spacing: -0.018em;
}
.profile-refined .physician-card p { color: var(--slate); }

/* ============================================================
   PHYSICIAN PROFILE BODY
   ============================================================ */
/* Kicker (Physician Profile): refined tracked accent label */
.profile-refined .physician-main .eyebrow {
  text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--accent);
}
.profile-refined .physician-main > p { color: var(--slate); }

/* Content section heading (Training): serif display, calm navy */
.profile-refined .physician-main > h3 {
  font-family: var(--serif); font-weight: 600;
  color: var(--ink-900); letter-spacing: -0.018em;
}

/* Info tiles — remove the 3px blue top-tab (the biggest AI tell) →
   hairline frame, calm paper fill, matching rounding. */
.profile-refined .profile-grid > div {
  border-top: none;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
}
/* Tile labels: kicker-style, refined tracked accent */
.profile-refined .profile-grid h3 {
  font-family: var(--sans);
  text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.14em; font-size: 0.72rem;
  color: var(--accent);
}
.profile-refined .profile-grid p { color: var(--slate); }

/* Training list — hairline-separated rows with a drawn accent marker,
   echoing the homepage differentiator list. */
.profile-refined .physician-main > ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.profile-refined .physician-main > ul li {
  position: relative;
  margin: 0;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--rule);
  color: var(--slate);
}
.profile-refined .physician-main > ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 19px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

/* ============================================================
   CROSS-LINKS — hairline cards, ~12px radius, no rest shadow, hover lift
   ============================================================ */
.profile-refined .related-links {
  border-top: 1px solid var(--rule);
}
.profile-refined .related-links h3 {
  font-family: var(--sans);
  text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.14em; font-size: 0.72rem;
  color: var(--accent);
}
.profile-refined .related-links a {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  color: var(--ink-900);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.profile-refined .related-links a:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-card);
  background: #fff;
  color: var(--accent);
}

/* ============================================================
   MOTION — honour reduced-motion for every transition above
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .profile-refined .related-links a { transition: none; }
  .profile-refined .related-links a:hover { transform: none; }
}