/**
 * Steps.css — port de `mx-cms/src/sections/generic-sections/Steps/styles.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainerMd, max 1200).
 *
 * Breakpoints: 3xl 768 · 4xl 880 · 5xl 1024 · **6xl 1280** · 8xl 1440
 *   media.up('4xl')            -> min-width: 880px
 *   media.up('5xl')            -> min-width: 1024px
 *   media.up('6xl')            -> min-width: 1280px   ← el corte de la fila
 *   media.down('4xl')          -> max-width: 1023.98px
 *   media.between('3xl','8xl') -> min-width: 768px and max-width: 1439.98px
 *
 * ⚠️ El legacy usa `display: grid` con `grid-template-areas` de una sola columna
 * y tres filas (`gridlabel` / `gridsubtitle` / `gridcards`). Eso es equivalente a
 * una columna flex, así que se usa flex: mismo render, y evita el problema de que
 * un contenedor de hijos de slot no puede ser grid (el host es
 * `display: contents` y no puede ser grid item).
 */

/* 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. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.steps {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;
  box-sizing: border-box;

  /* Defaults del legacy: backgroundColorGeneric ?? neutral[0],
     textColor ?? neutral[90] */
  background-color: #ffffff; /* neutral[0] */
  color: #292929; /* neutral[90] */

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

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

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

  /* Container = styled(GeneralContainerMd) + la columna de tres filas. */
  .wrapper {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    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;
    }

    /* media.up('4xl') — el padding vertical depende del tamaño de card. */
    @media (min-width: 880px) {
      padding-top: 80px;
      padding-bottom: 80px;
    }
  }

  &[data-card-size='small'] .wrapper {
    @media (min-width: 880px) {
      padding-top: 56px;
      padding-bottom: 75px;
    }
  }

  /* TitleH2 paddingBottom="20px" textAlign={{_: 'left', '5xl': 'center'}}
     heading.lg = 32px · ls sm 0.5 · lh 4xl 40px · medium 500 */
  .title {
    margin: 0;
    padding-bottom: 20px;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;
    text-align: left;

    @media (min-width: 1024px) {
      text-align: center;
    }
  }

  /* Typography variant="bodyLgRegular" textAlign={{_: 'left', '5xl': 'center'}}
     body.lg = 18px · ls xs 0.3 · lh lg 26px · regular 400 */
  .description {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
    text-align: left;

    @media (min-width: 1024px) {
      text-align: center;
    }
  }

  /* @slot-layout: rail — CardContainer. Los pasos van en columna hasta 1280px y
     en fila desde ahí. Es "rail" y no "stack" porque el padre SÍ dimensiona a los
     hijos: les pasa el max-width por el contrato. */
  .cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    padding-top: 40px;
    z-index: 0;

    /* Reset del contrato antes de setearlo, por si esta sección se anida. */
    --card-basis: initial;
    --card-grow: initial;
    --card-shrink: initial;
    --card-max: initial;

    /* El contrato + las variables propias de Steps. Los valores del legacy
       salían de `getStyleValues(isSmallCard, {small, large})`; acá el tamaño es
       prop de la sección, así que se resuelven una vez y las cards los heredan.

       `basis: auto` = la card usa su contenido; el ancho lo acota el max-width. */
    --card-basis: auto;
    --card-grow: 1;
    --card-shrink: 1;
    --card-max: 307px;
    --step-card-padding: 24px;
    --step-card-mb: 56px;
    --step-gap: 0px;
    /* El título de la card. Va por variables y NO por un selector de ancestro:
       ver el comentario largo en `Step.css`. Un `[data-card-size] .title` no
       cruza el límite del shadow root del hijo. */
    --step-title-margin: 32px 0 12px;
    --step-title-size: 20px;
    --step-title-weight: 700;
    --step-title-ls: 0.5px;
    --step-title-lh: 28px;
    --step-title-height: auto;
    --step-icon-display: block;
    /* Cuerpo de la card. Mismos valores que usa `Step/richText.js` para el rich
       text, así que el texto plano y el formateado miden igual. Ver `.body` en
       `Step.css`. */
    --step-body-size: 18px;
    --step-body-lh: 26px;

    /* ⚠️ EL QUIRK. Webflow envuelve TODOS los hijos del slot en un único
       `<div slot="...">`. Sin aplanarlo ese wrapper es el único flex item: los
       pasos se apilan adentro y ni la fila ni la línea de conexión maquetan. */
    ::slotted(*) {
      display: contents;
    }

    /* Fallback del host: si Webflow le da caja al host del island, el flex item
       pasa a ser el host y el contrato de la raíz del hijo no se usa. */
    > * {
      flex-grow: var(--card-grow, 1);
      flex-shrink: var(--card-shrink, 1);
      flex-basis: var(--card-basis, auto);
      max-width: var(--card-max, none);
      min-width: 0;
    }

    /* ⚠️ Acá vivían las reglas que apagaban los tramos de línea de los extremos:

           > *:first-child { --step-dash-first: transparent }
           > *:last-child  { --step-dash-last: transparent }

       Andaban en el playground y NO en Webflow, donde el único hijo de `.cards`
       en el shadow tree es el `<slot>` — que es `:first-child` y `:last-child` a
       la vez. Las dos le pegaban a él, los pasos heredaban los dos tramos en
       `transparent` y la línea desaparecía entera al publicar.

       La selección por posición se mudó a una hoja a nivel documento, que sí
       alcanza a los hosts de los pasos en el light DOM. Ver `./connector.js`. */

    /* Ancho del paso en modo columna.

       Sin esto los pasos miden lo que mide su contenido (el contrato define
       `--card-basis: auto`, y en una columna el basis es la ALTURA, así que no
       gobierna el ancho). Con `align-items: center` cada paso quedaba centrado
       con un ancho distinto —medido: 283 / 307 / 282 / 255— y el tramo vertical
       de línea zigzagueaba de un paso al otro en vez de bajar derecho.

       Con un ancho definido todos topan en `--card-max` y los tramos quedan
       alineados. Desde 1280 vuelve a `auto`: ahí manda el flex de la fila. */
    --step-width: 100%;

    /* media.up('6xl') = 1280px — acá pasa a fila. */
    @media (min-width: 1280px) {
      flex-direction: row;
      align-items: stretch;
      padding: 0;
      padding-top: 64px;

      /* ⚠️ Acá había un `margin: 0 auto` y era el bug.
         `.cards` es un flex item de `.wrapper`, que es una columna. En una columna,
         el tamaño por default en el eje transversal es `stretch` — pero **un margen
         `auto` en ese eje anula el stretch** y encoge el elemento a su contenido.
         Resultado: la fila medía 610px en vez de los 1200 del wrapper, y las cards
         salían de 187px contra las 283px del sitio actual.
         El `auto` no hacía falta: el wrapper ya está centrado con su propio
         `margin: 0 auto`. Se declara `stretch` explícito para que quede a la vista
         que esta fila tiene que ocupar todo el ancho. */
      align-self: stretch;

      --step-card-mb: 0px;
      --step-width: auto;

      /* Todos los pasos, el mismo ancho — sin importar cuánto texto tenga cada
         uno.

         El contrato traía `--card-basis: auto`, o sea "arrancá del ancho de tu
         contenido y después crecé". Mientras las cards entran holgadas eso no se
         nota: todas llegan al tope de `--card-max` y quedan parejas. Pero cuando
         `n × --card-max` no entra en la fila, el reparto del sobrante arranca de
         un basis distinto por card y los anchos quedan desparejos — medido con 4
         cards grandes en 1200px: 294.8 / 307 / 307 / 291.2.

         Con `basis: 0` el ancho del contenido deja de entrar en la cuenta: los
         pasos se reparten la fila en partes iguales y `--card-max` los topa a
         todos por igual. El caso holgado no cambia (todos llegan al tope).

         ⚠️ Solo acá adentro. En columna el basis es la ALTURA, y un `0` con
         `flex-grow: 1` en un contenedor de alto automático colapsaría los pasos
         a cero. Abajo de 1280 sigue en `auto`.

         El alto ya venía parejo y no hace falta tocarlo: `align-items: stretch`
         estira todos los pasos al más alto, y `.card { flex-grow: 1 }` hace que
         la card llene su paso. */
      --card-basis: 0;

      /* La separación entre pasos: 24px, como el legacy.

         ⚠️ Acá había `gap: var(--step-gap)` y era el segundo bug de la línea. El
         tramo de línea es parte del paso, así que el gap del contenedor le abría
         un hueco de 24px a la LÍNEA en cada borde de paso — medido en el
         playground: 24 / 24 / 23.9. Eso es la línea "entrecortada".

         La separación va entonces en la card, no en el contenedor: los pasos
         quedan pegados —línea continua— y lo separado son las cards.

         **Repartida a los dos lados, y no `margin-left` en las cards con índice
         > 0 como hacía el legacy.** Con el margen de un solo lado la primera card
         terminaba 24px más ancha que las demás (medido en staging: 216 contra
         196) y cada punto quedaba 12px corrido respecto del centro de su card.
         Con la mitad a cada lado las cards miden todas igual y el punto queda
         centrado sobre la suya. Sigue habiendo 24px entre card y card: 12 + 12.

         El costo: la primera y la última card quedan 12px adentro de los bordes
         de la fila. Es la contrapartida de que todas midan lo mismo. */
      --step-gap: 24px;
      --step-card-mx: calc(var(--step-gap) / 2);
    }
  }

  /* Variante de card chica: cambia paddings, tipografía y la altura del título.
     El ANCHO no: es el mismo de la card grande. */
  &[data-card-size='small'] .cards {
    padding-top: 30px;

    /* ⚠️ Acá había `--card-max: 250px`, el valor que el legacy sacaba de
       `getStyleValues(isSmallCard, { small: 250, large: 307 })`.

       Se saca a pedido. Con 4 cards en una fila de 1200px, un tope de 250 las
       deja en 250 cada una y sobran ~190px de aire a la derecha, porque la fila
       arranca alineada a la izquierda. Con el tope de 307 que hereda de `.cards`
       las cuatro se reparten los 1200 (300 cada una) y la fila queda llena —
       igual que con cards grandes.

       O sea: "chica" ahora significa padding, tipografía, altura de título y
       sin icono. El ancho es el mismo en las dos variantes, en fila y en
       columna.

       Ojo con el caso de pocas cards: con 3 sigue sobrando aire, porque 3 × 307
       no llega a 1200. Es el mismo comportamiento que tienen las grandes, que es
       justo lo que se pidió; si además hay que repartir ese sobrante, el cambio
       es `justify-content: center` en `.cards` y aplica a las dos variantes. */
    --step-card-padding: 20px;
    --step-card-mb: 16px;
    /* HEADING_3 de `cardSmallOptions`: bodyMdMedium 16/500, sin márgenes. */
    --step-title-margin: 0;
    --step-title-size: 16px;
    --step-title-weight: 500;
    --step-title-ls: 0.3px;
    --step-title-lh: 24px;
    /* El legacy fija la altura del <h3> en 48px con card chica, para que las
       cards de una fila queden alineadas aunque los títulos midan distinto. */
    --step-title-height: 48px;
    /* El legacy no renderiza el icono con cards chicas. */
    --step-icon-display: none;
    /* PARAGRAPH de `cardSmallOptions`: bodyMdRegular + neutral[60]. Los tres
       valores son los mismos que usa `Step/richText.js` para el rich text. */
    --step-body-size: 16px;
    --step-body-lh: 24px;
    --step-body-color: #52605a; /* neutral[60] */

    @media (min-width: 1280px) {
      padding-top: 36px;

      --step-card-mb: 0px;
    }
  }

  /* `hasNumbers: false` esconde el número pero mantiene el punto. */
  &[data-numbers='false'] .cards {
    --step-number-display: none;
  }
}

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