/**
 * QuoteCard.css — port 1:1 de `mx-cms/src/components/QuoteCard/styles.ts`.
 *
 * Tipografía del tema `standard`:
 *   body.sm = 14px · ls xs 0.3 · lh sm 20px
 *   body.xs = 12px · ls xs 0.3 · lh xs 16px
 *   light 300 · bold 700
 *
 * `media.up('3xl')` -> min-width: 768px
 */

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


.quote-card {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 22px 12px;
  border-radius: 12px;
  background-color: #ffffff; /* neutral[0] */
  box-shadow: 0px 9px 12px 0px rgba(0, 0, 0, 0.14);
  width: 100%;

  /* Contrato --card-*: la mitad del hijo. `basis: auto` = "usá mi width", así que
     standalone no cambia nada; el padre lo pisa para armar la fila. */
  flex-grow: var(--card-grow, 0);
  flex-shrink: var(--card-shrink, 0);
  flex-basis: var(--card-basis, auto);
  min-width: 0;

  /* media.up('3xl') */
  @media (min-width: 768px) {
    max-width: var(--card-max, 392px);
  }

  .icon {
    display: block;
    width: 33px;
    height: 33px;
    flex: 0 0 auto;
  }

  /* ContentContainer */
  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    margin-top: 28px;
  }

  /* Typography variant="bodySmLight" — estrellas y cita comparten variante */
  .stars,
  .quote {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 20px;
  }

  /* Box marginTop="16px" que envuelve al autor */
  .author {
    margin-top: 16px;
  }

  /* Typography variant="bodySmBold" */
  .name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 20px;
  }

  /* Typography variant="bodyXsLight" */
  .info {
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 16px;
  }
}

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