/**
 * TextBox.css — port 1:1 de
 * `mx-cms/src/sections/generic-sections/GenericTextBoxContent/styles.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainerMd).
 *
 * 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
 *
 * ⚠️ Ojo: el corte de la fila es `up('4xl')` = **880px**, NO 1024. Es distinto
 * de IconList y del resto de las secciones. Está así en el legacy.
 *
 * La tipografía del contenido de la caja NO está acá: es rich text slotteado al
 * light DOM. Ver `./richText.js`.
 */

/* 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-box {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;
  min-height: auto;
  box-sizing: border-box;

  /* Defaults del legacy: backgroundColorGeneric ?? neutral[100],
     textColor ?? neutral[0]. O sea que esta sección arranca OSCURA. */
  background-color: #292929; /* neutral[100] */
  color: #ffffff; /* neutral[0] */

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

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

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

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

  /* BorderContainer = styled(GeneralContainerMd) + height 100% + column,
     y en up('4xl') pasa a fila con space-between. */
  .wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    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') — 880px, no 1024 */
    @media (min-width: 880px) {
      flex-direction: row;
      justify-content: space-between;
    }
  }

  /* TitleContainer */
  .copy {
    width: 100%;
    box-sizing: border-box;

    @media (min-width: 880px) {
      width: 35%;
    }
  }

  /* El CTA, debajo de la descripción. No existe en el legacy —se agregó para no
     necesitar un slot extra sólo para un botón—, así que el espaciado no sale de
     ningún valor medido: son los 24px del `margin-bottom` del título, que es el
     ritmo vertical de esta columna.

     El wrapper existe para llevar el margen: el botón viene del design system y
     no se le tocan sus propios márgenes. */
  .cta {
    margin-top: 24px;
  }

  /* TitleH2 marginBottom="24px" → headingLgMedium
     heading.lg = 32px · ls sm 0.5 · lh 4xl 40px · medium 500 */
  .title {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;
  }

  /* Typography variant="bodyLgRegular"
     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;
  }

  /* SideBoxContainer — siempre blanca, independiente del fondo de la sección.
     box-shadow: selectTheme('shadow.lg') del tema standard. */
  .box {
    width: 100%;
    height: 100%;
    list-style: none;
    background-color: #ffffff; /* neutral[0] */
    color: #292929; /* neutral[100] */
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0px 28px 64px rgba(31, 45, 39, 0.16); /* shadow.lg */
    border-radius: 24px;
    margin-top: 20px;

    @media (min-width: 880px) {
      margin: 0;
      width: 45%;
    }

    /* Sin `::slotted(*) { display: contents }` acá, a propósito. Ese aplanado
       existe para que los hijos de un slot puedan ser flex items del padre; esta
       caja es un contenedor de bloque, así que el wrapper de Webflow no molesta.
       Y `display: contents` saca al elemento del árbol de accesibilidad en
       algunos motores — no vale pagarlo sin motivo.

       Lo que sí hay que resolver son los descendientes del rich text
       (h3/p/ul/li): esos no los alcanza ni el CSS del shadow ni `::slotted`.
       Van en `./richText.js`, a nivel documento. */
  }
}

/* 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-box,
.text-box *,
.text-box *::before,
.text-box *::after {
  box-sizing: border-box;
}