/**
 * TextListCta.css — port 1:1 de
 * `mx-cms/src/sections/generic-sections/SimpleTitleTextListCTA/styles.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainerMd)
 * + los `Box` inline del index.tsx (`margin: 0 auto` de la lista, `textAlign`
 *   `{_: left, 5xl: center}` del texto de cierre, `width` del CTA).
 *
 * 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;
}

.text-list-cta {
  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] */
  }

  /* media.up('5xl') — del Container */
  @media (min-width: 1024px) {
    padding: 80px 24px;
  }

  /* BorderContainer = styled(GeneralContainerMd) + column + gap 20px,
     y align-items: center desde 1024px. */
  .wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    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('5xl') — del BorderContainer */
    @media (min-width: 1024px) {
      align-items: center;
    }
  }

  /* TitleH2 → headingLgMedium, textAlign left (default de TitleH2).
     ⚠️ El texto queda alineado a la izquierda incluso cuando el bloque está
     centrado por el `align-items: center` del wrapper. Está así en el legacy.
     heading.lg = 32px · ls sm 0.5 · lh 4xl 40px · medium 500 */
  .title {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;
    text-align: left;
  }

  /* Typography variant="bodyLgRegular"
     body.lg = 18px · ls xs 0.3 · lh lg 26px · regular 400 */
  .subtitle {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
  }

  /* LogosWrapper: column en mobile, row desde 1024px.
     @slot-layout: intrinsic — los logos traen su propio tamaño (son Images del
     Designer). El contrato --card-* no aplica acá: forzar un basis les rompería
     el aspect ratio. */
  .logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;

    /* En mobile la COLUMNA va centrada como bloque, pero cada logo alineado a la
       izquierda dentro de ella.

       `align-items: center` centraba cada item por separado, así que con logos de
       distinto ancho quedaban todos corridos entre sí. Encogiendo el contenedor a
       su contenido (`fit-content` = el ancho del logo más ancho) y centrándolo con
       `margin-inline: auto`, el bloque queda al medio y los items arrancan todos
       en la misma x.

       Solo hasta 1023.98px: desde 1024 esto es una FILA y ahí `align-items`
       gobierna el eje vertical, donde centrar sí es lo que se quiere. */
    @media (max-width: 1023.98px) {
      align-items: flex-start;
      width: fit-content;
      margin-inline: auto;
    }

    @media (min-width: 1024px) {
      flex-direction: row;
    }

    /* ⚠️ EL QUIRK. Webflow envuelve TODOS los hijos del slot en un único
       `<div slot="...">`. Sin aplanarlo, ese wrapper es el único flex item y los
       logos se apilan adentro en cualquier viewport. */
    ::slotted(*) {
      display: contents;
    }
  }

  /* @slot-layout: stack — la lista de bullets.
     El legacy pasa `direction="column"` al IconList y lo envuelve en un
     `Box margin="0 auto"`. */
  .bullets {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
    width: 100%;

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

    /* ⚠️ Mismo quirk que arriba: sin aplanar el wrapper el `gap` entre bullets
       no existe (se apilan adentro de un solo hijo). */
    ::slotted(*) {
      display: contents;
    }
  }

  /* HEADING_6 → bodyLgRegular con textAlign {_: left, '5xl': center} */
  .footnote {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
    text-align: left;

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

    /* Estilos del HTML que llega por RichText. Los selectores de tag van con
       `&` explícito (ver el README, §Estilos). */
    & p {
      margin: 0;
    }

    & strong,
    & b {
      font-weight: 700;
    }

    /* LinkComponent: `&:link { color: primary[100] }` */
    & a {
      color: #1c4200; /* primary[100] */
      text-decoration: underline;
    }
  }

  /* El ancho del CTA lo elige el prop `Ancho del botón`. El ancho lo controla
     este wrapper y no el botón: `CardCtaButton` pone `width: 100%` inline cuando
     va en `fixed`, así que un ancho puesto en la clase del botón no ganaría.

     Modo `legacy` = `LinkButton width={{ _: '100%', '5xl': '330px' }}`, que es lo
     que hace el sitio actual. */
  .cta-wrap {
    width: 100%;
  }

  /* ⚠️ Esta sección es CENTRADA, a diferencia de `GenericImage` y `ImageCardRail`.
     El `align-items: center` del wrapper solo entra desde 1024px, así que una caja
     al 100% dejaría el botón angosto pegado a la izquierda abajo de eso — y arriba
     también, porque un `width` explícito le gana al `stretch`. Encogiendo la caja al
     botón y centrándola con `margin-inline: auto` queda centrado en todos los
     anchos, sin depender del `align-items`. */
  &[data-cta-width='narrow'] .cta-wrap {
    width: fit-content;
    margin-inline: auto;
  }

  /* `[data-cta-width]` + `.cta-wrap` es (0,2,0) y le gana a `.cta-wrap` (0,1,0) en
     cualquier media query, a propósito: los media queries no suman especificidad. */
  &[data-cta-width='legacy'] .cta-wrap {
    @media (min-width: 1024px) {
      width: 330px;
    }
  }
}

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