/* HCP Home redesign (SERB-263)
   Self-contained styles for /Professional/Home. Loaded only on this page.
   Mirrors the consumer redesign visual language (homepage_redesign.css) but the
   HCP section loads main_style.css, so these rules live in their own file. */

.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-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 — sizing/positioning is now global in
   main_style.css (.vg-hcp sup); kept here only as a harmless duplicate of the
   sizing. Color is inherited globally so markers match surrounding copy
   (SERB-310/311). */
.vg-hcp sup {
  font-size: 0.55em;
  vertical-align: super;
  top: 0;
  color: inherit;
}

/* ---------- HERO ---------- */
.vg-hcp__hero {
  background: linear-gradient(to bottom, #eee 0%, #e2e2e2 55%, #d1d1d1 100%);
  padding: 60px 0 64px;
}

.vg-hcp__hero-box {
  position: relative;
  max-width: 1334px;
  margin: 0 auto;
}

.vg-hcp__hero-box > img {
  display: block;
  width: 100%;
  height: auto;
}

/* White overlay copy sits on the red right-hand region of the break-glass box. */
.vg-hcp__hero-content {
  position: absolute;
  top: 17%;
  left: 43.5%;
  right: 8%;
  color: #fff;
}

.vg-hcp__h1 {
  font-family: var(--vg-font-black);
  font-size: clamp(34px, 6.3vw, 91px);
  line-height: 0.92;
  margin: 0 0 clamp(12px, 1.9vw, 28px);
  color: #fff;
}

.vg-hcp__hero-body {
  font-family: var(--vg-font-black);
  font-size: clamp(16px, 2.92vw, 42px);
  line-height: 1.12;
  margin: 0;
  color: #fff;
}

.vg-hcp__hero-foot {
  position: absolute;
  left: 11%;
  bottom: 8.5%;
  margin: 0;
  font-family: var(--vg-font-book);
  font-size: clamp(11px, 1.1vw, 16px);
  line-height: 1.3;
  color: #fff;
}

/* ---------- SHARED SECTION ---------- */
.vg-hcp__section { padding: 56px 0; }

.vg-hcp__h2 {
  font-family: var(--vg-font-black);
  font-size: 40px;
  line-height: 1.32;
  color: var(--vg-dark-blue);
  text-transform: uppercase;
  margin: 0 0 28px;
}
.vg-hcp__h2 .is-red { color: var(--vg-red); }
/* sup inherits the H2 dark-blue copy color globally (SERB-310). */

/* ---------- STAY ALERT ---------- */
.vg-hcp__stay-figure {
  max-width: 812px;
  margin: 0 auto;
}

.vg-hcp__stay-intro {
  font-family: var(--vg-font-medium);
  font-size: 18px;
  line-height: 1.44;
  color: var(--vg-dark-blue);
  margin: 0 0 12px;
}

.vg-hcp__stay-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- RED FLAGS ---------- */
.vg-hcp__flags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  margin-top: 8px;
}

.vg-hcp__flag-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vg-hcp__flag-head {
  font-family: var(--vg-font-black);
  font-size: 24px;
  line-height: 1.08;
  color: var(--vg-text);
  text-align: center;
  margin: 0 0 22px;
}

.vg-hcp__flag-box {
  border: 4px solid var(--vg-red);
  border-radius: 8px;
  padding: 46px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vg-hcp__flag-item {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.vg-hcp__flag-item + .vg-hcp__flag-item { margin-top: 56px; }

.vg-hcp__flag-icon {
  flex: 0 0 124px;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}
.vg-hcp__flag-icon img {
  display: block;
  width: auto;
  height: 116px;
  max-width: 124px;
}

.vg-hcp__flag-text { min-width: 0; }

.vg-hcp__flag-title {
  font-family: var(--vg-font-black);
  font-size: 17px;
  line-height: 1.53;
  color: var(--vg-dark-blue);
  margin: 0 0 4px;
}

.vg-hcp__flag-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  font-family: var(--vg-font-medium);
  font-size: 14px;
  line-height: 1.3;
  color: var(--vg-text);
}
/* Native CSS disc marker (SERB-316). The ::marker defaults to the list's
   text color (currentColor → var(--vg-text)), so the disc matches the text
   beside it. Selector is intentionally more specific than the
   main_style.css `.vg-hcp ul > li` triangle baseline (0,1,2) so the disc —
   not the yellow triangle — wins on this page. */
.vg-hcp .vg-hcp__flag-list > li {
  list-style-image: none;
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 0;
  margin: 0 0 3px;
}

/* SERB-333: body text directly under the red flag boxes is black, not navy. */
.vg-hcp__flags-note {
  font-family: var(--vg-font-black);
  font-size: 19px;
  line-height: 1.37;
  color: #000;
  margin: 38px 0 0;
}

/* ---------- CROSS-LINK ROW ---------- */
.vg-hcp__cta {
  background: var(--vg-dark-blue);
  padding: 56px 0 64px;
}

.vg-hcp__cta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.vg-hcp__cta-item {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  /* SERB-333: extra vertical breathing room around each icon+label tile to
     match Figma's more-spacious proportions. */
  padding: 16px 0 18px;
}

/* SERB-333: icons shrunk ~12% (145 → 128) and label dropped one step
   (24 → 21) so the tiles read closer to the Figma sizing and don't crowd
   at narrower widths. Vertical gap between icon and label widened too. */
.vg-hcp__cta-icon {
  display: block;
  width: 128px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 26px;
  position: relative;
  bottom: 0;
  transition: bottom .5s ease;
}

.vg-hcp__cta-label {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--vg-font-black);
  font-size: 21px;
  line-height: 1.1;
  color: #fff;
  transition: color .5s ease;
}

/* Hover: icon lifts, label turns yellow + underlines — mirrors the live site. */
.vg-hcp__cta-item:hover .vg-hcp__cta-icon,
.vg-hcp__cta-item:focus-visible .vg-hcp__cta-icon { bottom: 18px; }

.vg-hcp__cta-item:hover .vg-hcp__cta-label,
.vg-hcp__cta-item:focus-visible .vg-hcp__cta-label {
  color: var(--vg-yellow);
  text-decoration: underline;
}

/* ---------- ABBREVIATIONS FOOTNOTE ---------- */
.vg-hcp__abbr {
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 1.31;
  color: var(--vg-text);
  margin: 0;
  padding: 36px 0 8px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .vg-hcp__container { padding: 0 24px; }
  .vg-hcp__h2 { font-size: 30px; }
  .vg-hcp__cta-row { flex-wrap: wrap; row-gap: 36px; justify-content: center; }
  .vg-hcp__cta-item { flex: 0 0 33.33%; }
  .vg-hcp__cta-label { font-size: 18px; white-space: normal; }
  .vg-hcp__cta-icon { width: 104px; margin-bottom: 20px; }
}

@media (max-width: 767px) {
  .vg-hcp__hero { padding: 28px 0 32px; }
  /* Stack hero copy beneath the image on small screens. */
  .vg-hcp__hero-content {
    position: static;
    left: auto; right: auto; top: auto;
    color: var(--vg-dark-blue);
    padding: 20px 24px 0;
  }
  .vg-hcp__h1 { color: var(--vg-dark-blue); }
  .vg-hcp__hero-body { color: var(--vg-text); }
  .vg-hcp__hero-foot {
    position: static;
    color: var(--vg-text);
    padding: 8px 24px 0;
  }
  .vg-hcp__flags { grid-template-columns: 1fr; gap: 36px; }
  .vg-hcp__flag-box { padding: 28px 20px; }
  .vg-hcp__flag-item { gap: 16px; }
  .vg-hcp__flag-icon { flex: 0 0 84px; }
  .vg-hcp__flag-icon img { height: 84px; max-width: 84px; }
  .vg-hcp__cta-item { flex: 0 0 50%; }
}