/**
 * Disclaimer.css — port de `mx-cms/src/components/Disclaimer/styles.ts`
 * (el `Container` y el `CatContainer`).
 *
 * Breakpoints: 5xl 1024 · 8xl 1440
 *   media.up('5xl')            -> min-width: 1024px
 *   media.between('5xl','8xl') -> min-width: 1024px and max-width: 1439.98px
 *
 * La tipografía del texto 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;
}

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

  /* Defaults del legacy: backgroundColorCat ?? neutral[0],
     textColor ?? neutral[60] */
  background-color: #ffffff; /* neutral[0] */
  color: #52605a; /* neutral[60] */

  &[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: #f1f3f2; /* neutral[10] */
  }

  /* CatContainer.
     ⚠️ El padding es asimétrico y el legacy lo hace más raro todavía: desde
     1024px saca el `padding-left` y centra con `margin: auto`, y entre 1024 y
     1440 lo reemplaza por `margin: 0 71px`. Se replica tal cual. */
  .wrapper {
    display: block;
    max-width: 1366px;
    padding: 32px 20px 48px;
    box-sizing: border-box;

    /* media.up('5xl') */
    @media (min-width: 1024px) {
      margin: auto;
      padding-left: 0;
    }

    /* media.between('5xl', '8xl') */
    @media (min-width: 1024px) and (max-width: 1439.98px) {
      margin: 0 71px;
    }
  }
}

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