/* Created: 07:22 26-Aug-2026 */
/* Updated: 07:40 26-Aug-2026 — bio styling; close button anchored outside the scroll area */
/* Updated: 13:16 16-Oct-2026 — client point 16-Oct #2: popup photo whole (contain), never stretched */
/* BAYTI — /the-team/ page. Scoped to this page only; #roster exists nowhere else, so
   the homepage's own .team block cannot move.

   Sumit, 26-Aug: "the header height is inconsistent as for the previous headers, and
   the images just [below] the header of the team, they just don't have any margin". */

/* hero height MOVED to service.css on 26-Aug. The rule below was correct and its note
   still applies - but it lived HERE, in a stylesheet only /the-team/ loads, so only that
   page got it. The other seven .svc-hero-plain pages kept drifting: /blogs/ measured
   356px and /legal/ 484px against this page's 640px, all three from the SAME class.
   That is the hero-height problem one layer up, so the rule now sits next to the
   .svc-hero-plain{min-height:0} it overrides. */

/* ---------------------------------------------------------------- roster spacing
   Measured: hero.bottom 484px, first card top 484px — a 0px gap, the photographs
   butting straight against the header. `page-pad` sets only LEFT and RIGHT padding
   (css/base.css), so this section had no vertical rhythm at all. */
#roster{padding-top:var(--sec-m);padding-bottom:var(--sec-m)}

/* ---------------------------------------------------------------- profile dialog
   Clicking a card opens the person's profile. Built on <dialog> so focus trapping,
   Escape-to-close and the backdrop come from the platform rather than hand-rolled JS. */
.tm-card-btn{display:block;width:100%;padding:0;border:0;background:none;text-align:left;
  font:inherit;color:inherit;cursor:pointer}
.tm-card-btn:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px;
  border-radius:16px}
/* width:100% alone defeats the UA's `margin:auto` centring and parks the dialog at the
   top-left, which is where it first rendered. inset:0 + margin:auto restores it. */
.tm-dialog{border:0;padding:0;background:transparent;position:fixed;inset:0;margin:auto;
  width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:visible}
.tm-dialog::backdrop{background:rgba(12,22,28,.62)}
.tm-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  background:var(--paper-100);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(12,22,28,.35)}
/* Client point 16-Oct-2026 #2 ("blurred and cropped, show the full image"): the photo is shown WHOLE (contain, never
   cover) and never stretched past its own size; the larger file comes from content/team-photos-full.json. */
.tm-panel-media{margin:0;background:var(--surface-card);min-height:100%;display:flex;align-items:center;justify-content:center}
.tm-panel-media img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 48px);
  object-fit:contain;object-position:center}
.tm-panel-body{padding:36px 38px;display:flex;flex-direction:column;gap:14px;
  justify-content:center}
.tm-panel-body h2{margin:0;font-size:26px;line-height:34px;color:var(--text-strong)}
.tm-role{margin:0;color:var(--teal-deep);font-size:16px;line-height:24px}
.tm-panel-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* The bio slot. BAYTI publishes no clinician biographies — verified 26-Aug against the
   11-Aug capture, _CONTENT.md, content/the-team.en.json AND a live fetch of
   baytihealth.com/the-team/: 0 of 16 carry any text. Writing one for a named, licensed
   clinician is not ours to do (BL-115). The slot renders only when text exists. */
.tm-bio{margin:0;color:var(--text-medium)}
/* Anchored to the dialog, not to the scrolling wrapper — inside it, a long biography on
   a phone scrolled the close button off the top of the panel. */
.tm-close{position:absolute;z-index:2;top:14px;right:14px;width:38px;height:38px;border-radius:100vw;
  border:1px solid var(--border-faint);background:var(--paper-100);color:var(--text-strong);
  display:grid;place-items:center;cursor:pointer}
.tm-close svg{width:18px;height:18px}
.tm-dialog-wrap{position:relative;max-height:calc(100vh - 48px);overflow:auto;
  border-radius:18px}
@media (max-width:767px){
  .tm-panel{grid-template-columns:1fr}
  .tm-panel-media img{max-height:340px;margin:0 auto}
  .tm-panel-body{padding:26px 24px}
}

/* The bio. .is-held marks BAYTI's own "(Will update soon)" placeholder — shown, because
   it is their text, but visually distinct so nobody reads a placeholder as a biography. */
.tm-bio{margin:0;color:var(--text-medium);font-size:16px;line-height:26px}
.tm-bio.is-held{font-style:italic;opacity:.7;font-size:15px}