/**
 * Ionis Header — standalone page hero header.
 *
 * Two variants: dark (purple bg) and light (gray-tint bg).
 * Two sides: content left (default) or content right.
 * Shares the same structural approach as ionis-header-slide without
 * any slider-specific concerns.
 */

/* ============================================================
   OUTER WRAPPER
   ============================================================ */
.ionis-header {
  width: 100%;
}

/* ============================================================
   LAYOUT CONTAINER — flex row
   ============================================================ */
.ionis-header__layout {
  display: flex;
  align-items: stretch;
  height: 475px;
  width: 100%;
  overflow: hidden;
}

/* ============================================================
   IMAGE PANEL
   ============================================================ */
.ionis-header__image {
  flex: 1 1 0;
  min-width: 0;
  max-width: 81.5625rem;
  overflow: hidden;
}

.ionis-header__image img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* ============================================================
   CONTENT PANEL
   overflow: visible allows the wing-shape SVG to extend beyond
   the panel's right edge into the image area.
   ============================================================ */
.ionis-header__content {
  flex: 1 1 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
}

/* ============================================================
   SIDE VARIANTS
   ============================================================ */

/* --- side-left (default): content left, image right --- */
.ionis-header--side-left .ionis-header__image {
  order: 2;
}

.ionis-header--side-left .ionis-header__content {
  order: 1;
}

.ionis-header--side-left .ionis-header__wings {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.ionis-header--side-left .ionis-header__wings img {
  left: 0;
  top: 260px;
}

.ionis-header--light .ionis-header__wings img {
  opacity: 0.1;
}

.ionis-header--side-left .ionis-header__wing-shape {
  right: -4.15rem;
}

.ionis-header--side-left .ionis-header__inner {
  padding-left: 3rem;
}

/* --- side-right: content right, image left --- */
.ionis-header--side-right .ionis-header__image {
  order: 1;
}

.ionis-header--side-right .ionis-header__content {
  order: 2;
  justify-content: flex-start;
}

.ionis-header--side-right .ionis-header__wings {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.ionis-header--side-right .ionis-header__wings img {
  right: 0;
  transform: translateY(-50%) scaleX(-1);
}

.ionis-header--side-right .ionis-header__wing-shape {
  left: -4.15rem;
  transform: unset;
}

.ionis-header--side-right .ionis-header__inner {
  padding: 3rem 3rem 3rem 4rem;
}

/* ============================================================
   WING-SHAPE SVG
   ============================================================ */
.ionis-header__wing-shape {
  position: absolute;
  top: 0;
  height: 100%;
  width: 4.25rem; /* 68px — natural width of wing-shape-header.svg */
  pointer-events: none;
  transform: scaleX(-1);
}

.ionis-header__wing-shape svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ionis-header--dark .ionis-header__wing-shape {
  color: var(--color-purple, #A20067);
}

.ionis-header--light .ionis-header__wing-shape {
  color: var(--color-gray-tint, #EBECEE);
}

/* ============================================================
   DECORATIVE WINGS IMAGE
   ============================================================ */
.ionis-header__wings img {
  position: absolute;
  display: block;
  width: 18rem;
  max-width: none;
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   INNER CONTENT
   ============================================================ */
.ionis-header__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 40rem;
}

.ionis-header__mobile-curve {
  display: none;
}

.ionis-header__eyebrow {
  margin-bottom: 0.75rem;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.ionis-header__inner h1.ionis-header__title {
  margin: 0;
  margin-bottom: 0.75rem;
  font-size: var(--fs-headingxl);
  font-weight: var(--fw-bold);
}

.ionis-header__subheading {
  margin-bottom: 1rem;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}

.ionis-header__body .base p {
  margin-bottom: 1.5rem;
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
}

/* ============================================================
   COLOR VARIANT — DARK (purple background, all text white)
   ============================================================ */
.ionis-header--dark .ionis-header__content {
  background: var(--color-purple, #A20067);
}

.ionis-header--dark .ionis-header__eyebrow,
.ionis-header--dark .ionis-header__eyebrow *,
.ionis-header--dark .ionis-header__title,
.ionis-header--dark .ionis-header__title *,
.ionis-header--dark .ionis-header__subheading,
.ionis-header--dark .ionis-header__subheading *,
.ionis-header--dark .ionis-header__body,
.ionis-header--dark .ionis-header__body * {
  color: var(--color-white, #fff);
}

/* ============================================================
   COLOR VARIANT — LIGHT (gray-tint bg, per-element text colors)
   ============================================================ */
.ionis-header--light .ionis-header__content {
  background: var(--color-gray-tint, #EBECEE);
}

.ionis-header--light .ionis-header__eyebrow,
.ionis-header--light .ionis-header__eyebrow * {
  color: var(--color-pink, #D70073);
}

.ionis-header--light .ionis-header__title,
.ionis-header--light .ionis-header__title * {
  color: var(--color-purple, #A20067);
}

.ionis-header--light .ionis-header__subheading,
.ionis-header--light .ionis-header__subheading * {
  color: var(--color-purple, #A20067);
}

.ionis-header--light .ionis-header__body,
.ionis-header--light .ionis-header__body * {
  color: var(--color-gray-dark, #363636);
}

/* ============================================================
   MOBILE — stacked layout (≤ 976px)
   ============================================================ */
@media (max-width: 976px) {
  .ionis-header__layout {
    flex-direction: column;
    height: auto;
  }

  /* Image always on top regardless of side variant. */
  .ionis-header__image {
    order: 1 !important;
    flex: none;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .ionis-header__image img {
    height: auto !important;
  }

  /* Content below — pulled up to overlap image. SVG curve provides the transition. */
  .ionis-header__content {
    order: 2 !important;
    flex: none;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: visible;
    margin-top: -0.5rem;
  }

  /* Hide desktop-only curve shape. */
  .ionis-header__wing-shape {
    display: none;
  }

  /* Mobile curve — sits at top of content panel, pulled up into the image. */
  .ionis-header__mobile-curve {
    display: block;
    position: absolute;
    top: clamp(30px, calc(-13.429px + 11.429vw), 98px);
    left: 0;
    width: 100%;
    transform: translateY(-100%);
    z-index: 0;
    pointer-events: none;
  }

  .ionis-header__mobile-curve svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .ionis-header--dark .ionis-header__mobile-curve {
    color: var(--color-purple, #A20067);
  }

  .ionis-header--light .ionis-header__mobile-curve {
    color: var(--color-gray-tint, #EBECEE);
  }

  /* Wings: above the mobile curve but clipped so they don't bleed into the image.
     clip-path top value matches the content panel's margin-top (-0.5rem). */
  .ionis-header__wings {
    z-index: 1;
    clip-path: inset(0.5rem 0 0 0);
  }

  .ionis-header--side-left .ionis-header__wings img {
    height: 100%;
    top: auto;
    bottom: 0;
    max-width: unset;
    min-width: unset;
    width: unset;
    transform: none;
  }

  .ionis-header--side-right .ionis-header__wings img {
    height: 100%;
    bottom: 0;
    max-width: unset;
    min-width: unset;
    width: unset;
  }

  .ionis-header--side-left .ionis-header__inner {
    padding: 2rem 1.25rem;
    max-width: none;
  }

  .ionis-header__body .base p {
    font-size: var(--fs-md);
  }

  .ionis-header__cta {
    margin-bottom: 2rem;
  }
  .ionis-header--side-right .ionis-header__inner,
  .ionis-header--side-left .ionis-header__inner {
    padding: 0 3rem 3rem 4rem;
    margin-left: auto;
    margin-right: auto;
  }
  .ionis-header__wings img {
    top: 55%;
    max-width: 9rem !important;
  }

  .ionis-header__subheading {
    font-size: var(--fs-lg);
  }
}