/* HCP Severe 5-FU Toxicity redesign (SERB-270)
   Self-contained styles for /Professional/Severe-Toxicity-Recognition.
   Loaded only on this page. The HCP section loads main_style.css, so — like the
   other HCP redesign pages — these rules live in their own file and pin
   typography per element (main_style.css generic rules would otherwise win). */

.vg-hcp {
  --vg-darkest-blue: #08213D;
  --vg-dark-blue: #12365E;
  --vg-yellow: #EDDD24;
  --vg-red: #F81437;
  --vg-text: #333333;
  --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 53px;
}

/* Superscript reference markers — non-interactive, inherit copy color so they
   match surrounding text (SERB-310). */
.vg-hcp sup {
  font-size: 0.55em;
  vertical-align: super;
  top: 0;
  color: inherit;
}

/* ---------- INTRO ---------- */
.vg-hcp__section { padding: 40px 0 0; }

.vg-hcp__h1 {
  font-family: var(--vg-font-black);
  font-size: 40px;
  line-height: 1.575; /* 63px */
  color: var(--vg-dark-blue);
  text-transform: uppercase;
  margin: 0 0 30px; /* match Figma intro spacing (H1 → subtitle ~30px) */
}

.vg-hcp__sub {
  font-family: var(--vg-font-book);
  font-size: 24px;
  line-height: 1.08; /* 26px */
  color: var(--vg-dark-blue);
  margin: 0 0 28px; /* match Figma intro spacing (subtitle → lede ~28px) */
}
.vg-hcp__sub .is-red {
  font-family: var(--vg-font-bold);
  color: var(--vg-red);
}

.vg-hcp__lede {
  font-family: var(--vg-font-black);
  font-size: 24px;
  line-height: 1.08; /* 26px */
  color: var(--vg-text);
  margin: 0 0 22px;
}
/* sup inherits lede copy color globally (SERB-310). */

/* ---------- RED FLAGS BODY DIAGRAM ---------- */
/* The navy backdrop, the anatomical body illustration, the connector lines, the
   dots and the red corner triangles are all baked into one composite raster
   (toxicity-body.png, exported 1:1 from the Figma "Red flags" frame). The five
   symptom callout boxes are overlaid as positioned HTML/CSS text so the copy
   stays selectable, accessible and editable. Box coordinates are percentages of
   the image frame so they track the image as it scales down. */
.vg-hcp__flags {
  position: relative;
  width: 100%;
  margin: 0;
}
.vg-hcp__flags-img {
  display: block;
  width: 100%;
  height: auto;
}

.vg-hcp__callout {
  position: absolute;
  color: #fff;
  /* Keep copy inside its box and off the diagram's connector lines: long
     medical terms (e.g. "Thrombocytopenia") wrap rather than spilling past
     the box edge onto the artwork (SERB-317). */
  overflow-wrap: break-word;
  word-break: normal;
  /* SERB-317 R3: each callout's `top` is set just below its horizontal
     connector line (the line is the box's "ceiling"). A small vw-scaled top
     inset guarantees the first line of text never lands ON that line — the
     gap holds at every width because it tracks the image like the box coords.
     (The ≤767px stacked layout sets `padding` shorthand, which overrides this.) */
  padding-top: 0.7vw;
}
.vg-hcp__callout-head {
  font-family: var(--vg-font-black);
  /* The diagram image is full-viewport width and scales with it, but the
     callout copy used to be a fixed 24px/16px — so below the 1440px design
     width the text occupied a larger share of the (shorter) image and the
     2-line "Unusually severe…" labels plus the 5-item Cardiac list spilled onto
     the connector lines / off the bottom of the artwork. Sizing the callouts in
     vw makes the text track the image, so the layout holds its proportions at
     every width. min() pins the Figma sizes (24px/16px) at 1440px, caps them
     above it, and scales them down with the image below it. (SERB-317) */
  /* SERB-317 R2: dropped 24px→22px and lh 1.17→1.12 so the 2-line "Unusually
     severe…" heads occupy less height/width and the copy clears the diagram's
     connector lines. (1.5278vw = 22px @ 1440.) */
  font-size: min(22px, 1.5278vw); /* 22px @ 1440, scales with the image below it */
  line-height: 1.12; /* ~25px @ 22px */
  color: #fff;
  margin: 0 0 5px; /* SERB-317 R2: 6→5px, trims a little vertical to gain clearance */
  overflow-wrap: break-word;
}
.vg-hcp__callout-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--vg-font-book);
  /* SERB-317 R2: dropped 16px→15px and lh 1.625→1.5 so list items take less
     width (fewer wraps of long terms like "Thrombocytopenia"/"Neutropenia")
     and less height (the 5-item Cardiac list clears the bottom red triangle).
     (1.0417vw = 15px @ 1440.) */
  font-size: min(15px, 1.0417vw); /* 15px @ 1440, scales with the image below it */
  line-height: 1.5; /* ~23px @ 15px */
  color: #fff;
  overflow-wrap: break-word;
}
.vg-hcp__callout-list li {
  position: relative;
  /* main_style.css applies `li { margin-bottom: 18px }` with higher specificity,
     which inflates every callout and pushes the 5-item Cardiac list off the
     bottom of the diagram. Pin the tight 2px inter-item gap from Figma so the
     lists stay inside the artwork and clear of the connector lines (SERB-317). */
  margin: 0 0 2px !important;
  overflow-wrap: break-word;
}
/* SERB-317 (R5): two QA nits, both rooted in main_style.css outranking our
   single-class rules:
   (a) `.vg-hcp ul { padding-left: 28px }` indented the whole list ~28px right of
       the callout heading — zero it so the em-dash markers left-align under the
       subhead's first letter.
   (b) `.vg-hcp ul > li { padding-left: 11px }` (which beat our 16px) was narrower
       than the ~13.5px em-dash glyph, so the dash and first letter overlapped.
       Re-assert a hanging indent at id-scoped specificity, in `em` so the
       dash→text gap tracks the vw-scaled font at every width (1.3em ≈ 0.9em dash
       + ~0.4em space). This also restores the list-style:none that kept the
       inherited yellow triangle from doubling up on the em-dash. */
#toxicityPage ul.vg-hcp__callout-list,
.vg-hcp ul.vg-hcp__callout-list { padding-left: 0; }
#toxicityPage ul.vg-hcp__callout-list > li,
.vg-hcp ul.vg-hcp__callout-list > li {
  list-style: none;
  padding-left: 1.3em;
}
.vg-hcp__callout-list li::before {
  content: "\2014"; /* em dash, matching the design */
  position: absolute;
  left: 0;
  top: 0;
}
.vg-hcp__callout-list sup { color: #fff; }

/* Left column boxes.
   SERB-317 R3: the connector artwork's steep diagonal (the line running from
   each left red-triangle down into the body) is the real right-hand boundary
   for these boxes — measured off toxicity-body.png it sits at x≈28.5% (top of
   the digestive text band) and x≈29.3% (top of the hematologic band), then
   widens going down. The boxes were 34%/32% wide (right edge ~42%/40%), so
   every list line spilled across that diagonal. Narrowed to 21% (right edge
   ≈29.2%) so the widest wrapped line clears the diagonal at its tightest
   point; the headings already wrap to 2 short lines at this width and the
   lists wrap one extra line that still fits vertically (digestive bottom
   ≈36%, well above the 48% mid-left line; hematologic bottom ≈84%, clear of
   the image edge). `top` unchanged — padding-top (above) clears the
   horizontal ceiling line. */
/* SERB-317 (reopen): digestive box still grazed the diagonal at sub-1440 widths,
   so its right edge is pulled in further (21%→19% → right edge 8.21+19=27.21%,
   clear of the x≈28.5% diagonal). */
.vg-hcp__callout.is-digestive { left: 8.21%; top: 5.5%; width: 19%; }
.vg-hcp__callout.is-hematologic { left: 8.21%; top: 49%; width: 21%; }
/* Right column boxes.
   SERB-317 R3: each horizontal connector line on the right drops a short
   vertical segment near its inboard end — measured at x≈92.8–94% across the
   CNS/skin/cardiac bands. The boxes were 31% wide (right edge ≈99.8%), so the
   last word of any wrapping line ran onto that vertical segment. Narrowed to
   23% (right edge ≈91.9%) so text stops short of the segment; the short
   headings/lists don't gain lines at this width. is-cardiac top held at 65.5%
   (its 5-item list bottoms out ≈92%, clear of the image edge); padding-top
   clears the 65% ceiling line. */
.vg-hcp__callout.is-cns { left: 68.85%; top: 5.5%; width: 23%; }
.vg-hcp__callout.is-skin { left: 68.85%; top: 41.5%; width: 23%; }
.vg-hcp__callout.is-cardiac { left: 68.85%; top: 65.5%; width: 23%; }
/* SERB-317 (reopen): the hematologic and cardiac heads sat tighter to their
   ceiling line than the other three. A larger top inset on just these two evens
   the gap across all five callouts. (vw-scaled so it tracks the image.) */
.vg-hcp__callout.is-hematologic,
.vg-hcp__callout.is-cardiac { padding-top: 1.2vw; }

/* ---------- "IF YOU SUSPECT" NAVY-LED BAND ---------- */
.vg-hcp__suspect {
  text-align: center;
  padding: 44px 53px 36px;
}
.vg-hcp__suspect-title {
  font-family: var(--vg-font-black);
  font-size: 40px;
  line-height: 1.15; /* 46px */
  color: var(--vg-text);
  margin: 0 0 14px;
}
.vg-hcp__suspect-body {
  font-family: var(--vg-font-book);
  font-size: 24px;
  line-height: 1.08; /* 26px */
  color: var(--vg-dark-blue);
  max-width: 720px; /* SERB-317 (reopen): narrowed to match Figma (~half the 1440 frame) */
  margin: 0 auto;
}

/* ---------- ASAP PROTOCOL ---------- */
/* Fixed 354px band (Figma node 4043-21674). min-height + column-flex centering
   keeps the band at the design height regardless of how the copy wraps. The
   ASAP copy is set in Helvetica/Arial (per Figma) — Gotham-Medium rendered it
   noticeably heavier and wider than the design (SERB-270 QA). */
.vg-hcp__asap {
  background: linear-gradient(to bottom, #eee 0%, #e2e2e2 55%, #d1d1d1 100%);
  min-height: 354px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vg-hcp__asap-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  /* Figma's text frame is 705px (Helvetica), but visitors fall back to the
     slightly-wider Arial, so the "Prior to…" line wrapped at 705px. A little
     headroom keeps all four lines unwrapped at 1440px (SERB-270 QA). */
  max-width: 760px;
}
.vg-hcp__asap-list li {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 25px;
  line-height: 30px;
  font-weight: 400;
  color: var(--vg-text);
  margin: 0 0 20px;
}
.vg-hcp__asap-list li:last-child { margin-bottom: 0; }
.vg-hcp__asap-list .vg-hcp__initial {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 43px;
  line-height: 30px;
  color: var(--vg-red);
}
/* sup inherits asap-list copy color globally; the ® mark (formerly .is-reg)
   now matches automatically (SERB-310/311). */

/* ---------- ABBREVIATIONS FOOTNOTE ---------- */
.vg-hcp__abbr {
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 1.31; /* 21px */
  color: var(--vg-text);
  margin: 0;
  /* SERB-317 (reopen): trimmed the extra bottom whitespace before the ISI tray so
     this page matches the other HCP pages (was 48px). */
  padding: 36px 0 0;
}

/* ---------- RESPONSIVE ---------- */
/* The callout font sizes scale via min(…, vw) (see .vg-hcp__callout-head /
   -list above), so they already track the image down to the 767px stack
   breakpoint — no per-breakpoint font override is needed here. The bullet
   indent is set in `em` (SERB-317 R5), so it tracks the font automatically and
   needs no per-breakpoint override. */
@media (max-width: 991px) {
  .vg-hcp__container { padding: 0 24px; }
  .vg-hcp__h1 { font-size: 30px; }
  .vg-hcp__sub, .vg-hcp__lede, .vg-hcp__suspect-body { font-size: 19px; }
  .vg-hcp__suspect-title { font-size: 30px; }
}

/* Below this width the overlaid callouts can no longer sit legibly on the
   image, so the boxes stack beneath a full-width diagram. */
@media (max-width: 767px) {
  .vg-hcp__flags-img {
    border: 1px solid var(--vg-dark-blue);
  }
  .vg-hcp__callout {
    position: static;
    width: auto !important;
    left: auto; top: auto;
    background: var(--vg-dark-blue);
    padding: 18px 20px;
    margin-top: 2px;
  }
  .vg-hcp__callout-head { font-size: 20px; }
  .vg-hcp__callout-list { font-size: 15px; line-height: 1.4; }
  .vg-hcp__suspect { padding: 32px 24px 28px; }
  .vg-hcp__asap { padding: 36px 0; }
  .vg-hcp__asap-list li { font-size: 19px; }
  .vg-hcp__asap-list .vg-hcp__initial { font-size: 32px; line-height: 24px; }
}