/* Hide label & secondary CTA on mobile/tablet (≤1023px) and desktop */
.header-banner .cmp-header-banner__label {
  display: none !important;
}

#newheader-banner .amp-btn-secondary {
  display: none !important;
}

/* Primary button states */
#newheader-banner .amp-btn-primary .cmp-button:hover {
  background-color: #4ce2c5;
  color: #001e41;
  border: 1px solid #009578;
}

#newheader-banner .amp-btn-primary .cmp-button:active {
  background-color: #00b592;
  color: #001e41;
  border: 1px solid #009578;
  outline: none;
  outline-offset: 0px;
}

#newheader-banner .amp-btn-primary .cmp-button:focus-visible {
  outline: 2px solid #001e41;
  outline-offset: 2px;
  border: 1px solid #009578;
  background-color: #00d5ac;
}

/* Mobile and Tablet (up to 1023px) */
@media (max-width: 1023px) {
    .cmp-header-banner__container.banner-grid .cmp-header__image
    {
    z-index : -1 !important;
    }

  .cmp-header-banner__container.banner-grid {
    padding: 0;
    display: grid;
    max-width: unset;
    margin: 0;
    grid-template-rows: repeat(3, min-content);
    grid-template-columns: calc(100%) 64px;
    grid-template-areas:
      "image color"
      "fine-print color"
      "rates rates";
    border-bottom: #bfc7cf 1px solid;
  }

  .cmp-header-banner__container.banner-grid .cmp-header__background_image {
    height: 52px;
    background: #0018f0;
    position: absolute;
    left: 0;
    right: 0;

    &::after {
      background-image: url('../../../../etc.clientlibs/amp-2024/clientlibs/clientlib-react/resources/assets/images/spark-vertical-crop-02-mobile.svg');
      position: absolute;
      inset: 0;
      background-size: contain;
      transform: rotate(90deg);
      margin: auto;
      left: calc(85% - (1023px - 100vw) * 0.025); /* Adjusts from 75% at 1023px to ~70% at 100px */

      @media (max-width: 374px) {
        width: 52px;
        height: 375px;
      }

      @media (min-width: 375px) {
        width: 52px;
        height: 222px;
      }
    }
  }

  .cmp-header-banner__container.banner-grid .cmp-header__image img {
    aspect-ratio: 16/9;
    object-fit: cover;
    margin-top: 3rem;
  }

  .cmp-header-banner__container.banner-grid .cmp-breadcrumb {
    display: none;
  }

  .header-banner .cmp-header-banner__container .cmp-header-banner__header {
    padding: 5rem 1.25rem;
    padding-bottom: 2rem;
  }

  .cmp-header-banner__container.banner-grid .cmp-header-banner__header__container {
    gap: 1rem;

    @media (min-width: 650px) {
      gap: 1.5rem;
    }
  }
}

/* Desktop (1280px and above) */
@media (min-width: 1280px) {
  .cmp-header-banner__container.banner-grid {
    height: 541px;
  }

    .cmp-header-banner__container.banner-grid .cmp-header__background_image {
    height: 80px;
    }

  .cmp-header-banner__container.banner-grid .cmp-header__image {
    aspect-ratio: 4/3;
    object-fit: cover;
    grid-area: image;
    z-index: 1;
    margin-top: 0px;

    @media (min-width: 1280px) and (max-width: 1439px) {
      width: 640px;
      height: 480px;
    }

    @media (min-width: 1440px) and (max-width: 1919px) {
      width: 720px;
      height: 540px;
    }

    @media (min-width: 1920px) {
      width: 768px;
      height: 576px;
    }
  }

  .cmp-header-banner__buttons_container {
    justify-content: flex-start;
  }

  .header-banner .cmp-header-banner__buttons_container .amp-btn-primary a span {
    color: #001e41;
    font-family: "Hurme Geometric Sans-SemiBold";
    max-width: 15ch; /* Enforce 15 chars limit */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-banner .cmp-header-banner__buttons_container .cmp-button:not(.amp-btn-secondary) {
    display: flex;
    padding: var(--Base-UI-Button-Small-Vertical-Padding, 16px) var(--Base-UI-Button-Small-Horizontal-Padding, 24px);
    align-items: center;
    gap: 16px;
  }

  .header-banner .cmp-button__text {
    margin: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .header-banner .cmp-button__icon {
    font-size: 1.25rem !important;
    display: inline-flex !important;
  }

  @media (min-width: 1440px) {
    .cmp-header-banner__container.banner-grid .cmp-header__image {
      width: 720px;
      height: 540px;
    }
  }

  @media (min-width: 1920px) {
    .cmp-header-banner__container.banner-grid {
      max-width: 96rem;
      margin: 0 auto;
    }

    .cmp-header-banner__container.banner-grid .cmp-header__image {
      width: 768px;
      height: 576px;
    }
  }

  /* Fine print character limit */
  .disclaimer {
    font-size: 12px;
    color: #002d69;
    font-weight: normal;
    max-width: 80ch; /* Enforce 80 chars limit */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Hide breadcrumb by default (desktop) */
.cmp-breadcrumb {
  display: none;
}