/* HCP Clinical Data redesign (SERB-268)
   Self-contained styles for /Professional/Data/Clinical. Loaded only on this page.
   Mirrors hcp_dosing_redesign.css conventions (design tokens, container,
   non-interactive blue sup). The HCP section loads main_style.css, so typography
   is pinned explicitly rather than inherited. Values pinned from Figma node
   4043-21608. */

.vg-hcp {
  --vg-darkest-blue: #08213D;
  --vg-dark-blue: #12365E;
  --vg-deep-blue: #0D3354;
  --vg-yellow: #EDDD24;
  --vg-red: #F81437;
  --vg-text: #333333;
  --vg-note: #606060;
  --vg-link: #337AB7;
  --vg-light-gray: #D1D1D1;
  --vg-font-black: 'Gotham-Black', Arial, sans-serif;
  --vg-font-bold: 'Gotham-Bold', Arial, sans-serif;
  --vg-font-medium: 'Gotham-Medium', Arial, sans-serif;
  --vg-font-book: 'Gotham-Book', Arial, sans-serif;
  color: var(--vg-text);
}

.vg-hcp * { box-sizing: border-box; }

.vg-hcp__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 42px;
}

.vg-hcp__section { padding: 48px 0 40px; }

/* Keep tokens like "5-FU" from breaking at the hyphen across lines (SERB-344). */
.vg-hcp .vg-nowrap { white-space: nowrap; }

/* Superscript reference markers — non-interactive, inherit copy color so they
   match surrounding text (SERB-310). */
.vg-hcp sup {
  font-size: 0.645em; /* ~15.48/24 in heading context; visually matches Figma */
  vertical-align: super;
  top: 0;
  color: inherit;
}

/* ---------- H1 ---------- */
.vg-hcp__h1 {
  font-family: var(--vg-font-black);
  font-size: 40px;
  line-height: 63px;
  font-weight: normal;
  text-transform: uppercase;
  color: var(--vg-dark-blue);
  margin: 0 0 24px;
}

/* ---------- LEAD-IN HEADING ---------- */
.vg-hcp__lead {
  font-family: var(--vg-font-book);
  font-size: 24px;
  line-height: 26px; /* SERB-315 R2: matches Figma node 4051:4209 (was 32px) */
  font-weight: normal;
  color: var(--vg-dark-blue);
  margin: 0 0 24px;
}
/* "Don't wait" call-to-action — bold and red (SERB-315). */
.vg-hcp__lead-cta {
  font-family: var(--vg-font-bold);
  font-weight: 700;
  color: var(--vg-red);
}

/* ---------- TWO-COLUMN ROW ---------- */
.vg-hcp__clin-row {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

/* ---------- DONUT CHART ---------- */
/* Left column wrapper — bold header sits directly above the donut (SERB-315). */
.vg-hcp__chart-col { min-width: 0; }
.vg-hcp__chart-head {
  /* SERB-343: was var(--vg-font-bold) 700 20px — but no @font-face declares
     'Gotham-Bold', so it fell back to Arial Bold (the heavy look the client
     flagged). Figma (node 4051:10755) specifies Gotham Medium 500 / 18px, which
     loads a real brand face and reads lighter. */
  font-family: var(--vg-font-medium);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  color: var(--vg-dark-blue);
  margin: 0 0 16px;
  text-align: center; /* Center header over the donut/circle (SERB-315 R2). */
}
.vg-hcp__chart {
  position: relative;
  width: 430px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
}
/* Donut ring rotated to seat the navy segment at lower-right (Figma -60deg). */
.vg-hcp__chart-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-60deg);
}
/* Center overlay — upright. */
.vg-hcp__chart-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  text-align: center;
}
.vg-hcp__chart-pct {
  display: block;
  font-family: var(--vg-font-black);
  font-size: 50px;
  line-height: 60px;
  font-weight: normal;
  text-transform: uppercase;
  color: var(--vg-deep-blue);
  margin-bottom: 8px;
}
.vg-hcp__chart-cap {
  display: block;
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 25px;
  font-weight: normal;
  color: var(--vg-text);
}

/* ---------- RIGHT COLUMN COPY ---------- */
.vg-hcp__clin-copy { min-width: 0; padding-top: 4px; }

.vg-hcp__clin-intro {
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  font-weight: normal;
  color: var(--vg-text);
  margin: 0 0 24px;
}

/* ---------- BULLET LIST — yellow right-pointing triangle markers ---------- */
.vg-hcp__clin-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  color: var(--vg-text);
}
/* Yellow triangle as native list marker (SERB-316). */
.vg-hcp__clin-list > li {
  list-style-image: url('/img/redesign/yellow-triangle.svg');
  list-style-position: outside;
  padding-left: 11px;
  margin: 0 0 20px;
}
.vg-hcp__clin-list > li:last-child { margin-bottom: 0; }

/* Indented sub-points — yellow en-dash markers (SERB-316). */
.vg-hcp__clin-sublist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0 0 0 22px;
}
/* Yellow en-dash native list marker (SERB-316). */
.vg-hcp__clin-sublist li {
  list-style-image: none;
  list-style-type: "\2013"; /* en dash */
  margin: 0;
}
.vg-hcp__clin-sublist li::marker {
  color: var(--vg-yellow);
  font-weight: 700;
}

/* ---------- FOOTNOTE (gray) ---------- */
/* Asterisked footnote rendered as a real bullet list item whose marker is a
   literal "*" (SERB-315 R-reopen). The "*" hangs in a fixed-width gutter and
   the text block is indented by that same gutter, so every wrapped line aligns
   flush at the same left edge — identically on desktop and mobile. This
   replaces the old text-indent/padding hanging-indent hack, which wrapped
   unevenly on narrow viewports. */
/* Selectors are raised to .vg-hcp ul.vg-hcp__footnote-list (0,2,1 / 0,2,2) so they
   out-specify the global triangle baseline `.vg-hcp ul > li` (0,1,2) in
   main_style.css — otherwise the footnote li inherits the yellow-triangle
   list-style-image AND shows the "*", rendering a double marker. */
.vg-hcp ul.vg-hcp__footnote-list {
  list-style: none;
  margin: 24px 0 0;
  padding-left: 0;
}
/* SERB-315 (reopen 2): left-align the "*" under the yellow-triangle bullets above
   (their left edge sits ~2px into the copy column) and tighten the marker→text gap
   to match Figma. `#clinicalPage section ul` (id, 1,0,2) pins 28px on every section
   ul, so the `padding-left: 0` above never applied — the override carries the id to
   win, dropping the gutter to 2px so the "*" lands on the triangle column. */
#clinicalPage section ul.vg-hcp__footnote-list { padding-left: 0; }
.vg-hcp ul.vg-hcp__footnote-list > li {
  list-style: none; /* kill the inherited yellow triangle so only the "*" shows */
  /* SERB-344: the "*" marker now sits inline immediately before the text (no
     hanging-indent gutter), so it reads "*Early…" with no gap per the client. */
  padding-left: 0;
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  font-weight: normal;
  color: var(--vg-note);
}
.vg-hcp ul.vg-hcp__footnote-list > li::before {
  content: "*"; /* inline — butts directly against the first word (SERB-344) */
  width: 0;
  display: inline-block;
  transform: translateX(-8px);
}

/* ---------- ABBREVIATION ---------- */
.vg-hcp__clin-abbr {
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  font-weight: normal;
  color: var(--vg-text);
  margin: 40px 0 0;
}

/* ---------- PRECLINICAL TEASER ---------- */
/* Fixed 303px band (Figma node 4043-21613). min-height + column-flex centering
   keeps the band at the design height regardless of how the copy wraps. */
.vg-hcp__preclin {
  background: linear-gradient(to bottom, #eeeeee 0%, #e2e2e2 55%, #d1d1d1 100%);
  min-height: 303px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vg-hcp__preclin-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* The teaser band is a column flex (for vertical centering); without an
     explicit width the container's `margin: 0 auto` makes this row shrink-wrap
     and center in the viewport. Pin full width so the copy stays left-aligned. */
  width: 100%;
}
.vg-hcp__preclin-copy { min-width: 0; }
.vg-hcp__preclin-h2 {
  font-family: var(--vg-font-black);
  font-size: 60px;
  line-height: 60px;
  font-weight: normal;
  color: var(--vg-dark-blue);
  margin: 0 0 24px;
}
.vg-hcp__preclin-sub {
  font-family: var(--vg-font-book);
  font-size: 24px;
  line-height: 26px;
  font-weight: normal;
  color: var(--vg-dark-blue);
  margin: 0;
}
.vg-hcp__preclin-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 167px;
  padding: 18px 24px;
  background: var(--vg-yellow);
  font-family: var(--vg-font-bold);
  font-size: 16px;
  line-height: 26px;
  font-weight: 700; /* keep the label bold when the Arial fallback is used (Gotham-Bold absent) */
  color: var(--vg-dark-blue);
  text-align: center;
  text-decoration: none;
}
.vg-hcp__preclin-btn:hover,
.vg-hcp__preclin-btn:focus { color: var(--vg-dark-blue); text-decoration: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .vg-hcp__container { padding: 0 24px; }
  .vg-hcp__clin-row { grid-template-columns: 1fr; gap: 24px; }
  .vg-hcp__chart { width: 360px; }
  .vg-hcp__h1 { font-size: 30px; line-height: 1.3; }
  .vg-hcp__preclin-inner { flex-direction: column; align-items: flex-start; }
  .vg-hcp__preclin-h2 { font-size: 44px; line-height: 1; }
}