/**
 * ImageListCta.css — port de
 * `mx-cms/src/sections/generic-sections/GenericListImageCTA/styles.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainerMd, max 1200).
 *
 * 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
 *
 * ⚠️ Esta sección **no tiene fondo por default**. El legacy hace
 * `getTokenValue(backgroundColorGeneric?.color)` SIN fallback, así que con el
 * campo vacío queda `undefined` → transparente, y hereda el color de texto. Por
 * eso el default de la prop es "Sin fondo" y no un color.
 */

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

.image-list-cta {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;
  min-height: auto;
  box-sizing: border-box;

  /* Sin fondo por default — ver la nota de arriba. */
  background-color: transparent;

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

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

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

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

  /* BorderContainer = styled(GeneralContainerMd) + column + align center.
     ⚠️ `media.down('4xl')` le saca TODO el padding: en mobile la imagen sangra
     hasta el borde de la pantalla. Está así en el legacy. */
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;

    /* media.down('4xl') */
    @media (max-width: 1023.98px) {
      padding: 0;
    }

    /* media.between('3xl', '8xl') */
    @media (min-width: 768px) and (max-width: 1439.98px) {
      padding-left: 40px;
      padding-right: 40px;
    }

    /* media.up('5xl') */
    @media (min-width: 1024px) {
      flex-direction: row;
      justify-content: space-between;
      padding-block: 100px;
    }
  }

  /* `Espaciado vertical: Sin espaciado` apaga el padding de arriba y abajo, para
     poder pegar esta sección contra la de al lado.

     Solo el vertical: el horizontal (40px entre 768 y 1439px) se queda, porque
     saca el texto del borde de la pantalla y no tiene nada que ver con el pedido.
     Abajo de 1024px el wrapper ya venía sin padding vertical, así que la opción
     no cambia nada ahí.

     `[data-padding]` + `.wrapper` es (0,2,0) y le gana a `.wrapper` (0,1,0) en
     cualquier media query. Es a propósito: los media queries NO suman
     especificidad, y confiar en el orden ya fue un bug en este mismo archivo. */
  &[data-padding='none'] .wrapper {
    @media (min-width: 1024px) {
      padding-block: 0;
    }
  }

  /* `Lado de la imagen: Derecha` invierte las columnas. Solo desde 1024px, que
     es donde el wrapper es fila: abajo de eso es una columna y el orden lo
     decide `imagePositionMobile` sobre `.media` (ver más abajo).

     Mismo criterio que en `GenericImage`, con una diferencia: allá el wrapper es
     `column-reverse` en mobile, así que la imagen queda SIEMPRE abajo y el prop
     no la mueve. Acá el wrapper es `column` normal, así que las dos props
     conviven — una manda en desktop y la otra en mobile. */
  &[data-image-side='right'] .wrapper {
    @media (min-width: 1024px) {
      flex-direction: row-reverse;
    }
  }

  /* `Mostrar la imagen en mobile: No` la esconde por debajo de 1024px.

     Se esconde con `display: none`, no se saca del DOM — igual que en
     `GenericImage`. Consecuencia real: el navegador igual la descarga, así que
     esto es una decisión de layout, no de performance. */
  &[data-mobile-image='hide'] .media {
    display: none;

    @media (min-width: 1024px) {
      display: block;
    }
  }

  /* ImageContainer. El `order` en mobile viene del mapa del legacy:
     top → 0, center → 1, bottom → 2. Desde 880px vuelve a 0 (siempre primero). */
  .media {
    display: block;
    width: 100%;
    order: 0;

    &[data-mobile-position='center'] {
      order: 1;
    }

    &[data-mobile-position='bottom'] {
      order: 2;
    }

    @media (min-width: 880px) {
      width: 40%;
      order: 0;
    }
  }

  .img {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  /* Las dos imágenes del legacy, elegidas por CSS en vez de por matchMedia.
     El corte es `useIsMobile('5xl')` → mobile es < 1024px.

     ⚠️ Si no hay imagen mobile, debajo de 1024 no se muestra NADA: el legacy
     hace `shouldRenderImage = !isMobile || Boolean(mobileImageUrl)`, o sea que en
     mobile no cae a la de desktop. Acá sale gratis: si el campo está vacío no hay
     `<img class="img-mobile">` en el markup. */
  .img-desktop {
    display: none;

    @media (min-width: 1024px) {
      display: block;
    }
  }

  .img-mobile {
    display: block;

    @media (min-width: 1024px) {
      display: none;
    }
  }

  /* Box width={{_: '100%', '4xl': shouldRenderImage ? '50%' : '100%'}} padding 40px */
  .copy {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 40px;
    box-sizing: border-box;

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

  &[data-has-image='true'] .copy {
    @media (min-width: 880px) {
      width: 50%;
    }
  }

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

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

  /* @slot-layout: stack — ListContainer. El legacy pasa `direction="column"` al
     IconList e `iconWidth="large"`. */
  .bullets {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    width: 100%;
    height: 100%;
    list-style: none;

    @media (min-width: 880px) {
      margin-bottom: 40px;
    }

    /* ⚠️ EL QUIRK. Webflow envuelve TODOS los hijos del slot en un único
       `<div slot="...">`. Sin aplanarlo el contenedor ve un solo hijo y el `gap`
       entre bullets no existe. */
    ::slotted(*) {
      display: contents;
    }
  }

  /* HEADING_6 del legacy: bodyLgRegular con
     marginTop={{_: '16px', '5xl': '0px'}} y marginBottom={{_: '0px', '4xl': '16px'}} */
  .footnote {
    margin: 16px 0 0;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;

    @media (min-width: 880px) {
      margin-bottom: 16px;
    }

    @media (min-width: 1024px) {
      margin-top: 0;
    }

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

    & a {
      color: #317500; /* primary[80] */
      text-decoration: underline;
    }
  }

  /* ButtonWrapper. ⚠️ Por default el botón NO se ve en mobile: el legacy hace
     `display: ${displayMobile ? 'block' : 'none'}` y lo prende desde 880px.
     El ancho lo controla este wrapper y no el botón, porque CardCtaButton pone
     `width: 100%` inline cuando width="fixed". */
  .cta-wrap {
    margin-top: 16px;
    width: 100%;

    /* 🔴 El `display:none` va DENTRO del media query de mobile a propósito.
       Antes estaba afuera y el botón no se veía en NINGÚN ancho.

       El motivo es especificidad, no el media query: `.cta-wrap[data-mobile='hide']`
       es (0,2,0) y `.cta-wrap` es (0,1,0) — y **los media queries no suman
       especificidad**. Así que el `display:block` de la regla de ≥880px nunca le
       ganaba al `display:none`, y como el default de "Mostrar el botón en mobile"
       es "No", el CTA quedaba oculto también en desktop.

       Medido en Chromium con el componente montado en un shadow root: a 1440, 1100,
       900 y 375px el `.cta-wrap` daba `display: none` (con `width: 264px` bien
       aplicado, que es lo que confundía — el media query SÍ entraba, solo perdía
       el `display`).

       Acotando el `display:none` al rango mobile no hay conflicto que resolver por
       especificidad, y el `display:block` de antes sobra. */
    @media (max-width: 879.98px) {
      &[data-mobile='hide'] {
        display: none;
      }
    }
  }

  /* Modo narrow: la caja se encoge al botón. La columna de texto está alineada a
     la izquierda, así que no hace falta centrar nada. */
  &[data-cta-width='narrow'] .cta-wrap {
    width: fit-content;
  }

  /* Modo legacy: los 264px del sitio actual desde 880px. `[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, que es la lección del bug de arriba. */
  &[data-cta-width='legacy'] .cta-wrap {
    @media (min-width: 880px) {
      width: 264px;
    }
  }
}

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