/**
 * WhatIsIt.css — port de `mx-cms/src/sections/auto-equity/WhatIsIt/styles.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainerLg, max 1366).
 *
 * Breakpoints: xl 480 · 2xl 600 · 3xl 768 · 4xl 880 · 5xl 1024 · 8xl 1440
 *   media.up('2xl')            -> min-width: 600px
 *   media.up('5xl')            -> min-width: 1024px
 *   media.down('4xl')          -> max-width: 1023.98px
 *   media.between('xl','2xl')  -> min-width: 480px and max-width: 599.98px
 *   media.between('2xl','5xl') -> min-width: 600px and max-width: 1023.98px
 *   media.between('3xl','8xl') -> min-width: 768px and max-width: 1439.98px
 *
 * ⚠️ **El padding del wrapper hay que resolverlo a mano.** El legacy lo arma
 * apilando tres fuentes que se pisan entre sí — `GeneralContainerLg` trae un
 * `padding` shorthand en `down('4xl')` y otro `padding-inline` en
 * `between('3xl','8xl')`, y encima `Container` agrega `padding-block: 72px` y un
 * `padding` shorthand propio en `between('2xl','5xl')`. Como `styled(X)` aplica su
 * clase DESPUÉS, gana la de `Container` a igual especificidad.
 *
 * Resuelto, por tramo:
 *
 * | Ancho | padding |
 * | --- | --- |
 * | `< 600` | `72px 20px` |
 * | `600 – 1023.98` | `72px 127px` |
 * | `1024 – 1439.98` | `72px 40px` |
 * | `≥ 1440` | `72px 0` |
 *
 * Se escribe así, explícito, en vez de replicar la cascada: el resultado es el
 * mismo y se puede verificar leyendo.
 */

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

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

  /* Defaults del legacy: backgroundColor ?? 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;
  }

  /* Container: grid con áreas nombradas. Acá el grid SÍ se puede: no hay slot, así
     que no hay host `display: contents` que no pueda ser grid item. */
  .wrapper {
    display: grid;
    max-width: 1366px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 72px 20px;

    /* En mobile la imagen va ENTRE el título y la descripción. */
    grid-template-areas:
      'title'
      'image'
      'description';

    /* media.between('2xl', '5xl') — el padding lateral salta a 127px */
    @media (min-width: 600px) and (max-width: 1023.98px) {
      padding: 72px 127px;
    }

    /* media.between('3xl', '8xl') de GeneralContainerLg, en la franja donde ya no
       aplica el 127px */
    @media (min-width: 1024px) and (max-width: 1439.98px) {
      padding: 72px 40px;
    }

    @media (min-width: 1440px) {
      padding: 72px 0;
    }

    /* media.up('5xl') — dos columnas, y la imagen ocupa las dos filas */
    @media (min-width: 1024px) {
      grid-template-areas:
        'title image'
        'description image';
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 92px;
    }
  }

  /* Title: `<h2>` con headingLgMedium.
     heading.lg = 32px · ls sm 0.5 · lh 4xl 40px · medium 500 */
  .title {
    grid-area: title;
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;

    /* media.between('xl', '2xl') — solo en esa franja angosta el título se acota
       al 65%. Es puntual y raro, pero está en el legacy. */
    @media (min-width: 480px) and (max-width: 599.98px) {
      width: 65%;
    }

    @media (min-width: 1024px) {
      max-width: 496px;
      align-self: center;
    }
  }

  /* ImageContainer */
  .media {
    grid-area: image;
    margin: 40px 20px;
    overflow: hidden;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      /* `contain` y no `cover`: la imagen no se recorta, entra completa. */
      object-fit: contain;
    }

    @media (min-width: 1024px) {
      width: auto;
      height: auto;
    }
  }

  /* InfoContainer + Description.
     body.lg = 18px · ls xs 0.3 · lh lg 26px · regular 400,
     con `padding-bottom: 16px` del Typography. */
  .description {
    grid-area: description;
    max-width: 496px;
    width: 90%;
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;

    @media (min-width: 600px) {
      width: 100%;
    }

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

    & p + p {
      margin-top: 16px;
    }

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

    & a {
      color: inherit;
      text-decoration: underline;
    }

    & ul,
    & ol {
      margin: 16px 0 0;
      padding-left: 20px;
    }
  }
}

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