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

/**
 * CardRevealCard — single card inside a CardReveal section.
 *
 * Class naming: single-class, no BEM `__` separator; element rules are
 * nested under the `.card-reveal-card` block. The CTA is `.button`
 * (not `.cta`) to avoid the global `.cta` block from the Cta component.
 *
 * Hover/focus reveals the description and CTA, and clears the blurred
 * image. The "scale siblings to 0.9" effect lives on the CardReveal
 * parent (via `--card-target-scale`), so this file only handles the
 * per-card animation.
 *
 * Token values inlined from @creditas-ui/themes standard:
 *
 *   colors.neutral.0     = #ffffff
 *   colors.neutral.20    = #d6dcd9
 *   colors.neutral.100   = #292929
 *   colors.primary.40    = #8edb00
 *   colors.primary.60    = #4f9e00
 *   colors.primary.100   = #1c4200
 *
 *   radius.lg            = 8px
 *   radius.8xl           = 24px
 *
 *   typography.heading.lg → 32px / 40px / 0.5px / Maison Neue Extended / 400
 *   typography.body.sm    → 14px / 20px / 0.3px / Helvetica Now Display / 400
 *
 *   fadedBrightnessAmount = 0.75
 */

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

.card-reveal-card {
  position: relative;
  display: block;
  width: 100%;
  /* Shared card-sizing contract (--card-*). Defaults reproduce the original
     `flex: 0 0 90%; max-width: 362px` so the scroll-rail is unchanged; a slot
     host can override to reflow into a row. See components/README.md. */
  max-width: var(--card-max, 362px);
  flex-grow: var(--card-grow, 0);
  flex-shrink: var(--card-shrink, 0);
  flex-basis: var(--card-basis, 90%);
  min-width: 0;
  border-radius: 24px;
  text-align: center;
  scroll-snap-align: start;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  color: #292929;
  /* `--card-target-scale` is set by CardReveal's rail on hover and inherits
   * through the shadow DOM / slot boundary. Defaults to 1 when nothing in the
   * rail is hovered. */
  scale: var(--card-target-scale, 1);
  transition: scale 0.3s ease;

  @media (min-width: 600px) {
    /* Keep honoring the contract here (default reproduces flex: 0 0 362px). */
    flex-grow: var(--card-grow, 0);
    flex-shrink: var(--card-shrink, 0);
    flex-basis: var(--card-basis, 362px);
  }

  /* Hovered card cancels the inherited shrink by RESETTING THE INHERITED CUSTOM
   * PROPERTY — not by setting `scale` directly — so `scale: var(--card-target-
   * scale)` stays the single source of the animated `scale` and the browser
   * always interpolates the same expression. */
  &:hover,
  &:focus-within {
    --card-target-scale: 1;
  }

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

  .category {
    position: absolute;
    top: 29px;
    left: 29px;
    z-index: 99;
  }

  .pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: transparent;
    backdrop-filter: blur(10px);
    border: 1px solid #ffffff;
    border-radius: 500px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.3px;
  }

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

  .image-container {
    position: relative;
    overflow: hidden;
    border-radius: 24px;

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      bottom: 0;
      top: auto;
      height: 20%;
      scale: 1.2;
      background-color: #292929;
      filter: blur(20px);
      opacity: 0.25;
      pointer-events: none;
    }
  }

  .image {
    width: 100%;
    height: clamp(260px, 50vh + 0.1rem, 438px);
    object-fit: cover;
    transform: scale(1.1);
    /* NOTE: `will-change: filter` was removed deliberately — it promoted the
     * image to its own compositor layer and prevented the ancestor card from
     * updating its inherited, variable-driven `scale` across the shadow/slot
     * boundary (a cause of the sibling-shrink not working). `filter` transitions
     * fine without the hint.
     *
     * Resting state is blurred in EVERY environment so `filter` always animates
     * between matching function lists (blur + brightness) and eases smoothly
     * instead of snapping. */
    filter: blur(5px) brightness(0.75);
    transition: filter 0.4s ease;
  }

  &:hover .image,
  &:focus-within .image {
    filter: blur(0) brightness(0.8);
  }

  /* ----- title overlay (on top of image, bottom-left) --------------- */

  .title {
    position: absolute;
    bottom: 20px;
    left: 0;
    z-index: 999;
    margin: 0;
    padding-inline: 30px 50px;
    text-align: left;
    color: #ffffff;
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.5px;
  }

  .title-icon {
    position: absolute;
    right: 20px;
    bottom: 5px;
    width: 25px;
    height: 25px;
  }

  /* ----- content (description + CTA, revealed on hover) ------------- */

  .content {
    position: relative;
    z-index: 9;
    color: #292929;
  }

  .description {
    margin: 1rem 0;
    color: inherit;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    text-align: left;
    text-wrap: pretty;
  }

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

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 12px 20px;
    background: #8edb00;
    color: #1c4200;
    border-radius: 8px;
    border: 0;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover {
      background: #4f9e00;
      color: #ffffff;
    }

    &:focus-visible {
      outline: 2px solid #8edb00;
      outline-offset: 2px;
    }
  }
}

/**
 * Hover-reveal entrance animation (hover-capable devices). Mirrors the legacy
 * site: description + CTA translate from `-100%` Y into place with opacity +
 * scale fade in (CTA delayed 100ms so it lands after the description).
 *
 * The base `.button` transition (nested above) comes earlier in source order,
 * so the re-included transition at the end of this block wins and the slide-in
 * is actually transitioned (otherwise `transition: all` would be overridden and
 * the reveal would snap).
 */
@media (pointer: fine) {
  /* Resting state — this rule's `transition` also governs the EXIT (hover →
   * out), because the element reverts to these base values. On exit we fade
   * the opacity out FIRST (120ms) and delay the upward slide until after it's
   * faded (translate/scale start at 120ms). Otherwise the text stays partly
   * opaque while it slides back up over the image and visibly overlaps it for
   * a moment. */
  .card-reveal-card .description,
  .card-reveal-card .button {
    translate: 0 -100%;
    transition: opacity 120ms ease, translate 250ms ease 120ms,
      scale 250ms ease 120ms;
  }

  .card-reveal-card .description {
    opacity: 0;
    scale: 0.7;
  }

  .card-reveal-card .button {
    opacity: 0;
    scale: 0.8;
    /* keep the button's own colour hover transition alongside the exit timing */
    transition: opacity 120ms ease, translate 250ms ease 120ms,
      scale 250ms ease 120ms, background-color 0.2s ease, color 0.2s ease;
  }

  /* Revealed state — this rule's `transition` governs the ENTER (out → hover):
   * a smooth simultaneous 250ms slide + fade in, CTA staggered 100ms after the
   * description (unchanged reveal). */
  .card-reveal-card:hover .description,
  .card-reveal-card:focus-within .description {
    translate: 0;
    opacity: 1;
    scale: 1;
    transition: translate 250ms ease, opacity 250ms ease, scale 250ms ease;
  }

  .card-reveal-card:hover .button,
  .card-reveal-card:focus-within .button {
    translate: 0;
    opacity: 1;
    scale: 1;
    transition: translate 250ms ease 100ms, opacity 250ms ease 100ms,
      scale 250ms ease 100ms, background-color 0.2s ease, color 0.2s ease;
  }
}

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

/**
 * CardReveal — outer section. Heading + paragraph stay constrained;
 * the horizontal card rail goes edge-to-edge.
 *
 * Class naming: single-class, no BEM `__` separator; element rules are
 * nested under the `.card-reveal` block. The header title/description
 * are nested under `.header` (not the block root) so their selectors do
 * NOT reach the slotted cards, which carry their own `.title`/`.description`.
 * The rail is `.rail` (not `.list`) so it doesn't collide with the
 * `.list` bullet container inside LogoContentCard.
 *
 * Webflow renders each Code Component as a `<code-island>` with
 * `display: contents` and wraps all slot children in a single
 * `<div slot="items">`. The `::slotted(*)` rule flattens that wrapper so
 * the individual `<code-island>` card hosts become the rail's direct
 * flex children. Pattern copied from intranet-ewmfc/TrendingFeatures.
 *
 * Token values inlined from @creditas-ui/themes standard:
 *
 *   colors.neutral.100   = #292929
 *   spacingX.8xl         = 32px
 *   breakpoints.2xl      = 600px
 *
 *   typography.heading.2xl → 48px / 64px / 0.5px / Maison Neue Extended / 400
 *   typography.body.md     → 16px / 24px / 0.3px / Helvetica Now Display / 400
 *
 *   Background color hardcoded in source: #e9e9e1
 */

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

.card-reveal {
  position: relative;
  background-color: #e9e9e1;
  padding: 80px 0;
  text-align: center;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  color: #292929;

  /* ----- header (constrained) -------------------------------------- */

  .header {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 45px;

    .title {
      margin: 0 0 16px;
      font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
        'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
        sans-serif;
      font-weight: 400;
      font-size: 48px;
      line-height: 64px;
      letter-spacing: 0.5px;
    }

    .description {
      margin: 0;
      font-weight: 400;
      /* Bumped from 16px (body.md) → 18px (body.lg) so the description has
       * a stronger visual relationship with the 48px section title. At 16px
       * it read as a caption rather than a section subtitle. */
      font-size: 18px;
      line-height: 26px;
      letter-spacing: 0.3px;
    }
  }

  /* ----- scroller (flex container so the rail can auto-center) -----
   *
   * Scroller is inset 42px from each side via `margin-inline` rather than
   * `padding-inline` so the gutter sits OUTSIDE the scrollable region.
   * With padding, the left gutter would scroll out of view once the rail
   * starts overflowing — `margin` keeps the 42px gutter fixed regardless
   * of scroll position. The vertical 4px padding is breathing room for
   * the hover scale(0.9) so the bottom edge doesn't clip during the
   * animation. */

  .scroller {
    margin-inline: 42px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 14px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    /* scrollbar-color: #8edb00 rgba(41, 41, 41, 0.12); */

    &::-webkit-scrollbar {
      display: block;
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(41, 41, 41, 0.12);
      border-radius: 999px;
    }

    &::-webkit-scrollbar-thumb {
      background: #8edb00;
      border-radius: 999px;
    }
  }

  /* ----- rail (the actual flex row) --------------------------------
   * `margin: 0 auto` on a flex child centers it when there's space and
   * collapses to 0 when the content overflows — "centered when it fits,
   * anchor-left when it doesn't" without clipping. */

  .rail {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row nowrap;
    gap: 16px;
    margin: 0 auto;
    /* Guard: the shared card-sizing contract (--card-*) inherits globally, so
       if this rail is ever nested inside a slot host that sets it (e.g.
       HeroWithSlot), reset to initial here so the rail's cards keep their own
       fixed-width/scroll behaviour instead of inheriting a row basis. */
    --card-grow: initial;
    --card-shrink: initial;
    --card-basis: initial;
    --card-max: initial;
    /* Sibling-shrink baseline. `--card-target-scale` is registered as a typed
     * <number> via CSS.registerProperty() in CardReveal.jsx (an @property rule
     * inside a Code Component shadow root is ignored). The hovered/focused card
     * overrides it back to 1 via its own rule in CardRevealCard.css. */
    --card-target-scale: 1;

    > * {
      flex: 0 0 auto;
    }

    /* Flatten Webflow's slot wrapper so the slotted code-islands become
     * direct flex children of the rail. Without this, the wrapper is the
     * only flex item and cards stack inside it vertically. */
    ::slotted(*) {
      display: contents;
    }

    /* Shrink runs in EVERY environment — driven by `:hover` (desktop) and
     * `:focus-within` (touch — a card's focused CTA triggers it). Opt-in via
     * `data-hover-effect="shrink"` on the rail (set by CardReveal.jsx). The
     * LogoContentCards variant passes `hoverEffect="None"` and skips it. */
    &[data-hover-effect='shrink']:hover,
    &[data-hover-effect='shrink']:focus-within {
      --card-target-scale: 0.9;
    }
  }
}