/* Team and board (9/29/2026): Avada Health's "Meet our doctors" band and person cards, in the
   client's colours and type. Loaded after site.css by safe_new_top( 'css' => 'team' ).
   Measured on avada.website/health/ and /health/about/ at 1440, 1050 and 390:
     band #f5f5f5, padding 100 / 130; head: 80px icon, 20px, 46px capital heading, 30px,
       280 x 2px rule, 30px, 22px semibold subtitle, 60px to the cards
     card: portrait 359 x 370 in a 1170 frame (47px apart; 304 x 313 at 1050; one column at 390),
       white panel padded 40px, name 18px tracked 1px, role 18px, bio 17px on a 38px line
   Contrast, computed (WCAG): blue on white 12.3 · blue on tint 9.89 · white on the gray
   tile #5b6875 5.7 · blue on paper 12.1. */

/* ------------------------------------------------ the section head (Health's) */
.shead__intro { max-width: 58rem; margin: 0 auto; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 2.25; }

/* ------------------------------------------------ the title band on her team photograph
   Health sets the title in the band's upper part; over thirteen nurses that puts the title on
   their faces (or crops their heads off at 2560). Here the words sit LOW, over their scrubs,
   with every face clear above them: the approved homepage hero's treatment of the same team.
   The picture is framed on the faces at every width (object-position, fixed), and the drift is
   the hero's (the enlarged frame moves, 12% each way), switched on by this page's script. */
.title { padding: clamp(200px, 21vw, 520px) 30px clamp(56px, 6vw, 150px); }
/* The drift is Health's About title (down, speed .4), set by the shared script. */
.title__bg img { object-position: 50% 22% !important; }

/* Health's band rhythm, 100 above and 130 below at 1440 (less on a laptop and a phone). */
.roster { padding-block: clamp(64px, 7vw, 100px) clamp(72px, 9vw, 130px); }

/* ------------------------------------------------ the person cards */
.people { --g: clamp(20px, 2.2vw, 32px); display: grid; gap: var(--g); margin-top: 60px; text-align: left; }
.people--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.people--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.person { display: flex; flex-direction: column; background: #fff; border: 1px solid #dde1e4; }
.person__img { aspect-ratio: 359 / 370; overflow: hidden; background: #5b6875; }
/* One crop for everyone: six of her portraits carry the navy corners her current site's round
   frame left behind (ring radius 0.635 of the width), so every portrait sits 15% closer,
   anchored on the faces, and no corner shows. */
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.15); transform-origin: 50% 35%; }
.person__todo { display: grid; place-items: center; height: 100%; padding: 20px; }
.person__todo span, .biobox__face--todo span { display: inline-block; padding: 4px 10px; border: 1.5px solid rgba(255, 253, 252, .75); border-radius: 4px; color: #fff; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.person__desc { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 2.4vw, 40px); }
.person__name { font-size: 1.125rem; font-weight: 600; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; }
.person__role { margin-top: 6px; font-size: 1rem; font-weight: 600; letter-spacing: .02em; line-height: 1.6; }
.person__bio { margin-top: 18px; font-size: 1.0625rem; line-height: 2.1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.person__more { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; margin-top: auto; padding-top: 14px; color: var(--blue); font-size: .875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.person__more svg { width: 1.15em; height: 1.15em; color: var(--teal-deep); transition: transform .2s var(--ease); }
.person__more:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.person__more:hover svg { transform: translateX(3px); }

/* ------------------------------------------------ the full bio: a native dialog with its own Quick exit */
.biobox { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); margin: 104px auto 24px; padding: 0; border: 0; border-radius: 6px; background: #fff; color: var(--blue); text-align: left; overflow: auto; overscroll-behavior: contain; box-shadow: 0 24px 60px rgba(10, 20, 36, .35); }
.biobox::backdrop { background: rgba(10, 20, 36, .82); }
.biobox .exit { position: fixed; }
/* The Close button sits in a real white header row that stays at the top while the bio scrolls under
   it, so the button never sits on the words (9/29 safety review, WebKit 390). */
.biobox__bar { position: sticky; top: 0; z-index: 2; height: 76px; background: #fff; pointer-events: none; }
.biobox__close { position: absolute; top: 16px; right: 16px; min-height: 44px; padding: 0 20px; border: 2px solid var(--blue); border-radius: 999px; background: #fff; color: var(--blue); font: inherit; font-size: .9375rem; font-weight: 800; cursor: pointer; pointer-events: auto; }
.biobox__close:hover { background: var(--blue); color: #fff; }
.biobox__card { padding: 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px); }
.biobox__head { display: flex; align-items: center; gap: 24px; padding-right: 100px; }
.biobox__face { width: 120px; height: 120px; flex: none; object-fit: cover; border-radius: 50%; }   /* Health's round avatar; the circle also clears the navy corners */
.biobox__face--todo { display: grid; place-items: center; padding: 8px; background: #5b6875; }
.biobox__face--todo span { font-size: .6875rem; padding: 3px 6px; }
/* (0,2,0): beats the shared .band h2 (0,1,1), since the dialog sits inside its band. */
.biobox .biobox__name { max-width: none; margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: 1px; line-height: 1.35; text-transform: uppercase; }
.biobox__role { margin-top: 6px; font-weight: 600; line-height: 1.55; }
.biobox__body { margin-top: 28px; padding-top: 26px; border-top: 2px solid var(--teal-deep); }
.biobox__body p { font-size: 1.0625rem; line-height: 2.25; }
.biobox__body p + p { margin-top: 18px; }

/* The board's three across take the same card width as the four-across rosters above and
   below, so every member gets the same size of card (and her small board portraits are not
   blown up past their files). */
@media (min-width: 1200px) {
}

/* ------------------------------------------------ laptop, tablet and phone */
@media (min-width: 900px) and (max-width: 1199px) {
  .people--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people--4 > :nth-child(4):last-child { grid-column: 2; }
}
@media (max-width: 899px) {
  .people--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .people--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shead__sub { line-height: 1.8; }
}
@media (max-width: 639px) {
  .people--3, .people--4 { grid-template-columns: minmax(0, 1fr); }
  .biobox { margin-top: 92px; max-height: calc(100vh - 108px); max-height: calc(100dvh - 108px); }
  .biobox__head { flex-direction: column; align-items: flex-start; gap: 16px; padding-right: 0; padding-top: 0; }
  .biobox__face { width: 96px; height: 96px; }
}

/* ------------------------------------------------ 10/2: cards in a row share their rows (photo, name, role,
   bio, link), so a three-line role never pushes one card's bio below its neighbours' (Health's doctor
   cards start their texts level). Above 900px only; stacked on a phone, nothing to share. */
@media (min-width: 901px) {
  .people { grid-auto-rows: auto; row-gap: 0; }
  .people > .person { display: grid; grid-row: span 5; grid-template-rows: subgrid; margin-bottom: var(--g); }
  .person__img { grid-row: 1; }
  .person__desc { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; align-items: start; }
  .person__name { grid-row: 1; }
  .person__role { grid-row: 2; }
  .person__bio { grid-row: 3; }
  .person__more { grid-row: 4; align-self: end; }
}

/* ------------------------------------------------ 12 October 2026: the founder alone, set apart above the board
   (Dee and Shannon, 9 October). One wide card across the frame, her portrait beside her words, in the board
   cards' white panel and type; stacked on a phone like every card. Placed last: it undoes the row-sharing
   above for this one card. */
.people--lead { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .people--lead > .person { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); margin-bottom: 0; }
  .people--lead .person__img { grid-row: 1; grid-column: 1; height: 100%; }
  .people--lead .person__desc { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; grid-template-rows: none; padding: clamp(28px, 4vw, 64px); }
  .people--lead .person__name { font-size: 1.375rem; }
  .people--lead .person__more { align-self: flex-start; margin-top: 0; }
}