/*
 * bi_promobanner - promotional banner.
 *
 * A coloured panel holding the text beside a picture, on the side the
 * merchant picked. The panel's colour comes from the back office through
 * --bi-pbn-bg; the text turns dark on a light colour (--light modifier).
 *
 * Every visual aspect is driven by public `--bi-pbn-*` custom properties so a
 * theme can re-skin the banner without touching this file: declare the ones
 * you need on `.bi-pbn` or on any element of a banner. This file never
 * declares a public token itself, it only reads them with a fallback where
 * they are used, so a theme wins even from inside a CSS cascade layer.
 *
 * On a light panel the colour tokens are read from their `--bi-pbn-light-*`
 * twins instead.
 */

.bi-pbn {
  display: grid;
  gap: var(--bi-pbn-banner-gap, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
}

/* Positioned: the button's stretched-link covers the whole banner. */
.bi-pbn__body {
  position: relative;
  display: grid;
  gap: var(--bi-pbn-gap, 1.25rem);
  grid-template-columns: minmax(0, 1fr);
}

.bi-pbn__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--bi-pbn-panel-padding-mobile, 2rem 1.5rem);
  color: var(--bi-pbn-color, #fff);
  background-color: var(--bi-pbn-bg, #111);
  border-radius: var(--bi-pbn-radius, 0.25rem);
}

.bi-pbn__panel--light {
  color: var(--bi-pbn-light-color, #111);
}

.bi-pbn__kicker {
  margin: 0 0 var(--bi-pbn-kicker-gap, 0.75rem);
  font-size: var(--bi-pbn-kicker-size, 0.75rem);
  font-weight: var(--bi-pbn-kicker-weight, 600);
  letter-spacing: var(--bi-pbn-kicker-letter-spacing, 0.16em);
  text-transform: uppercase;
  color: var(--bi-pbn-kicker-color, inherit);
  opacity: var(--bi-pbn-kicker-opacity, 0.8);
}

.bi-pbn__panel--light .bi-pbn__kicker {
  color: var(--bi-pbn-light-kicker-color, inherit);
}

.bi-pbn__headline {
  max-width: var(--bi-pbn-headline-width, 20ch);
  margin: 0;
  font-family: var(--bi-pbn-headline-font, inherit);
  font-size: var(--bi-pbn-headline-size, clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem));
  font-weight: var(--bi-pbn-headline-weight, 700);
  line-height: var(--bi-pbn-headline-line-height, 1.15);
  color: inherit;
  text-wrap: balance;
}

/* Line breaks typed in the back office are kept: a blank line makes a paragraph. */
.bi-pbn__text {
  max-width: var(--bi-pbn-text-width, 44ch);
  margin: var(--bi-pbn-text-gap, 0.75rem) 0 0;
  font-size: var(--bi-pbn-text-size, 1.0625rem);
  font-weight: var(--bi-pbn-text-weight, inherit);
  line-height: var(--bi-pbn-text-line-height, 1.55);
  color: var(--bi-pbn-text-color, inherit);
  white-space: pre-line;
  opacity: var(--bi-pbn-text-opacity, 0.9);
}

.bi-pbn__panel--light .bi-pbn__text {
  color: var(--bi-pbn-light-text-color, inherit);
}

.bi-pbn__cta {
  --bs-btn-color: var(--bi-pbn-cta-color, #111);
  --bs-btn-bg: var(--bi-pbn-cta-bg, #fff);
  --bs-btn-border-color: var(--bi-pbn-cta-border, #fff);
  --bs-btn-hover-color: var(--bi-pbn-cta-hover-color, #fff);
  --bs-btn-hover-bg: var(--bi-pbn-cta-hover-bg, transparent);
  --bs-btn-hover-border-color: var(--bi-pbn-cta-hover-border, #fff);
  --bs-btn-active-color: var(--bi-pbn-cta-hover-color, #fff);
  --bs-btn-active-bg: var(--bi-pbn-cta-hover-bg, transparent);
  --bs-btn-active-border-color: var(--bi-pbn-cta-hover-border, #fff);

  margin-top: var(--bi-pbn-cta-gap, 1.5rem);
  padding: var(--bi-pbn-cta-padding, 0.625rem 1.75rem);
  font-size: var(--bi-pbn-cta-size, inherit);
  font-weight: var(--bi-pbn-cta-weight, 600);
  letter-spacing: var(--bi-pbn-cta-letter-spacing, normal);
  text-transform: var(--bi-pbn-cta-transform, none);
  border-radius: var(--bi-pbn-cta-radius, var(--bi-pbn-radius, 0.25rem));
}

.bi-pbn__panel--light .bi-pbn__cta {
  --bs-btn-color: var(--bi-pbn-light-cta-color, #fff);
  --bs-btn-bg: var(--bi-pbn-light-cta-bg, #111);
  --bs-btn-border-color: var(--bi-pbn-light-cta-border, #111);
  --bs-btn-hover-color: var(--bi-pbn-light-cta-hover-color, #111);
  --bs-btn-hover-bg: var(--bi-pbn-light-cta-hover-bg, transparent);
  --bs-btn-hover-border-color: var(--bi-pbn-light-cta-hover-border, #111);
  --bs-btn-active-color: var(--bi-pbn-light-cta-hover-color, #111);
  --bs-btn-active-bg: var(--bi-pbn-light-cta-hover-bg, transparent);
  --bs-btn-active-border-color: var(--bi-pbn-light-cta-hover-border, #111);
}

/* The whole banner is the link: hovering the picture lights the button too. */
.bi-pbn__body:hover .bi-pbn__cta {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

/* Keyboard focus on the button shows on the whole banner it stretches over. */
.bi-pbn__cta:focus-visible,
.bi-pbn__body .stretched-link:focus-visible {
  outline: none;
  box-shadow: none;
}

.bi-pbn__body:has(.stretched-link:focus-visible) {
  outline: 2px solid var(--bs-focus-ring-color, currentcolor);
  outline-offset: 3px;
}

.bi-pbn__visual {
  position: relative;
  aspect-ratio: var(--bi-pbn-visual-ratio-mobile, 3 / 2);
  overflow: hidden;
  border-radius: var(--bi-pbn-radius, 0.25rem);
  background-color: var(--bi-pbn-visual-bg, var(--bs-tertiary-bg, #f3f3f3));
}

.bi-pbn__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.bi-pbn__body:hover .bi-pbn__image {
  transform: scale(var(--bi-pbn-image-hover-scale, 1.03));
}

/* On mobile the picture always comes first, above the text. */
@media (max-width: 767.98px) {
  .bi-pbn__visual {
    order: -1;
  }
}

@media (min-width: 768px) {
  .bi-pbn__panel {
    padding: var(--bi-pbn-panel-padding, 2.5rem);
  }

  .bi-pbn__body {
    grid-template-columns: minmax(0, var(--bi-pbn-panel-fr, 1.6fr)) minmax(0, var(--bi-pbn-visual-fr, 1fr));
  }

  .bi-pbn__body--image-left {
    grid-template-columns: minmax(0, var(--bi-pbn-visual-fr, 1fr)) minmax(0, var(--bi-pbn-panel-fr, 1.6fr));
  }

  .bi-pbn__body--no-image {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * Without a picture the banner is a band: the text on the left, the button
   * on the right, level with it.
   */
  .bi-pbn__body--no-image .bi-pbn__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--bi-pbn-band-gap, 2.5rem);
    align-items: center;
    justify-items: start;
  }

  .bi-pbn__body--no-image .bi-pbn__panel > :not(.bi-pbn__cta) {
    grid-column: 1;
  }

  .bi-pbn__body--no-image .bi-pbn__cta {
    grid-row: 1 / span 3;
    grid-column: 2;
    margin-top: 0;
  }

  /* Follows the panel's height rather than its own ratio. */
  .bi-pbn__visual {
    min-height: var(--bi-pbn-visual-min-height, 18rem);
    aspect-ratio: auto;
  }

  .bi-pbn__body--image-left .bi-pbn__visual {
    order: -1;
  }
}

@media (min-width: 1200px) {
  .bi-pbn__panel {
    min-height: var(--bi-pbn-panel-min-height, 21.5rem);
    padding: var(--bi-pbn-panel-padding-xl, 3rem 2.5rem);
  }

  .bi-pbn__body--no-image .bi-pbn__panel {
    min-height: var(--bi-pbn-band-min-height, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bi-pbn__image {
    transition: none;
  }
}