/**
 * BigNumbers.css — port 1:1 de
 * `mx-cms/src/sections/generic-sections/HighlightedNumbers/styles.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainer**Lg**, 1366px —
 *   ojo, esta sección usa el grande, no el Md como Testimonials/IconList).
 *
 * Breakpoints: 3xl 768 · 4xl 880 · 5xl 1024 · 6xl 1280 · 8xl 1440
 *   media.up('5xl')            -> min-width: 1024px
 *   media.up('6xl')            -> min-width: 1280px
 *   media.down('4xl')          -> max-width: 1023.98px
 *   media.between('3xl','8xl') -> min-width: 768px and max-width: 1439.98px
 */

/* Paridad de render de texto con el legacy: el sitio viejo setea
 * -webkit-font-smoothing: antialiased global, que en macOS renderiza la
 * tipografía más liviana. Los Code Components viven en shadow roots aislados,
 * así que hay que declararlo por componente en :host para que herede al shadow
 * tree — la propiedad NO cruza el límite. Sin esto, Blink usa subpixel
 * smoothing y el mismo texto en 400 se ve más pesado que en el sitio actual. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* @slot-layout: rail — un slot con N hijos: ::slotted(*) aplana el wrapper de
   Webflow y el contrato --card-* define el ancho */
.big-numbers {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;
  min-height: auto;
  box-sizing: border-box;

  /* Defaults del legacy: backgroundColorGeneric ?? primary[40], textColor ?? neutral[90].
     El default es el VERDE Creditas, no blanco. */
  background-color: #8edb00; /* primary[40] */
  color: #292929; /* neutral[90] */

  &[data-bg='white'] {
    background-color: #ffffff; /* neutral[0] */
  }

  &[data-bg='gray'] {
    background-color: #f1f3f2; /* neutral[10] */
  }

  &[data-bg='beige'] {
    background-color: #e9e9e1; /* other[10] */
  }

  /* BorderContainer = styled(GeneralContainerLg) + column/center/gap.
     Orden: primero las media queries del container, después las propias. */
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    height: 100%;
    min-height: 200px;
    max-width: 1366px; /* GeneralContainerLg */
    margin: 0 auto;
    box-sizing: border-box;

    /* media.down('4xl') */
    @media (max-width: 1023.98px) {
      padding: 40px 20px;
    }

    /* media.between('3xl', '8xl') */
    @media (min-width: 768px) and (max-width: 1439.98px) {
      padding-left: 40px;
      padding-right: 40px;
    }

    /* Del BorderContainer: pisa el padding vertical del container en todos los
       breakpoints (viene después en la cascada). */
    padding-block: 25px;

    /* media.up('5xl') */
    @media (min-width: 1024px) {
      gap: 24px;
      flex-direction: row;
    }
  }

  /* TitleH2 width={{ _: '85%', '5xl': '25%' }} textAlign={{ _: 'center', '5xl': 'left' }}
     headingLgMedium = 32px · ls sm 0.5 · lh 4xl 40px · medium 500 */
  .title {
    margin: 0;
    width: 85%;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;

    @media (min-width: 1024px) {
      width: 25%;
      text-align: left;
    }
  }

  /**
   * ListContainer — la fila de números.
   *
   * Dos piezas, y hacen falta las dos:
   *
   * 1. `::slotted(*) { display: contents }` aplana el wrapper que Webflow mete
   *    alrededor de los hijos del slot. Sin esto ese wrapper es el único flex
   *    item y los números se apilan adentro — es exactamente cómo se perdió el
   *    layout.
   * 2. El contrato `--card-*` define el ancho. Después de aplanar, el flex item
   *    real es la raíz de cada hijo (su host es `display: contents`), y una
   *    custom property heredada es lo único que cruza el shadow root.
   */
  .numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 24px;
    flex: 1;
    width: 100%;

    /* ⚠️ EL QUIRK. Webflow envuelve TODOS los hijos del slot en un único
       `<div slot="...">`. Ese wrapper es el único flex item, así que los hijos
       se apilan adentro en vez de formar la fila. `display: contents` lo aplana
       y recién ahí los `<code-island>` de cada hijo pasan a ser flex children.
       Mismo par de reglas que Brasil usa en HeroWithSlot, CardReveal,
       MediaLogos, Exponencial y Navbar. */
    ::slotted(*) {
      display: contents;
    }

    /* Reset del contrato, por si esta sección quedara anidada en otro slot. */
    --card-grow: initial;
    --card-max: initial;

    /* Mobile: apilados a ancho completo. */
    --card-basis: 100%;
    --card-shrink: 1;

    /* media.up('5xl') — hasta 3 por fila. `--bn-basis` la calcula el componente
       según cuántos ítems hay: calc((100% - gaps) / perRow). */
    @media (min-width: 1024px) {
      --card-basis: var(--bn-basis, calc((100% - 48px) / 3));
      --card-max: var(--bn-basis, calc((100% - 48px) / 3));
      --card-shrink: 0;
    }

    /* Fallback por si Webflow le da caja al host en algún modo del canvas: ahí
       el flex item pasa a ser el host y el basis del hijo no aplica. */
    > * {
      flex-grow: var(--card-grow, 0);
      flex-shrink: var(--card-shrink, 1);
      flex-basis: var(--card-basis, auto);
      max-width: var(--card-max, none);
      min-width: 0;
    }
  }
}

/* Reset de box-sizing scopeado al componente. El reset de Webflow no llega
   adentro del shadow root, así que cada componente declara el suyo. */
.big-numbers,
.big-numbers *,
.big-numbers *::before,
.big-numbers *::after {
  box-sizing: border-box;
}