/* HomePage 2 round 4: editorial doctors triptych. Homepage only. */
/* DOM order = phone order: Daniel, the text column, Jacob (rule 11.2). Each doctor has one tab stop,
   Learn more; the portrait's own link is a pointer-only duplicate (tabindex -1, aria-hidden). */
/* Round 5 (owner, 2026-09-18): the portraits are full bleed at every width, from the window edge to
   the text and over the whole height of the section: no radius, no shadow, no white band above or
   below (the section has no vertical padding; the text column carries its own). The grey studio
   backdrop fills each area (object-fit: cover, focal point on the doctor). */
.home2-band.home2-doctors { padding-block: 0; }
.home2-doctors__triptych { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.home2-doctors__portrait { position: relative; justify-self: stretch; min-width: 0; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 0; background: #8f8f8f; }
.home2-doctors__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home2-doctors__portrait--daniel img { object-position: 54% 30%; }
.home2-doctors__portrait--jacob img { object-position: 48% 30%; }
.home2-doctors__portrait-link { position: absolute; inset: 0; }
/* The text keeps the page's content edges: the gutter is half of what the content width leaves. */
.home2-doctors__column { min-width: 0; padding: clamp(56px, 10vw, 96px) calc((100% - var(--h2-content)) / 2); }
.home2-doctors__column h2 { margin: 0; font-size: var(--h2-fs-section); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-section); text-wrap: balance; }
.home2-doctors__column h2 em { font-style: normal; color: var(--h2-graphite); }
.home2-doctors__intro { max-width: 40ch; margin: 20px 0 0; color: var(--h2-graphite); font-size: var(--h2-fs-lede); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-lede); text-wrap: pretty; }
.home2-doctors__list { display: grid; gap: 28px var(--h2-gap); margin: 36px 0 0; padding: 0; list-style: none; }
.home2-doctors__doctor { min-width: 0; padding-top: 20px; border-top: 1px solid var(--h2-hairline); }
.home2-doctors__doctor h3 { margin: 0; color: var(--h2-ink); font-size: var(--h2-fs-card); font-weight: 600; line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-card); }
.home2-doctors__role { margin: 4px 0 0; color: var(--h2-graphite); font-size: var(--h2-fs-small); font-weight: 600; line-height: 1.3; }
.home2-doctors__doctor p:not(.home2-doctors__role) { max-width: 36ch; margin: 10px 0 0; color: var(--h2-graphite); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-body); text-wrap: pretty; }
.home2 .home2-doctors__doctor .text-link { margin-top: 4px; }

/* Tablet, and laptops too narrow for the centre column without cropping the seated portraits:
   both portraits side by side, the text below with each doctor under their own portrait. */
@media (min-width: 735px) {
  .home2-doctors__triptych { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "daniel jacob" "text text"; }
  .home2-doctors__portrait--daniel { grid-area: daniel; }
  .home2-doctors__portrait--jacob { grid-area: jacob; }
  .home2-doctors__column { grid-area: text; }
  .home2-doctors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Small laptops: the heading on the left, the introduction on the right, on the portraits' grid. */
@media (min-width: 1069px) {
  .home2-doctors__column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--h2-gap); align-items: end; }
  .home2 .home2-doctors__column > :is(.eyebrow, h2) { grid-column: 1; }
  .home2-doctors__intro { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .home2-doctors__list { grid-column: 1 / -1; }
}

/* Desktop: portrait | flat white column | portrait, from window edge to window edge at any width.
   The portraits take the section's whole height and crop studio backdrop (the doctor stays in
   frame); at least 38vw tall, so wide windows never crop a portrait to landscape. Breakpoint in em,
   so enlarged text keeps the stacked layout instead of narrower portraits. */
@media (min-width: 80em) {
  .home2-doctors__triptych { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "daniel text jacob"; min-height: 38vw; }
  .home2-doctors__portrait { align-self: stretch; aspect-ratio: auto; }
  .home2-doctors__column { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(64px, 6vw, 112px) clamp(28px, 3.2vw, 64px); text-align: center; }
  .home2-doctors__column h2 { font-size: min(var(--h2-fs-section), 3.3vw); }
  .home2-doctors__intro { margin-top: 20px; font-size: var(--h2-fs-body); }
  .home2-doctors__list { column-gap: 32px; width: 100%; margin-top: 32px; text-align: left; }
  .home2-doctors__doctor h3 { font-size: 1.3125rem; }
}

/* A very subtle zoom on the portrait, from the photo or from its doctor's text. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home2-doctors__portrait img { transition: scale 700ms var(--h2-ease-media); }
  .home2-doctors__portrait:hover img,
  .home2-doctors__triptych:has(.home2-doctors__doctor--daniel:hover) .home2-doctors__portrait--daniel img,
  .home2-doctors__triptych:has(.home2-doctors__doctor--jacob:hover) .home2-doctors__portrait--jacob img { scale: 1.02; }
}