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

/**
 * BlogCard — single post inside a BlogList rail.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under the `.blog-card` block.
 *
 * Hover behavior: when the rail has `data-hover-effect="shrink"`, custom
 * properties (`--blog-card-target-scale` / `--blog-card-target-opacity`) are
 * set on the rail and INHERITED by every card; the hovered card resets its own
 * copy back to 1 so it stays full-size while its siblings shrink. Same
 * custom-property inheritance pattern as CardReveal.
 *
 * Token values inlined from @creditas-ui/themes standard:
 *   colors.neutral.0     = #ffffff
 *   colors.neutral.100   = #292929
 *   radius.4xl           = 16px
 *   typography.body.lg medium → 18px / 26px / 0.3px / weight 500
 */

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

.blog-card {
  display: block;
  /* Shared card-sizing contract (--card-*). Defaults reproduce the original
     `flex: 0 0 240px` so the blog rail is unchanged; a slot host can override
     to reflow into a row. See components/README.md. */
  flex-grow: var(--card-grow, 0);
  flex-shrink: var(--card-shrink, 0);
  flex-basis: var(--card-basis, 240px);
  max-width: var(--card-max, 240px);
  min-width: 0;
  width: 240px;
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  color: #292929;
  /* Pick up the inherited custom properties from the rail. */
  scale: var(--blog-card-target-scale, 1);
  opacity: var(--blog-card-target-opacity, 1);
  transition: scale 250ms ease, opacity 250ms ease;

  /* Hovered/focused card resets itself to full-size, overriding the inherited
   * shrink value from the rail. */
  @media (pointer: fine) {
    &:hover,
    &:focus-within {
      --blog-card-target-scale: 1;
      --blog-card-target-opacity: 1;
    }
  }

  /* ----- image link ------------------------------------------------ */

  .image-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }

  .image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  /* ----- content (title) ------------------------------------------- */

  .content {
    padding: 1rem;
  }

  .title-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.3px;

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