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

/**
 * Exponencial — section with heading + horizontal card row.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.exponencial`. The section CTA is `.cta-link` (not `.cta`) to avoid
 * the global `.cta` block; the card's title/cta are prefixed `card-*` (see
 * ExponencialCard.css) so `.exponencial .title` etc. don't reach the cards.
 *
 * Tokens inlined from @creditas-ui/themes standard:
 *   neutral.0 #ffffff  .10 #f1f3f2  .100 #292929  primary.60 #4f9e00
 */

:host,
.exponencial {
  display: block;
}

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

.exponencial {
  padding: 64px 0;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

  @media (min-width: 1024px) {
    padding: 96px 0;
  }

  /* ---------- background variants ---------------------------------- */

  &.gray {
    background-color: #f1f3f2; /* neutral.10 */
  }

  &.dark {
    background-color: #292929; /* neutral.100 */
    color: #ffffff; /* neutral.0 */
  }

  /* ---------- container -------------------------------------------- */

  .container {
    width: 90%;
    max-width: 1072px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px; /* mobile gap between title and cards */

    @media (min-width: 768px) {
      gap: 59px; /* tablet/desktop gap */
    }
  }

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

  .title {
    margin: 0;
    font-family: 'Maison Neue Extended', 'Maisonneueextended', sans-serif;
    font-weight: 500; /* Maison Neue Extended Medium */
    font-size: 32px; /* fontSizes.5xl */
    line-height: 40px; /* lineHeight.4xl */
    letter-spacing: 0.5px; /* letterSpacing.sm */
    color: #ffffff; /* white on dark bg */
  }

  &.gray .title {
    color: #292929; /* neutral.100 on gray bg */
  }

  /* ---------- cards row -------------------------------------------- */

  .cards {
    display: flex;
    flex-direction: column; /* stacked on mobile */
    gap: 32px;

    /* Flatten Webflow slot wrapper */
    ::slotted(*) {
      display: contents;
    }

    @media (min-width: 768px) {
      flex-direction: row; /* horizontal on tablet+ */
      align-items: stretch;
      overflow-x: auto; /* allow horizontal scroll if many cards */
      -webkit-overflow-scrolling: touch;
    }
  }

  /* ---------- optional CTA link below cards ----------------------- */

  .cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }

  .cta-link {
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    color: #4f9e00; /* primary.60 */
    text-decoration: none;

    &:hover {
      color: #8edb00; /* primary.40 */
    }
  }
}