/* ==========================================================================
   sHTG campaign hero — Figma "Desktop/2.0_sHTG/1.2_Homepage_Campaign1".
   Full-bleed lifestyle composite (sky + 3D "614->184" + patient photo) with an
   art-directed headline and supporting copy overlaid on the left.
   Authored against the 1280px-wide desktop comp; degrades for tablet/mobile.
   ========================================================================== */

/* Background and content share a single grid cell so they stack, and the cell
   auto-sizes to its tallest child — no absolute overlay, no risk of content
   escaping the section. The image (height:auto) sets the height; the copy
   overlays within it. */
.shtg-hero.shtg-hero--campaign {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  width: 100%;
  overflow: hidden;
  /* Reset the legacy Version-B spacing model. */
  min-height: 0;
  padding: 0;
}

.shtg-hero--campaign > .shtg-hero__bg,
.shtg-hero--campaign > .shtg-hero__inner {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

/* --- Background composite ------------------------------------------------ */
.shtg-hero--campaign .shtg-hero__bg {
  position: relative; /* anchor for the "Actor portrayal." label */
  align-self: start;
  width: 100%;
  font-size: 0;
  line-height: 0;
  z-index: 0;
}

/* Image defines the hero height; the copy cell overlays within it. */
.shtg-hero--campaign .shtg-hero__bg-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

/* "Actor Portrayal." disclaimer, anchored near the patient (bottom-right). */
.shtg-hero--campaign .shtg-hero__actor {
  position: absolute;
  /* The hero grows to fill the viewport width at every size, so the numerals
     baked into the image stay at a fixed % of the width. The label must track
     in vw to stay under them — an upper px cap would freeze it and let it drift
     on wider screens. max() keeps pure proportional tracking, with a small px
     floor only as a guard against crowding the edge on narrow screens. Ratios
     from the known-good 1200px layout: right 162px = 13.5vw, bottom 111px =
     9.25vw. */
  right: max(16px, 35.5vw);
  bottom: max(96px, 12vw);
  z-index: 2;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 14.222px;
  color: #444;
  display: none;
}

/* --- Overlaid content ---------------------------------------------------- */
.shtg-hero--campaign .shtg-hero__inner {
  justify-self: center;
  align-self: start;
  width: 100%;
  max-width: 1280px;
  z-index: 1;
  isolation: isolate;
}

.shtg-hero--campaign .shtg-hero__content {
  /* Vertical offset only; horizontal placement is a grid column on desktop
     (see >=1025px), and explicit padding on tablet/mobile. */
  padding-top: 83px;
  box-sizing: border-box;
}

/* --- Headline ------------------------------------------------------------ */
/* Layered effect: a gradient duplicate (::before) sits 3px left / 2px below a
   solid white copy, both in DM Serif Display Italic, each line rotated -3deg. */
.shtg-hero--campaign .shtg-hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 0;
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
}

.shtg-hero--campaign .shtg-hero__title-line {
  position: relative;
  display: inline-block;
  line-height: 0.9;
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: left center;
}

.shtg-hero--campaign .shtg-hero__title-line::before {
  content: attr(data-text);
  position: absolute;
  left: -4px;
  top: 4px;
  z-index: -1;
  white-space: nowrap;
  background: linear-gradient(90deg, #4f08b0 0%, #fa7821 52.885%, #fabd26 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: blur(2px);

  @media (max-width: 768px) {
    /* Adjust the offset and blur for mobile to maintain legibility at smaller sizes. */
    left: -2px;
    top: 2px;
    /* Reduce the blur on mobile to preserve legibility at small sizes. */
    filter: blur(1px);
  }
}

/* Desktop title (>=1025px): fluid clamp so the lines shrink toward 1025px —
   where the copy column is narrowest — and reach the 62/54 design sizes at
   >=1280px. The vw coefficients are 62px/54px at 1280px, so the intentional
   line-1 : line-2/3 size ratio (62:54) holds across the whole range. */
.shtg-hero--campaign .shtg-hero__title-line--1 {
  font-size: clamp(40px, 4.84vw, 62px);
}

.shtg-hero--campaign .shtg-hero__title-line--2 {
  font-size: clamp(35px, 4.22vw, 54px);
  margin-top: 0;
  margin-left: 80px;
}

.shtg-hero--campaign .shtg-hero__title-line--3 {
  font-size: clamp(35px, 4.22vw, 54px);
  margin-top: 0;
  margin-left: 54px;
}

/* --- Supporting copy ----------------------------------------------------- */
.layout-container .shtg-hero--campaign .shtg-hero__lead,
.shtg-hero--campaign .shtg-hero__lead {
  margin: 0;
  max-width: 488px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.2px;
  color: #21034a;
}

/* "Individual results may vary." disclaimer, directly under the lead copy
   (Figma node 16541:25191 — Poppins Medium 12/26, same indigo as the lead). */
.layout-container .shtg-hero--campaign .shtg-hero__subtext,
.shtg-hero--campaign .shtg-hero__subtext {
  margin: 0;
  max-width: 488px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 26px;
  letter-spacing: -0.2px;
  color: #21034a;
}

/* Brand-gradient divider (same gradient as the headline), rounded caps. */
.shtg-hero--campaign .shtg-hero__rule {
  display: block;
  width: 309px;
  height: 2px;
  margin: 11px 0 0 85px;
  border-radius: 1px;
  background: linear-gradient(90deg, #4F08B0 0%, #FA7821 52.88%, #FABD26 100%);
}

.layout-container .shtg-hero--campaign .shtg-hero__detail,
.shtg-hero--campaign .shtg-hero__detail {
  margin: 14px 0 0 0;
  max-width: 434px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #21034a;
}

/* --- CTA ----------------------------------------------------------------- */
.shtg-hero--campaign .shtg-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  /* Left-align the CTA with the lead/detail copy (QA: TRYN-841 comment 495052). */
  margin: 12px 0 0 0;
  padding: 16px 36px;
  border-radius: 16px;
  border: 2px solid transparent;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #ffffff;
  background: linear-gradient(180deg, #4F08B0 0.68%, #21034A 50%, #4F08B0 100%);
  background-size: 100% 200%;
  background-position: 0 0;
  transition: all 0.3s ease-in-out;
}

.shtg-hero--campaign .shtg-hero__cta-text {
  color: #ffffff;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
}

.shtg-hero--campaign .shtg-hero__cta-arrows {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 10px;
  flex-shrink: 0;
}

.shtg-hero--campaign .shtg-hero__cta-arrow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 16px;
  display: block;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.shtg-hero--campaign .shtg-hero__cta-arrow--yellow { opacity: 1; }
.shtg-hero--campaign .shtg-hero__cta-arrow--white { opacity: 0; }

.shtg-hero--campaign .shtg-hero__cta:hover {
  background-position: 0 100%;
  color: #ffffff;
}

/* Fake the heavier weight with a text stroke instead of font-weight: 600.
   A weight change alters the glyph advance widths and grows the button on
   hover; -webkit-text-stroke thickens the strokes without affecting layout. */
.shtg-hero--campaign .shtg-hero__cta:hover .shtg-hero__cta-text {
  -webkit-text-stroke: 0.6px currentColor;
}

.shtg-hero--campaign .shtg-hero__cta:hover .shtg-hero__cta-arrow--yellow { opacity: 0; }
.shtg-hero--campaign .shtg-hero__cta:hover .shtg-hero__cta-arrow--white { opacity: 1; }

.shtg-hero--campaign .shtg-hero__cta:active { border-color: #fabd26; }
.shtg-hero--campaign .shtg-hero__cta:focus-visible {
  outline: 3px solid #fa7821;
  outline-offset: 3px;
}

/* ==========================================================================
   Desktop (>= 1025px): place the copy in an explicit left grid column instead
   of a left padding — "gutter | copy | photo" reads as the layout it is, and
   the photo track (1fr) reserves the right side for the numerals/patient.
   ========================================================================== */
@media (min-width: 1025px) {
  .shtg-hero--campaign .shtg-hero__inner {
    display: grid;
    grid-template-columns: 120px 1.3fr 1fr 120px;
  }
  .shtg-hero--campaign .shtg-hero__content {
    grid-column: 2;
    min-width: 0;
  }
}

/* Big screens only: pull just the background image (and its actor label) up to
   crop some top sky, while the overlaid copy keeps its position. Expressed as a
   viewport ratio (3.75vw ≈ 3rem at the 1280px design width) so the shift scales
   with the viewport like the rest of the hero rather than staying a fixed px. */
@media (min-width: 1280px) {
  .shtg-hero--campaign .shtg-hero__bg {
    margin-top: -2.75vw;
  }
}

/* Above 1400px the image grows with the viewport while the overlay copy stays a
   fixed size, so the crop has to accelerate — a flat vw slope leaves too much sky.
   Keep the 3.75vw base and add extra pull-up that ramps up from zero at 1400px, so
   this segment is continuous with the 1280–1400px one (no jump on resize) but
   steeper. Tune the 0.4 coefficient to taste. */
@media (min-width: 1400px) {
  .shtg-hero--campaign .shtg-hero__bg {
    margin-top: calc(-3.75vw - (100vw - 1400px) * 0.4);
  }
}

/* ==========================================================================
   Mobile mode (<= 1024px): portrait composite (served via <picture>) with ALL
   copy overlaid on the photo — headline over the sky, lead as a narrow column
   beside the numerals, detail full-width, centered CTA. Extends up to 1024px so
   the awkward 769–1024px band uses the portrait crop rather than squeezing the
   landscape grid; the title scales up with the viewport via clamp (see below).
   Positions are vw of the image so they track as the photo scales.
   ========================================================================== */
@media (max-width: 1024px) {
  /* Portrait composite (served via <picture>) shown as-is. */
  .shtg-hero--campaign .shtg-hero__bg-img {
    object-fit: cover;
    height: max(674px, 100vw);
    object-position: 50% 100%;

  }

  /* The numerals ride the image's object-position crop, which interpolates over
     390px->768px — so they sit lower in the frame on small phones and higher on
     tablets. Track that same curve: the label sits low (right above the detail)
     on small phones and rises to ~32% (just under the numerals) on tablets. */
  .shtg-hero--campaign .shtg-hero__actor {
    right: 29vw;
    bottom: auto;
    font-size: clamp(6px, 0.9vw, 9px);
    top: max(45%, 334px);
  }

  /* Copy flows over the photo (grid keeps both in one cell). The top padding
     drops the headline onto the sky; it's in vw so it tracks the photo, whose
     height scales with viewport width. */
  .shtg-hero--campaign .shtg-hero__inner {
    max-width: 100%;
  }

  .shtg-hero--campaign .shtg-hero__content {
    width: 100%;
    max-width: 100%;
    /* Horizontal inset grows with the viewport so the copy sits more centered in
       the tablet zone instead of hugging the left edge. Kept gentle so the
       headline still clears the numerals; phones hold 20px (4vw floors <500px). */
    padding: 14vw clamp(20px, 4vw, 40px) 0;
  }

  .shtg-hero--campaign .shtg-hero__title {
    margin: 0;
  }
  /* Title scales up with the viewport: ~24.5/21 on phones, growing to ~52/45
     near 1024px so it fills the tablet composite (and meets the desktop size at
     the 1025px boundary). The vw coefficients keep the intentional 24.5:21 line
     ratio, the px floors hold the phone sizes, the px ceilings cap the top. */
  .shtg-hero--campaign .shtg-hero__title-line--1 { font-size: clamp(24.5px, 5vw, 52px); }
  .shtg-hero--campaign .shtg-hero__title-line--2 { font-size: clamp(21px, 4.3vw, 45px); margin-top: 2px; margin-left: 30px; }
  .shtg-hero--campaign .shtg-hero__title-line--3 { font-size: clamp(21px, 4.3vw, 45px); margin-top: 3px; margin-left: 22px; }

  /* Lead — column over the ground, left of the numerals. Both the column width
     and the type scale up toward 1024px to fill the tablet composite, holding
     the ~154px / 15px phone values as floors. */
  .shtg-hero--campaign .shtg-hero__lead,
  .layout-container .shtg-hero--campaign .shtg-hero__lead {
    width: clamp(154px, 30vw, 310px);
    max-width: clamp(154px, 30vw, 310px);
    margin: 34px 0 0;
    font-size: clamp(15px, 2.4vw, 23px);
    line-height: 1.2;
    letter-spacing: -0.5px;
  }

  /* Disclaimer stays in the narrow lead column, just below the lead copy. */
  .shtg-hero--campaign .shtg-hero__subtext,
  .layout-container .shtg-hero--campaign .shtg-hero__subtext {
    width: 154px;
    max-width: 154px;
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 14px;
  }

  /* Divider — gradient line, left-aligned above the detail copy; widens with
     the lead column toward 1024px. */
  .shtg-hero--campaign .shtg-hero__rule {
    display: block;
    width: clamp(143px, 22vw, 230px);
    margin: 12px 0 0 4px;
  }

  /* Detail — wide column over the ground; width and type scale up toward 1024px
     to fill the tablet composite, holding the phone values as floors. */
  .shtg-hero--campaign .shtg-hero__detail,
  .layout-container .shtg-hero--campaign .shtg-hero__detail {
    width: auto;
    max-width: clamp(342px, 54vw, 560px);
    margin: 22px 0 0;
    font-size: clamp(14px, 2.1vw, 21px);
    line-height: 1.28;
    letter-spacing: -0.7px;
  }

  /* CTA — centered pill with the same yellow chevron as desktop; pill and label
     scale up toward 1024px to match the larger tablet copy. */
  .shtg-hero--campaign .shtg-hero__cta {
    display: flex;
    width: fit-content;
    margin: 16px auto 0;
    padding: clamp(12px, 1.5vw, 16px) clamp(24px, 3vw, 34px);
    gap: 20px;
    font-size: clamp(14px, 1.9vw, 19px);
    white-space: nowrap;
  }
}

/* ==========================================================================
   Small phones (<= 600px): the portrait composite is short here, so the
   mid-image numerals collided with the detail copy. Crop some top sky
   (object-fit: cover, bottom-biased) to lift the numerals into the upper third
   and leave the open road clear for the detail + CTA. The height is floored so
   the image always stays tall enough to hold the whole copy block, and the top
   padding is reduced so the headline sits higher.
   ========================================================================== */
@media (max-width: 600px) {
  .shtg-hero--campaign .shtg-hero__bg-img {
    height: max(500px, 100vw);
    object-fit: cover;
    object-position: 50% 100%;
  }

  /* Clear the floating logo/nav bubble (the headline tucked under it at 22px). */
  .shtg-hero--campaign .shtg-hero__content {
    padding-top: 60px;
  }
  .shtg-hero--campaign .shtg-hero__actor {
    top: calc(57% - 23% * clamp(0, (100vw - 390px) / 378px, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .shtg-hero--campaign .shtg-hero__cta,
  .shtg-hero--campaign .shtg-hero__cta-arrow {
    transition: none;
  }
}