/* Legacy-parity text rendering (see CardRevealOld.css). */
:host,
div.card-reveal-card-old {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
}

/* ------------------------------------------------------------------ *
 * Semantic port of creditas-site/src/sections/CardReveal/styles.js
 * (Card, CardCategory, CardImageContainer, CardImage, CardTitle,
 *  Content, CardDescription). Tokens resolved to concrete values.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.card-reveal-card-old`. The section-level title/description in the
 * parent are scoped with `> ` so they don't clash with this card's `.title`
 * and `.description`.
 * ------------------------------------------------------------------ */

/* Card root — also the stable class the list rail's sibling-shrink targets. */
.card-reveal-card-old {
  position: relative;
  display: block;
  width: 100%;
  max-width: 362px;
  flex: 0 0 90%;
  border-radius: 24px;
  text-align: center;
  /* Sibling-shrink: the rail sets `--card-target-scale` on hover/focus; it
   * inherits across the shadow/slot boundary. The hovered/focused card resets
   * it to 1 on itself below. */
  scale: var(--card-target-scale, 1);
  transition: scale 0.3s ease;

  /* Hovered/focused card cancels the inherited shrink by resetting the VARIABLE
   * (not `scale` directly) so `scale: var(--card-target-scale)` stays the single
   * source of the animated value. */
  &:hover,
  &:focus-within {
    --card-target-scale: 1;
  }

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

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

  /* CardImageContainer */
  .image-wrapper {
    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; /* colors.neutral.100 */
      filter: blur(20px);
      opacity: 0.25;
    }
  }

  /* CardImage */
  .image {
    width: 100%;
    height: clamp(260px, 50vh + 0.1rem, 438px);
    object-fit: cover;
    transform: scale(1.1);
    will-change: filter;
    filter: brightness(0.75);

    @media (pointer: fine) {
      filter: blur(5px) brightness(0.75);
    }
  }

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

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

  /* Content */
  .content {
    position: relative;
    z-index: 9;
    color: #000000;
  }

  /* CardDescription — Typography bodySmRegular */
  .description {
    margin: 1rem 0;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    color: inherit;
    /* EXIT (hover → out): fade opacity out first (120ms) and delay the
     * slide/scale until after it's faded (120ms), so the text never lingers
     * over the image on the way out. Previously this was `opacity 0.5s` with
     * NO translate transition, so on exit the text snapped up over the image
     * and stayed visible for the 0.5s fade — the overlap. ENTER timing is set
     * on the :hover rule below. */
    transition: opacity 120ms ease, translate 250ms ease 120ms,
      scale 250ms ease 120ms;
    text-align: left;

    @media (pointer: fine) {
      opacity: 0;
      scale: 0.7;
    }
  }

  /* Category pill (kept: old @creditas-ui Tag internals not in source) */
  .pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 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;
  }

  /* CTA (kept: old ButtonCta variant not unambiguously in source) */
  .cta-old {
    display: block;
    align-items: center;
    justify-content: flex-start;
    margin-top: 8px;
    padding: 12px 20px;
    background: #8edb00;
    color: #292929;
    border: 0;
    border-radius: 8px;
    text-align: left;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      box-shadow: 0px 16px 12px -8px rgba(0, 0, 0, 0.16),
        0px 16px 8px -12px rgba(0, 0, 0, 0.12);
    }

    &:focus {
      box-shadow: 0px 16px 12px -8px rgba(0, 0, 0, 0.16),
        0px 16px 8px -12px rgba(0, 0, 0, 0.12);
      outline: 0;
    }
  }
}

/* Hover-reveal choreography (fine pointers only): description/CTA start
 * translated up, the CTA also scaled down + hidden, and reveal on hover.
 * Tag-based (p / a / button) so it's independent of the element classes. */
@media (pointer: fine) {
  /* Resting state = the EXIT transition (hover → out): fade opacity out first
   * (120ms) and delay the upward slide/scale until after it's faded (120ms),
   * so the text doesn't overlap the image on the way out. */
  .card-reveal-card-old p,
  .card-reveal-card-old a,
  .card-reveal-card-old button {
    translate: 0 -100%;
    transition: opacity 120ms ease, translate 250ms ease 120ms,
      scale 250ms ease 120ms;
  }

  .card-reveal-card-old a,
  .card-reveal-card-old button {
    scale: 0.8;
    opacity: 0;
  }

  /* ENTER (out → hover): smooth simultaneous 250ms reveal; CTA staggered
   * 100ms after the description. Higher specificity than the base rules above
   * so it wins for the hover direction. */
  .card-reveal-card-old:hover .description,
  .card-reveal-card-old:focus-within .description {
    transition: translate 250ms ease, opacity 250ms ease, scale 250ms ease;
  }

  .card-reveal-card-old:hover a,
  .card-reveal-card-old:hover button,
  .card-reveal-card-old:focus-within a,
  .card-reveal-card-old:focus-within button {
    transition: translate 250ms ease 100ms, opacity 250ms ease 100ms,
      scale 250ms ease 100ms;
  }
}

.card-reveal-card-old:hover p,
.card-reveal-card-old:hover a,
.card-reveal-card-old:hover button,
.card-reveal-card-old:focus-within p,
.card-reveal-card-old:focus-within a,
.card-reveal-card-old:focus-within button {
  translate: 0;
  opacity: 1;
  scale: 1;
}

/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally. Webflow Code Components
 * live in isolated shadow roots, so this must be declared per-component
 * on :host to inherit into the shadow tree. */
:host,
div.card-reveal-old {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Flatten Webflow's slot wrapper so each slotted card code-island becomes a
 * direct flex child of the list rail.
 * PROJECT RULE: the selector MUST be UNPREFIXED — the ancestor-prefixed
 * `.list ::slotted(*)` form never matches in Webflow's shadow DOM. */
::slotted(*) {
  display: contents !important;
}

/* ------------------------------------------------------------------ *
 * Semantic port of creditas-site/src/sections/CardReveal/styles.js.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.card-reveal-old`. The section title/description are DIRECT children
 * of `.container`, so `> .title` / `> .description` scope them out of the
 * slotted cards (which carry their own `.title`/`.description` deeper down).
 * ------------------------------------------------------------------ */

.card-reveal-old {
  background-color: #e9e9e1;
  padding: 80px 0;
  text-align: center;

  /* Container */
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;

    /* Section title — Typography heading2xlRegular */
    > .title {
      margin: 0 0 16px;
      font-family: 'Maison Neue Extended', 'Maisonneueextended', sans-serif;
      font-weight: 400;
      font-size: 48px;
      line-height: 1.1 !important;
      letter-spacing: 0.5px;
    }

    /* Section description — Typography bodyMdRegular */
    > .description {
      margin: 0 0 45px;
      font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.3px;
    }
  }

  /* ListCards rail */
  .list {
    display: flex;
    flex-flow: nowrap;
    gap: 10px;
    overflow: auto;
    /* Sibling-shrink via an INHERITED CUSTOM PROPERTY (custom props cross the
     * slot boundary; `:has()` + descendant combinators do not). Each card reads
     * `scale: var(--card-target-scale)` and the hovered/focused card resets it
     * to 1 on itself (see CardRevealCardOld.css). */
    --card-target-scale: 1;

    /* media.up('2xl') => min-width: 600px ; spacingX.8xl = 32px */
    @media (min-width: 600px) {
      gap: 32px;
    }

    &[data-hover-effect='shrink']:hover,
    &[data-hover-effect='shrink']:focus-within {
      --card-target-scale: 0.9;
    }
  }
}

/* HorizontalScroller wrapper — preserved from the source (only styled ≤1280px
 * where the nowrap rail needs to scroll). */
@media (max-width: 1280px) {
  .card-reveal-old .scroller-old {
    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;
  }

  .card-reveal-old .scroller-old::-webkit-scrollbar {
    display: block;
    height: 8px;
  }

  .card-reveal-old .scroller-old::-webkit-scrollbar-track {
    background: rgba(41, 41, 41, 0.12);
    border-radius: 999px;
  }

  /* NOTE: preserved verbatim from the legacy file — the original selector was
   * `.card-reveal-old__scroller` (missing the `-old`), so this thumb rule has
   * never matched anything. Kept as-is (targeting `.scroller`) to avoid any
   * visual change during the rename. */
  .card-reveal-old .scroller::-webkit-scrollbar-thumb {
    background: #8edb00;
    border-radius: 999px;
  }
}