/**
 * GenericImage.css — port de
 * `mx-cms/src/sections/generic-sections/GenericImage/styles.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainer**Lg**, max 1366).
 *
 * Breakpoints: 3xl 768 · 4xl 880 · 5xl 1024 · 8xl 1440
 *   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;
}

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

  /* Defaults del legacy: backgroundColorGeneric ?? neutral[100],
     textColor ?? neutral[10]. Esta sección arranca OSCURA con texto casi blanco —
     y acá la combinación sí tiene sentido (a diferencia de ContentCtaList, que
     usaba neutral[10] sobre beige). */
  background-color: #292929; /* neutral[100] */
  color: #f1f3f2; /* neutral[10] */

  &[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') — el padding vertical depende de `size`. */
  @media (min-width: 1024px) {
    padding-block: 57px;
  }

  &[data-size='large'] {
    @media (min-width: 1024px) {
      padding-block: 80px;
    }
  }

  /* BorderContainer = styled(GeneralContainerLg).

     ⚠️ `column-reverse`: aunque en el markup la imagen va PRIMERO, en mobile se
     ve ABAJO. Está así en el legacy y es deliberado — el texto primero en
     pantallas chicas. Desde 1024px pasa a fila y `imageSide` decide el lado. */
  .wrapper {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 32px;
    height: 100%;
    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') */
    @media (min-width: 1024px) {
      flex-direction: row;
      gap: 132px;
    }
  }

  /* `imageSide: right` invierte la fila. Solo aplica en desktop: en mobile el
     `column-reverse` ya define el orden. */
  &[data-image-side='right'] .wrapper {
    @media (min-width: 1024px) {
      flex-direction: row-reverse;
    }
  }

  /* ImageContainer */
  .media {
    display: block;
    width: 70%;
    height: auto;

    & img {
      display: block;
      width: 100%;
      height: auto;
    }

    @media (min-width: 1024px) {
      max-width: 444px;
      width: 100%;
      height: auto;
      display: block;

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  /* `displayImageMobile: false` la esconde por debajo de 1024px, no la borra: el
     legacy la deja en el DOM con `display: none` (y le cambia el `sizes` a 1px
     para que el browser no la descargue — eso último no se puede replicar sin el
     `<Image>` de Next). */
  &[data-mobile-image='hide'] .media {
    display: none;

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

  /* ContentContainer */
  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;

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

  /* InfoContainer */
  .info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* margin-bottom: 24px; */
  }

  /* Subtitle: Typography variant="bodySmBold" as="h3" — es un antetítulo chico,
     no un heading grande. body.sm = 14px · ls xs 0.3 · lh sm 20px · bold 700 */
  .subtitle {
    margin: 0;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 20px;
  }

  /* Typography variant="headingLgMedium" family="heading" textAlign="left"
     heading.lg = 32px · ls sm 0.5 · lh 4xl 40px · medium 500 */
  .title {
    margin: 0;
    width: 100%;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;
    text-align: left;
  }

  /* `isHeader` suma 55px arriba del título, solo en mobile: es cuando la sección
     hace de header de la página y tiene que despegarse del navbar fijo. */
  &[data-header='true'] .title {
    margin-top: 55px;

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

  /* Description: Typography variant="bodyLgRegular" as="p"
     body.lg = 18px · ls xs 0.3 · lh lg 26px · regular 400 */
  .description {
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;

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

    /* UnorderedList del legacy: `padding-left: 30px`. */
    & ul,
    & ol {
      margin: 16px 0 0;
      padding-left: 30px;
    }
  }

  /* @slot-layout: intrinsic — LogosWrapper. Los logos traen su propio tamaño
     (son Images del Designer), así que el contrato `--card-*` no aplica. */
  .logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;

    @media (min-width: 1024px) {
      flex-direction: row;
    }

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

  /* @slot-layout: stack — el slot `extra`, que en el legacy era `extraComponent`:
     el hueco por donde las páginas metían un simulador o un formulario. */
  .ctas {
    display: flex;
    flex-direction: column;
    gap: 0;
    gap: 16px;

    @media (width >= 880px) {
      gap: 40px;
    }

    & a {
      @media (width <= 1023px) {
        width: 100%;
      }
    }

    /* Mismo quirk: sin aplanar, lo que se dropee en `extra` queda encapsulado en
       un solo hijo y no participa de esta columna. */
    ::slotted(*) {
      display: contents;
    }
  }

  /* Contenido del slot `extra`.

     Sin `order`: con un solo CTA el orden del DOM ya es el correcto
     —extra, nota de pie, botón— así que no hay nada que reordenar. Los `order`
     que había existían solo para intercalar el segundo CTA, que se eliminó. */
  .extra {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* ⚠️ La caja vacía se saca del layout, no se deja en altura 0.

     En Webflow el slot llega siempre, aunque el editor no haya dropeado nada:
     queda asignado a un `<div slot="extra"></div>` vacío. Con `display: flex` esa
     caja mide 0 de alto pero SIGUE SIENDO un flex item, así que el `gap` de
     `.ctas` abría su separación igual y el CTA quedaba con espacio arriba de la
     nada. Con `display: none` deja de ser item y el gap desaparece.

     La marca la pone el componente midiendo el slot — el CSS no puede saberlo.
     Ver el comentario largo en `GenericImage.jsx`. */
  .extra[data-empty='true'] {
    display: none;
  }

  /* Nota de pie: entre el contenido extra y los CTA (`order` entre los dos).

     Campo nuevo, no existe en el legacy, así que no hay un valor "del sitio
     actual" que copiar. Va en body.sm —14px / 20px / 0.3px, el mismo token que
     `.subtitle`— que es el tamaño de letra chica de esta sección; hereda el
     color del fondo, así que se lee igual en los cuatro. */
  .footnote {
    margin: 0px 0 4px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 20px;
    @media (max-width: 1024px) {
      margin: 0px 0 24px;
    }
    & b,
    & strong {
      font-weight: 700;
    }
  }

  /* El ancho del CTA primario lo elige el prop `Ancho del botón`. Tres modos:

     · `narrow` (default) — `CardCtaButton` va en `flexible`, su wrapper es
       `inline-flex` y el botón se ajusta al texto en TODOS los anchos. `.cta` no
       interviene: el 100% de acá es solo la caja, el botón hugea adentro.
       Medido: 178px con "Simulá tu préstamo", de 375 a 1440px de viewport.

     · `full` — 100% en todos los anchos.

     · `legacy` (etiquetado «Default») — 100% hasta 1024px y 330px desde ahí, el
       mismo comportamiento que el «Default» de `ImageListCta`. El sitio viejo
       pasaba a `fit-content` en esta sección; se cambió a pedido porque así
       `Default` no se distinguía de `narrow` en desktop. Ver la regla abajo.

     ⚠️ Por qué el ancho no se puede resolver solo con CSS sobre el botón: el
     `width` del design system es únicamente `flexible: auto` / `fixed: 100%` —
     **no tiene ningún max-width**— y el botón es `display: flex` block-level, así
     que `auto` igual llena el container. Lo que angosta de verdad es el wrapper
     `inline-flex` que pone `CardCtaButton`, y ese estilo va inline. De ahí que el
     modo se elija en JS y no acá. */
  .cta {
    width: 100%;
  }

  /* `[data-cta-width]` + `.cta` es (0,2,0) y le gana a `.cta` (0,1,0) en cualquier
     media query. Es a propósito: los media queries NO suman especificidad, y
     confiar en el orden fue exactamente el bug de `ImageListCta`. */
  &[data-cta-width='legacy'] .cta {
    @media (min-width: 1024px) {
      /* ⚠️ Acá había `fit-content`, que es lo que hacía el sitio viejo en ESTA
         sección (`ButtonContainer` pasaba a `fit-content` desde 1024px).

         El problema práctico: con `fit-content` el botón se ajusta a su texto,
         que es exactamente lo que ya hace `narrow`. O sea que desde 1024px las
         dos opciones se veían idénticas —medido en staging: 145px las dos— y
         `Default` parecía no hacer nada. La única diferencia quedaba abajo de
         1024, donde `Default` va al 100%.

         Se unifica con `ImageListCta`, cuyo `Default` sí usa un ancho fijo
         (`LinkButton width={{_: '100%', '5xl': '330px'}}` en el legacy) y por eso
         ahí el prop sí se distingue. Es una divergencia deliberada del sitio
         viejo para esta sección, a pedido: las dos secciones se comportan igual. */
      width: 330px;
    }
  }

  /* ⚠️ EL ORDEN SE INVIERTE. En mobile el primario va arriba
     (`order={{_: 0, '5xl': 1}}`); desde 1024px el secundario va primero
     (`order={{_: 1, '5xl': 0}}`). No es un descuido: en desktop el secundario es
     un link de texto y funciona como antetítulo del botón. */
  /* ⚠️ Acá vivía toda la maquinaria del segundo CTA: `.cta-primary` y
     `.cta-secondary` con `order` invertido entre breakpoints, y un
     `margin-top: 12px` en cada uno para separarse entre sí.

     Ese margen era el espacio de más arriba del botón: al ser de cada elemento
     se aplicaba existiera o no el otro CTA, así que con un botón solo igual
     aparecía — y encima se sumaba al `gap` del contenedor.

     El segundo CTA se eliminó (ver la nota en `GenericImage.jsx`: las 15
     instancias de staging lo tienen vacío), así que no queda nada que ordenar ni
     que separar: el orden del DOM —extra, nota de pie, botón— ya es el bueno, y
     la separación la hace el `gap` de `.ctas`. */
}

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