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

/**
 * ExponencialCard — single article card for the Exponencial section.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.exponencial-card`. The title/cta are prefixed `card-*` so the
 * parent section's `.exponencial .title` / `.cta-link` don't reach them
 * (and `card-cta` avoids the global `.cta` block).
 *
 * Tokens:
 *   neutral.0 #ffffff  .60 #52605a  .100 #292929  primary.60 #4f9e00
 */

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

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

.exponencial-card {
  background-color: #ffffff; /* neutral.0 */
  border-radius: 16px;
  box-shadow: 0px 0px 1px 0px rgba(165, 174, 167, 0.9),
    0px 2px 5px 0px rgba(199, 206, 201, 0.16); /* Shadow/XSmall */
  overflow: hidden;
  width: 100%; /* full width on mobile */
  /* Shared card-sizing contract (--card-*). Defaults preserve the natural
     width (flex-basis:auto = "use my width"); a slot host can override
     --card-basis/-grow to reflow into a row. See components/README.md. */
  flex-basis: var(--card-basis, auto);
  flex-grow: var(--card-grow, 0);
  min-width: 0;
  max-width: var(--card-max, none);

  @media (min-width: 768px) {
    width: 311px; /* fixed width on tablet+ (from Figma desktop) */
    flex-shrink: 0;
  }

  /* ---------- link (full-card click target) ------------------------ */

  .link {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 42px 24px;
    text-decoration: none;
    color: inherit;
    height: 100%;
    letter-spacing: 0.3px;

    &:hover .card-cta {
      color: #8edb00; /* primary.40 on hover */
    }
  }

  /* ---------- category / pre-title --------------------------------- */

  .category {
    display: block;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 12px; /* fontSizes.xs */
    line-height: 16px; /* lineHeight.xs */
    letter-spacing: 0.3px;
    color: #52605a; /* neutral.60 */
    text-transform: uppercase;
  }

  /* ---------- title ------------------------------------------------ */

  .card-title {
    margin: 0;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 18px; /* fontSizes.lg */
    line-height: 26px; /* lineHeight.lg */
    letter-spacing: 0.3px;
    color: #292929; /* neutral.100 */
    flex: 1;
  }

  /* ---------- CTA label -------------------------------------------- */

  .card-cta {
    display: block;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 16px; /* fontSizes.md */
    line-height: 24px; /* lineHeight.md */
    letter-spacing: 0.3px;
    color: #4f9e00; /* primary.60 */
  }
}