/**
 * Testimonials.css — port 1:1 de
 * `mx-cms/src/sections/generic-sections/Testimonials/style.ts`
 * + `components/GeneralContainer/styles.ts` (GeneralContainerMd)
 * + `components/TitleH2` (variant headingLgMedium).
 *
 * CSS anidado nativo, sin BEM. Tokens del tema `standard` resueltos a literal
 * (ver shared/TOKENS.md).
 *
 * Breakpoints: 3xl 768 · 4xl 880 · 5xl 1024 · 8xl 1440
 *   media.up('3xl')             -> min-width: 768px
 *   media.up('4xl')             -> min-width: 880px
 *   media.up('5xl')             -> min-width: 1024px
 *   media.down('4xl')           -> max-width: 1023.98px   (¡el SIGUIENTE, no 880!)
 *   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. Sin esto, Blink usa subpixel
 * smoothing y el mismo texto en 400 se ve más pesado que en el sitio actual. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* @slot-layout: rail — un slot con N hijos: ::slotted(*) aplana el wrapper de
   Webflow y el contrato --card-* define el ancho */
.testimonials {
  /* En MX `family="heading"` NO cambia la fuente: typography.utils mapea
     `heading` y `base` a la misma CSS var de Helvetica. O sea que los títulos
     NO usan Maison Neue, aunque el tema `standard` lo declare. */
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;

  /* Defaults del legacy: backgroundColorGeneric ?? '#E9E9E1', textColor ?? neutral[100] */
  background-color: #e9e9e1; /* other[10] — el default es beige, no blanco */
  color: #292929; /* neutral[100] */

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

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

  /* Wrapper = styled(GeneralContainerMd) + flex-direction column.
     El orden de las media queries importa: primero las de GeneralContainerMd,
     después la de Wrapper, para reproducir la cascada de emotion. */
  .wrapper {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;

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

    /* media.between('3xl', '8xl') — se solapa con la anterior entre 768 y
       1023.98, y por orden gana el padding horizontal de acá. */
    @media (min-width: 768px) and (max-width: 1439.98px) {
      padding-left: 40px;
      padding-right: 40px;
    }

    /* media.up('4xl') — del Wrapper, pisa el padding vertical desde 880px. */
    @media (min-width: 880px) {
      padding-block: 58px;
      gap: 32px;
    }
  }

  .header {
    display: flex;
    flex-direction: column;
    /* @margin-auto-ok: el legacy hace exactamente esto. Medido en el sitio
       publicado, su header computa `margin: 0px 288.5px` y mide 623px de ancho —
       o sea que se encoge al contenido y se centra con márgenes automáticos, no
       ocupa los 1200 del wrapper. Con el título centrado el resultado es el mismo,
       pero un título largo corta distinto, así que se replica el mecanismo. */
    margin: 0 auto;
    padding-bottom: 40px;
  }

  /* TitleH2 → Typography variant="headingLgMedium" family="heading" as="h2"
     heading.lg = fontSize 5xl 32px · letterSpacing sm 0.5 · lineHeight 4xl 40px
     medium     = fontWeight md 500
     textAlign  = { _: 'left', '5xl': 'center' } */
  .title {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 40px;
    text-align: left;

    @media (min-width: 1024px) {
      text-align: center;
    }
  }

  /* Typography variant="bodyLgRegular" as="p" marginTop="8px"
     body.lg = 18px · ls xs 0.3 · lh lg 26px · regular 400 */
  .description {
    margin: 8px 0 0;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
    text-align: left;

    @media (min-width: 1024px) {
      text-align: center;
    }
  }

  /**
   * QuotesWrapper — la fila de cards.
   *
   * Dos piezas, y hacen falta las dos: `::slotted(*)` aplana el wrapper de
   * Webflow, y el contrato `--card-*` define el ancho de cada card.
   */
  .quotes {
    display: flex;
    flex-direction: column;
    gap: 16px;

    /* ⚠️ EL QUIRK. Webflow envuelve TODOS los hijos del slot en un único
       `<div slot="...">`. Sin aplanarlo, ese wrapper es el único hijo del
       contenedor y los hermanos se apilan adentro. Brasil lo aplica incluso en
       contenedores apilados (el `.list` del Faq) porque si no los divisores y el
       gap no maquetan bien. */
    ::slotted(*) {
      display: contents;
    }

    /* Reset del contrato, por si esta sección quedara anidada en otro slot. */
    --card-grow: initial;
    --card-basis: initial;
    --card-max: initial;

    /* Mobile: apiladas a ancho completo. */
    --card-shrink: 1;

    /* media.up('3xl') */
    @media (min-width: 768px) {
      flex-direction: row;
      flex-wrap: wrap;
      max-width: 1336px;
      margin: 0 auto;
      justify-content: center;

      /**
       * ⚠️ El basis lo CALCULA el componente: `(100% − gaps) / perRow`, y llega
       * inline como `--tst-basis`. Con `flex-wrap` esto no es opcional: flexbox
       * decide el corte de línea con la base de cada ítem **antes** de aplicar
       * shrink, así que un basis fijo en px que no divida el ancho disponible
       * manda cards a la fila siguiente sin que nadie lo pida. Es el bug de las
       * 3 cards cayendo en 2 columnas: base 392px × 3 + 32 de gaps = 1208 contra
       * ~1120 reales.
       *
       * `--card-max` NO se toca: la card topa en sus 392px propios, así que con
       * pocas cards no se estiran de más y quedan centradas por
       * `justify-content: center` — igual que el sitio actual.
       */
      --card-basis: var(--tst-basis, calc((100% - 32px) / 3));
      --card-shrink: 1;
    }

    /* Fallback por si Webflow le da caja al host en algún modo del canvas. */
    > * {
      flex-grow: var(--card-grow, 0);
      flex-shrink: var(--card-shrink, 1);
      flex-basis: var(--card-basis, auto);
      max-width: var(--card-max, none);
      min-width: 0;
    }
  }
}

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