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

/**
 * CrossSell (Old) — centered section with heading, optional pre-title and
 * description, a horizontal scroll row of cards, and an optional CTA link.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.cross-sell-old`. The section CTA is `.cta-link` (not `.cta`) to avoid
 * the global `.cta` block; the card's own title/description/cta are prefixed
 * `card-*` (see CrossSellCardOld.css). The `.css-*` / `.cs-old--*` rules at the
 * bottom target the injected legacy union CSS (not our BEM classes) and are
 * kept verbatim.
 *
 * Tokens inlined from @creditas-ui/themes standard:
 *   colors.neutral.0 #ffffff  .60 #52605a  .80 #3b4540  .100 #292929
 *   colors.primary.40 #8edb00  .60 #4f9e00
 */

:host,
.cross-sell-old {
  display: block;
}

.cross-sell-old,
.cross-sell-old *,
.cross-sell-old *::before,
.cross-sell-old *::after {
  box-sizing: border-box;
}

.cross-sell-old {
  background-color: #ffffff;
  color: #292929;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  padding: 64px 0;
  text-align: left;

  @media (min-width: 1024px) {
    /* Old creditas-site: flat vertical padding (~64px), no desktop increase */
    padding: 64px 0;
  }

  /* ---------- dark variant ---------------------------------------- */

  &.dark {
    background-color: #292929;
    color: #ffffff;
  }

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

  .container {
    width: 90%;
    max-width: 1428px;
    margin: 0 auto;
  }

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

  .pretitle {
    margin: 0 0 8px;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #3b4540;
  }

  &.dark .pretitle {
    color: #ffffff;
  }

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

  .title {
    /* headingMdLight → headingLgLight; Helvetica Now Display, weight 300.
       Mobile 28/36; desktop 32/40. */
    margin: 0 0 12px;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.5px;
    color: #292929;

    @media (min-width: 1024px) {
      font-size: 32px;
      line-height: 40px;
    }

    /* When there's no description, the cards follow directly after the title */
    &:last-child,
    & + .cards {
      margin-top: 40px;
    }
  }

  &.dark .title {
    color: #ffffff;
  }

  /* ---------- description ----------------------------------------- */

  .description {
    margin: 0 0 40px;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #52605a;
  }

  &.dark .description {
    color: #ffffff;
  }

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

  .cards {
    display: flex;
    gap: var(--cross-sell-cards-gap, 24px);
    justify-content: flex-start;
    align-items: stretch;

    /* Old creditas-site CardList (ScrollBar): a single horizontal row of fixed
       286px cards that scrolls sideways when it overflows, instead of wrapping. */
    &.row {
      flex-flow: row nowrap;
      overflow-x: auto;
      /* Horizontal scroll forces overflow-y to `auto` too, so the container
         clips on ALL sides. Pad enough to fit the card hover shadow, then cancel
         it with a matching negative margin so cards don't shift. */
      padding: 16px 16px 28px;
      margin: -16px -16px -28px;
    }

    &.column {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
    }

    /* Flatten Webflow's slot wrapper without breaking regular React children. */
    ::slotted(*) {
      display: contents;
    }
  }

  /* ---------- CTA link -------------------------------------------- */

  .cta-wrapper {
    margin-top: 40px;
  }

  .cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #4f9e00;
    text-decoration: none;
    transition: color 0.2s ease;

    &:hover {
      color: #8edb00;
    }

    &:focus-visible {
      outline: 2px solid #4f9e00;
      outline-offset: 2px;
      border-radius: 2px;
    }

    .cta-arrow {
      font-size: 18px;
      line-height: 1;
    }
  }
}

/* --- Legacy render (creditas-site) slot-row fix — PROJECT RULE ------ */
/* The legacy CrossSell renders cards into <ul class="css-1kqvjta"> via a
   Webflow Slot. Webflow wraps slotted children in one host element, so without
   flattening the cards stack. Make the legacy <ul> a horizontal scroll row and
   flatten the slot wrapper so each card island is a direct flex child. */
.css-1kqvjta {
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 24px !important;
  overflow-x: auto !important;
  align-items: stretch !important;
  /* Same shadow-clipping fix as .cards--row: pad for the card hover shadow
     (overflow-x forces overflow-y to clip), cancel with margin. */
  padding: 16px 16px 28px !important;
  margin: -16px -16px -28px !important;
}
::slotted(*) {
  display: contents !important;
}

/* ================================================================
 * Variant hooks — honor the light/dark Variant on the LEGACY
 * (creditas-site) union render WITHOUT editing the injected creditas.css.
 * These target the union css-* hashes (captured from the DARK Template02),
 * NOT our BEM classes, so they are kept verbatim. Two-class selectors outrank
 * the single-class union rules, so no !important is needed.
 * ============================================================== */

/* ---- Light (Template01): colors.neutral.0 bg / .90 title / .60 desc ---- */
.cs-old--light.css-rtwi05 {
  background-color: #ffffff; /* colors.neutral.0 */
}
.cs-old--light .css-xm70s1 {
  color: #292929; /* title — colors.neutral.90 */
}
.cs-old--light .css-72uqqv {
  color: #52605a; /* description — colors.neutral.60 */
}
/* ScrollBar inset track = section background → white on the light variant.
   Thumb stays #52605a (colors.neutral.60 — visible on either background). */
.cs-old--light .css-1kqvjta::-webkit-scrollbar {
  box-shadow: rgb(255, 255, 255) 0px -2px 0px 0px inset,
    rgb(255, 255, 255) 0px 2px 0px 0px inset;
}

/* ---- Dark (Template02): explicit, mirrors the baked union values -------- */
.cs-old--dark.css-rtwi05 {
  background-color: #292929; /* colors.neutral.90 */
}
.cs-old--dark .css-xm70s1 {
  color: #ffffff; /* colors.neutral.0 */
}
.cs-old--dark .css-72uqqv {
  color: #ffffff; /* colors.neutral.0 */
}