/*
 * Promo banner — full-bleed colour block with artwork and a CTA.
 * Colour and height come from the block's props as custom properties.
 */

.oxa-promo {
  --oxa-promo-bg: #ffffff;

  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  /* No block margin: the banner sits flush against the header. Spacing below is
   * owned by whatever section follows (the product row has its own padding). */
  margin-block: 0;
}

.oxa-promo__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No height set (empty in the block) means the artwork keeps its own
   * proportions; a height crops to it via object-fit below. */
  height: var(--oxa-promo-h, auto);
  min-height: 120px;
  background: var(--oxa-promo-bg);
  overflow: hidden;
  text-decoration: none;
}

.oxa-promo__img {
  width: 100%;
  height: var(--oxa-promo-h, auto);
  object-fit: cover;
  display: block;
}

/* CTA sits over the artwork, inset from the edge.
 *
 * Height is padding + line-height rather than a fixed value, so the button
 * grows with its label instead of clipping it. The reference measures 218x39
 * around a 147.85x24 text box: 20px type on a 1.2 line, 8px above and below,
 * 35px either side. Every one of those is a block setting. */
.oxa-promo__btn {
  position: absolute;
  padding: var(--oxa-promo-btn-pad-y, 8px) var(--oxa-promo-btn-pad-x, 35px);
  background: var(--oxa-promo-btn-bg, #ffffff);
  color: var(--oxa-promo-btn-fg, #ff0000);
  font-family: var(--oxa-font-sans);
  font-size: var(--oxa-promo-btn-size, 20px);
  font-weight: var(--oxa-promo-btn-weight, 400);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.oxa-promo__btn--upper { text-transform: uppercase; }
.oxa-promo__btn:hover,
.oxa-promo__btn:focus-visible {
  background: var(--oxa-promo-btn-hover-bg, #ff0000);
  color: var(--oxa-promo-btn-hover-fg, #ffffff);
}

.oxa-promo--btn-bottom-right .oxa-promo__btn { right: var(--oxa-promo-btn-x, 40px); bottom: var(--oxa-promo-btn-y, 40px); }
.oxa-promo--btn-bottom-left  .oxa-promo__btn { left:  var(--oxa-promo-btn-x, 40px); bottom: var(--oxa-promo-btn-y, 40px); }
.oxa-promo--btn-bottom-center .oxa-promo__btn { left: 50%; bottom: var(--oxa-promo-btn-y, 40px); transform: translateX(-50%); }
.oxa-promo--center .oxa-promo__btn,
.oxa-promo--btn-center .oxa-promo__btn { left: 50%; top: 50%; transform: translate(-50%, -50%); }

@media (max-width: 767px) {
  /* min-height is 0 here, not 280px.
   *
   * The artwork on this site is about 2:1, so at phone width it is ~205px tall.
   * A 280px floor made the section taller than the image, and because .__inner
   * centres its child the background colour showed as red bands above and below
   * it. Letting the image set the height removes them entirely. */
  .oxa-promo__inner {
    height: auto;
    min-height: 0;
  }
  .oxa-promo__img { height: auto; }

  /* Scale the button down, but keep the corner the block asked for.
   *
   * The previous rule forced left:50% + translateX(-50%) on .oxa-promo__btn
   * (one class), while the base rule sets `right` from the block prop on
   * .oxa-promo--btn-bottom-right .oxa-promo__btn (two classes). The more
   * specific base rule kept winning for `right`, so the button was positioned
   * from both edges at once and drifted off its corner. These overrides match
   * that two-class specificity so exactly one edge wins. */
  .oxa-promo__btn {
    padding: calc(var(--oxa-promo-btn-pad-y, 8px) * 0.7) calc(var(--oxa-promo-btn-pad-x, 35px) * 0.5);
    font-size: calc(var(--oxa-promo-btn-size, 20px) * 0.62);
  }
  .oxa-promo--btn-bottom-right .oxa-promo__btn {
    right: 14px;
    bottom: 14px;
    left: auto;
    transform: none;
  }
  .oxa-promo--btn-bottom-left .oxa-promo__btn {
    left: 14px;
    bottom: 14px;
    right: auto;
    transform: none;
  }
  .oxa-promo--btn-bottom-center .oxa-promo__btn {
    left: 50%;
    right: auto;
    bottom: 14px;
    transform: translateX(-50%);
  }
}