/**
 * HowTo.css — port de `mx-cms/src/sections/auto-equity/HowTo/styles.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainerLg, max 1366).
 *
 * Breakpoints: 3xl 768 · 4xl 880 · 5xl 1024 · 8xl 1440
 *   media.up('5xl')            -> min-width: 1024px
 *   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. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.how-to {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-block: 40px;

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

  &[data-bg='white'] {
    background-color: #ffffff;
    color: #292929;
  }

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

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

  /* BorderContainer = styled(GeneralContainerLg) + column.
     ⚠️ El legacy le pone `justify-content: space-between` desde 1024px, y con dos
     hijos en columna eso no hace nada visible: el contenedor no tiene altura fija.
     Se replica igual — es inofensivo y sacarlo sería una diferencia sin motivo. */
  .wrapper {
    display: flex;
    flex-direction: column;
    max-width: 1366px;
    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 (min-width: 1024px) {
      justify-content: space-between;
    }
  }

  /* TitleText: headingLgMedium, family heading, margin-bottom 32px.
     heading.lg = 32px · ls sm 0.5 · lh 4xl 40px · medium 500 */
  .title {
    margin: 0 0 32px;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;
  }

  /* @slot-layout: intrinsic — ListContainer + el `IconList` del legacy.
 
     🔴 **Los bullets van en FILA desde 1024px.** El port los tenía en columna fija y
     por eso la sección se veía como una lista vertical en vez de los 4 bullets al
     lado. La fila no está en el `ListContainer` del legacy —ese sí es columna— sino
     un nivel más abajo, en el `IconListContainer` del componente `IconList`:
 
     ```
     IconListContainer:
       display: flex; flex-direction: column; gap: 20px;
       media.up('5xl') { flex-direction: ${direction}; align-items: flex-start; }
     ```
 
     Y `direction` **tiene default `"row"`** en `IconList`, que `HowTo` no
     sobreescribe. O sea: columna abajo de 1024, fila arriba. Al aplanar los dos
     contenedores del legacy en un solo `.bullets`, ese default se perdió.
 
     `intrinsic` y no `rail` porque cada bullet se dimensiona por su contenido: el
     `BulletContainer` del legacy no declara nada de flex, así que los 4 se encogen
     y el texto envuelve a dos líneas. El contrato `--card-*` no aplica.
 
     ⚠️ EL QUIRK. Webflow envuelve TODOS los hijos del slot en un único
     `<div slot="...">`. Sin aplanarlo el contenedor ve un solo hijo: no hay `gap`
     ni fila posible — los bullets se apilarían adentro del wrapper. */
  .bullets {
    display: flex;
    flex-direction: column;
    gap: 20px;

    /* `bulletMargin` del legacy: `HowTo` pasa `size="sm"` = 16px, mientras la
       sección `IconList` usa `md` = 24px. El hijo lo lee de esta custom property
       (default 24px), igual que el contrato `--card-*` del rail: las custom
       properties sí cruzan el límite del shadow root por el árbol aplanado. */
    --bullet-margin: 16px;

    /* `HowTo` no pasa `otherTypographyVariant` al `IconList` del legacy, así que sus
       bullets caen en `typographyVariant['sm']` = `bodyLgRegular`: **regular**, con o
       sin título. Sin esto el ítem compartido los pondría en bold. */
    --bullet-weight: 400;

    @media (min-width: 1024px) {
      flex-direction: row;
      align-items: flex-start;

      /* 🔴 **NO PONER `flex-wrap: wrap` ACÁ.** Es contraintuitivo pero con `wrap` los
         bullets **no se encogen**: el navegador prefiere bajarlos de línea antes que
         comprimirlos, así que cada uno se queda con el ancho de su texto en una sola
         línea (medido: 526-620px) y los 4 no entran en la fila. Con `nowrap` —lo que
         hace el legacy— se reparten el ancho y el texto envuelve a dos líneas, que es
         el diseño.

         El `audit-quirks` pide `flex-wrap` u `overflow-x` en una fila `intrinsic`, y
         acá la respuesta correcta es la segunda: los ítems se encogen hasta su
         min-content y, si alguien dropea muchos bullets, el scroll horizontal es la
         salida sin romper la fila. */
      overflow-x: auto;
    }

    ::slotted(*) {
      display: contents;
    }
  }
}

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