/**
 * NewsSection.css — port de
 * `mx-cms/src/sections/auto-equity/NewsSection/styles.ts`.
 *
 * Breakpoints: 2xl 600 · 5xl 1024
 *   media.up('2xl') -> min-width: 600px
 *   media.up('5xl') -> min-width: 1024px
 *
 * ⚠️ Esta sección **no usa `GeneralContainer`**: tiene su propio `max-width: 1366px`
 * y un padding en **porcentaje** (`7% 11.5%`) desde 1024px. Es la única de la
 * librería con padding porcentual, así que el espaciado crece con el viewport.
 * No lo unifiques con el resto.
 */

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

.news-section {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 40px 20px;

  /* Defaults del legacy: backgroundColor ?? neutral[10], textColor ?? neutral[80] */
  background-color: #f1f3f2; /* neutral[10] */
  color: #3b4540; /* neutral[80] */

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

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

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

  /* media.up('5xl') — padding en PORCENTAJE, no en px. */
  @media (min-width: 1024px) {
    padding: 7% 11.5%;
  }

  .wrapper {
    display: block;
    max-width: 1366px;
    margin-inline: auto;
    box-sizing: border-box;
  }

  /* Typography as="h2" variant="headingLgMedium" color={neutral[90]} mb 24px.
     ⚠️ El color del título está FIJO en `neutral[90]` en el legacy: no hereda el
     `textColor` de la sección. Con fondo oscuro quedaría casi invisible, así que
     acá hereda — es la única desviación de este componente. */
  .title {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;
    color: inherit;
    text-align: left;
  }

  /* Typography variant="bodyLgRegular" mb 24px.
     El link del subtítulo va en `primary[90]` y SIN subrayado. */
  .subtitle {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
    text-align: left;

    /* 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: #1c4200; /* primary[90] */
      text-decoration: none;
    }
  }

  /* `isTextCentered` del legacy, acá explícito. Ver el comentario en el .jsx: la
     condición original (`!iconLinkList`) tenía un bug con arrays vacíos. */
  &[data-align='center'] .title,
  &[data-align='center'] .subtitle {
    text-align: center;
  }

  /* @slot-layout: intrinsic — Slider. Los logos traen su propio tamaño (son Images
     del Designer), así que el contrato `--card-*` no aplica.

     ⚠️ El corte a fila es en **600px**, no en 1024 como el resto de la librería. Y
     desde ahí scrollea en horizontal en vez de wrapear — es la diferencia concreta
     con los logos de `Text List CTA`. */
  .rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 48px;

    @media (min-width: 600px) {
      position: relative;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      gap: 16px;
      overflow-x: auto;
      overflow-y: hidden;
    }

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

    /* LogoLink: el legacy lo aplica al `<a>` de cada logo. Desde acá el elemento
       alcanzable es el hijo directo del contenedor. */
    > * {
      padding-block: 16px;
      text-decoration: none;
      cursor: pointer;
      flex: 0 0 auto;
      transition: filter 0.2s ease;

      @media (min-width: 1024px) {
        margin-right: 40px;
      }
    }

    > *:hover {
      filter: brightness(0.8);
    }

    > *:last-child {
      margin-right: 0;
    }

    /* Del barrido sobre BR: 7 de sus componentes respetan esta preferencia. */
    @media (prefers-reduced-motion: reduce) {
      > * {
        transition: none;
      }
    }
  }
}

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