/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * SocialProofCard — testimonial quote card for the PersonalizedService
 * "Quotes" layout. Icon + quote + author. Two designs: default (New) and
 * `legacy` (data-design), which reproduces the creditas-site SocialProof card.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.social-proof-card`; the legacy design overrides are grouped under
 * `&[data-design='legacy']`.
 *
 * Tokens: neutral.0 #ffffff  .100 #292929  primary.40 #8edb00
 */

:host,
.social-proof-card {
  display: block;
  flex-shrink: 0;
}

.social-proof-card,
.social-proof-card *,
.social-proof-card *::before,
.social-proof-card *::after {
  box-sizing: border-box;
}

.social-proof-card {
  background-color: #ffffff; /* neutral.0 */
  border-radius: 6px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08),
    0px 12px 12px 0px rgba(0, 0, 0, 0.08); /* Shadow/Small */
  overflow: hidden;
  /* Figma: 157px × 213px card, content stacked (icon above body). */
  width: 157px;
  min-height: 213px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 12px;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  color: #292929; /* neutral.100 */
  /* Shared card-sizing contract */
  flex-basis: var(--card-basis, auto);
  flex-grow: var(--card-grow, 0);
  min-width: 0;
  max-width: var(--card-max, none);

  /* On mobile: full width, min-height auto */
  @media (max-width: 767px) {
    width: 100%;
    min-height: auto;
  }

  /* ---------- icon ------------------------------------------------- */

  .icon {
    display: block;
    flex-shrink: 0;
    width: 33px;
    height: 33px;
    margin-bottom: 28px;

    img,
    svg {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  /* ---------- body ------------------------------------------------- */

  .body {
    display: flex;
    flex-direction: column;
    gap: 16px; /* gap between quote text and author */
    width: 100%;
    letter-spacing: 0.3px;
  }

  .quote {
    margin: 0;
    font-weight: 300; /* Light */
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    color: #292929;
  }

  .author {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.3px;
  }

  .author-name {
    font-weight: 700; /* Bold */
    color: #292929;
  }

  .author-city {
    font-weight: 300; /* Light */
    color: #292929;
  }

  /* ================================================================= *
   * Legacy design — reproduces the creditas-site SocialProof card.
   * Activated by the `Design` prop → `data-design="legacy"` on the root.
   *
   * Tokens: radius.2xl 12px · spacingY/X.6xl 24px · body.sm 14/20/0.3/400
   *   body.md 16/24/0.3/700 (author name) · body.xs 12/16/0.3/400 (author city)
   * ================================================================= */

  &[data-design='legacy'] {
    /* Flexible column capped at 320px (base pins width:157px — override so
       flex-basis wins; width:100% here would fill the row and wrap/stack). */
    width: auto;
    max-width: 320px;
    flex: 1 1 260px;
    min-width: 0;
    min-height: auto;
    padding: 24px; /* spacingY.6xl spacingX.6xl */
    border-radius: 12px; /* radius.2xl */
    justify-content: space-between;

    /* On mobile the parent row collapses to a stacked column — let the legacy
       card fill the width instead of staying capped at 320px. */
    @media (max-width: 767px) {
      max-width: none;
      flex-basis: auto;
    }

    .icon {
      width: 29px;
      height: 24px;
      margin-bottom: 24px; /* spacingBottom.6xl */
    }

    /* Legacy uses explicit margins between elements, not a flex gap. */
    .body {
      gap: 0;
    }

    .quote {
      margin-bottom: 24px; /* spacingBottom.6xl */
      font-weight: 400; /* body.sm Regular */
      font-size: 14px;
      line-height: 20px;
    }

    .author {
      gap: 0;
    }

    .author-name {
      margin-bottom: 4px; /* spacingBottom.sm */
      font-weight: 700; /* body.md Bold */
      font-size: 16px;
      line-height: 24px;
    }

    .author-city {
      font-weight: 400; /* body.xs Regular */
      font-size: 12px;
      line-height: 16px;
    }
  }
}