/* ==========================================================================
   WBI CTA
   A variant of the WBI Hero family: loads after wbi-hero.css, which already
   draws the section, the shapes and their drift. This sheet adds the card,
   the row of buttons (child elements: each one brings its own sheet) and the
   optional shape fields the CTA turns on. The shapes drift on every screen,
   as in the heroes; unlike them, the section skips its rendering work (the
   drift included) while it is off screen.

   Same rules as the shared sheet: tokens in :where() so the rules Bricks
   writes on the root always win, and sizes in px, em or cqi, never in rem.
   Every rule is scoped to .wbi-hero--cta, so the heroes on the same page are
   never touched.

   The design has three artboards: 1440, 1024 and 400 wide. What changes
   between them is fluid on the width of the section itself (cqi), so a
   1024px window, which Bricks still treats as desktop, gets the tablet
   design; the shapes switch to their tablet fields below 1200px and to their
   mobile fields below 640px.
   ========================================================================== */

:where(.wbi-hero--cta) {
  /* --- Section ---------------------------------------------------------- */
  /* 362px tall at 1024 and 480px at 1440; 535px below 640. */
  --wbi-hero-min-h: clamp(362px, calc(71.5385px + 28.3654cqi), 480px);
  --wbi-hero-pad-top: 48px;
  --wbi-hero-pad-bottom: 48px;
  --wbi-hero-pad-x: 24px;
  --wbi-hero-content-w: 650px; /* the card */
  --wbi-hero-min-h-m: 535px;
  --wbi-hero-pad-top-m: 48px;
  --wbi-hero-pad-bottom-m: 48px;
  --wbi-hero-pad-x-m: 44px;

  /* --- Headline, inside the card -----------------------------------------
     48px at 1440, 32px at 1024 and 24px at 400, the three artboards; never
     above 48px. Its line box is 4px taller than the text on desktop and 16px
     from tablet down (52, 48 and 40px). The em parts follow the Base font
     size of the section. */
  --wbi-hero-title-size: min(
    3em,
    max(calc(1.1795em + 1.2821cqi), calc(3.8462cqi - 0.4615em))
  );
  --wbi-hero-title-lh: calc(1em + clamp(4px, calc(45.5385px - 2.8846cqi), 16px));
  --wbi-hero-title-ls: 0em;
  --wbi-hero-title-weight: 800;
  --wbi-hero-title-color: #0D1115;

  /* --- Card --------------------------------------------------------------- */
  --wbi-hero-card-bg: #FFFFFF;
  --wbi-hero-card-pad-y: 16px;
  --wbi-hero-card-pad-x: 16px;
  --wbi-hero-card-radius: 24px;
  --wbi-hero-card-shadow: 0 10px 12px rgba(0, 0, 0, 0.1);

  /* --- Buttons ------------------------------------------------------------ */
  /* 20px up to 1024 and 31px at 1440. */
  --wbi-hero-actions-gap: clamp(20px, calc(2.6442cqi - 7.0769px), 31px);
  --wbi-hero-actions-spacing: 16px;
  --wbi-hero-actions-justify: center;

  /* --- Optional paragraph, between the card and the buttons ---------------- */
  --wbi-hero-text-gap: 1.5em;

  /* --- Shapes -------------------------------------------------------------- */
  --wbi-hero-shape-shadow: none; /* the shapes of the design bring their own */
  --wbi-hero-shadow-scale: 0.7;  /* own shadows below 1200px, as the design */
}

/* Centered in the section, as in the design (the heroes start at the top). */
.wbi-hero--cta .wbi-hero__content {
  align-self: center;
}

/* ==========================================================================
   Card
   As wide as the content column (Content max width), whatever the headline:
   on tablets the headline takes one line inside the same card that holds two
   on desktop.
   ========================================================================== */

.wbi-hero--cta .wbi-hero__card {
  padding: var(--wbi-hero-card-pad-y) var(--wbi-hero-card-pad-x);
  background-color: var(--wbi-hero-card-bg);
  border-radius: var(--wbi-hero-card-radius);
  box-shadow: var(--wbi-hero-card-shadow);
}

/* The shared sheet balances the hero headlines; the design wraps greedily
   ("LET'S BUILD YOUR AI / SYSTEM"). Capitals are a default: the Typography
   control of the card overrides them. */
.wbi-hero--cta .wbi-hero__title {
  text-transform: uppercase;
  text-wrap: wrap;
  overflow-wrap: break-word;
}

/* ==========================================================================
   Buttons: the children of the element
   ========================================================================== */

.wbi-hero--cta .wbi-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--wbi-hero-actions-justify);
  gap: var(--wbi-hero-actions-spacing);
  margin-top: var(--wbi-hero-actions-gap);
}

/* No card and no paragraph above: the row alone stays centered. */
.wbi-hero--cta .wbi-hero__actions:first-child {
  margin-top: 0;
}

/* ==========================================================================
   Shapes
   ========================================================================== */

/* A shape's own shadow comes inline, in em (see the shapes trait): 16px
   keeps it as set on desktop, and below 1200px it scales with the shapes.
   The drift comes from the shared sheet as it is, on every screen. */
.wbi-hero--cta .wbi-hero__shape {
  font-size: 16px;
}

/* Without a stacking context of its own, the layer lets a shape set "In
   front of the content" rise above it (the content sits at z-index 1). The
   shapes never catch the pointer: the layer has pointer-events: none. */
.wbi-hero--cta .wbi-hero__shapes {
  z-index: auto;
}

.wbi-hero--cta .wbi-hero__shape[data-layer="front"] {
  z-index: 2;
}

/* Tablet fields, falling back to the desktop ones. These rules target the
   shapes: an element is not reached by the container query it defines.
   Ranges with strict bounds: the shared mobile rule ends at 639px, and a
   section 639.5px wide (zoom, a fractional column) must still match one. */
@container wbihero (639px < width < 1200px) {
  .wbi-hero--cta .wbi-hero__shape {
    left: var(--wbi-hero-shape-x-t, var(--wbi-hero-shape-x, 50%));
    top: var(--wbi-hero-shape-y-t, var(--wbi-hero-shape-y, 50%));
    width: var(--wbi-hero-shape-w-t, var(--wbi-hero-shape-w, 24px));
    height: var(--wbi-hero-shape-h-t, var(--wbi-hero-shape-h, 24px));
  }

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

@container wbihero (width < 1200px) {
  .wbi-hero--cta .wbi-hero__shape {
    font-size: calc(16px * var(--wbi-hero-shadow-scale));
  }
}

/* ==========================================================================
   Off screen: no rendering work
   The browser skips the layout and paint of the section (and so the drift)
   while it is away from the viewport, and keeps its height meanwhile: the
   last one rendered or, before that, the min height. The viewport width
   stands in for the section's here: the root cannot query itself.
   ========================================================================== */

.wbi-hero--cta {
  content-visibility: auto;
  contain-intrinsic-block-size: auto var(--wbi-hero-min-h);
}

@media (max-width: 639px) {
  .wbi-hero--cta {
    contain-intrinsic-block-size: auto var(--wbi-hero-min-h-m);
  }
}