/* PowerShare Banner - C8004 */

/* The richtext filter wraps its output in a <p>, and the global `p` base style
   (`pb-4 leading-loose font-light text-grey-body`) applies to that child directly,
   so it beats what the child would otherwise inherit from the styled wrapper. */
.c8004-headline p,
.c8004-subtext p {
  padding-bottom: 0;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.c8004-tag,
.c8004-strip-headline,
.c8004-strip-subtext {
  padding-bottom: 0;
}

/* The banner's height comes from this box, not from the image's intrinsic ratio:
   the photo is absolutely positioned and cover-cropped into it. */
.c8004-media {
  aspect-ratio: 5 / 8;
  border-radius: 0.75rem;
}

.c8004-media picture {
  position: absolute;
  inset: 0;
}

.c8004-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Applies a dark overlay on top of the image */
.c8004-scrim {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 17.5%, rgba(0, 0, 0, 0.40) 54.63%, rgba(0, 0, 0, 0.00) 84.93%);
}

.c8004-content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 1.25rem 1.5rem 1.5rem;
}

.c8004-tag {
  display: inline-block;
  background-color: #4F7A2E;
  color: #fff;
  font-family: jost-variable, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
}

/* Mobile spreads tag / headline / (subtext + CTA) evenly down the image, so the
   wrapper is dissolved with `display: contents` and its children become direct
   flex items of .c8004-content's space-between. Desktop restores it to a real
   box so those same three parts read as one vertically-centered group. */
.c8004-copy {
  display: contents;
}

.c8004-headline {
  font-size: 2.2rem;
  line-height: 1.12;
}


.c8004-subtext {
  font-size: 1rem;
  line-height: 1.55;
  padding: 0 1.5rem;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.c8004-cta {
  margin-top: 1.75rem;
  width: 100%;
}

.c8004-cta .btn-cta {
  border-radius: 4px;
}

/* Assistance strip: a separate rounded card below the banner until the banner is
   wide enough to host it as an overlaid pill (see the 1400px block). */
.c8004-strip {
  z-index: 3;
  background-color: #0D123D;
  border-radius: 0.75rem;
  margin-top: 0.75rem;
  padding: 1.75rem 1.5rem 3rem;
  text-align: center;
}

.c8004-strip-headline {
  font-size: 1.5rem;
  line-height: 1.2;
}

.c8004-strip-subtext {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.75rem;
}

.c8004-strip-cta {
  margin-top: 1.75rem;
}


.c8004-strip .btn-cta.alternate-white {
  background-color: #fff;
  border-color: #fff;
  color: #0d123d;
}

.c8004-strip .btn-cta.alternate-white:hover {
  background-color: #ffcc5b;
  border-color: #ffcc5b;
  color: #0d123d;
}

/* Tablet and large-phone widths: the phone's tall 5:8 crop would make the banner
   700–1170px high here — taller than the viewport — so it flattens toward landscape,
   with a floor that keeps room for the copy at the low end of the band. Height is
   computed rather than set with `aspect-ratio` for the same reason as the desktop
   rule below: `aspect-ratio` plus a binding min-height inflates the box's width. */
@media (min-width: 569px) and (max-width: 1025px) {
  .c8004-media {
    aspect-ratio: auto;
    height: calc((100vw - 36px) * 0.75);
    min-height: 560px;
  }

  /* The phone layout's full-bleed CTA would be a ~700px-wide button at this width. */
  .c8004-cta,
  .c8004-cta .btn-cta {
    width: auto;
  }
}

@media (min-width: 1026px) {
  /* Match the main nav's fluid width continuously from 1026px up, so the banner's outer edges
     track the nav's logo/support-link edges throughout the resize: fixed 3rem side padding from
     1026px, then capped at a 1824px-wide content area beyond 1920px */
  .container.c8004-container {
    max-width: none;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  /* 16:9 of the content width matches the comp at full width, but that ratio alone
     leaves a banner only ~520px tall near 1026px — too short for the overlaid copy.
     The min-height floor keeps the banner tall enough to hold the headline, subtext
     and CTA at every desktop width; the photo simply crops in further below ~1210px.
     Height is computed rather than set via `aspect-ratio` because a binding
     min-height alongside `aspect-ratio` inflates the box's *width* to satisfy the
     ratio, pushing the banner past the container's padding. */
  .c8004-media {
    aspect-ratio: auto;
    height: calc((100vw - 6rem) * 0.5625);
    min-height: 680px;
  }

  /* Bottom padding exceeds top so the centered copy group settles slightly above
     the image's midline, as in the comp. */
  .c8004-content {
    justify-content: center;
    padding: 4rem 3rem 7rem;
  }

  .c8004-scrim {
    background: radial-gradient(69.41% 44.61% at 50% 44.61%, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.40) 54.33%, rgba(0, 0, 0, 0.00) 100%);
  }

  .c8004-tag {
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
  }

  .c8004-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Scales with the viewport across the desktop range instead of switching size at
     a breakpoint, so the headline never outgrows the banner as the window narrows
     (same approach as card_overlay.css). Frozen to the comp's 72px at 1920px, where
     the container itself stops growing. */
  .c8004-headline {
    font-size: 3.75vw;
    line-height: 1.15;
  }

  .c8004-copy-bottom {
    margin-top: 2rem;
  }

  .c8004-subtext {
    font-size: 1.375rem;
    line-height: 1.6;
    max-width: 32rem;
    padding: 0;
  }

  .c8004-cta {
    margin-top: 5rem;
    width: auto;
  }

  .c8004-cta .btn-cta {
    width: auto;
  }

  /* Still below the banner at these widths, but there is now room to lay the strip
     out as a row. It wraps rather than squeezing if the authored copy runs long. */
  .c8004-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin-top: 1rem;
    padding: 1.5rem 2.5rem;
    text-align: left;
  }

  .c8004-strip-headline {
    font-size: 1.5rem;
  }

  .c8004-strip-aside {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .c8004-strip-subtext,
  .c8004-strip-cta {
    margin-top: 0;
  }

  .c8004-strip .btn-cta.alternate-white {
    width: auto;
    white-space: nowrap;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
  }
}

@media (min-width: 1400px) {
  .c8004-strip {
    position: absolute;
    left: 3.75%;
    right: 3.75%;
    bottom: 2.5rem;
    flex-wrap: nowrap;
    gap: 2rem;
    margin-top: 0;
    border-radius: 9999px;
    padding: 1.5rem 3.5rem;
  }

  .c8004-strip-headline {
    font-size: 1.625rem;
  }

  .c8004-strip-subtext {
    white-space: nowrap;
  }
}

@media (min-width: 1920px) {
  .container.c8004-container {
    padding-left: calc((100vw - 1824px) / 2);
    padding-right: calc((100vw - 1824px) / 2);
  }

  /* Content area stops growing at 1824px, so the banner's height stops with it. */
  .c8004-media {
    height: 1026px;
  }

  .c8004-headline {
    font-size: 4.5rem;
  }
}