/**
 * Ionis Header Slide — homepage hero slide.
 *
 * Two variants: dark (purple bg) and light (gray-tint bg).
 * Two sides: content left (default) or content right.
 * The curve between content and image is provided by wing-shape.svg.
 */

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

/* ============================================================
   LAYOUT CONTAINER — flex row
   overflow: hidden clips the wing-shape SVG at the layout edge.
   ============================================================ */
.ionis-header-slide__layout {
  display: flex;
  align-items: stretch;
  height: 49.1875rem;
  width: 100%;
  overflow: hidden;
}

/* ============================================================
   IMAGE PANEL
   Equal flex growth with the content panel. Capped at max-width
   so on ultra-wide screens only the content side keeps growing.
   ============================================================ */
.ionis-header-slide__image {
  flex: 1 1 0;
  min-width: 0;
  max-width: 81.5625rem;
  overflow: hidden;
  position: relative;
}

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

/* ============================================================
   CONTENT PANEL
   Equal flex growth with the image panel.
   overflow: visible allows the wing-shape SVG to extend beyond
   the panel's right edge into the image area; the layout's
   overflow: hidden provides the outer clip.
   ============================================================ */
.ionis-header-slide__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-slide--side-left .ionis-header-slide__image {
  order: 2;
}

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

.ionis-header-slide--side-left .ionis-header-slide__wings {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 32rem;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

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

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

/* Wing-shape: left edge flush with content's right edge,
   extends 9.1875 rem (147 px) into the image area. */
.ionis-header-slide--side-left .ionis-header-slide__wing-shape {
  right: -9.1875rem;
}

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

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

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

.ionis-header-slide--side-right .ionis-header-slide__wings {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  max-width: 63rem;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

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

/* Wing-shape: flipped horizontally; right edge flush with
   content's left edge, extends into the image area. */
.ionis-header-slide--side-right .ionis-header-slide__wing-shape {
  left: -9.1875rem;
  transform: scaleX(-1);
}

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

/* ============================================================
   WING-SHAPE SVG
   Inline SVG uses fill="currentColor"; the color properties
   below make it match each variant's panel background.
   ============================================================ */
.ionis-header-slide__wing-shape {
  position: absolute;
  top: 0;
  height: 100%;
  width: 9.1875rem; /* 147 px — natural SVG width */
  pointer-events: none;
}

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

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

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

/* ============================================================
   DECORATIVE WINGS IMAGE
   Oversized SVG clipped by the wings container (overflow: hidden).
   Fixed at 63rem × 120rem so top/bottom are cut by the container
   and more width is revealed as the content panel grows.
   ============================================================ */
.ionis-header-slide__wings img {
  position: absolute;
  display: block;
  width: 63rem;
  height: 120rem;
  min-width: 308px;
  max-width: none;
  top: 50%;
  transform: translateY(-50%);
}

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

.ionis-header-slide__mobile-curve {
  display: none;
}

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

.ionis-header-slide__inner h1 {
  margin: 0;
}

h1.ionis-header-slide__title .base {
  margin-bottom: 1rem;
  font-size: var(--fs-headingxl);
  font-weight: var(--fw-bold);
  line-height: 110%;
}

.ionis-header-slide__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-slide--dark .ionis-header-slide__content {
  background: var(--color-purple, #A20067);
}

.ionis-header-slide--dark .ionis-header-slide__eyebrow,
.ionis-header-slide--dark .ionis-header-slide__eyebrow *,
.ionis-header-slide--dark .ionis-header-slide__title,
.ionis-header-slide--dark .ionis-header-slide__title *,
.ionis-header-slide--dark .ionis-header-slide__body,
.ionis-header-slide--dark .ionis-header-slide__body * {
  color: var(--color-white, #fff);
}

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

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

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

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

/* ============================================================
   ATTRIBUTION OVERLAY
   Transparent container anchored to the bottom-right of the image.
   ============================================================ */
.ionis-header-slide__attribution {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  max-width: 200px;
  background: rgba(255, 255, 255, 0.75);
  padding: 0.5rem;
  z-index: 1;
  color: var(--color-gray-dark);
}

.ionis-header-slide__attribution-name {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-gray-dark);
}

.ionis-header-slide__attribution-quote {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-gray-dark);
}

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


  .ionis-header-slide__cta {
    margin-bottom: 2rem;
  }

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

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

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

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

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

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

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

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

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

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

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

  .ionis-header-slide__attribution {
    right: 0;
    bottom: clamp(5.313rem, calc(1.771rem + 14.53vw), 10.625rem);
  }
  h1.ionis-header-slide__title .base {
    font-weight: var(--fw-normal);
    margin-bottom: .5rem;
  }
}