/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * BigNumbers — section with a left-aligned title column and a row of
 * three "step" blocks (subtitle + description). Primary-green background.
 *
 * Layout (desktop ≥880px):
 *   [Nossa jornada title col]  |  [number]  [number]  [number]
 *
 * Layout (tablet 600–879px): title centered above, steps stacked.
 * Layout (mobile <600px):    title centered above, steps stacked.
 *
 * Token values inlined from @creditas-ui/themes standard:
 *
 *   colors.primary.40    = #8edb00
 *   colors.neutral.100   = #292929
 *
 *   breakpoints.2xl      = 600px
 *   breakpoints.4xl      = 880px
 *
 *   typography (Figma):
 *     title mobile   → 32px / 40px / 0.3px / Maison Neue Extended Book
 *     title tablet   → 48px / 40px / 0.3px / Maison Neue Extended Book
 *     title desktop  → 28px / 40px / 0.3px / Maison Neue Extended Book
 *     subtitle mob   → 38px / 32px / 0.3px / Maison Neue Extended Book
 *     subtitle tab+  → 42px / 32px / 0.3px / Maison Neue Extended Book
 *     desc mob/desk  → 20px / 28px / 0.5px / Helvetica Now Display Regular
 *     desc tablet    → 32px / 40px / 0.5px / Maison Neue Extended Light
 */

.big-numbers-old,
.big-numbers-old *,
.big-numbers-old *::before,
.big-numbers-old *::after {
  box-sizing: border-box;
}

.big-numbers-old {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #8edb00;
  padding: 40px 24px;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  color: #292929;

  @media (min-width: 1024px) {
    padding: 40px;
  }

  /* ----- outer content row ----------------------------------------- */

  .content {
    width: 100%;
    max-width: calc(1388px + 40px);
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;

    @media (min-width: 880px) {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      /* gap: 64px; */
    }
  }

  /* ----- title column ---------------------------------------------- */

  .title-col {
    /* flex: 0 0 auto; */
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 375px;
    /* min-height: 150px; */

    @media (min-width: 880px) {
      max-width: none;
      justify-content: flex-start;
    }

    @media (min-width: 1024px) {
      max-width: 238px;
    }
  }

  .title {
    margin: 0;
    text-align: center;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.5px;

    @media (min-width: 600px) and (max-width: 879px) {
      font-size: 48px;
    }

    @media (min-width: 880px) {
      text-align: left;
      font-size: 28px;
    }
  }

  /* ----- steps row ------------------------------------------------- */

  /**
   * Mobile + tablet: steps stack vertically (full-width each).
   * Desktop (≥880px): steps sit in a row.
   */
  .steps-row {
    /* flex: 1 1 auto; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;

    @media (min-width: 880px) {
      flex-direction: row;
      justify-content: space-between;
      /* gap: 24px; */
    }
  }

  /* ----- step (subtitle + description) ----------------------------- */

  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    border-radius: 20px;
    text-align: center;
    width: 100%;

    @media (min-width: 600px) {
      padding: 62px 16px;
    }

    @media (min-width: 880px) {
      width: auto;
    }

    @media (min-width: 1024px) {
      padding: 0;
    }
  }

  .subtitle {
    margin: 0;
    text-align: center;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 32px;
    letter-spacing: 0.3px;

    @media (min-width: 600px) {
      font-size: 42px;
    }
  }

  .description {
    margin: 0;
    text-align: center;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;

    @media (min-width: 600px) and (max-width: 879px) {
      font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
        'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
        sans-serif;
      font-weight: 300;
      font-size: 32px;
      line-height: 40px;
    }
  }
}