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

.header-without-rate-small .header-banner .cmp-header-banner__buttons_container .amp-btn-secondary {
  display: none !important;
}

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

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

.header-without-rate-small #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) {
  .header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image {
    z-index: -1 !important;
  }

  .header-without-rate-small .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;
  }

  .header-without-rate-small .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;
      }
    }
  }

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

  /* Image v3: zero out the legacy margin-top inside .cmp-image wrapper */
  /* .header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image .cmp-image img,
  .header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image .cmp-image .cmp-image__image {
    margin-top: 0 !important;
  } */

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

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

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

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

  /* Force long text to wrap with character limits */
  .header-without-rate-small .cmp-header-banner-text {
    white-space: normal !important;
    max-width: 100% !important;
    display: block;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    /* margin: 0 auto; */
    max-width: 100ch; /* Enforce 100 chars limit */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-without-rate-small .cmp-header-banner-headline {
    white-space: normal !important;
    display: block !important;
    max-width: 100% !important;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    /* margin: 0 auto; */
    max-width: 25ch; /* Enforce 25 chars limit */
    overflow: hidden;
    text-overflow: ellipsis;

    /* @media (max-width: 900px) {
      margin-left: -3px;
    } */
  }
}

/* Desktop (1024px and above) — image fills the full grid cell.
   Scoped to :has(.cmp-image) so legacy <picture> containers keep their
   original fixed dimensions from headerbannerT-One.scss. */
/* @media (min-width: 1024px) {
  .header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image:has(.cmp-image) {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin-top: 0 !important;
    aspect-ratio: 4/3;
    justify-self: stretch;
  }
} */

@media (min-width: 1280px) {
  /* .header-without-rate-small .cmp-header-banner__container.banner-grid {
    height: 541px;
  } */

  /* .header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__background_image {
    height: 80px;
  } */

  /* Legacy <picture> image sizing — only applies when v3 .cmp-image is absent */
  .header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image:not(:has(.cmp-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;
    } */
  } 

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

  .header-without-rate-small .header-banner .cmp-header-banner__buttons_container .amp-btn-primary a span {
    color: #001e41;
    font-family: "Hurme Geometric Sans-SemiBold";
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-without-rate-small .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-without-rate-small .header-banner .cmp-button__text {
    margin: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

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

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

  /* Fine print character limit */
  .header-without-rate-small .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) */
.header-without-rate-small .cmp-breadcrumb {
  display: none;
}

/* Core Image v3 wrapper fix — ensure the intermediate .cmp-image div
   inherits full dimensions so height: 100% chains through to <img>. */
/* .header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image .cmp-image {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image .cmp-image img,
.header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image .cmp-image__image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
} */

/* ====================================================================
   Core Image v3 — Desktop / Mobile art-direction swap
   When two separate Core Image v3 children are rendered (imageDesktop +
   imageMobile), CSS controls which one is visible per viewport.
   ==================================================================== */
.header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image.cmp-header__image--desktop {
  display: flex;
}
.header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image.cmp-header__image--mobile {
  display: none !important;
}
@media (max-width: 1023px) {
  .header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image.cmp-header__image--desktop {
    display: none !important;
  }
  .header-without-rate-small .cmp-header-banner__container.banner-grid .cmp-header__image.cmp-header__image--mobile {
    display: flex !important;
  }
}