/* ==========================================================================
   WBI Hero v2
   Loads after wbi-hero.css and only restyles the headline: shapes,
   paragraph, foot text, section and animation come from the shared sheet.

   The headline is two cards: a white main card and a highlight card that
   hangs off its bottom right corner. Card sizes are minimums, never fixed
   widths: with short texts the cards keep the design size, and they widen
   on their own when a text, or its translation, needs more room.

   Same rules as the shared sheet: tokens in :where() so the rules Bricks
   writes on the root always win, and sizes in em or in multiples of
   --wbi-hero-base, never in rem. Every rule is scoped to .wbi-hero--v2, so
   other hero variants on the same page are never touched.
   ========================================================================== */

:where(.wbi-hero--v2) {
  /* One fluid size for both cards: 23px on a 390px container and 60px from
     about 1360px, the widths of the two design artboards. */
  --wbi-hero-cards-size: clamp(
    calc(var(--wbi-hero-base) * 1.4375),
    calc(var(--wbi-hero-base) * 0.51 + 3.81cqi),
    calc(var(--wbi-hero-base) * 3.75)
  );
  --wbi-hero-cards-weight: 800;
  --wbi-hero-cards-lh: 1.1;

  /* Short, soft shadow that grows with the cards: 0 6px 10px on mobile,
     0 10px 16px on desktop. */
  --wbi-hero-cards-shadow:
    0 calc(0.09em + var(--wbi-hero-base) * 0.24)
    calc(0.15em + var(--wbi-hero-base) * 0.4)
    rgba(18, 18, 18, 0.18);

  /* Card sizes are em + base: the em part follows the card's own text size,
     so one formula lands on both artboards (main 223×101 → 478×159,
     highlight 148×77 → 267×129) and follows the Typography control. */
  --wbi-hero-main-min-w: calc(6.906em + var(--wbi-hero-base) * 4.01);
  --wbi-hero-main-min-h: calc(1.575em + var(--wbi-hero-base) * 4.05);
  --wbi-hero-main-radius: calc(0.311em + var(--wbi-hero-base) * 0.65);
  --wbi-hero-main-pad-x: 0.75em;
  --wbi-hero-main-bg: #FFFFFF;
  --wbi-hero-main-color: #121212;
  --wbi-hero-main-shadow: var(--wbi-hero-cards-shadow);

  /* Optional image before the main card text: 107.75px tall and 13.81px from
     the text at the 60px desktop size, scaling with the text below it. */
  --wbi-hero-main-image-h: 1.7958em;
  --wbi-hero-main-image-gap: 0.2302em;

  --wbi-hero-highlight-min-w: calc(3.218em + var(--wbi-hero-base) * 4.61);
  --wbi-hero-highlight-min-h: calc(1.405em + var(--wbi-hero-base) * 2.79);
  --wbi-hero-highlight-radius: calc(0.216em + var(--wbi-hero-base) * 0.5625);
  --wbi-hero-highlight-pad-x: 0.75em;
  --wbi-hero-highlight-bg: #FA974F;
  --wbi-hero-highlight-gradient: none; /* the factory gradient comes from the Bricks control */
  --wbi-hero-highlight-color: #FFFFFF;
  --wbi-hero-highlight-shadow: var(--wbi-hero-cards-shadow);

  /* How far the highlight card climbs over the main card, and how far it
     sticks out past its right edge: 18px and 28px on desktop, 11px and
     47px on mobile. */
  --wbi-hero-cards-overlap: calc(0.189em + var(--wbi-hero-base) * 0.42);
  --wbi-hero-cards-offset: clamp(
    calc(var(--wbi-hero-base) * 1.77),
    calc(var(--wbi-hero-base) * 3.425 - 1.946cqi),
    calc(var(--wbi-hero-base) * 2.95)
  );

  /* The paragraph sits closer to the cards than to the v1 headline:
     25px on desktop, 38px on mobile. */
  --wbi-hero-text-gap: clamp(
    calc(var(--wbi-hero-base) * 1.5625),
    calc(var(--wbi-hero-base) * 2.7 - 1.339cqi),
    calc(var(--wbi-hero-base) * 2.375)
  );
}

/* ==========================================================================
   Headline
   Two columns: the main card, and to its right the strip the highlight card
   sticks out into. The strip belongs to the box, so the pair is centered as
   a whole, as in the design.
   ========================================================================== */

.wbi-hero--v2 .wbi-hero__title {
  display: grid;
  grid-template-columns: minmax(0, max-content) var(--wbi-hero-cards-offset);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  font-size: var(--wbi-hero-cards-size);
  font-weight: var(--wbi-hero-cards-weight);
  line-height: var(--wbi-hero-cards-lh);
  letter-spacing: normal;
}

.wbi-hero--v2 .wbi-hero__card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.3em;
  text-align: center;
  text-decoration: none;
  /* A long word in a narrow container hyphenates or breaks instead of
     pushing the card out of the section. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* 65cqi only bites on containers narrower than ~340px, where the design size
   plus the offset would not fit next to the side padding. */
.wbi-hero--v2 .wbi-hero__card--main {
  grid-area: 1 / 1;
  min-width: min(var(--wbi-hero-main-min-w), 65cqi);
  min-height: var(--wbi-hero-main-min-h);
  padding-inline: var(--wbi-hero-main-pad-x);
  color: var(--wbi-hero-main-color);
  background-color: var(--wbi-hero-main-bg);
  border-radius: var(--wbi-hero-main-radius);
  box-shadow: var(--wbi-hero-main-shadow);
}

/* Spans both columns and sits at the end, so its right edge is always the
   main card's plus the offset: a longer text grows it to the left, over the
   main card, and the pair keeps its footprint.
   With the overlap set to 0 in the builder, Bricks writes a unitless 0 and
   the calc() below is invalid; margin-top then falls back to 0, which is
   what was asked for.
   Its own stacking context (also outside the grid) keeps the ::before of
   "Apply to: Overlay" (in the Highlight gradient control) under the text;
   the !important values undo the clip of Text. */
.wbi-hero--v2 .wbi-hero__card--highlight {
  grid-area: 2 / 1 / 3 / 3;
  justify-self: end;
  z-index: 1;
  isolation: isolate;
  min-width: min(var(--wbi-hero-highlight-min-w), 65cqi);
  min-height: var(--wbi-hero-highlight-min-h);
  margin-top: calc(var(--wbi-hero-cards-overlap) * -1);
  padding-inline: var(--wbi-hero-highlight-pad-x);
  color: var(--wbi-hero-highlight-color);
  background-color: var(--wbi-hero-highlight-bg);
  background-image: var(--wbi-hero-highlight-gradient);
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: initial !important;
  border-radius: var(--wbi-hero-highlight-radius);
  box-shadow: var(--wbi-hero-highlight-shadow);
}

.wbi-hero--v2 .wbi-hero__card--highlight::before {
  z-index: -1;
  border-radius: inherit;
}

/* Optional image before the main card text (a logo next to a word). Fixed
   height, width from the image proportions, never wider than the card. */
.wbi-hero--v2 .wbi-hero__card--has-image {
  gap: var(--wbi-hero-main-image-gap);
}

.wbi-hero--v2 .wbi-hero__card-image {
  display: block;
  flex: none;
  width: auto;
  max-width: 100%;
  height: var(--wbi-hero-main-image-h);
  object-fit: contain;
}

.wbi-hero--v2 .wbi-hero__card-text {
  min-width: 0;
}

.wbi-hero--v2 a.wbi-hero__card {
  transition:
    translate 220ms var(--wbi-hero-ease),
    box-shadow 220ms var(--wbi-hero-ease);
}
.wbi-hero--v2 a.wbi-hero__card:hover { translate: 0 -2px; }
.wbi-hero--v2 a.wbi-hero__card:focus-visible {
  outline: 3px solid var(--wbi-hero-brand-4);
  outline-offset: 4px;
}

/* One card only (the other text is empty): no strip, nothing to overlap. */
.wbi-hero--v2 .wbi-hero__title--single {
  grid-template-columns: minmax(0, max-content);
}

.wbi-hero--v2 .wbi-hero__title--single .wbi-hero__card {
  grid-area: auto;
  justify-self: stretch;
  margin-top: 0;
}