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

/**
 * LogoContentCard — single card inside a CardReveal section.
 *
 * Class naming: single-class, no BEM `__` separator; element rules are
 * nested under the `.logo-content-card` block. Its bullet container is
 * `.list` (scoped by the block, so it doesn't clash with CardReveal's
 * `.rail`); the CTA is `.button` (not `.cta`) to avoid the global `.cta`
 * block from the Cta component.
 *
 * Layout mirrors the legacy `CardDetailsCompare` card: white rounded card
 * with left-aligned content (pill, icon, title, description, bullets, CTA).
 * Sibling-shrink hover is opt-in via `--card-target-scale`, set by the
 * parent rail — mirrors CardRevealCard so motion stays consistent.
 *
 * Token values inlined from @creditas-ui/themes standard:
 *
 *   colors.neutral.0     = #ffffff
 *   colors.neutral.10    = #f1f1ec
 *   colors.neutral.80    = #5c5c5c
 *   colors.neutral.90    = #3d3d3d
 *   colors.primary.40    = #8edb00
 *   colors.primary.60    = #4f9e00
 *   colors.primary.90    = #2b6600
 *   colors.primary.100   = #1c4200
 *
 *   radius.lg            = 8px   (CTA)
 *   radius.6xl           = 16px  (card)
 *   radius.pill          = 9999px
 *
 *   spacingX.3xl         = 16px
 *   spacingX.5xl         = 24px
 *   spacingX.6xl         = 32px
 *
 *   typography.body.xs    → 12px / 16px / 0.3px
 *   typography.body.sm    → 14px / 20px / 0.3px
 *   typography.body.xl    → 20px / 28px / 0.5px  (bold variant for title)
 */

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

.logo-content-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  /* Shared card-sizing contract (--card-*). Defaults reproduce the original
   * rigid `flex: 0 0 275px; max-width: 275px`, so the CardReveal scroll-rail is
   * unchanged. A slot host (e.g. HeroWithSlot) overrides these to reflow into a
   * row. Custom props cross the slot/shadow boundary (same technique as
   * --card-target-scale). See components/README.md → "Card-sizing contract". */
  max-width: var(--card-max, 275px);
  flex-grow: var(--card-grow, 0);
  flex-shrink: var(--card-shrink, 0);
  flex-basis: var(--card-basis, 275px);
  min-width: 0;
  padding: 24px 32px;
  background-color: #ffffff;
  border-radius: 16px;
  text-align: left;
  scroll-snap-align: start;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  color: #3d3d3d;
  overflow: hidden;
  /* Inherits from the CardReveal rail. Defaults to 1 when the rail isn't
   * being hovered. */
  scale: var(--card-target-scale, 1);
  transition: scale 0.3s ease;

  @media (min-width: 600px) {
    /* Keep honoring the shared card-sizing contract at this breakpoint
       (defaults reproduce the original flex: 0 0 275px). */
    flex-grow: var(--card-grow, 0);
    flex-shrink: var(--card-shrink, 0);
    flex-basis: var(--card-basis, 275px);
  }

  &:hover,
  &:focus-within {
    scale: 1;
  }

  /* ----- category pill ---------------------------------------------- */

  .pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #f1f1ec;
    border-radius: 9999px;
    color: #3d3d3d;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.3px;
    width: max-content;
  }

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

  .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    position: relative;
    margin: 8px 0;

    /* icon squircle (ported from creditas-site CustomIcon/ShapeIcon) */
    &[data-squircle='true']::before {
      content: '';
      position: absolute;
      width: 130%;
      height: 130%;
      background: #8edb00; /* primary.40 */
      opacity: 0.25;
      border-radius: 8px;
      z-index: 0;
    }

    &[data-squircle-position='top-left']::before {
      top: -4px;
      left: -6px;
    }
    &[data-squircle-position='top-right']::before {
      top: -4px;
      right: -6px;
    }
    &[data-squircle-position='bottom-left']::before {
      bottom: -4px;
      left: -6px;
    }
    &[data-squircle-position='bottom-right']::before {
      bottom: -4px;
      right: -6px;
    }
    &[data-squircle-position='center-top']::before {
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
    }
    &[data-squircle-position='center-bottom']::before {
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .icon {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    position: relative;
    z-index: 1;
  }

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

  .title {
    margin: 0;
    color: #2b6600;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;
  }

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

  .description {
    margin: 0;
    color: #5c5c5c;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
  }

  /* ----- bullet list ------------------------------------------------
   * Bullets are authored as child `LogoContentCardBullet` components dropped
   * into the `Bullets` slot. This container only handles spacing; the
   * `::slotted(*)` rule flattens Webflow's slot wrapper so each bullet host
   * becomes a direct flex child. */

  .list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin: 16px 0;

    ::slotted(*) {
      display: contents;
    }
  }

  /* ----- CTA -------------------------------------------------------- */
  /* The CTA is now the shared <CardCtaButton> (real @creditas-ui primary
     button, styled by the DS theme inside its own ShadowEmotionProvider).
     `.card-cta-slot` is CardCtaButton's positioning wrapper; pin it to the
     bottom of the card and left-align it. */
  .card-cta-slot {
    margin-top: auto;
    align-self: flex-start;
  }
}