/* ai_banner.css — bordered two-column call-to-action band (text column + image
   column). Values from the spec ## Computed Styles: 1440 = base rules;
   768 → @media(max-width:991px); 375 → @media(max-width:479px).
   Run breakpoint boundary set {479,767,991,1919}.
   Typography via var(--font-*) (framework-11 E1 lock; source family already matches).

   Text-column padding reconciliation (documented in report.md): the spec
   recorded .padding-vertical.padding-xlarge as "padding: 64px 0px" (vertical
   only), but the pixel-diff target screenshot shows the heading, body AND the
   solid CTA button all inset the same amount from the card's inner-left border
   (measured left edge x=145 vs the text-column track left edge x=81 at 1440 =
   64px). Since all three — including the non-text button — share the inset, it
   is column padding, not per-element margin. Implemented as symmetric padding
   (64 / 48 / 32 per breakpoint) to match the measured visual target.

   Mobile text-align: the spec's Computed Styles do not record a per-viewport
   text-align (heading/body/CTA sit below the depth-5 capture cap), but at 375
   the target screenshot centres the heading, body and button — applied as
   text-align: center in the 479 band only. */

/* border-box for every box in this component — the Webflow source uses a global
   border-box reset, so widths/heights/min-heights here are border-box (padding +
   border are INSIDE the declared size, matching the spec's recorded box metrics).
   Without this the browser default (content-box) adds padding on top of
   min-height and inflates the stacked text column. */
.c-ai_banner__section-ai-banner,
.c-ai_banner__section-ai-banner * {
  box-sizing: border-box;
}

/* ---------------- Section root (source: .section_ai-banner) ------------------ */
.c-ai_banner__section-ai-banner {
  display: block;
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes the body margin on
     composed pages — the .region-content reset below restores it there). On a
     width:auto block the negative margin resolves to a viewport-wide box at
     x=0, so it does NOT add horizontal scroll. */
  margin: -8px;
}
.region-content .c-ai_banner__section-ai-banner {
  margin: 0;
  width: 100%;
}

/* ------- padding-global + padding-section-small (source: .padding-global.padding-section-small) --- */
.c-ai_banner__section-ai-banner .c-about_info__heading-wrap-5 {
  display: block;
  padding: var(--space-64) var(--space-40);
}

/* ---------------- container-large (source: .container-large) -----------------
   Centred with the shared margin-inline primitive; the 40px side gutter comes
   from the padding-global wrapper above, so the container needs only the cap. */
.c-ai_banner__section-ai-banner .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

/* ---------------- wrapper (source: .ai-banner-wrapper) ----------------------- */
.c-ai_banner__section-ai-banner .c-ai_banner__ai-banner-wrapper {
  position: relative;
  width: 100%;
}

/* ---------------- bordered 2-track grid (source: .div-block-161) -------------
   1440: two equal tracks side by side (spec measured 631px 631px — two
   minmax(0,1fr) tracks resolve to exactly 631px each in the 1278px content box).
   ≤991: collapses to a single track (children stack). gap 16px is column-gap at
   1440, row-gap when stacked. */
.c-ai_banner__section-ai-banner .c-ai_banner__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  border: 1px solid rgb(217, 217, 217);
}
.c-ai_banner__section-ai-banner .c-ai_banner__group > * {
  min-width: 0;
}

/* ---------------- text column (source: .padding-vertical.padding-xlarge) ------
   Flex column, vertically centred: at 1440 the grid stretches this column to
   the image column's 360px height, and the source centres the heading/body/CTA
   within that height (measured content centre ~11px below the card centre —
   centring reproduces it within a few px). At ≤991 the column height is
   content-driven, so justify-content is inert. */
.c-ai_banner__section-ai-banner .c-ai_banner__padding-vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-64);
}
.c-ai_banner__section-ai-banner .c-ai_banner__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  color: var(--color-text-primary);
}
.c-ai_banner__section-ai-banner .c-ai_banner__body {
  margin: var(--space-16) 0 0 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}
.c-ai_banner__section-ai-banner .c-ai_banner__cta {
  margin-top: var(--space-40);
}

/* CTA appearance — a sharp-cornered black rectangle. atom_button (R10) owns the
   theme's ONE interactive-effect rule (transition/hover), so only the
   box appearance is set here (no effect block is re-declared). */
.c-ai_banner__section-ai-banner .c-atom-button {
  padding: var(--space-16) 32px;
  font-size: var(--font-size-a);
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text-inverse);
  background-color: var(--color-bg-dark);
}

/* ---------------- image column (source: .div-block-162) ----------------------
   Fixed 360px column height at every breakpoint (spec). The source STRETCHES the
   image to fill the box (object-fit: fill), distorting the natural 1200x904
   aspect into the 631x360 column — verified against the source crop (a synthetic
   fill match diffs 0.18%; a centre-cover diffs 36%). Do NOT use object-fit:
   cover here — it crops instead of stretching and mismatches the source. */
.c-ai_banner__section-ai-banner .c-ai_banner__group-2 {
  display: block;
  width: 100%;
  height: 360px;
}
.c-ai_banner__section-ai-banner .c-ai_banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* ============================ Tablet: 768 band ==============================
   Grid collapses to one track (text column stacks above the image column). The
   text column takes the spec's recorded 298px height and centres its content
   (source vertically centres the heading/body/CTA within the column — the
   min-height also lands the stacked image at the source's y-offset). Heading
   scales down to the source's tablet size (~24px cap-measured). */
@media (max-width: 991px) {
  .c-ai_banner__section-ai-banner .c-ai_banner__group {
    grid-template-columns: minmax(0, 1fr);
  }
  .c-ai_banner__section-ai-banner .c-ai_banner__padding-vertical {
    padding: 48px;
    min-height: 298px;
  }
  .c-ai_banner__section-ai-banner .c-ai_banner__heading {
    font-size: 24px;
    line-height: 30px;
  }
}

/* ============================ Mobile: 375 band ==============================
   Same stacked structure; text centres horizontally (source centres the
   heading/body/button at mobile). Text column takes the spec's 280px height and
   centres its content vertically; heading scales to the source's mobile size. */
@media (max-width: 479px) {
  .c-ai_banner__section-ai-banner .c-about_info__heading-wrap-5 {
    padding: 32px var(--space-16);
  }
  .c-ai_banner__section-ai-banner .c-ai_banner__padding-vertical {
    padding: 32px;
    min-height: 280px;
    text-align: center;
  }
  .c-ai_banner__section-ai-banner .c-ai_banner__heading {
    font-size: 20px;
    line-height: 26px;
  }
}

/* F13-6 style-parity patches — iteration 2 (generated; safe to regenerate) */
@media (min-width: 992px) {
  [data-component="ai_banner"] .c-ai_banner__padding-vertical.c-ai_banner__padding-xlarge {
    padding: 64px 0px;
  }
}
@media (min-width: 480px) and (max-width: 991px) {
  [data-component="ai_banner"] .c-ai_banner__padding-vertical.c-ai_banner__padding-xlarge {
    padding: 48px 0px;
  }
}
@media (max-width: 479px) {
  [data-component="ai_banner"] .c-ai_banner__padding-vertical.c-ai_banner__padding-xlarge {
    padding: 32px 0px;
    text-align: start;
  }
}
/* end F13-6 patches */

/* F14-VP page-scoped layout patches — iteration 2 (generated; safe to regenerate) */
@media (min-width: 992px) {
  .page--about_index [data-component="ai_banner"] .c-ai_banner__group-2 {
    min-width: auto;
  }
  .page--about_index [data-component="ai_banner"] .c-ai_banner__padding-vertical.c-ai_banner__padding-xlarge {
    display: block;
    flex-direction: row;
    justify-content: normal;
    min-width: auto;
  }
}
@media (min-width: 480px) and (max-width: 991px) {
  .page--about_index [data-component="ai_banner"] .c-ai_banner__group-2 {
    min-width: auto;
  }
  .page--about_index [data-component="ai_banner"] .c-ai_banner__padding-vertical.c-ai_banner__padding-xlarge {
    display: block;
    flex-direction: row;
    justify-content: normal;
    min-width: auto;
  }
}
@media (max-width: 479px) {
  .page--about_index [data-component="ai_banner"] .c-ai_banner__group-2 {
    min-width: auto;
  }
  .page--about_index [data-component="ai_banner"] .c-ai_banner__padding-vertical.c-ai_banner__padding-xlarge {
    display: block;
    flex-direction: row;
    justify-content: normal;
    min-width: auto;
  }
}
/* end F14-VP patches */