/* Emily's September 21 request: concise biographies on hover and focus.
   Small screens and touch show the same text beneath the portrait. */
.doctor-bio-card{display:flex;flex-direction:column;min-width:0;position:relative;text-decoration:none}
.doctor-bio-card>.doctor-card-visual{display:flex;flex-direction:column;aspect-ratio:auto;background:transparent;overflow:visible}
.doctor-bio-card .doctor-portrait{width:100%;aspect-ratio:320/308;overflow:hidden;background:#181818}
.doctor-bio-card .doctor-card-bio{padding:20px 0 0;text-align:left;color:var(--muted);background:transparent}
.doctor-bio-card .doctor-card-bio p{font-family:var(--sans);font-size:14px;line-height:1.65;margin:0}
.doctor-bio-card .doctor-bio-link{display:inline-block;margin-top:16px;color:var(--gold);font-family:var(--sans);font-size:13px;line-height:1.5;letter-spacing:.045em;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.doctor-bio-card h3{order:1;line-height:1.45}
.doctor-bio-card>.doctor-specialty{order:2}
.cream .doctor-bio-card .doctor-card-bio{color:#514c44}
.cream .doctor-bio-card .doctor-bio-link{color:#6f5a3a}
.doctor-bio-card:focus-visible{outline:2px solid var(--gold);outline-offset:7px}
.doctor-bio-card:focus-visible .doctor-color-photo{filter:grayscale(0) saturate(.78)}

/* Keep the initial four-portrait composition on desktop. The restrained dark
   reveal leaves the established color transition in place underneath. */
@media(min-width:1101px) and (hover:hover) and (pointer:fine){
  .doctor-bio-card>.doctor-card-visual{position:relative;display:grid;aspect-ratio:320/308;min-height:0;overflow:hidden}
  .doctor-bio-card .doctor-portrait{position:absolute;inset:0;aspect-ratio:auto;height:100%}
  .doctor-bio-card .doctor-card-bio{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,2vw,32px);background:rgba(18,17,15,.95);color:#ede9e2;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity 420ms ease,transform 420ms ease,visibility 420ms;pointer-events:none}
  .doctor-bio-card .doctor-card-bio p{font-size:clamp(13px,1.04vw,15px);line-height:1.6}
  .doctor-bio-card .doctor-bio-link,.cream .doctor-bio-card .doctor-bio-link{color:var(--gold)}
  .cream .doctor-bio-card .doctor-card-bio{color:#ede9e2}
  .doctor-bio-card:not(.bio-dismissed):is(:hover,:focus-visible) .doctor-card-bio{opacity:1;visibility:visible;transform:none}
}

/* The text follows the name on compact/touch layouts without duplicating it. */
@media(max-width:1100px),(hover:none),(pointer:coarse){
  .doctor-bio-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;gap:40px 24px}
  .doctor-bio-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr;text-align:left;align-content:start}
  .doctor-bio-card>.doctor-card-visual{display:contents}
  .doctor-bio-card .doctor-portrait{grid-row:1}
  .doctor-bio-card h3{grid-row:2;margin:16px 0 0;font-size:15px;order:initial}
  .doctor-bio-card>.doctor-specialty{grid-row:3;order:initial;margin-top:4px}
  .doctor-bio-card .doctor-card-bio{grid-row:4;display:flex;flex-direction:column;padding-top:15px}
  .doctor-bio-card .doctor-bio-link{margin-top:auto;padding-top:16px}
}
@media(max-width:420px){
  .doctor-bio-grid{gap:34px 16px}
  .doctor-bio-card h3{font-size:14px}
  .doctor-bio-card .doctor-card-bio p{font-size:13px;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){.doctor-bio-card .doctor-card-bio{transition:none;transform:none}}
@media print{
  .doctor-bio-card>.doctor-card-visual{display:contents;min-height:0}
  .doctor-bio-card .doctor-portrait{position:static;height:auto;aspect-ratio:320/308}
  .doctor-bio-card .doctor-card-bio{position:static;opacity:1;visibility:visible;transform:none;background:transparent;color:inherit;padding:16px 0}
}