/*
 * Promo banner
 *
 * Override these custom properties at theme or region level to align the
 * component with the site's design tokens.
 */
.promo-banner {
  --promo-banner-ink: #2f3337;
  --promo-banner-strong: #111;
  --promo-banner-surface: #eef2f6;
  --promo-banner-border: #ccd3da;
  --promo-banner-divider: #c3cbd3;
  --promo-banner-accent: var(--crm--main-color, #86c2d5);
  --promo-banner-radius: 0.5rem;
  --promo-banner-logo-width: 13rem;

  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
  color: var(--promo-banner-ink);
  background: var(--promo-banner-surface);
  border: 1px solid var(--promo-banner-border);
  border-radius: var(--promo-banner-radius);
  text-decoration: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.promo-banner:hover {
  color: var(--promo-banner-ink);
  border-color: var(--promo-banner-accent);
  box-shadow: 0 0.5rem 1.5rem rgb(10 33 56 / 10%);
}

.promo-banner:focus-visible {
  outline: 0.2rem solid var(--main-color-dark, #54acc4);
  outline-offset: 0.2rem;
}

.promo-banner__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: stretch;
  width: var(--promo-banner-logo-width);
  max-width: 40%;
  padding-inline-end: clamp(1rem, 3vw, 1.75rem);
  border-inline-end: 1px solid var(--promo-banner-divider);
}

.promo-banner__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.promo-banner__message {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.5;
}

.promo-banner__message p {
  margin: 0;
}

.promo-banner__message strong {
  color: var(--promo-banner-strong);
  font-weight: 700;
}

.promo-banner__arrow {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.promo-banner:hover .promo-banner__arrow {
  transform: translateX(0.25rem);
}

@media (max-width: 575.98px) {
  .promo-banner {
    flex-wrap: wrap;
  }

  .promo-banner__logo {
    width: 100%;
    max-width: none;
    padding-inline-end: 0;
    padding-block-end: 1rem;
    border-inline-end: 0;
    border-block-end: 1px solid var(--promo-banner-divider);
    flex-basis: 100%;
  }

  .promo-banner__logo img {
    max-width: 11rem;
  }

  .promo-banner__message {
    flex-basis: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-banner,
  .promo-banner__arrow {
    transition: none;
  }

  .promo-banner:hover .promo-banner__arrow {
    transform: none;
  }
}

@media (forced-colors: active) {
  .promo-banner {
    border: 1px solid LinkText;
  }
}