/**
 * ImageCardRail.css — port de
 * `mx-cms/src/sections/generic-sections/ClickableImageCardSection/styles.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainer**Lg**, max 1366).
 *
 * 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
 */

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

  /* Defaults del legacy: backgroundColorGeneric ?? neutral[10],
     textColor ?? neutral[100] */
  background-color: #f1f3f2; /* neutral[10] */
  color: #292929; /* neutral[100] */

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

  /* neutral[20]. Se agregó después de auditar `/garantia-auto` publicada contra el
     sitio actual: ahí esta sección es #d6dcd9, y la paleta solo tenía el
     #f1f3f2 de neutral[10]. Como el legacy toma el fondo de un campo libre de
     Contentful, cualquier token puede aparecer — la regla es agregar la opción
     cuando una página real la usa, no adelantarse a las 30 posibles. */
  &[data-bg='gray-mid'] {
    background-color: #d6dcd9; /* neutral[20] */
  }

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

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

  /* BorderContainer = styled(GeneralContainerLg) + column + gap 24 +
     justify-content center.

     ⚠️ El legacy resuelve el orden con `order` sobre el `.buttonWrapper`
     (3 en mobile, 2 desde 880px), y para eso su `TitleContainer` es
     `display: contents` — disuelve su caja para que título, descripción y botón
     sean hermanos en el mismo contexto flex. Acá el markup es nuestro y los tres
     ya son hermanos directos, así que el `order` funciona sin disolver nada. */
  .wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    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('4xl') — pasa a fila y suma padding vertical.

       🔴 SIN `flex-wrap`. El legacy (`BorderContainer`) no lo tiene, y agregarlo fue
       el bug: con `.copy` al 30% y el CTA al 80% la fila desbordaba y envolvía, así
       que el título quedaba solo en su línea (centrado por el `justify-content`), el
       CTA en la segunda y el rail en la tercera. Se veía como columna. */
    @media (min-width: 880px) {
      flex-direction: row;
      padding-block: 100px;
    }
  }

  /* TitleContainer: la columna de texto, y **contiene el CTA** (ver el JSX).

     Dos diferencias medidas contra el legacy, las dos a propósito:

     1. **La columna arranca en 880px, no en 1024.** El legacy la vuelve columna en
        `media.up('5xl')` (1024) y entre 880 y 1023 usa `display: contents`, con lo
        que título, descripción y botón pasan a ser items de la fila. Reproducido tal
        cual, en ese tramo `.copy` y `.rail` colapsan a 0px de ancho (medido en
        Chromium). Alineando la columna con el breakpoint donde el wrapper pasa a
        fila —880— el tramo 880-1023 queda sano: columna 256px + rail 574px a 950px
        de viewport.

     2. **Abajo de 880 sí se disuelve.** Ahí el wrapper es columna y hace falta para
        conservar el orden del legacy: con `.copy` como caja, el CTA quedaría arriba
        del rail; disuelta, el `order: 3` del CTA vuelve a competir con el `order: 2`
        del rail y el orden es título → rail → CTA, como el sitio actual. */
  .copy {
    width: 100%;
    order: 1;

    @media (max-width: 879.98px) {
      display: contents;
    }

    @media (min-width: 880px) {
      display: flex;
      flex-direction: column;
      /* ⚠️ Acá había `space-between`, y era el bug del hueco.

         `.copy` se estira a lo alto de la fila (335px, que los fija el rail), así
         que le sobra altura. Con `space-between` ese sobrante se repartía ENTRE
         los items: el título quedaba pegado arriba, la descripción empujada
         abajo y en el medio un hueco de 187.5px medido en el playground.

         Con `flex-start` los dos quedan arriba, uno debajo del otro, separados
         por los 24px del `margin-bottom` del título. El sobrante se va al final
         de la columna, que es de donde lo toma el `margin-top: auto` del CTA. */
      justify-content: flex-start;
      min-width: 25%;
      width: 30%;
      margin-top: 0;
    }
  }

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

  /* .buttonWrapper del legacy: order 3 y ancho completo en mobile; order 2 y 80%
     desde 880px.

     ⚠️ Ese `80%` es **de la columna** (`.copy`), no del ancho de la sección: en el
     legacy el `.buttonWrapper` es hijo de `TitleContainer`. Medido: ~328px de los
     410px de columna a 1440px de viewport. Cuando este port lo tenía como hermano
     del rail, el mismo 80% resolvía contra 1366px y daba un botón de 1093px — de ahí
     el "CTA demasiado ancho".

     El `order: 3` de mobile solo tiene efecto porque `.copy` se disuelve abajo de
     880px (ver arriba): así compite con el `order: 2` del rail. */
  .cta-wrap {
    order: 3;
    width: 100%;
    margin-bottom: 16px;

    @media (min-width: 880px) {
      order: 2;
      margin-bottom: 30px;
      /* El CTA cierra la columna. Con `.copy` en `flex-start` todo el sobrante
         de altura queda al final, y este `auto` se lo come entero: el botón se
         apoya abajo mientras el título y la descripción se quedan arriba.

         Es lo que antes lograba —de refilón y rompiendo el par título/
         descripción— el `space-between` de `.copy`. */
      margin-top: auto;
    }
  }

  /* Modo legacy: el 80% de la columna. `[data-cta-width]` + `.cta-wrap` es (0,2,0) y
     le gana a `.cta-wrap` (0,1,0) en cualquier media query, sin depender del orden. */
  &[data-cta-width='legacy'] .cta-wrap {
    @media (min-width: 880px) {
      width: 80%;
    }
  }

  /* @slot-layout: rail — ListContainer. Cards de 240px que pueden crecer, en un
     contenedor con scroll horizontal. */
  .rail {
    order: 2;
    display: flex;
    gap: 40px;

    align-items: stretch;
    min-height: 335px;
    overflow: auto hidden;
    transition: all 0.3s ease;

    /* `flex: 0 1 auto` y NO `1 1 0`: el rail no se estira, mide exactamente lo
       que miden sus cards.

       El porqué: las cards topan en `--card-max: 240px`, así que `flex-grow` no
       puede repartirles el sobrante del rail y ese sobrante quedaba entero al
       final de la línea — con 3 cards en un rail de 932px son 240*3 + 40*2 =
       800, y 132px muertos pegados al borde derecho.

       Con el rail sin crecer el sobrante deja de estar DENTRO del rail y pasa a
       estar en el `.wrapper`, que ya tiene `justify-content: center` (viene del
       `GeneralContainer` del legacy). O sea que los 132px se reparten 66 y 66 a
       los costados del par título+cards, y el bloque entero queda centrado en la
       sección en vez de tener un hueco a la derecha. Medido a 1710px de
       viewport: rail 672→1472, exactamente 800, sin hueco.

       ⚠️ Dos consecuencias, las dos medidas y las dos buscadas:

       1. El título ya no arranca en el borde izquierdo del contenedor: se corre
          66px con 3 cards, y 206px con 2 (cuantas menos cards, más sobrante hay
          para repartir). Es el precio de centrar el conjunto.
       2. Abajo de ~1280px el rail ya no entra y pasa a scrollear, igual que
          antes. Ahí `flex-shrink: 1` lo achica y `.copy` toca su `min-width:
          25%`, así que el carrusel se queda con un poco más de ancho que antes
          (a 1024px: 671 en vez de 626). El scroll y la primera card siguen
          alcanzables — verificado. */
    @media (min-width: 880px) {
      order: 3;
      flex: 0 1 auto;
      min-width: 0;
    }

    /* Reset del contrato antes de setearlo: si esta sección se anida dentro de
       otro rail, no hereda sus valores. */
    --card-basis: initial;
    --card-grow: initial;
    --card-shrink: initial;
    --card-max: initial;
    --card-hover-scale: initial;
    --card-hover-opacity: initial;

    /* El contrato. La card del legacy es `width: 240px; flex-grow: 1`: 240 de
       base y crecía para llenar la fila.

       ⚠️ El tope de 240px es una divergencia deliberada del legacy, a pedido: la
       card ya no se estira con el ancho del contenedor ni con la cantidad de
       cards, topa en sus 240px y el sobrante queda como espacio libre al final
       de la fila. `--card-grow` queda en 1 a propósito — con el max-width no
       tiene efecto, pero deja el contrato del legacy a la vista y hace que
       revertir esto sea borrar una línea. */
    --card-basis: 240px;
    --card-grow: 1;
    --card-shrink: 0;
    --card-max: 240px;

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

    /* Fallback del host: si Webflow le da caja al host del island, el flex item
       pasa a ser el host y el `flex-basis` de la raíz de la card no se usa. */
    > * {
      flex-grow: var(--card-grow, 1);
      flex-shrink: var(--card-shrink, 0);
      flex-basis: var(--card-basis, auto);
      max-width: var(--card-max, none);
      min-width: 0;
    }

    /* Scrollbar del legacy. selectTheme('colors.primary.40') = #8edb00. */
    &::-webkit-scrollbar {
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #8edb00; /* primary[40] */
    }

    &::-webkit-scrollbar-track {
      margin-top: 32px;
      background: rgba(255, 255, 255, 0.2);
    }

    /* Realce en hover: al pasar por el rail, TODAS las cards se encogen y se
       apagan, y la que está bajo el cursor vuelve a su tamaño. Solo con puntero
       fino — en touch no hay hover y el estado quedaría pegado después de un tap.

       ⚠️ ACÁ HABÍA UN BUG DE SHADOW BOUNDARY. La versión anterior era:

           > * { transition: … }
           &:has(:hover, :focus-within) > * { transform: scale(.95); opacity: .5 }

       `> *` selecciona los hijos de `.rail` EN EL SHADOW TREE, y ahí el único
       hijo es el `<slot>` — las cards viven en el light DOM. O sea que en
       Webflow el efecto no hacía nada: le aplicaba transform y opacity al slot,
       que además es `display: contents` y ni siquiera genera caja. En el
       playground sí andaba, porque ahí las cards son hijas directas. Es el mismo
       problema que tenían los conectores de `Steps`.

       El mecanismo de abajo es el que usa `BlogCard` en la librería de Brasil, y
       funciona por una razón concreta: **las custom properties heredan, y la
       herencia sí cruza el límite del shadow root**. El rail publica dos
       variables; la card las adopta para su `scale` y su `opacity` (ver
       `ClickableImageCard.css`), y cuando el cursor está sobre UNA card, esa card
       se pisa su propia copia y vuelve a 1. Ningún selector tiene que alcanzar a
       la card: alcanza con que herede. */
    @media (pointer: fine) {
      --card-hover-scale: 1;
      --card-hover-opacity: 1;

      &:hover,
      &:focus-within {
        --card-hover-scale: 0.95;
        --card-hover-opacity: 0.5;
      }
    }

    /* Respeto por quien pidió menos movimiento. Del barrido sobre BR: 7 de sus
       componentes lo declaran (ver components/QUIRKS_SWEEP.md).

       El encogido es movimiento, así que se neutraliza; el apagado no lo es y se
       mantiene, para que el realce siga leyéndose. La transición la corta la
       propia card. */
    @media (prefers-reduced-motion: reduce) {
      transition: none;

      --card-hover-scale: 1;
    }

    /* RegularWrapper: apilado y centrado. ⚠️ Solo hasta 880px — la condición del
       legacy es `isSlider || !isMobile`, así que en desktop SIEMPRE fue un rail,
       incluso con isSlider en false. */
    &[data-layout='stack'] {
      @media (max-width: 879.98px) {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        overflow: visible;
        min-height: 0;

        /* Apilado el ancho de 240px estorba. */
        --card-basis: auto;
        --card-shrink: 1;
      }
    }
  }
}

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