/* Danbe Dental - wave B page group: our-team.html + about.html.
   Loaded AFTER tokens.css, site.css and interior.css, on those two pages only.

   Scope law (v2-specs/interiors-plan.md, file ownership): this file styles only
   the content inside the WAVE-CONTENT anchors of the two wave-B pages. It never
   restyles chrome, the title strip, the prefooter, or anything site.css owns.

   Recipes executed here:
     .cv-*     hanoverendo-int/04-doctor-bio  (white CV-card, 400x533 portrait)
     .story-*  humphries-int/07-doctor-bio-card (paper card + full-width media)
     .call-*   humphries-int/02-phone-strip-and-intro (hugging white call card)
     .leaf-*   humphries-int/06-procedure-rows (photo left, serif term right)
   Values and every A/B/C delta: v2-specs/pages/our-team-spec.md, about-spec.md */

:root {
  --cv-split-gap:  20px;   /* hanoverendo-int/04: equal column pair */
  --cv-portrait-w: 400px;  /* fixed px, the recipe's portrait slot */
  --cv-name:       39px;   /* recipe H3 39.06px */
  --cv-name-lh:    47px;
  --leaf-term:     25px;   /* humphries-int/06 H4 */
  --leaf-term-lh:  32px;
  --leaf-gap:      20px;
  --leaf-pad:      32px;   /* row vertical padding, hairline separated */
}

/* ===========================================================================
   OUR TEAM : hanoverendo-int/04 CV-card
   The card IS .int-sheet (wave A): 1060 wide, --panel-fill, --shadow-plate,
   square corners, 30px padding. Only its interior is authored here.
   =========================================================================== */

.cv-split {
  display: flex; flex-flow: row nowrap;
  gap: var(--cv-split-gap);
  align-items: center;                 /* recipe: left column centres its portrait */
}
.cv-split > * {
  width: calc(50% - (var(--cv-split-gap) / 2));
  min-width: 0;
}
.cv-portrait { display: flex; justify-content: center; }
.cv-portrait img {
  display: block;
  width: var(--cv-portrait-w); max-width: 100%;
  aspect-ratio: 3 / 4;                 /* 400x533; the source files are 576x768 */
  height: auto;
  object-fit: cover; object-position: center top;
  border-radius: 0;
}

.cv-name {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--cv-name); line-height: var(--cv-name-lh);
  color: var(--ink); text-align: center;
}
.cv-role {
  margin: 10px 0 0;
  font-size: var(--size-body); line-height: 26px; font-weight: 700;
  color: var(--azure-deep); text-align: center;
}
.cv-permit {
  margin: 4px 0 0;
  font-size: var(--size-bio); line-height: var(--lh-bio);
  color: var(--muted-ink); text-align: center;
}
.cv-bio { margin: 20px 0 0; }
.cv-bio p, .cv-more p {
  margin: 0 0 16px;
  font-size: var(--size-lede); line-height: var(--lh-lede);
  color: var(--body-ink);
}
.cv-bio p:last-child, .cv-more p:last-child { margin-bottom: 0; }

/* the full-measure continuation paragraph below the split (recipe: 1030 of 1060) */
.cv-more { margin: 24px 0 0; }

/* replaces the recipe's four-logo credential row : delta B1 */
.cv-creds {
  margin: 24px 0 0; padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: var(--size-bio); line-height: 26px;
  color: var(--muted-ink); text-align: center;
}

/* ===========================================================================
   K.B. LABORATORY STORY CARD : humphries-int/07 paper-card register
   Paper card, serif name, prose, full-measure media plate at the foot.
   No portrait: no real photograph of the named technician exists (delta B2).
   =========================================================================== */

.story-name {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--cv-name); line-height: var(--cv-name-lh);
  color: var(--ink); text-align: center;
}
.story-role {
  margin: 10px 0 0;
  font-size: var(--size-body); line-height: 26px; font-weight: 700;
  color: var(--azure-deep); text-align: center;
}
.story-body { margin: 20px 0 0; }
.story-body p {
  margin: 0 0 16px;
  font-size: var(--size-lede); line-height: var(--lh-lede);
  color: var(--body-ink);
}
.story-body p:last-child { margin-bottom: 0; }
.story-media { margin: 24px 0 0; }
.story-media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  box-shadow: var(--shadow-plate); border-radius: 0;
}
.story-link { margin: 24px 0 0; display: flex; justify-content: center; }

/* ===========================================================================
   ABOUT : humphries-int/02 hugging call card
   Intrinsic width, centred, radius 7.2, plate shadow. The gold phone link is
   recoloured to the flavor's azure (delta B1) and takes a 44px target (B2).
   =========================================================================== */

.call-card {
  /* inline-block, NOT flex: the sentence has to stay one run of text with its
     spaces intact, and the card hugs it (humphries-int/02: intrinsic width). */
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 11px 14px;
  background: var(--plate-fill);
  border-radius: var(--radius-slab);
  box-shadow: var(--shadow-plate);
  font-size: var(--size-body); line-height: var(--lh-body);
  color: var(--muted-ink); text-align: center;
}
/* The tel link stays INLINE so the sentence keeps an even leading (an inline-flex
   link inflates its own line box and the card's lines stop matching). Symmetric
   vertical padding on an inline box grows the hit area to 44px without changing
   the line height: 22px line box + 11px top + 11px bottom. Class B, invisible. */
.call-card a {
  display: inline; padding: 11px 0;
  color: var(--azure-deep); font-weight: 700; text-decoration: underline;
  white-space: nowrap;      /* the number is one token; it must never break mid-digit */
}

/* thesis statement line : humphries-int/02 intro H3 at full measure */
.about-thesis {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--size-slab-title); line-height: var(--lh-slab-title);
  color: var(--ink); text-align: left;
}
.about-intro { margin: 20px 0 0; }
.about-intro p {
  margin: 0 0 16px;
  font-size: var(--size-body); line-height: var(--lh-body);
  color: var(--muted-ink);
}
.about-intro p:last-child { margin-bottom: 0; }

/* ===========================================================================
   LEAFLET ROWS : humphries-int/06
   Photo ALWAYS left, text always right, hairline separated, no row CTAs.
   =========================================================================== */

.leaf-rows { margin: 28px 0 0; }
.leaf-row {
  display: flex; flex-flow: row nowrap;
  gap: var(--leaf-gap); align-items: start;
  padding: var(--leaf-pad) 0;
  border-bottom: 1px solid var(--hairline);
}
.leaf-row > * { width: calc(50% - (var(--leaf-gap) / 2)); min-width: 0; }
.leaf-row:first-child { padding-top: 0; }
.leaf-row:last-child { padding-bottom: 0; border-bottom: 0; }
.leaf-media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  box-shadow: var(--shadow-plate); border-radius: 0;
}
.leaf-term {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--leaf-term); line-height: var(--leaf-term-lh);
  color: var(--ink);
}
.leaf-text p {
  margin: 0 0 14px;
  font-size: var(--size-body); line-height: var(--lh-body);
  color: var(--muted-ink);
}
.leaf-text p:last-child { margin-bottom: 0; }
.leaf-text a { color: var(--azure-deep); text-decoration: underline; }

/* the office group: same rhythm, no media column (delta C2) */
.leaf-row--text > * { width: 100%; }
.leaf-heading {
  margin: 0 0 4px;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--size-slab-title); line-height: var(--lh-slab-title);
  color: var(--ink);
}
.leaf-lede {
  margin: 12px 0 0;
  font-size: var(--size-body); line-height: var(--lh-body);
  color: var(--muted-ink);
}
.leaf-list {
  margin: 12px 0 0; padding-left: 20px;
  font-size: var(--size-body); line-height: 27px;
  color: var(--muted-ink);
}
.leaf-list li { margin: 0 0 4px; }

/* ===========================================================================
   TABLET : the fixed pairs stack at the precedents' own 1119px breakpoint.
   =========================================================================== */
@media (max-width: 1119px) {
  .cv-split { flex-flow: column nowrap; gap: 24px; }
  .cv-split > * { width: 100%; }
  .leaf-row { flex-flow: column nowrap; gap: var(--leaf-gap); }
  .leaf-row > * { width: 100%; }
}

/* ===========================================================================
   PHONE : house mobile law. Restructure, do not rescale. Display type gets an
   explicit 390 size; body copy, terms under 24px and buttons stay frozen.
   =========================================================================== */
@media (max-width: 600px) {
  :root {
    --cv-name:      31px;   /* x0.79 of 39px */
    --cv-name-lh:   38px;
    --leaf-term:    23px;   /* x0.92 of 25px, the <=24px freeze boundary */
    --leaf-term-lh: 30px;
    --leaf-pad:     28px;
  }
  .cv-portrait img { width: 100%; }
  .call-card { display: block; padding: 8px 14px; }
  .leaf-rows { margin: 24px 0 0; }
}