/* ==========================================================================
   SURGEON PROFILE PAGES  (dr-*.html)
   Loaded after site.css. A separate file rather than more rules in site.css:
   every other page is untouched, and a brand-new URL cannot be served stale
   from cache by the IIS host, which sends no Cache-Control header.
   Everything is scoped under body.dr.
   ========================================================================== */

.dr{background:#FBFAF6;--hdr:80px}   /* measured: the buttons, not the logo, set the row height */
/* The bar's height changes as it steps down (site.css), so the hero's offset
   follows it. These are the measured heights, the fallback for a visitor
   without JavaScript; nav.js sets the exact figure on load and on resize. */
@media(max-width:1499px){.dr{--hdr:76px}}
@media(max-width:1329px){.dr{--hdr:70px}}
@media(max-width:1199px){.dr{--hdr:64px}}
@media(max-width:600px){.dr{--hdr:92px}}
/* site.css gives every <section> 120px; each section here sets its own */

/* ---------- hero: photo with the quote over it, name on a cream panel ---- */
.dr-hero{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--hdr);padding:0;
  min-height:clamp(420px,36vw,540px);background:var(--cream2)}
.dr-hero__photo{position:relative;overflow:hidden;background:var(--olive-pale)}
/* the headshots are landscape with the surgeon right of centre */
.dr-hero__photo img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:78% 20%}
/* The quote sits over the photo. The real headshots have the moss wall on the
   left, so this veil is what keeps the quote legible, not decoration. */
.dr-hero__photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,246,241,.95) 0%,rgba(247,246,241,.86) 28%,
    rgba(247,246,241,.3) 50%,rgba(247,246,241,0) 64%)}
.dr-quote{position:absolute;z-index:1;top:50%;left:clamp(24px,3vw,44px);
  width:min(40%,300px);margin:0;transform:translateY(-50%)}
.dr-quote p{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,23px);
  line-height:1.38;color:var(--gray)}
.dr-quote__mark{font-style:normal;font-size:1.6em;line-height:0;vertical-align:-.28em;
  margin-right:3px;color:var(--olive)}
.dr-quote cite{display:block;margin-top:22px;font-family:var(--serif);font-style:normal;
  font-size:16px;color:var(--gray)}
.dr-quote cite::before{content:"";display:inline-block;width:16px;height:1px;
  background:currentColor;vertical-align:middle;margin-right:10px}

.dr-hero__body{align-self:center;padding:56px clamp(24px,4vw,64px) 56px clamp(36px,3.4vw,56px)}
.dr-kicker{display:inline-flex;align-items:center;gap:14px;margin-bottom:26px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}
.dr-kicker::before{content:"";width:28px;height:1px;background:currentColor;transition:width .3s ease}
.dr-kicker:hover::before{width:40px}
.dr-hero h1{font-size:clamp(34px,3.4vw,52px);line-height:1.05;margin-bottom:18px}
.dr-hero__role{font-size:clamp(11px,1vw,14px);letter-spacing:.36em;text-transform:uppercase;
  color:var(--olive)}
.dr-hero__rule{display:block;width:44px;height:1px;background:var(--olive);margin:28px 0}
.dr-hero__intro{font-family:var(--serif);font-size:clamp(19px,1.55vw,23px);line-height:1.5;
  color:var(--gray);max-width:44ch}

/* ---------- body: one row per section, image left, numbered text right --- */
.dr-body{padding:clamp(20px,2vw,28px) 0 clamp(48px,5vw,72px)}
.dr-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);align-items:start;
  gap:clamp(28px,3vw,44px);padding-top:clamp(16px,1.6vw,22px)}
.dr-row__img{aspect-ratio:16/9;overflow:hidden;background:var(--olive-pale)}
.dr-row__img img{width:100%;height:100%;object-fit:cover}
.dr-row__head{display:grid;grid-template-columns:30px 40px minmax(0,1fr);align-items:center;
  column-gap:16px;margin:8px 0 16px}
.dr-row__num{font-family:var(--serif);font-size:17px;letter-spacing:.06em;color:var(--olive)}
.dr-row__rule{height:1px;background:var(--olive);opacity:.75}
.dr-row h2{font-family:var(--sans);font-weight:400;font-size:12.5px;line-height:1.4;
  letter-spacing:.3em;text-transform:uppercase;color:var(--olive)}
/* text starts under the section name, not under the number */
.dr-row__text{padding-left:calc(30px + 40px + 32px)}
.dr-row__text p{font-family:var(--serif);font-size:18.5px;line-height:1.55;color:var(--gray)}
.dr-row__text p + p{margin-top:14px}

/* ---------- credentials, memberships, beyond the practice --------------- */
.dr-creds{background:var(--cream);padding:clamp(30px,3vw,42px) 0 clamp(26px,2.6vw,34px)}
.dr-label{display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--olive)}
.dr-label::after{content:"";flex:0 0 40px;height:1px;background:var(--olive)}
.dr-label--fill::after{flex:1 1 auto;background:var(--line)}

.dr-affil{display:grid;grid-template-columns:1fr 1fr;margin:24px 0 32px}
.dr-affil__block{text-align:center;padding:0 clamp(16px,3vw,40px)}
.dr-affil__block + .dr-affil__block{border-left:1px solid var(--line)}
.dr-affil h3{font-size:20px;font-weight:600;margin-bottom:14px}
.dr-board{display:flex;align-items:center;justify-content:center;gap:24px;text-align:left}
.dr-board p{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--gray);max-width:17ch}
.dr-hospitals{display:flex;align-items:center;justify-content:center}
.dr-hospitals .dr-logo{width:clamp(180px,17vw,240px);padding:0 clamp(18px,2.4vw,36px)}
/* Both hospital marks are stacked Mount Sinai lockups, so they share one
   height and read as a matched pair. Files are 420-440px tall: 4x at 110. */
.dr-hospitals .dr-logo--tall{height:110px}
/* a wide lockup next to a stacked one: wider slot, same height */
.dr-hospitals .dr-logo--wide{width:clamp(220px,22vw,300px);height:110px}
.dr-hospitals .dr-logo + .dr-logo{border-left:1px solid var(--line)}
/* three hospitals in a one-third column: stack them instead of a row */
.dr-hospitals--stack{flex-direction:column;gap:20px}
.dr-hospitals--stack .dr-logo{width:min(100%,210px);height:64px;padding:0}
.dr-hospitals--stack .dr-logo--tall{height:84px}
.dr-hospitals--stack .dr-logo + .dr-logo{border-left:0}

/* A logo slot. Holds an <img> once the organisation's file is in
   assets/logos/; until then a text wordmark keeps the layout honest.
   The image fills the slot and object-fit keeps its proportions, so wide
   wordmarks and square seals both reach the slot's edge, and an SVG cannot
   sit at its tiny built-in size. */
.dr-logo{display:flex;align-items:center;justify-content:center;height:78px}
.dr-logo img{width:100%;height:100%;object-fit:contain}
/* the ABOMS lockup carries the board's name itself, so its slot is wide.
   Capped at 253px: the file is 506px, so it never draws below 2x on retina. */
.dr-logo--board{width:clamp(220px,20vw,253px);height:76px}
/* a second board-block logo sits beside ABOMS behind a thin divider */
.dr-logo--pair{width:150px;height:76px}
.dr-board .dr-logo + .dr-logo{border-left:1px solid var(--line);padding-left:24px;box-sizing:content-box}
.dr-logo__text{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.1;
  letter-spacing:.02em;text-align:center;color:var(--ink)}
.dr-logo__text--sm{font-size:19px}

/* Memberships run the full width of the screen, not the content column.
   Seven logos in 1180px leaves each about 140px; edge to edge gives them room. */
.dr-wide{padding:0 clamp(20px,3.2vw,56px)}
.dr-wide .dr-member .dr-logo{height:74px;max-width:190px;margin:0 auto 14px}
.dr-wide .dr-member p{font-size:15.5px}
.dr-members{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));margin-top:22px}
.dr-member{text-align:center;padding:4px 10px}
.dr-member + .dr-member{border-left:1px solid var(--line)}
.dr-members--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dr-affil__block .dr-members{margin-top:14px}
.dr-member .dr-logo{height:60px;margin-bottom:12px}
.dr-member .dr-logo__text{font-size:24px}
.dr-member p{font-family:var(--serif);font-size:14.5px;line-height:1.3;color:var(--gray)}

/* every section here opens with the same label-and-line divider, so this
   row needs no rule of its own */
.dr-beyond{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:28px;
  margin:18px 0 36px}
.dr-beyond svg{width:52px;height:52px;color:var(--olive)}
.dr-beyond p{font-family:var(--serif);font-size:19.5px;color:var(--ink)}

/* Gabriel has three credential blocks (board, hospitals, licensure) where
   Dwight has two, and a publications list the other pages do not carry. */
/* Three unequal columns: the hospital row needs more room than the other two.
   Headings are the site's small caps, everything ranged left, per the mockup. */
.dr-affil--3{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr) minmax(0,1.1fr)}
/* two blocks (no licensure) for surgeons whose bios list no licences */
.dr-affil--2{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
/* board seal | three training marks | one hospital lockup */
.dr-affil--s3{grid-template-columns:minmax(0,.75fr) minmax(0,2.7fr) minmax(0,.95fr)}
/* Krupka's credentials run as two rows of two: the training marks need the
   wider track, the memberships the slightly wider one. */
.dr-affil--2c{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.dr-affil--2d{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.dr-affil + .dr-affil{margin-top:0;padding-top:34px;border-top:1px solid var(--line)}
.dr-affil--v2 .dr-affil__block{text-align:left;padding:0 clamp(20px,2.6vw,40px)}
.dr-affil--v2 .dr-affil__block:first-child{padding-left:0}
.dr-affil--v2 .dr-affil__block:last-child{padding-right:0}
.dr-affil--v2 h3{font-size:22px;font-weight:500;margin-bottom:20px}
.dr-affil--v2 .dr-board{justify-content:flex-start;gap:0}
.dr-affil--v2 .dr-logo--board{width:min(100%,275px);height:84px}
.dr-cert{font-family:var(--serif);font-style:italic;font-size:17.5px;line-height:1.45;
  color:var(--gray);margin-top:16px;max-width:32ch}
.dr-affil__rule{display:block;width:44px;height:1px;background:var(--olive);margin:-6px 0 18px}
/* three logos across, no dividers between them: the column rules do that job */
/* the three slots share the row equally and fill it, instead of sitting at a
   fixed width with the column's spare space left around them */
.dr-hospitals--row{justify-content:flex-start;gap:0;width:100%}
.dr-hospitals--row .dr-logo{flex:1 1 0;width:auto;height:96px}
.dr-hospitals--row .dr-logo--tall{height:106px}
.dr-hospitals--row .dr-logo{padding:0 clamp(10px,1.1vw,18px)}
.dr-hospitals--row .dr-logo + .dr-logo{border-left:1px solid var(--line)}
/* A lone affiliation shouldn't float in the middle of the column: it reads as
   part of the block when it starts at the same left edge as the heading. */
.dr-hospitals--row .dr-logo:only-child{flex:0 0 auto;justify-content:flex-start;
  padding-left:0;text-align:left}
.dr-hospitals--row .dr-logo:only-child .dr-logo__text{text-align:left}
/* A wide horizontal lockup takes its height from its width rather than
   stretching to the row's slot height, which would blow it up. */
.dr-hospitals--row .dr-logo--lockup{width:min(100%,300px);height:auto}
.dr-logo--lockup img{height:auto}

/* Training institutions: the mark identifies the place, the caption under it
   says what he did there, so a logo never has to carry that on its own. */
.dr-train{display:flex;align-items:flex-start;justify-content:flex-start}
.dr-train__item{flex:1 1 0;min-width:0;padding:0 clamp(10px,1.2vw,20px);text-align:center}
.dr-train__item + .dr-train__item{border-left:1px solid var(--line)}
.dr-train .dr-logo{height:52px;margin-bottom:14px}
.dr-train--wide .dr-logo{height:66px;margin-bottom:18px}
.dr-train--wide .dr-train__item{padding:0 clamp(20px,3vw,56px)}
.dr-train p{font-family:var(--serif);font-size:15.5px;line-height:1.35;color:var(--ink)}
.dr-train__role{font-style:italic;color:var(--muted);margin-top:6px}
.dr-lic{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,1.5vw,24px);
  row-gap:14px;font-family:var(--serif);font-size:17px;line-height:1.45}
.dr-lic dt{color:var(--olive)}
.dr-lic dd{margin:0;color:var(--ink);border-left:1px solid var(--line);
  padding-left:clamp(16px,1.8vw,26px)}
/* no quote on this hero, so the veil that makes a quote legible is off */
.dr-hero__photo--plain::after{display:none}
/* two full-width blocks in a row (memberships, then publications) need air */
.dr-wide + .dr-wide{margin-top:clamp(30px,3.2vw,46px)}
.dr-affil__list{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--gray)}
.dr-affil__list span{display:block;text-wrap:balance}
.dr-affil__note{margin-top:18px;font-family:var(--serif);font-size:15.5px;color:var(--muted)}
.dr-honors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(30px,4vw,72px);list-style:none;margin-top:22px}
.dr-honors li{font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--ink);
  padding:16px 0;border-top:1px solid var(--line)}
.dr-honors span{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--olive);margin-top:7px}
/* Citations: the year sits in its own column, the entry behind a hairline,
   so the eye can run down the dates. */
.dr-sublabel{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--olive);margin-bottom:22px}
.dr-pubs__col + .dr-pubs__col{border-left:1px solid var(--line);
  padding-left:clamp(28px,3vw,52px)}
.dr-cite{list-style:none}
.dr-cite li{display:grid;grid-template-columns:clamp(64px,7vw,96px) minmax(0,1fr);
  column-gap:clamp(16px,1.8vw,28px)}
.dr-cite li + li{margin-top:clamp(22px,2.4vw,32px)}
.dr-cite__year{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--olive);padding-top:6px}
.dr-cite__body{border-left:1px solid var(--line);padding-left:clamp(16px,1.8vw,28px)}
.dr-cite__title{font-family:var(--serif);font-size:19px;line-height:1.35;color:var(--ink)}
.dr-cite__meta{font-family:var(--serif);font-size:16.5px;line-height:1.45;
  color:var(--muted);margin-top:4px}
.dr-member__role{font-family:var(--serif);font-style:italic;font-size:15.5px;
  color:var(--muted);margin-top:8px}
.dr-pubs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,52px);
  margin:26px 0 clamp(32px,3.4vw,48px)}

/* ---------- closing call to action --------------------------------------- */
.dr-cta{position:relative;overflow:hidden;background:var(--cream2);padding:clamp(40px,4vw,56px) 0}
.dr-cta__img{position:absolute;top:0;bottom:0;left:0;width:30%;
  -webkit-mask-image:linear-gradient(90deg,#000 35%,transparent);
          mask-image:linear-gradient(90deg,#000 35%,transparent)}
.dr-cta__img img{width:100%;height:100%;object-fit:cover;object-position:88% 70%;opacity:.8}
.dr-cta__inner{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:40px;padding-left:clamp(0px,17vw,240px)}
.dr-cta h2{font-size:clamp(28px,2.7vw,40px);line-height:1.15;margin-bottom:14px}
.dr-cta .eyebrow{margin:0;font-size:11px}
.dr-cta .btn{display:inline-flex;align-items:center;gap:14px;flex-shrink:0}
.dr-cta .btn svg{width:15px;height:15px;transition:transform .3s ease}
.dr-cta .btn:hover svg{transform:translateX(4px)}

/* ---------- responsive --------------------------------------------------- */
@media(max-width:1080px){
  .dr-members{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:26px}
  .dr-member:nth-child(4n+1){border-left:0}
}
@media(max-width:860px){
  /* the photo wrapper dissolves so photo, name and quote can be re-ordered */
  .dr-hero{grid-template-columns:1fr}
  .dr-hero__photo{display:contents}
  .dr-hero__photo img{position:relative;order:1;aspect-ratio:4/3;height:auto}
  .dr-hero__body{order:2;padding:36px 24px 8px}
  .dr-quote{position:static;order:3;width:auto;transform:none;padding:24px 24px 44px}
  .dr-row{grid-template-columns:1fr}
  .dr-row__text{padding-left:0}
  .dr-affil{grid-template-columns:1fr;row-gap:30px}
  .dr-pubs{grid-template-columns:1fr}
  .dr-train{flex-direction:column;gap:28px}
  .dr-train__item + .dr-train__item{border-left:0}
  .dr-train .dr-logo{height:62px;width:min(100%,210px);margin:0 auto 14px}
  .dr-pubs__col + .dr-pubs__col{border-left:0;padding-left:0;margin-top:34px}
  .dr-affil__block + .dr-affil__block{border-left:0;border-top:1px solid var(--line);padding-top:30px}
  .dr-members{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dr-members--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dr-honors{grid-template-columns:1fr}
  .dr-member{border-left:0!important}
  .dr-cta__img{display:none}
  .dr-cta__inner{flex-direction:column;align-items:flex-start;padding-left:0}
}
@media(max-width:560px){
  .dr-board{flex-direction:column;text-align:center}
  .dr-board .dr-logo + .dr-logo{border-left:0;padding-left:0}
  .dr-board p{max-width:none}
  .dr-hospitals{flex-direction:column;gap:18px}
  .dr-hospitals .dr-logo + .dr-logo{border-left:0}
  .dr-hospitals--row .dr-logo{width:min(100%,210px);height:62px;padding:0;margin:0 auto}
  .dr-beyond{grid-template-columns:1fr;gap:14px}
}