/* ============================================================================
   GYNOFEM — INVESTOR INFORMATION CARD (Investor.html)
   ----------------------------------------------------------------------------
   White statement card that sits on the page hero, beside the "Investor
   Relations" title, and overhangs the hero's bottom edge into the page.

   The card lives in its own section directly after the hero and is lifted
   into it with a negative top margin. It stays in normal flow, so the
   "Corporate Overview" content below is pushed down by the card's real
   height at every width — nothing is absolutely positioned and the hero
   markup is unchanged.

     >= 1025px    Beside the title: centred on the page when there is room,
                  otherwise held clear of the title so the two never touch.
     769-1024px   The hero title grows to 3rem, so the card drops below it,
                  on the same left edge, overlapping the hero edge slightly.
     <= 768px     Below the centred title, full width inside the page gutter.

   The coloured band along the card's top edge uses the site's purple-to-pink
   footer gradient; change --investor-info-accent to recolour it.
   ============================================================================ */

.investor-info {
  --investor-info-width: 660px;
  /* How far the card rises into the hero. On desktop this lines its top edge
     up with the breadcrumb. */
  --investor-info-overlap: 163px;
  /* Hero title width plus breathing room — on desktop the card never starts
     closer to the page gutter than this. */
  --investor-info-title-clear: 350px;
  --investor-info-accent: linear-gradient(
    90deg,
    #6e2ea6 0%,
    #8d0fb3 50%,
    #df6ea8 100%
  );

  position: relative;
  z-index: 2;
  margin-top: calc(var(--investor-info-overlap) * -1);
  margin-bottom: 16px;
  padding: 0 6%;
}

.investor-info-card {
  max-width: var(--investor-info-width);
  margin-left: max(
    calc(50% - var(--investor-info-width) / 2),
    var(--investor-info-title-clear)
  );
  padding: clamp(40px, 3.6vw, 52px) clamp(36px, 3.9vw, 56px)
    clamp(36px, 3.2vw, 46px);
  background:
    var(--investor-info-accent) top left / 100% 4px no-repeat,
    var(--white, #ffffff);
  border-radius: 4px;
  box-shadow:
    0 12px 32px rgba(17, 24, 39, 0.12),
    0 2px 8px rgba(17, 24, 39, 0.06);
}

.investor-info-title {
  margin-bottom: 18px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.75rem, 1rem + 2.2vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text, #222831);
}

.investor-info-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #3b3b3b;
}

@media (max-width: 1024px) {
  .investor-info {
    --investor-info-overlap: 40px;
  }
  .investor-info-card {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .investor-info {
    --investor-info-overlap: 32px;
    padding: 0 5%;
  }
  .investor-info-card {
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .investor-info {
    --investor-info-overlap: 28px;
    padding: 0 6%;
  }
  .investor-info-card {
    padding: 30px 22px 28px;
  }
  .investor-info-title {
    margin-bottom: 12px;
  }
}