/* ============================================================
   PAGE: DOCTORS (Meet the doctors) — sections unique to /doctors.html
   Reuses .hero / .cta (home.css), .chip (components.css), tokens.
   ============================================================ */

/* ============================================================
   HERO — centered variant of .hero
   ============================================================ */
/* flat paper bg (overrides .hero-section's paper→paper-2 gradient) so the hero and the
   first doctor row (also paper) share one seamless background — no step at the seam */
.dhero{text-align: center; background: var(--c-paper); padding-bottom: 0}  /* the hero→first-doctor gap lives on the doctor block below, not on the hero */
/* eyebrow red, h1 margin s-7, t-display all inherited from .hero (home.css).
   No lead here, so rely on h1's own margin (32) for h1↔actions instead of stacking another margin-top. */
.dhero .hero-actions{justify-content: center; flex-wrap: wrap; margin-top: 0}


/* ============================================================
   DOCTOR PROFILE ROW
   ============================================================ */
.doc-profile{padding: var(--section-pb) var(--section-px); scroll-margin-top: var(--header-h, 80px)}  /* anchor target clears the sticky header when arriving from a doctor card */
/* first row (Dr Sanaz Molaei) keeps its own top padding — the hero zeroes its bottom padding,
   so the hero→first-doctor gap belongs to this doctor block (not the hero). */
.doc-profile.alt{background: var(--c-paper-2)}  /* striped rows (2nd, 4th) */

/* photo + content; mobile stacks (photo first) */
.dp-row{display: grid; grid-template-columns: 1fr; gap: var(--gap-block)}
@media (min-width: 905px){
  .dp-row{grid-template-columns: 400px 1fr; align-items: start}
  .doc-profile.alt .dp-row{grid-template-columns: 1fr 400px}
  .doc-profile.alt .dp-photo{order: 2}          /* photo on the right for striped rows */
}
.dp-photo{
  aspect-ratio: 4 / 5;
  max-width: 400px;   /* caps the portrait when stacked (phone is narrower; portrait tablet would blow up to full width) */
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--g-photo);
}
.dp-photo img{width: 100%; height: 100%; object-fit: cover; object-position: top; display: block}

/* phone: small square photo like the portrait tablet — but the name and everything
   else stay stacked full-width below (no reparenting beside the photo). */
@media (max-width: 599.98px){
  .dp-row{gap: var(--gap-text)}                                        /* 24 — tighter: small photo → content */
  .dp-photo{aspect-ratio: 1 / 1; max-width: clamp(160px, 26vw, 220px)} /* small square, like the tablet */
}

.dp-content{display: flex; flex-direction: column; gap: var(--s-7)}    /* 32 — between sub-blocks (hero-internal rhythm) */
.dp-head{display: flex; flex-direction: column; gap: var(--gap-row)}    /* 16 — heading group → bio */
.dp-headings{display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-stack)}  /* 12 — role → name → creds */

/* role pill — soft brand tint + brand text; .t-eyebrow gives the 12/uppercase/tracking text style */
.dp-role{display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-4); border-radius: var(--r-pill)}
.doc-profile.rad   .dp-role{background: var(--c-purple-a10); color: var(--c-purple)}
.doc-profile.heart .dp-role{background: var(--c-red-a10);    color: var(--c-red)}

/* name → .t-h1 ; bio → .t-body */
.dp-bio{color: var(--c-navy)}
.dp-bio p + p{margin-top: var(--gap-text)}   /* 24 — multi-paragraph bios (Sanaz) read like .intro-body */

/* credentials — inline items split by a thin vertical rule */
.dp-creds{color: var(--c-navy-60); font-size: var(--fs-body); line-height: var(--lh-body)}
.dp-creds span:not(:last-child)::after{content: ""; display: inline-block; width: 1px; height: 14px; background: var(--c-navy-a18); margin: 0 var(--gap-stack); vertical-align: middle}

/* credential bullets — plain text bullets, no icons */
.dp-creds-list{display: flex; flex-direction: column; gap: var(--gap-stack)}
.dp-cred{display: flex; align-items: flex-start; gap: var(--gap-icon)}
.dp-cred::before{content: "•"; color: var(--c-navy); flex-shrink: 0}
.dp-cred span{color: var(--c-navy)}   /* matches .dp-bio */

/* chips reuse .chips / .chip (components.css) — here without the fill: the profile
   rows alternate paper/paper-2 backgrounds, so the chips keep only their border */
.doc-profile .chip{background: transparent}

.dp-actions{display: flex; flex-wrap: wrap; gap: var(--gap-btns-l)}     /* 16 — between L buttons */

/* portrait tablet (600–904): small photo + heading/bio beside it (top row),
   then bullets, chips and buttons drop to full width below.
   display:contents lets .dp-content's children join the .dp-row grid directly. */
@media (min-width: 600px) and (max-width: 904.98px){
  .dp-row{
    grid-template-columns: clamp(160px, 26vw, 220px) 1fr;
    column-gap: var(--gap-block);
    row-gap: var(--s-7);
    align-items: start;
  }
  /* lift the nested children into the .dp-row grid so we can place them individually */
  .dp-content, .dp-head{display: contents}
  .dp-photo{grid-column: 1; grid-row: 1; aspect-ratio: 1 / 1}   /* square, narrower */
  .dp-headings{grid-column: 2; grid-row: 1; align-self: center}  /* role / name / credentials, vertically centred against the photo */
  .dp-bio,
  .dp-content > .dp-creds-list,
  .dp-content > .chips,
  .dp-content > .dp-actions{grid-column: 1 / -1}                 /* bio, bullets, chips, buttons → full width below */
}


/* ============================================================
   COORDINATED CLINIC — dark navy band (mirrors .why on dark)
   ============================================================ */
.coord{background: var(--c-navy); color: var(--c-white); padding: var(--section-pb) var(--section-px)}
/* heading → lead: stacked on mobile (gap-text), 2 columns on desktop (gap-block) */
.coord-top{display: grid; grid-template-columns: 1fr; row-gap: var(--gap-text); column-gap: var(--gap-block); margin-bottom: var(--gap-block)}
@media (min-width: 905px){ .coord-top{grid-template-columns: 1fr 1fr} }
.coord-top h2{color: var(--c-white)}            /* .t-h1 */
.coord-top p{color: var(--c-white)}             /* .t-lead — white (Figma) */
/* the three points are cards: navy-80 fill on the navy band, like the Figma */
.coord-grid{display: grid; grid-template-columns: 1fr; gap: var(--grid-gap)}
@media (min-width: 905px){ .coord-grid{grid-template-columns: repeat(3, 1fr)} }
.coord-cell{
  background: var(--c-navy-80);
  border-radius: var(--r-xl);
  padding: var(--card-pad-lg);                  /* 32 */
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--gap-stack);                        /* 12 — min title → desc */
}
.coord-cell h3{color: var(--c-white)}           /* .t-h3 */
.coord-cell p{color: var(--c-navy-10)}          /* .t-body — navy-10 (Figma) */