/**
 * cta-banner — promotional call-to-action banner.
 * Figma: articles/ctaBanner (831:31935). Width matches the 776px reading
 * column. Stone theme by default; .cta-banner-ink for the dark theme;
 * .cta-banner-image-right to flip the illustration to the right (desktop).
 */

.cta-banner {
  --cta-img-width: 100%;
  --cta-img-height: auto;
  --cta-img-aspect-ratio: 4 / 3;
  --cta-img-padding: var(--spacing-40) 0 0;
  --cta-button-gap: var(--space-xs);
  --cta-button-padding: var(--space-s) var(--space-m);
  --cta-content-gap: var(--space-xs);
  --cta-content-padding: var(--spacing-24);
  --cta-button-margin-top: var(--space-l);
  --cta-icon-button-size: var(--spacing-40);
  --cta-icon-button-padding: var(--space-xs);
  --cta-stone-hover-overlay: var(--amp-blue-pale);
  --cta-ink-hover-overlay: var(--amp-ultramarine-pressed);

  padding-top: var(--spacing-32);
}

.cta-banner-wrapper {
  container-type: inline-size;
}

.cta-banner.cta-banner-anchored {
  --cta-img-padding: var(--spacing-40) 0 0;
}

.cta-banner.cta-banner-flat {
  --cta-img-padding: 0;
}

.cta-banner .cta-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--amp-bg-stone, #f6f3ea);
  border-radius: var(--radius-card, 8px);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.cta-banner-ink .cta-banner-inner {
  background: var(--amp-ink-blue, #001e41);
}

.cta-banner .cta-banner-inner:hover {
  background: var(--cta-stone-hover-overlay);
}

.cta-banner .cta-banner-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cta-img-padding);
}

.cta-banner .cta-banner-media picture {
  display: flex;
  width: 100%;
}

.cta-banner .cta-banner-media img {
  display: flex;
  object-fit: cover;
  width: var(--cta-img-width);
  height: var(--cta-img-height);
  aspect-ratio: var(--cta-img-aspect-ratio);
}


.cta-banner .cta-banner-content {
  display: flex;
  flex-direction: column;
  gap: var(--cta-content-gap);
  padding: var(--cta-content-padding);
  flex: 1;
}


.cta-banner .cta-banner-eyebrow {
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600, 600);
  font-size: var(--body-font-size-s, 16px);
  line-height: var(--line-height-20, 20px);
  letter-spacing: var(--heading-tracking-xs);
  color: var(--amp-ultramarine, #0018f0);
}

.cta-banner .cta-banner-title {
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600, 600);
  font-size: var(--heading-font-size-xl, 24px);
  line-height: var(--line-height-28, 28px);
  letter-spacing: var(--heading-tracking-xl);
  color: var(--amp-ink-blue, #001e41);
}

.cta-banner .cta-banner-body {
  margin: 0;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-400, 400);
  font-size: var(--font-size-16, 16px);
  line-height: var(--line-height-24, 24px);
  color: var(--amp-text, #313131);
}

.cta-banner .cta-banner-button {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--cta-button-gap);
  margin-top: var(--cta-button-margin-top);
  padding: var(--cta-button-padding);
  background: var(--amp-teal, #00d5ac);
  border: 1px solid var(--amp-teal-dark, #00a485);
  border-radius: var(--radius-card, 0);
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600, 600);
  font-size: var(--body-font-size-xs, 14px);
  line-height: var(--line-height-22, 22px);
  letter-spacing: calc(var(--letter-spacing-01, 0.0063rem) * -1);
  color: var(--amp-ink-blue, #001e41);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cta-banner .cta-banner-button:hover {
  background: var(--amp-teal-hover, #00c29c);
  color: var(--amp-ink-blue, #001e41);
  text-decoration: none;
}

.cta-banner .cta-banner-button:focus-visible {
  outline: 2px solid var(--amp-ink-blue, #001e41);
  outline-offset: 2px;
}

.cta-banner .cta-banner-button svg {
  width: var(--spacing-24);
  height: var(--spacing-24);
  flex: none;
}

/* ink (dark) theme */
.cta-banner-ink .cta-banner-inner:hover {
  background: var(--cta-ink-hover-overlay);
}

.cta-banner-ink .cta-banner-eyebrow {
  color: var(--amp-cyan, #6ce1ff);
}

.cta-banner-ink .cta-banner-title {
  color: var(--amp-bg, #fff);
}

.cta-banner-ink .cta-banner-body {
  color: var(--amp-grey-e8, #e8e8e8);
}

.cta-banner.mob-r-top .cta-banner-button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cta-icon-button-padding);
  width: var(--cta-icon-button-size);
  height: var(--cta-icon-button-size);
  margin-top: 0;
  padding: var(--cta-icon-button-padding);
  box-sizing: border-box;
}

.cta-banner.mob-r-top .cta-banner-button span {
  display: none;
}

@container (width >= 700px) {
  .cta-banner {
    --cta-img-padding: var(--space-xl);
    --cta-img-width: 232px;
    --cta-img-height: 232px;
    --cta-img-aspect-ratio: 1 / 1;
    --cta-content-padding: var(--spacing-32);
    --line-height-title: var(--line-height-36, 36px);
    --cta-button-margin-top: var(--spacing-32);
    --line-height-description: var(--line-height-28, 28px);
    --font-size-description: var(--font-size-18, 18px);
    --max-img-width: 296px;

    min-height: 296px;
    padding-top: 0;
  }

  .cta-banner.cta-banner-anchored {
    --cta-img-width: 252px;
    --cta-img-height: 100%;
    --cta-img-aspect-ratio: 1 / 1;
    --cta-img-padding: var(--space-xl) 0 0 var(--space-xl);
    --cta-right-img-padding: var(--space-xl) var(--space-xl) 0 0;
    --cta-button-margin-top: var(--spacing-32);

    picture {
      align-self: stretch;
      display: flex;
      flex: 1;
      height: calc(100% - var(--spacing-12));
      margin-top: var(--spacing-12);
    }
  }

  .cta-banner.cta-banner-flat {
    --cta-img-width: 296px;
    --cta-img-height: 100%;
    --cta-img-aspect-ratio: 1 / 1;
    --cta-img-padding: 0;
    --cta-button-margin-top: var(--spacing-48);

    picture {
      align-self: stretch;
      height: 100%;
    }
  }

  .cta-banner:not(.cta-banner-flat, .cta-banner-anchored) {
    --cta-img-width: 100%;
    --cta-img-height: 100%;

    picture {
      align-self: stretch;
      height: 100%;
    }
  }

  .cta-banner .cta-banner-title {
    font-size: var(--font-size-32);
    line-height: var(--line-height-title);
  }

  .cta-banner .cta-banner-inner {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .cta-banner.cta-banner-anchored .cta-banner-inner {
    align-items: stretch;
  }

  .cta-banner.cta-banner-flat .cta-banner-inner {
    align-items: stretch;
  }

  .cta-banner:not(.cta-banner-flat, .cta-banner-anchored) .cta-banner-inner {
    align-items: stretch;
  }

  .cta-banner.cta-banner-image-right .cta-banner-inner {
    flex-direction: row-reverse;
  }

  .cta-banner .cta-banner-media {
    align-self: stretch;
    padding: var(--cta-img-padding);
    box-sizing: border-box;
    max-width: var(--max-img-width);
    height: fit-content;
    justify-content: center;
  }

  .cta-banner.cta-banner-anchored .cta-banner-media {
    height: auto;
  }

  .cta-banner:not(.cta-banner-flat, .cta-banner-anchored) .cta-banner-media {
    flex: 0 0 296px;
    height: auto;
  }

  .cta-banner.cta-banner-flat .cta-banner-media {
    flex: 0 0 296px;
    width: 296px;
    height: auto;
  }

  .cta-banner .cta-banner-media img {
    object-fit: cover;
  }

  .cta-banner.cta-banner-image-right.cta-banner-anchored .cta-banner-media{
     padding: var(--cta-right-img-padding);
  }

  .cta-banner .cta-banner-eyebrow {
    font-size: var(--font-size-18);
    line-height: var(--line-height-24);
  }

  .cta-banner .cta-banner-body {
    margin: var(--spacing-8) 0 0;
    font-size: var(--font-size-description);
    line-height: var(--line-height-description);
  }

  .cta-banner.mob-r-top .cta-banner-button {
    position: static;
    width: auto;
    height: auto;
    margin-top: var(--cta-button-margin-top);
    padding: var(--cta-button-padding);
    line-height: var(--line-height-20, 20px);
  }

  .cta-banner.mob-r-top .cta-banner-button span {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-banner .cta-banner-button {
    transition: none;
  }
}