/* ==========================================================================
   WBI Hero
   Self-contained component. Every visual value is a `--wbi-hero-*` custom
   property, so the Bricks element only has to override variables.

   Tokens live in :where() (zero specificity) so any rule Bricks generates on
   the root (#brxe-xxx { --token: ... }) always wins, regardless of the order
   in which the stylesheets load.

   Sizes are in `em` against --wbi-hero-base (16px) or in px, never in rem:
   many themes set the root to 10px and the component would silently shrink.
   ========================================================================== */

:where(.wbi-hero) {
  /* --- Brand: WBI gradient -------------------------------------------- */
  --wbi-hero-brand-1: #D6630F;
  --wbi-hero-brand-2: #FFCD2E;
  --wbi-hero-brand-3: #199C64;
  --wbi-hero-brand-4: #3E94B9;

  /* --- Section --------------------------------------------------------- */
  --wbi-hero-bg: #FFFFFF;
  --wbi-hero-radius: 0px;
  --wbi-hero-min-h: 520px;
  --wbi-hero-pad-top: 48px;
  --wbi-hero-pad-bottom: 48px;
  --wbi-hero-pad-x: 24px;
  --wbi-hero-content-w: 760px;
  /* Mobile: container narrower than 640px */
  --wbi-hero-min-h-m: 640px;
  --wbi-hero-pad-top-m: 72px;
  --wbi-hero-pad-bottom-m: 96px;
  --wbi-hero-pad-x-m: 20px;

  /* --- Typography ------------------------------------------------------
     The text colors below are defaults only: the Typography control of
     each block writes `color` on its selector and wins over them. */
  --wbi-hero-base: 16px;
  /* Theme Styles > WBI Elements > Font (see wbi-fonts.css) */
  --wbi-hero-font: var(--wbi-font), system-ui, -apple-system, "Segoe UI", sans-serif;

  /* cqi = 1% of the container (.wbi-hero) width, not of the viewport */
  --wbi-hero-title-size: clamp(1.75em, 0.6em + 4.5cqi, 4.5em);
  --wbi-hero-title-weight: 800;
  --wbi-hero-title-lh: 1.12;
  --wbi-hero-title-ls: -0.02em;
  --wbi-hero-title-color: #121212;
  --wbi-hero-lead-color: var(--wbi-hero-title-color); /* second line */
  --wbi-hero-title-gap: 0.14em;   /* between the two headline lines */
  --wbi-hero-lead-gap: 0.62em;    /* between "we can" and the badge */

  /* The badge lives inside the h1: an em size would inherit the headline's,
     so it is computed from the base. */
  --wbi-hero-badge-size: clamp(
    calc(var(--wbi-hero-base) * 1.375),
    calc(var(--wbi-hero-base) * 0.2 + 4.2cqi),
    calc(var(--wbi-hero-base) * 3.75)
  );
  --wbi-hero-badge-weight: 800;
  --wbi-hero-badge-lh: 1;
  --wbi-hero-badge-color: #121212;
  --wbi-hero-badge-bg: var(--wbi-hero-brand-2);
  --wbi-hero-badge-gradient: none; /* the factory gradient comes from the Bricks control */
  --wbi-hero-badge-radius: 0.24em;
  --wbi-hero-badge-pad-y: 0.72em;
  --wbi-hero-badge-pad-x: 1.15em;
  --wbi-hero-badge-shadow: 0 0.22em 0.55em rgba(18, 18, 18, 0.22);

  --wbi-hero-text-size: clamp(1.0625em, 0.95em + 0.35cqi, 1.25em);
  --wbi-hero-text-weight: 600;
  --wbi-hero-text-lh: 1.25;
  --wbi-hero-text-color: #2E2E2E;
  --wbi-hero-text-w: 700px;
  --wbi-hero-text-gap: 2.1em;
  --wbi-hero-text-strong-weight: 700;
  --wbi-hero-text-strong-color: inherit;

  --wbi-hero-foot-size: 0.9375em;
  --wbi-hero-foot-weight: 400;
  --wbi-hero-foot-lh: 1.4;
  --wbi-hero-foot-color: #121212;
  --wbi-hero-foot-strong-weight: 700;
  --wbi-hero-foot-strong-color: inherit;
  --wbi-hero-foot-gap: 2.5em;
  --wbi-hero-foot-inset: 112px;
  --wbi-hero-foot-inset-m: 16px;

  /* --- Floating shapes ------------------------------------------------- */
  --wbi-hero-shape-shadow: 0 8px 18px rgba(18, 18, 18, 0.16);
  --wbi-hero-motion: 1;   /* multiplies the amplitude and rotation of every shape */
  --wbi-hero-speed: 1;    /* divides the duration: 2 = twice as fast */
  --wbi-hero-ease: cubic-bezier(0.37, 0, 0.63, 1); /* sine in-out: no jolts */
}

.wbi-hero {
  position: relative;
  isolation: isolate;
  /* Required, not cosmetic: `container-type: inline-size` stops the content
     from contributing intrinsic width, and Bricks containers are flex with
     `align-items: flex-start`. Without this it collapses to 0px in the builder. */
  width: 100%;
  container-type: inline-size;
  container-name: wbihero;
  font-family: var(--wbi-hero-font);
  font-size: var(--wbi-hero-base);
  background: var(--wbi-hero-bg);
  border-radius: var(--wbi-hero-radius);
}

.wbi-hero *,
.wbi-hero *::before,
.wbi-hero *::after { box-sizing: border-box; }

/* ==========================================================================
   Shape layer
   It may only contain shapes: the per-item CSS Bricks generates targets
   `.wbi-hero__shape:nth-child(n)`, and any other child would misalign it.
   ========================================================================== */

.wbi-hero__shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* !important: the "Apply to" of the shape gradient (Bricks applies it to
   repeater fields too). Overlay sets `position: relative`, which would drop
   the shape into the flow, and paints the gradient in a ::before (see
   below); Text clips the background to a text the shape does not have. */
.wbi-hero__shape {
  position: absolute !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  left: var(--wbi-hero-shape-x, 50%);
  top: var(--wbi-hero-shape-y, 50%);
  width: var(--wbi-hero-shape-w, 24px);
  height: var(--wbi-hero-shape-h, 24px);
  border-radius: var(--wbi-hero-shape-r, 3px);
  background-color: var(--wbi-hero-shape-color, var(--wbi-hero-brand-2));
  box-shadow: var(--wbi-hero-shape-shadow);
  /* Negative delay: each shape starts at a different point of its cycle,
     so they never all move at once. */
  animation:
    wbi-hero-float
    calc(var(--wbi-hero-shape-dur, 10s) / var(--wbi-hero-speed, 1))
    var(--wbi-hero-ease)
    calc(var(--wbi-hero-shape-delay, 0s) * -1)
    infinite alternate both;
}

/* Solid fill: cancels the gradient. Bricks keeps emitting the gradient of a
   shape switched to solid (the field is only hidden by `required`), and it
   does so with an id selector, #brxe-x .wbi-hero__shape:nth-child(n), which
   no class selector can beat. Hence the !important. */
.wbi-hero__shape[data-fill="solid"] {
  background-image: none !important;
}

/* The gradient of "Apply to: Overlay": over the whole shape, with its
   corners, and never on a solid one. */
.wbi-hero__shape::before {
  border-radius: inherit;
}

.wbi-hero__shape[data-fill="solid"]::before {
  display: none;
}

/* Three-point drift, not two: with `alternate` the path is a small
   irregular curve instead of a metronome swing. */
@keyframes wbi-hero-float {
  from {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate:
      calc(var(--wbi-hero-shape-amp, 12px) * var(--wbi-hero-motion, 1) * 0.55)
      calc(var(--wbi-hero-shape-amp, 12px) * var(--wbi-hero-motion, 1) * -1);
    rotate: calc(var(--wbi-hero-shape-rot, 4deg) * var(--wbi-hero-motion, 1));
  }
  to {
    translate:
      calc(var(--wbi-hero-shape-amp, 12px) * var(--wbi-hero-motion, 1) * -0.45)
      calc(var(--wbi-hero-shape-amp, 12px) * var(--wbi-hero-motion, 1) * -0.3);
    rotate: calc(var(--wbi-hero-shape-rot, 4deg) * var(--wbi-hero-motion, 1) * -0.5);
  }
}

.wbi-hero--static .wbi-hero__shape { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .wbi-hero__shape { animation: none; }
}

/* ==========================================================================
   Content
   ========================================================================== */

.wbi-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: var(--wbi-hero-min-h);
  padding: var(--wbi-hero-pad-top) var(--wbi-hero-pad-x) var(--wbi-hero-pad-bottom);
}

.wbi-hero__content {
  width: min(100%, var(--wbi-hero-content-w));
  margin-inline: auto;
  align-self: start;
  text-align: center;
}

/* --- Headline ----------------------------------------------------------- */

.wbi-hero__title {
  margin: 0;
  font-family: inherit;
  font-size: var(--wbi-hero-title-size);
  font-weight: var(--wbi-hero-title-weight);
  line-height: var(--wbi-hero-title-lh);
  letter-spacing: var(--wbi-hero-title-ls);
  color: var(--wbi-hero-title-color);
  text-wrap: balance;
}

.wbi-hero__line { display: block; }

.wbi-hero__lead { color: var(--wbi-hero-lead-color); }

.wbi-hero__line--badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2em var(--wbi-hero-lead-gap);
  margin-top: var(--wbi-hero-title-gap);
}

/* --- Badge -------------------------------------------------------------- */

/* Its own stacking context keeps the ::before of "Apply to: Overlay" (in
   the Badge gradient control) under the text; the !important values undo
   the clip of Text. */
.wbi-hero__badge {
  isolation: isolate;
  display: inline-block;
  padding: var(--wbi-hero-badge-pad-y) var(--wbi-hero-badge-pad-x);
  font-size: var(--wbi-hero-badge-size);
  font-weight: var(--wbi-hero-badge-weight);
  line-height: var(--wbi-hero-badge-lh);
  letter-spacing: var(--wbi-hero-title-ls);
  color: var(--wbi-hero-badge-color);
  background-color: var(--wbi-hero-badge-bg);
  background-image: var(--wbi-hero-badge-gradient);
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: initial !important;
  border-radius: var(--wbi-hero-badge-radius);
  box-shadow: var(--wbi-hero-badge-shadow);
  white-space: nowrap;
  text-decoration: none;
}

.wbi-hero__badge::before {
  z-index: -1;
  border-radius: inherit;
}

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

/* --- Paragraph ---------------------------------------------------------- */

.wbi-hero__text {
  max-width: var(--wbi-hero-text-w);
  margin: var(--wbi-hero-text-gap) auto 0;
  font-size: var(--wbi-hero-text-size);
  font-weight: var(--wbi-hero-text-weight);
  line-height: var(--wbi-hero-text-lh);
  color: var(--wbi-hero-text-color);
  text-wrap: pretty;
}

.wbi-hero__text p { margin: 0 0 0.75em; }
.wbi-hero__text > :first-child { margin-top: 0; }
.wbi-hero__text > :last-child { margin-bottom: 0; }

.wbi-hero__text strong,
.wbi-hero__text b {
  font-weight: var(--wbi-hero-text-strong-weight);
  color: var(--wbi-hero-text-strong-color);
}

/* --- Foot text ---------------------------------------------------------- */

.wbi-hero__foot {
  align-self: end;
  justify-self: start;
  max-width: 100%;
  margin-top: var(--wbi-hero-foot-gap);
  padding-left: var(--wbi-hero-foot-inset);
  font-size: var(--wbi-hero-foot-size);
  font-weight: var(--wbi-hero-foot-weight);
  line-height: var(--wbi-hero-foot-lh);
  color: var(--wbi-hero-foot-color);
  text-align: left;
}

.wbi-hero__foot p { margin: 0; }

.wbi-hero__foot strong,
.wbi-hero__foot b {
  font-weight: var(--wbi-hero-foot-strong-weight);
  color: var(--wbi-hero-foot-strong-color);
}

/* ==========================================================================
   Mobile: the component reacts to ITS container, not to the viewport.
   These rules target descendants, never .wbi-hero: an element is not
   reached by the container query it defines itself.
   ========================================================================== */

@container wbihero (max-width: 639px) {
  .wbi-hero__inner {
    min-height: var(--wbi-hero-min-h-m);
    padding: var(--wbi-hero-pad-top-m) var(--wbi-hero-pad-x-m) var(--wbi-hero-pad-bottom-m);
  }

  .wbi-hero__foot { padding-left: var(--wbi-hero-foot-inset-m); }

  /* Each shape uses its mobile position and size when it has them;
     otherwise it keeps the desktop ones. */
  .wbi-hero__shape {
    left: var(--wbi-hero-shape-x-m, var(--wbi-hero-shape-x, 50%));
    top: var(--wbi-hero-shape-y-m, var(--wbi-hero-shape-y, 50%));
    width: var(--wbi-hero-shape-w-m, var(--wbi-hero-shape-w, 24px));
    height: var(--wbi-hero-shape-h-m, var(--wbi-hero-shape-h, 24px));
  }

  .wbi-hero__shape[data-mobile="hide"] { display: none; }
}