/**
 * InfoCards.css — port de
 * `mx-cms/src/sections/generic-sections/InfoCardSection/style.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainer**Lg**, max-width
 *   1366 — ojo, no el Md de 1200 que usan las otras secciones).
 *
 * Breakpoints: 3xl 768 · 4xl 880 · 5xl 1024 · 8xl 1440
 *   media.up('4xl')            -> min-width: 880px
 *   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;
}

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

  /* Defaults del legacy: el fondo está hardcodeado como `#E9E9E1` (= other[10]),
     no como token; el texto cae a neutral[100]. */
  background-color: #e9e9e1; /* other[10] */
  color: #292929; /* neutral[100] */

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

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

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

  /* BorderContainer = styled(GeneralContainerLg) + column */
  .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.up('5xl') — pisa el padding del container. El `0` horizontal es
       deliberado: el rail sangra hasta el borde del contenedor. */
    @media (min-width: 1024px) {
      padding: 57px 0;
    }
  }

  /* HeaderContainer */
  .header {
    display: flex;
    flex-direction: column;
    gap: 24px;

    /* El header queda dentro del wrapper, que a partir de 1024px no tiene
       padding horizontal. Sin esto el título pegaría contra el borde. */
    @media (min-width: 1024px) {
      padding-inline: 40px;
    }

    /* TitleH2 textAlign={{ _: 'left', '5xl': 'center' }} y la descripción igual.
       El prop `titleAlign` solo cambia el estado de 1024px para arriba: en mobile
       el legacy siempre alinea a la izquierda. */
    @media (min-width: 1024px) {
      &[data-align='center'] {
        text-align: center;
      }

      &[data-align='left'] {
        text-align: left;
      }
    }
  }

  /* TitleH2 → headingLgMedium
     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;
  }

  /* Typography variant="bodyLgRegular" marginBottom="24px"
     body.lg = 18px · ls xs 0.3 · lh lg 26px · regular 400.
     El `gap: 24px` del header ya separa del título; este margen es el de abajo. */
  .description {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
  }

  /* @slot-layout: rail — cards de ancho FIJO (275px) en un contenedor que
     scrollea en horizontal. Es el caso del contrato --card-*. */
  .rail {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 20px 16px 40px;

    /* Reset del contrato antes de setearlo: si esta sección se anida dentro de
       otro rail, no queremos heredar sus valores. */
    --card-basis: initial;
    --card-grow: initial;
    --card-shrink: initial;
    --card-max: initial;

    /* El contrato. La card del legacy es `min-width: 275px; max-width: 275px`:
       ancho fijo, sin crecer ni encoger. */
    --card-basis: 275px;
    --card-grow: 0;
    --card-shrink: 0;
    --card-max: 275px;

    /* ⚠️ `justify-content: center` en un contenedor con `overflow-x: auto` deja
       el contenido que desborda por la IZQUIERDA inalcanzable: no se puede
       scrollear hacia atrás. Por eso el legacy medía el viewport en JS
       (`isOverflowing`) para alternar entre `center` y `flex-start`.

       `safe center` hace exactamente eso, en CSS: centra mientras entre, y cae a
       `flex-start` en cuanto desborda. Se declara el `center` pelado primero como
       fallback para motores que no entiendan la palabra clave. */
    justify-content: center;
    justify-content: safe center;

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

    /* Fallback del host: si Webflow le da caja al host del island en algún modo
       del canvas, el flex item pasa a ser el host y el `flex-basis` que la card
       declara en su raíz no se usa. Con `> *` el ancho se aplica igual, sea el
       host o la raíz de la card. */
    > * {
      flex-grow: var(--card-grow, 0);
      flex-shrink: var(--card-shrink, 0);
      flex-basis: var(--card-basis, auto);
      max-width: var(--card-max, none);
      min-width: 0;
    }

    /* Scrollbar del legacy. `selectTheme('colors.primary.40')` = #8edb00. */
    &::-webkit-scrollbar {
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #8edb00; /* primary[40] */
    }

    &::-webkit-scrollbar-track {
      margin-top: 32px;
      background: rgba(255, 255, 255, 0.2);
    }

    /* RegularWrapper: apilado y centrado. ⚠️ Solo aplica hasta 880px — la
       condición del legacy es `isSlider || !isMobile`, así que en desktop SIEMPRE
       fue un rail, incluso con isSlider en false. */
    &[data-layout='stack'] {
      @media (max-width: 879.98px) {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        overflow: visible;
        padding: 0;

        /* Apilado el ancho fijo estorba: la card ocupa el ancho disponible
           hasta su máximo. */
        --card-basis: auto;
        --card-shrink: 1;
      }
    }
  }
}

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